/* ============================================================================
   PADEL RALLY — competitions.css
   /competitions, the coming-soon page. Loads after kit.css (tokens, type,
   masthead, buttons, .coming, RALLY ON., footer) and carries only this page's
   layouts. Nothing here is live, and the page says so in its own grammar:
   hollow means not yet. The status square and #001 are drawn, not filled.
   ========================================================================== */

/* ── HERO ─────────────────────────────────────────────────────────────────── */
.cx-hero { padding: calc(var(--head) + clamp(3.5rem, 11vh, 7.5rem)) 0 clamp(3.5rem, 9vh, 6rem); }
.cx-hero__inner { display: grid; gap: var(--s3); justify-items: start; }

/* Three commands on one line and the sign-off on its own; phones get one beat per line.
   Sized a step under the homepage hero so "Play. Enter. Win." always holds one line,
   and on phones so "Rally on." holds one at 320px. */
.cx-hero__title { font-size: clamp(2.9rem, 7.6vw, 7rem); }
.cx-hero__title span { display: inline-block; }
.cx-hero__title span:last-child { display: block; }
@media (max-width: 719px) {
  .cx-hero__title { font-size: min(var(--t-hero), 13vw); }
  .cx-hero__title span { display: block; }
}

.cx-hero__status {
  display: inline-flex; align-items: center; gap: .65rem;
  font-family: var(--f-data); font-size: .8125rem; font-weight: 600; font-stretch: 88%;
  letter-spacing: .12em; text-transform: uppercase; color: var(--volt);
}
.cx-hero__status::before { content: ''; width: 9px; height: 9px; flex: none; border: 1.5px solid currentColor; }

/* The one entrance: the commands land in order, then the sign-off, then the status. */
@media (prefers-reduced-motion: no-preference) {
  .cx-hero .eyebrow, .cx-hero__title span, .cx-hero .lede, .cx-hero__status { animation: cxRise 640ms var(--e-out) both; }
  .cx-hero__title span:nth-child(1) { animation-delay: 80ms; }
  .cx-hero__title span:nth-child(2) { animation-delay: 170ms; }
  .cx-hero__title span:nth-child(3) { animation-delay: 260ms; }
  .cx-hero__title span:nth-child(4) { animation-delay: 420ms; }
  .cx-hero .lede { animation-delay: 540ms; }
  .cx-hero__status { animation-delay: 620ms; }
}
@keyframes cxRise { from { opacity: 0; transform: translateY(.3em); } }

/* ── SHARED SPLIT — the card row and the expect rows share one column line ── */
.cx-split { display: grid; gap: var(--s3); }
@media (min-width: 900px) {
  .cx-split { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: var(--s10); }
}

/* ── COMPETITION #001 ─────────────────────────────────────────────────────── */
.band > .cx-split { row-gap: var(--s6); align-items: center; }

/* A page object, so square. The numeral is sized by the card, not the viewport;
   each cqi value is preceded by a plain fallback for engines without container units. */
.cx-card { container-type: inline-size; background: var(--ink-02); border: 1px solid var(--line-hi); }
.cx-card__top {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: var(--s2);
  padding: 1.5rem 1.5rem 2rem;
  padding: clamp(1.25rem, 6cqi, 2rem) clamp(1.25rem, 6cqi, 2rem) clamp(1.6rem, 8cqi, 2.6rem);
}
.cx-card__title { display: grid; gap: 1.4rem; gap: clamp(1.1rem, 5cqi, 1.9rem); }
.cx-card__kicker {
  font-family: var(--f-data); font-size: var(--t-label); font-weight: 600; font-stretch: 88%;
  letter-spacing: .16em; line-height: 1.4; color: var(--chalk-low);
}
/* Drawn, not filled: the outline of a competition that has not opened yet. */
.cx-card__no {
  font-weight: 900; font-stretch: 122%; letter-spacing: -.04em; line-height: .8;
  font-size: 4.5rem;
  font-size: clamp(4.5rem, 26cqi, 10rem);
  color: var(--volt);
}
@supports (-webkit-text-stroke: 1px) {
  .cx-card__no { color: transparent; -webkit-text-stroke: 1.5px var(--volt); }
}
.cx-card__facts { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); border-top: 1px solid var(--line-hi); }
.cx-card__facts > div { display: grid; gap: .5rem; align-content: start; padding: 1.2rem 1.5rem; padding: clamp(1rem, 5cqi, 1.5rem) clamp(1.25rem, 6cqi, 2rem); }
.cx-card__facts > div + div { border-left: 1px solid var(--line-hi); }
.cx-card__facts dt {
  font-family: var(--f-data); font-size: var(--t-label); font-weight: 600; font-stretch: 84%;
  letter-spacing: .14em; text-transform: uppercase; color: var(--chalk-low);
}
.cx-card__facts dd {
  font-family: var(--f-display); font-weight: 800; font-stretch: 112%;
  font-size: 1.15rem; font-size: clamp(1.05rem, 5cqi, 1.35rem); line-height: 1.05; letter-spacing: -.01em;
  text-transform: uppercase;
}

.cx-copy { display: grid; gap: var(--s3); justify-items: start; }
.cx-copy .claim { max-width: 26ch; }

/* ── WHAT TO EXPECT ───────────────────────────────────────────────────────── */
.cx-expect { display: grid; margin-top: clamp(2rem, 5vh, 3.25rem); border-top: 1px solid var(--line); }
.cx-expect > li {
  row-gap: .5rem; align-items: baseline;
  padding-block: clamp(1.1rem, 2.4vw, 1.6rem); border-bottom: 1px solid var(--line);
}
.cx-expect__name { font-weight: 800; font-stretch: 116%; font-size: clamp(1.15rem, 2.4vw, 1.5rem); letter-spacing: -.018em; line-height: 1; }
.cx-expect__what { color: var(--chalk-mid); font-size: var(--t-lead); line-height: 1.45; }

/* ── REDUCED MOTION ───────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .btn:hover { transform: none; }
}