/* Ao Vivo & Replays — layout only; card, stats, lanes, tags, accordion from components.css. */

/* ── Ao Vivo card: five stats in one row ─────────────────────────────── */
.live__grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.live__grid .stat dd small { overflow-wrap: anywhere; }
.live__grid .stat { min-width: 0; }
.live__grid .stat dd.stat__status { font-size: clamp(1.5rem, 1rem + 1vw, 1.875rem); overflow-wrap: anywhere; }
.live__foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-16) var(--space-32);
  padding: 20px 28px; border-top: 1px solid var(--line-dark);
}
.live__foot p { display: flex; gap: 10px; align-items: flex-start; flex: 1 1 420px; max-width: 72ch; font-size: var(--fs-small); color: var(--color-muted); }
.live__foot p .icon { width: 18px; height: 18px; margin-top: 2px; color: var(--color-data); }
.live__foot p a { color: var(--color-text); text-underline-offset: 3px; }

/* ── programação da próxima reunião ──────────────────────────────────── */
.live-prog { margin-top: clamp(40px, 5vw, 64px); }
.live-prog__h, .rep-group__head h3 {
  font-family: var(--font-display); font-stretch: 80%; font-weight: 800; font-size: 1.5rem;
  text-transform: uppercase; line-height: 1.1;
}
.live-prog__h span, .rep-group__head h3 span { color: var(--color-muted); font-weight: 600; }
.live-prog__list { margin-top: var(--space-16); border-top: 1px solid var(--line-dark-strong); }
.lane--prog { grid-template-columns: 72px minmax(0, 1fr) auto 44px; grid-template-areas: "box data tag go"; min-height: 80px; align-items: start; }
.lane--prog .box { width: 48px; height: 48px; font-size: 1.125rem; }

/* ── replays archive ─────────────────────────────────────────────────── */
.rep-season + .rep-season { margin-top: var(--space-48); }
.rep-group { margin-top: var(--space-24); }
.rep-group + .rep-group { margin-top: var(--space-48); }
.rep-group__head {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-12) var(--space-24);
  padding-bottom: var(--space-16); border-bottom: 1px solid var(--line-dark-strong);
}
.lane--rep { align-items: start;
  grid-template-columns: 72px minmax(0, 1fr) minmax(0, 1.1fr) 120px 44px;
  grid-template-areas: "box a b t go"; min-height: 84px;
}
.lane--rep .box { grid-area: box; width: 48px; height: 48px; font-size: 1.125rem; }
.lane--rep .rep__a { grid-area: a; }
.lane--rep .rep__b { grid-area: b; }
.lane--rep .rep__t { grid-area: t; }
.lane--rep .lane__data b { display: inline-block; }   /* a wrapped name moves whole, never splits under its label */
.lane--rep .rep__t b { font-size: 1.25rem; font-weight: 500; }
.lane--rep .lane__go { grid-area: go; }
.rep-list li { scroll-margin-top: calc(var(--header-h) + 24px); }
.rep-list li:target .lane { background: linear-gradient(90deg, var(--color-surface-2), transparent 85%); }
.rep-list li:target .box { background: var(--color-brand); border-color: var(--color-brand); color: var(--color-on-brand); }

/* ── faq ─────────────────────────────────────────────────────────────── */
.rep-faq { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.8fr); gap: var(--space-24) clamp(32px, 6vw, 96px); align-items: start; }

@media (max-width: 1100px) {
  .live__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .live__grid .stat:nth-child(2n) { border-right: 0; }
  .live__grid .stat:nth-child(-n+4) { border-bottom: 1px solid var(--line-dark); }
  .live__grid .stat:last-child { grid-column: 1 / -1; }
  .lane--prog { grid-template-columns: 64px minmax(0, 1fr) 44px; grid-template-areas: "box data go" "box tag go"; }
  .lane--prog .tag { margin-top: 4px; }
  .lane--rep { grid-template-columns: 64px minmax(0, 1fr) minmax(0, 1fr) 44px; grid-template-areas: "box a b go" "box t t go"; gap: 8px 18px; }
  .rep-faq { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .live__foot { padding: 18px; }
  .live__grid .stat dd { font-size: 2rem; }
  .lane--prog { grid-template-columns: 48px minmax(0, 1fr) 40px; }
  .lane--prog .box, .lane--rep .box { width: 44px; height: 44px; font-size: 1.0625rem; }
  .lane--rep { grid-template-columns: 48px minmax(0, 1fr) 40px; grid-template-areas: "box a go" "box b go" "box t go"; gap: 6px 14px; }
  .lane--rep .rep__t br { display: none; }
  .lane--rep .rep__t b { font-size: 1rem; }
}