/* ==========================================================================
   seo.css — the programmatic-SEO pages: the sport/distance hubs and the event
   page. Loaded after tokens.css, never alongside home.css.

   Drawn from design/seo/02..09. The comps are laid out at 1240px inside a
   browser-chrome mock; everything here is the fluid version of that.

   NAMESPACES — three, and they do not overlap:
     .seo-*   shared between the hubs and the event page. Owned by this file.
              The hub agent may use any of these; do not redefine them.
     .ev-*    event page only. Owned by this file.
     .hub-*   RESERVED, deliberately empty here. Hub-only rules belong in
              src/css/seo-hub.css, which this file does not create and must
              not contain. If a hub needs something that is genuinely shared,
              promote it to .seo-* here rather than duplicating it there.

   CONTRAST NOTES that cost real time upstream and still apply:
     - --accent (#5980A6) is 3.71:1. Fine for borders, rings and icons on the
       page ground; NEVER for text. Type uses --accent-strong.
     - .plate-band is NOT covered by tokens' `.plate .muted` rules, so this
       file re-inks .prose/.fine/.muted inside the adaptive strip explicitly.
       Without that, --text-copy (dark ink) lands on the dark band.
     - inside any plate, accent ink is --on-plate-accent. A raw ramp step
       collapses to 1.78:1 when the plate inverts in dark.
   ========================================================================== */

[hidden] { display: none !important; }

/* Sticky header is 74px (64px below 860px); anchored sections must clear it. */
:target,
#course,
#entry,
#build-window,
#sample-week,
#faq,
#start { scroll-margin-top: 90px; }


/* --------------------------------------------------------------------------
   SHARED — breadcrumbs
   -------------------------------------------------------------------------- */

/* text-transform is correct here and not a kicker violation: these are links
   whose accessible names must stay sentence case for screen readers and for
   the BreadcrumbList JSON-LD, which is built from the same strings. */
.seo-crumbs {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 11px;
  line-height: 1;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: 22px;
}
.seo-crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 0; }
.seo-crumbs li { display: inline-flex; align-items: center; }
.seo-crumbs a {
  display: inline-flex;
  align-items: center;
  min-height: 32px;          /* inline text link inside a dense bar */
  padding-block: 6px;
  color: var(--text-secondary);
  text-decoration: none;
}
.seo-crumbs a:hover { color: var(--accent-strong); text-decoration: underline; }
.seo-crumbs [aria-current="page"] { color: var(--text); }
.seo-crumbs-sep { padding-inline: 8px; color: var(--text-faint); }


/* --------------------------------------------------------------------------
   SHARED — section head (heading left, standfirst right)
   -------------------------------------------------------------------------- */

.seo-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
  margin-bottom: 30px;
}
.seo-head .kicker { display: block; margin-bottom: 14px; }
.seo-head-note {
  max-width: 340px;
  font-size: var(--fs-small);
  line-height: 1.55;
  color: var(--text-copy);
  margin-bottom: 4px;
}


/* --------------------------------------------------------------------------
   SHARED — the right-hand column (related list + CTA card)
   -------------------------------------------------------------------------- */

