/* The component layer the web/poster layout used to carry inline (feed, videos, events,
   pros, the tournaments and clubs lists), redrawn in NORTH_STAR's language and scoped to
   .ctx-poster. The page shell (top bar, app band, footer, glow, grain) is gone: the app
   layout draws the shell. Delete with poster-aliases.css when B7 and B9 rebuild these pages. */

.ctx-poster { color: var(--ink); }
.ctx-poster p { text-wrap: pretty; }

.ctx-poster .page-hero {
  max-width: var(--content-max); margin: 0 auto; padding: var(--space-6) var(--space-4) var(--space-3);
}
.ctx-poster .page-hero__eyebrow {
  color: var(--ink-2); margin-bottom: var(--space-3);
  font-stretch: var(--wdth-plate); font-weight: 700; font-size: var(--fs-plate); line-height: 1.2;
  letter-spacing: var(--track-plate); text-transform: uppercase; text-wrap: balance;
}
.ctx-poster .page-hero__title {
  font-family: var(--font); font-stretch: var(--wdth-name); font-weight: 800;
  font-size: var(--fs-display); line-height: 1; letter-spacing: -0.01em; text-wrap: balance;
}
.ctx-poster .page-hero__title em { font-style: normal; }
.ctx-poster .page-hero__sub {
  margin-top: var(--space-3); max-width: 560px; color: var(--ink-2);
  font-size: var(--fs-body); line-height: 1.5;
}
.ctx-poster .page-hero__sub strong { color: var(--ink); font-weight: 600; }
.ctx-poster .page-hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-5); }

.ctx-poster .pbtn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: var(--btn-h); padding: 0 20px; border-radius: var(--radius-control);
  background: var(--ink); color: var(--on-ink); border: 1.5px solid var(--ink);
  font-family: var(--font); font-stretch: var(--wdth-read); font-weight: 600; font-size: 16px; line-height: 1;
  cursor: pointer; transition: transform var(--dur-press) ease-out;
}
.ctx-poster .pbtn:active { transform: scale(0.97); }
.ctx-poster .pbtn svg { width: 20px; height: 20px; flex-shrink: 0; }
.ctx-poster .pbtn--ghost { background: transparent; color: var(--ink); border-color: var(--line-strong); }

.ctx-poster .scoreline { max-width: var(--content-max); margin: 0 auto; padding: var(--space-5) var(--space-4) 0; }
.ctx-poster .scoreline__frame {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4);
  padding: var(--space-4) 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.ctx-poster .scoreline .stat__value {
  font-family: var(--font); font-stretch: var(--wdth-live); font-weight: 800; font-size: var(--fs-stat);
  line-height: 1; font-variant-numeric: tabular-nums;
}
.ctx-poster .scoreline .stat__value--live { color: var(--live); }
.ctx-poster .scoreline .stat__label {
  margin-top: 6px; color: var(--ink-2);
  font-stretch: var(--wdth-plate); font-weight: 700; font-size: var(--fs-plate);
  letter-spacing: var(--track-plate); text-transform: uppercase;
}

.ctx-poster .psection { max-width: var(--page-max); margin: 0 auto; padding: var(--space-6) var(--space-4) var(--space-2); }
.ctx-poster .psection__head {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3);
  margin-bottom: var(--space-4); padding-bottom: var(--space-2); border-bottom: 1px solid var(--line);
}
.ctx-poster .psection__title {
  display: flex; align-items: center; gap: var(--space-3);
  font-family: var(--font); font-stretch: var(--wdth-name); font-weight: 700;
  font-size: var(--fs-headline); line-height: 1.1;
}
.ctx-poster .psection__count {
  color: var(--ink-2); white-space: nowrap;
  font-stretch: var(--wdth-plate); font-weight: 700; font-size: var(--fs-plate);
  letter-spacing: var(--track-plate); text-transform: uppercase;
}

.ctx-poster .live-dot {
  display: inline-block; flex: none; width: 8px; height: 8px; border-radius: 50%;
  background: var(--live); animation: foos-pulse var(--dur-pulse) ease-in-out infinite;
}

.ctx-poster .stamp {
  display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 8px;
  border-radius: var(--radius-plate); background: var(--surface-2); color: var(--ink);
  font-stretch: var(--wdth-plate); font-weight: 700; font-size: var(--fs-plate); line-height: 1;
  letter-spacing: var(--track-plate); text-transform: uppercase; white-space: nowrap;
}
.ctx-poster .stamp--live { color: var(--live); }
.ctx-poster .stamp--gold { color: var(--gold); }

.ctx-poster .pempty {
  max-width: 320px; margin: var(--space-3) auto; padding: var(--space-6) 0; text-align: center;
}
.ctx-poster .pempty__title {
  font-family: var(--font); font-stretch: var(--wdth-name); font-weight: 700;
  font-size: var(--fs-headline); line-height: 1.1; margin-bottom: var(--space-2);
}
.ctx-poster .pempty__sub { color: var(--ink-2); font-weight: 500; font-size: var(--fs-meta); margin-bottom: var(--space-5); }

@media (prefers-reduced-motion: reduce) {
  .ctx-poster .live-dot { animation: none; }
  .ctx-poster .pbtn:active { transform: none; }
}