/*
 * Groups: the groups index, the group page (games, members, invitations,
 * settings) and the invitation pages. Built on the design system in
 * application.css; everything here is prefixed group-. Selectors that
 * override a design-system class carry two classes, so they win whatever
 * order `stylesheet_link_tag :app` loads the files in.
 */

/* A price never breaks over two lines: in Dutch it is "€ 59,99". */
.group-nowrap { white-space: nowrap; }


/* ── License badge ─────────────────────────────────────────────────────── */

.group-license-badge {
  display: inline-block;
  font-family: var(--f-mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  padding: 0.25rem 0.6rem;
  border: 1px solid var(--c-border-strong);
  border-radius: var(--r-sm);
  color: var(--c-text-dim);
  white-space: nowrap;
}
.group-license-badge.is-licensed { color: var(--c-success);     border-color: var(--c-success-line); }
.group-license-badge.is-lifetime { color: var(--c-accent);      border-color: var(--c-accent-line); }
.group-license-badge.is-trial    { color: var(--c-accent-cool); border-color: var(--c-cool-line); }
.group-license-badge.is-expired  { color: var(--c-danger);      border-color: var(--c-danger-line); }

/* ── Groups index ──────────────────────────────────────────────────────── */

/* Another group, once you are in one: a plain link under the list, not the
   page's call to action. */
.group-new-link { margin-top: 1.25rem; }

/* ── Group page ────────────────────────────────────────────────────────── */

/* App pages lead with content, not a slogan: the landing page's 7rem of air
   would push the games below the fold on a phone. */
.hero.group-hero { padding-block: 4.5rem 2.5rem; }
.hero.group-hero h1 { margin-bottom: 1rem; }
.group-hero .hero-lead { margin-bottom: 2rem; }
.group-hero-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 1rem;
  margin-bottom: 2rem;
}

.group-section-lead { max-width: 62ch; margin-bottom: 1.5rem; }
.group-subheading {
  font-family: var(--f-mono);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-text-dim);
  margin: 2.5rem 0 0.5rem;
}

/* Member and invitation rows are lists of people, not articles: tighter
   than the games list above them. */
.post-row.group-member-row,
.post-row.group-invite-row { padding: 1.1rem 0; align-items: center; }
.post-row.group-member-row h3,
.post-row.group-invite-row h3 { font-size: 1.25rem; }
.post-row.group-member-row h3 a { color: var(--c-text); border: none; }
.post-row.group-member-row h3 a:hover { color: var(--c-accent); }
.group-member-row h3 .muted { font-family: var(--f-sans); margin-left: 0.35rem; }
.group-member-row .user-actions,
.group-invite-row .user-actions { flex-wrap: wrap; justify-content: flex-end; }

/* ── Invitations ───────────────────────────────────────────────────────── */

.group-invite-form { max-width: 640px; }
.group-invite-fields {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1rem;
  align-items: end;
}
.group-invite-fields .field { margin-bottom: 0; }
.group-invite-fields .form-actions { margin-top: 0; }

.group-invite-link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.6rem;
  max-width: 640px;
}
/* Specific enough to beat the global input[type="text"] rule. */
input[type="text"].group-invite-url {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0.45rem 0.7rem;
  font-family: var(--f-mono);
  font-size: 0.78rem;
  color: var(--c-accent-2);
  text-overflow: ellipsis;
}
.group-invite-link .btn { flex: 0 0 auto; }

/* The link just made, shown first so nobody has to scroll for it. */
.container.group-invite-ready-wrap { padding-top: 2rem; }
.card.group-invite-ready { border-color: var(--c-accent-line); }
.card.group-invite-ready h3 { font-size: 1.3rem; overflow-wrap: anywhere; }
.group-invite-note { margin: 0.75rem 0 0; }

/* The places a new invitation is counted against, and what stands in its
   way where the form would be: the cap, or who invites in the imported
   group. The left-out note's look (application.css). */
.group-places { margin: -0.5rem 0 1.25rem; }
.group-invite-limit {
  max-width: 62ch;
  margin: 0 0 1.25rem;
  padding: 0.6rem 0.9rem;
  border-left: 2px solid var(--c-accent-line);
}

/* ── Owner settings ────────────────────────────────────────────────────── */

.group-settings { align-items: stretch; }
.group-settings .card { display: flex; flex-direction: column; align-items: flex-start; }
.group-settings .card > :last-child { margin-top: auto; }
.group-settings form { width: 100%; }
.card.group-danger { border-color: var(--c-danger-line); }
.group-danger .card-index { color: var(--c-danger); }

/* application.css styles text inputs but not selects. */
.group-select {
  width: 100%;
  background: var(--c-field);
  border: 1px solid var(--c-control);
  color: var(--c-text);
  padding: 0.7rem 0.9rem;
  border-radius: var(--r-sm);
  font-family: var(--f-sans);
  font-size: 1rem;
}
.group-select:focus {
  outline: none;
  border-color: var(--c-accent);
  box-shadow: 0 0 0 3px var(--c-accent-tint);
}

/* ── Phones ────────────────────────────────────────────────────────────── */

@media (max-width: 800px) {
  .hero.group-hero { padding-block: 3rem 2rem; }
  /* The rows stack below 800px (application.css), so the buttons follow the
     name instead of hugging a right edge that is no longer there. */
  .group-member-row .user-actions,
  .group-invite-row .user-actions { justify-content: flex-start; }
}

@media (max-width: 600px) {
  .group-invite-fields { grid-template-columns: 1fr; }
  /* An email address in a long heading must wrap, not push the page sideways. */
  .post-row.group-invite-row h3 { overflow-wrap: anywhere; }
}