.seo-aside {
  width: 340px;
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.seo-listcard { padding: 20px 22px; }
.seo-listcard .kicker { display: block; margin-bottom: 8px; }

.seo-listrow {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 44px;
  font-size: var(--fs-small);
  color: var(--text);
  text-decoration: none;
}
/* A related race carries one line saying how it differs from this one, so the
   two-line variant needs its own vertical rhythm. */
.seo-listrow.is-stacked { align-items: flex-start; padding-block: 10px; min-height: 0; }
.seo-listrow-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.seo-listrow-note { line-height: 1.35; }
.seo-listrow.is-stacked .ico { margin-top: 4px; }
.seo-listrow:hover { color: var(--accent-strong); }
.seo-listrow .ico { color: var(--text-secondary); }
.seo-listrow:hover .ico { color: var(--accent-strong); }
.seo-listrow .ico-accent { color: var(--accent); }

.seo-cta-card { padding: 22px 24px; }
.seo-cta-card .btn { margin-top: 14px; }


/* --------------------------------------------------------------------------
   SHARED — waitlist form.
   Only rendered when site.json carries a real endpoint; with none, the CTA is
   a link and none of this is on the page. There is no dead field, ever.
   -------------------------------------------------------------------------- */

.seo-form { margin-top: 14px; }
.seo-form-row { display: flex; gap: 8px; flex-wrap: wrap; }
.seo-form-input {
  flex: 1 1 190px;
  min-width: 0;
  min-height: 46px;
  padding: 0 14px;
  border: 1px solid var(--divider);
  border-radius: var(--r-control);
  background: var(--bg);
  color: var(--text);
  font-size: var(--fs-body);
}
.seo-form-input::placeholder { color: var(--text-secondary); }
.seo-form-input:disabled { opacity: .6; }
.seo-form-msg:empty { display: none; }
.seo-form-count { margin-top: 8px; font-weight: 600; }
.seo-form-count[hidden] { display: none; }
.seo-form-msg { margin-top: 10px; }
.seo-form.is-ok .seo-form-msg { color: var(--accent-strong); }
.seo-form.is-error .seo-form-msg { color: var(--text); font-weight: 500; }


/* --------------------------------------------------------------------------
   SHARED — the event grid (hub side of SEO rule 4: every event page must be
   reachable by a crawlable <a> from its sport hub). Lives here so both hub
   levels render an identical grid.
   -------------------------------------------------------------------------- */

.seo-chip-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
}
.seo-chip-grid.is-dense { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
.seo-chip-label {
  display: block;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 11px;
  line-height: 1;
  letter-spacing: .14em;
  color: var(--text-secondary);
  margin: 30px 0 12px;
}
.seo-chip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 46px;
  padding: 12px 15px;
  border: 1px solid var(--divider);
  border-radius: 11px;
  font-size: var(--fs-small);
  color: var(--text);
  text-decoration: none;
}
.seo-chip:hover { border-color: var(--accent); background: var(--accent-soft); color: var(--text); }
.seo-chip .ico { color: var(--text-secondary); }
.seo-chip.is-current { background: var(--surface); }
.seo-chip.is-empty { border-style: dashed; color: var(--text-secondary); }


/* --------------------------------------------------------------------------
   EVENT PAGE — hero
   -------------------------------------------------------------------------- */

.ev-hero { display: flex; gap: 56px; align-items: flex-start; }
.ev-hero-copy { flex: 1; min-width: 0; }
.ev-hero-copy h1 { margin-bottom: 20px; }
.ev-lede { max-width: 620px; }

.ev-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 26px;
}
.ev-note { margin-top: 14px; }

.ev-hero-card {
  width: 340px;
  flex: none;
  padding: 24px 26px;
}

/* Countdown.
   The server writes the DATE. The browser replaces it with a number and adds
   .is-counting. min-height reserves the taller of the two so the swap does not
   move the card. */
.ev-countdown {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 10px;
  min-height: 52px;
  margin-top: 14px;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 30px;
  line-height: 1.05;
  letter-spacing: -.01em;
}
.ev-countdown.is-counting { font-size: 56px; line-height: .9; letter-spacing: -.025em; }
.ev-countdown-unit {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 15px;
  letter-spacing: 0;
  color: rgba(242, 242, 243, .72);
}
.ev-countdown-n { color: inherit; }
.ev-countdown-when { font-size: 15px; margin-top: 6px; }

.ev-facts {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid rgba(242, 242, 243, .18);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ev-fact { display: flex; justify-content: space-between; gap: 16px; font-size: 14px; }
.ev-fact-k { flex: none; }
.ev-fact-v { font-weight: 600; text-align: right; }

.ev-callout {
  margin-top: 20px;
  padding: 13px 15px;
  border-radius: 12px;
  background: rgba(242, 242, 243, .12);
  font-size: 13.5px;
  line-height: 1.5;
  color: rgba(242, 242, 243, .85);   /* 9.4:1 on the light theme's dark plate */
}
/* Set by the countdown script when the ideal start window has already opened
   for THIS reader. The server never sets it: whether you are late is a fact
   about today, not about build day. */
.ev-callout.is-late {
  background: rgba(242, 242, 243, .2);
  color: rgba(242, 242, 243, .95);
}

@media (prefers-color-scheme: dark) {
  /* The plate inverts: light ground, dark ink. */
  .ev-countdown-unit { color: rgba(29, 31, 32, .72); }
  .ev-facts { border-top-color: rgba(29, 31, 32, .16); }
  .ev-callout { background: rgba(29, 31, 32, .07); color: rgba(29, 31, 32, .85); }
  .ev-callout.is-late { background: rgba(29, 31, 32, .12); color: rgba(29, 31, 32, .95); }
}


/* --------------------------------------------------------------------------
   EVENT PAGE — what the course asks
   -------------------------------------------------------------------------- */

/* The course brief: composed prose on the left, the row's own spec on the
   right. Same two-column rhythm as .ev-sample, one step tighter. */
.ev-brief {
  display: flex;
  gap: 48px;
  align-items: flex-start;
  margin-bottom: 34px;
}
.ev-brief-lede { flex: 1; min-width: 0; font-size: 15.5px; max-width: 62ch; }

.ev-spec {
  width: 340px;
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px 20px;
  border: 1px solid var(--divider);
  border-radius: var(--r-control);
}
.ev-spec-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-size: 13.5px;
  line-height: 1.4;
}
.ev-spec-k { flex: none; color: var(--text-secondary); }
.ev-spec-v { font-weight: 600; text-align: right; }

.ev-demands {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 20px;
}


/* --------------------------------------------------------------------------
   EVENT PAGE — entry / field / underfoot fact row
   -------------------------------------------------------------------------- */

.ev-logi {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
}
.ev-logi-card { padding: 20px 22px; }
.ev-logi-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.ev-logi-h { font-size: 20px; line-height: 1.15; margin-bottom: 8px; }


/* --------------------------------------------------------------------------
   EVENT PAGE — the build window (which months the block lands in)
   -------------------------------------------------------------------------- */

.ev-window { display: flex; gap: 56px; align-items: flex-start; }
.ev-window-copy { flex: 1; min-width: 0; }
.ev-window-copy .kicker { display: block; margin-bottom: 14px; }
.ev-window-copy h2 { margin-bottom: 16px; }
.ev-window-copy .prose { font-size: 15.5px; max-width: 62ch; }
.ev-window-copy .prose + .prose { margin-top: 14px; }

.ev-window-card { width: 400px; flex: none; padding: 20px 22px; }
.ev-phases { margin-top: 4px; }
/* Three stacked lines, so this is NOT a .hairline-list.is-tight row: that
   modifier is one centred flex line and it would centre all three. */
.ev-phase { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding-block: 12px; }
.ev-phase-k { font-size: 11px; letter-spacing: .04em; color: var(--text-secondary); }
.ev-phase-m { font-size: var(--fs-small); font-weight: 600; }
.ev-phase-n { line-height: 1.45; }
.ev-phase-foot { margin-top: 14px; }
.ev-demand { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.ev-demand-body { padding: 22px 24px 20px; flex: 1; }
.ev-demand-body .kicker { display: block; margin-bottom: 10px; }
.ev-demand h3 {
  font-size: clamp(21px, 1.9vw, 25px);
  line-height: 1.1;
  margin-bottom: 10px;
}
.ev-demand .prose { font-size: var(--fs-small); line-height: 1.58; }
.ev-demand-answer {
  padding: 18px 24px;
  background: var(--accent-soft);
  border-top: 1px solid var(--divider);
}
.ev-demand-answer .kicker { display: block; margin-bottom: 8px; }


/* --------------------------------------------------------------------------
   EVENT PAGE — sample week
   -------------------------------------------------------------------------- */

.ev-sample { display: flex; gap: 56px; align-items: flex-start; }
.ev-sample-copy { width: 390px; flex: none; }
.ev-sample-copy .kicker { display: block; margin-bottom: 14px; }
.ev-sample-copy h2 { margin-bottom: 16px; }
.ev-sample-copy .prose { font-size: 15.5px; }

.ev-checks { margin-top: 20px; display: flex; flex-direction: column; gap: 11px; }
.ev-check {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  font-size: 15px;
  line-height: 1.5;
  color: var(--text-copy);
}
.ev-check .ico { margin-top: 4px; }

.ev-sample-card { flex: 1; min-width: 0; padding: 22px 26px 12px; }
.ev-week-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.ev-week-rule { flex: 1; height: 1px; background: var(--divider); }

/* The week itself. A real table: day is the row header, and the zone travels
   as text in an .sr-only span because the bar alone is not accessible (see
   the intensity note in tokens.css). */
/* border-collapse:separate, not the reset's collapse: the key row is tinted
   with rounded ends, and a collapsed table ignores border-radius on cells.
   The row rules therefore live on the cells. */
.ev-week { width: 100%; table-layout: auto; border-collapse: separate; border-spacing: 0; }
.ev-week th,
.ev-week td {
  padding-block: 12px;
  vertical-align: middle;
  border-bottom: 1px solid var(--hairline);
}
.ev-week tbody tr:last-child th,
.ev-week tbody tr:last-child td { border-bottom: 0; }

/* One flex line inside the cell. Putting display:flex on the <td> itself
   would take the cell out of the table box model and stop the columns from
   lining up between rows. */
.ev-week-cell { display: flex; align-items: center; gap: 12px; }
.ev-week-cell.is-end { justify-content: flex-end; flex-wrap: wrap; gap: 4px 14px; }

.ev-week-day {
  width: 44px;
  text-align: left;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .04em;
}
.ev-week-zone { width: 16px; padding-inline: 0; line-height: 0; }
.ev-week-title {
  padding-left: 12px;
  font-size: var(--fs-small);
  font-weight: 500;
  line-height: 1.3;
}
.ev-week-ico { display: inline-flex; color: var(--text); }
.ev-week-metrics {
  padding-left: 12px;
  text-align: right;
  white-space: nowrap;
}
.ev-week-dist { font-size: 13px; color: var(--text-secondary); }
.ev-week-time { color: var(--text-secondary); }

/* Rest rows read as secondary; the key session is the one the week is built
   around and gets the tint from the comp. */
.ev-week tr.is-rest .ev-week-title,
.ev-week tr.is-rest .ev-week-ico { color: var(--text-secondary); font-weight: 400; }
.ev-week tr.is-key th,
.ev-week tr.is-key td { background: var(--accent-soft); }
.ev-week tr.is-key .ev-week-day,
.ev-week tr.is-key .ev-week-title,
.ev-week tr.is-key .ev-week-ico,
.ev-week tr.is-key .ev-week-dist,
.ev-week tr.is-key .ev-week-time { color: var(--accent-strong); }
.ev-week tr.is-key .ev-week-title { font-weight: 600; }
.ev-week tr.is-key th:first-child { border-radius: 10px 0 0 10px; padding-left: 10px; }
.ev-week tr.is-key td:last-child { border-radius: 0 10px 10px 0; padding-right: 10px; }


/* --------------------------------------------------------------------------
   EVENT PAGE — adaptive strip (full-bleed plate band)
   -------------------------------------------------------------------------- */

.ev-adapt { padding-block: clamp(44px, 5vw, 60px); }
.ev-adapt-inner { display: flex; gap: 48px; align-items: center; }
.ev-adapt-copy { flex: 1; min-width: 0; }
.ev-adapt-copy .kicker { display: block; margin-bottom: 16px; }
.ev-adapt-copy h2 { margin-bottom: 16px; }
.ev-adapt-copy .prose { max-width: 520px; }

/* tokens.css inks .plate/.on-plate children but NOT .plate-band, and .prose
   hard-sets --text-copy. Without these three lines the copy is dark ink on a
   dark band. Both directions, because the band inverts with the theme. */
.ev-adapt .prose,
.ev-adapt .fine,
.ev-adapt .muted { color: rgba(242, 242, 243, .78); }
.ev-adapt .ico-accent { color: var(--on-plate-accent); }
@media (prefers-color-scheme: dark) {
  .ev-adapt .prose,
  .ev-adapt .fine,
  .ev-adapt .muted { color: rgba(29, 31, 32, .78); }
}

.ev-adapt-cards {
  width: 600px;
  flex: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 16px;
}
.ev-adapt-card {
  border: 1px solid rgba(242, 242, 243, .33);
  border-radius: var(--r-control);
  padding: 20px;
}
.ev-adapt-card h3 { font-size: 20px; line-height: 1.15; margin: 12px 0 6px; }
@media (prefers-color-scheme: dark) {
  .ev-adapt-card { border-color: rgba(29, 31, 32, .22); }
}


/* --------------------------------------------------------------------------
   EVENT PAGE — FAQ + related
   -------------------------------------------------------------------------- */

.ev-faq { display: flex; gap: 56px; align-items: flex-start; }
.ev-faq-main { flex: 1; min-width: 0; }
.ev-faq-main .kicker { display: block; margin-bottom: 14px; }
.ev-faq-main h2 { margin-bottom: 22px; }

.ev-faq-list .ev-faq-item { padding-block: 20px; }
.ev-faq-q { font-size: clamp(19px, 1.7vw, 21px); margin-bottom: 7px; }
.ev-faq-item .prose { font-size: 15px; line-height: 1.6; }

.ev-cta-h { font-size: 22px; line-height: 1.12; margin-bottom: 8px; }


/* --------------------------------------------------------------------------
   RESPONSIVE
   The comps are drawn at 1440px. Below 980px the aside stacks under the copy;
   below 700px the week table gives up its fixed columns. Nothing may scroll
   sideways at 360px.
   -------------------------------------------------------------------------- */

@media (max-width: 1180px) {
  .ev-adapt-cards { width: 480px; }
}

@media (max-width: 980px) {
  .ev-hero,
  .ev-brief,
  .ev-sample,
  .ev-window,
  .ev-faq,
  .ev-adapt-inner { flex-direction: column; gap: 34px; }
  .ev-hero-card,
  .ev-sample-copy,
  .ev-spec,
  .ev-window-card,
  .seo-aside,
  .ev-adapt-cards { width: 100%; }
  .ev-adapt-inner { align-items: stretch; }
  .ev-sample-card { width: 100%; }
}

@media (max-width: 700px) {
  .ev-sample-card { padding: 18px 16px 8px; }
  .ev-week-title { padding-left: 10px; }
  .ev-week-title .ev-week-cell { gap: 10px; }
  .ev-week-metrics { white-space: normal; }
  .ev-week-metrics .ev-week-cell.is-end {
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
  }
}

@media (max-width: 560px) {
  .ev-hero-card { padding: 20px 18px; }
  .ev-countdown.is-counting { font-size: 46px; }
  .ev-actions .btn { width: 100%; }
  .ev-fact { font-size: 13.5px; }
  .ev-week-day { width: 38px; }
  .ev-week-title { font-size: 14px; }
  .seo-crumbs { font-size: 11px; letter-spacing: .08em; }
}


/* --------------------------------------------------------------------------
   MOTION — same two durations as everywhere else, same guard.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
  .seo-chip,
  .seo-listrow,
  .seo-crumbs a,
  .seo-form-input {
    transition:
      color var(--dur-state) var(--ease-out),
      background-color var(--dur-state) var(--ease-out),
      border-color var(--dur-state) var(--ease-out);
  }
}


/* --------------------------------------------------------------------------
   .hub-* — RESERVED. Intentionally no rules here.
   Hub-only styling belongs in src/css/seo-hub.css, owned by the hub pages.
   -------------------------------------------------------------------------- */

/* The tile grid sits above the session list (src/css/weekgrid.css). */
.ev-sample-card .wk { margin-top: 10px; margin-bottom: 14px; }
.ev-week-list { border-top: 1px solid var(--hairline); }