/* =========================================================================
   COMPONENTS
   Reusable UI patterns constructed from tokens.
   Token names match tokens.css exactly: --type-small, --type-tiny (not -sm/-xs).
   ========================================================================= */

/* =========================================================================
   PAGE LAYOUT · HOME FEED
   ========================================================================= */
.p-home {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  padding-block: var(--space-4) 0; /* visit section provides its own bottom padding via bleed */
}

/* =========================================================================
   BUTTONS
   Semantic naming: --primary drives the most important action (Pitch Green).
   --ghost is the calmer alternate (white-on-dark) for secondary CTAs.
   ========================================================================= */
.c-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap-min);
  padding: 0 var(--space-6);
  font-family: var(--font-body);
  font-weight: var(--weight-semibold);
  font-size: var(--type-body);
  letter-spacing: var(--tracking-wide);
  border-radius: var(--radius-md);
  transition:
    transform var(--duration-fast) var(--ease-out),
    background-color var(--duration-fast) var(--ease-out),
    box-shadow var(--duration-fast) var(--ease-out);
}

.c-button:active {
  transform: scale(0.98); /* per brief — haptic-style feedback */
}

/* Primary — Pitch Green. The conversion driver. */
.c-button--primary {
  background-color: var(--accent-pitch);
  color: var(--text-on-accent);
  box-shadow: var(--glow-pitch);
}

.c-button--primary:hover {
  background-color: var(--accent-pitch-dim);
  box-shadow: var(--glow-pitch), var(--shadow-card);
}

/* Ghost — calm white for secondary actions. */
.c-button--ghost {
  background-color: var(--text-primary);
  color: var(--surface-base);
}

.c-button--ghost:hover {
  background-color: var(--text-secondary);
}

/* Mill — premium amber, reserved for VIP / upsell actions. */
.c-button--mill {
  background-color: var(--accent-mill);
  color: var(--text-on-mill);
}

.c-button--mill:hover {
  background-color: var(--accent-mill-dim);
}

.c-button--block {
  width: 100%;
}

/* Muted — non-interactive look for fixtures inside the 3-hour booking
   cut-off. Drops the green glow + hover, sets cursor:not-allowed, and
   relies on the consumer to also drop `href`/`aria-disabled="true"` so it
   can't be activated. Visually still button-shaped so it occupies the same
   slot in the layout as the active CTA it replaces. */
.c-button--muted {
  background-color: var(--surface-overlay);
  color: var(--text-secondary);
  box-shadow: none;
  cursor: not-allowed;
}

.c-button--muted:hover {
  background-color: var(--surface-overlay);
  box-shadow: none;
}

/* =========================================================================
   COMPONENT · HERO
   Full-bleed media block. Math is parent-padding-independent.
   ========================================================================= */
.c-hero {
  position: relative;
  /* Full-bleed regardless of parent padding — robust at every breakpoint */
  width: 100vw;
  margin-inline: calc(50% - 50vw);

  min-height: 360px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--space-8) var(--space-5) var(--space-6);
  overflow: hidden;
  border-radius: 0 0 var(--radius-xl) var(--radius-xl);
}

.c-hero__media,
.c-hero__overlay {
  position: absolute;
  inset: 0;
  z-index: var(--z-base);
}

.c-hero__media {
  background-size: cover;
  background-position: center;
}

.c-hero--home .c-hero__media {
  background-image: url("../img/hero-img.webp");
}

/* Stronger overlay — protects text legibility regardless of image */
.c-hero__overlay {
  background: linear-gradient(
    to bottom,
    rgba(18, 18, 18, 0) 0%,
    rgba(18, 18, 18, 0.4) 45%,
    rgba(18, 18, 18, 0.92) 100%
  );
}

.c-hero__content {
  position: relative;
  z-index: var(--z-raised);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
  max-width: 540px;
}

.c-hero__caption {
  font-size: var(--type-small);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--accent-pitch);
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
}

.c-hero__title {
  font-size: var(--type-hero);
  line-height: 0.98; /* hero-only compression — tighter than --leading-tight */
  letter-spacing: var(--tracking-tight);
  color: var(--text-primary);
  text-shadow: 0 4px 16px rgba(0, 0, 0, 0.55);
}

.c-hero .c-button {
  margin-top: var(--space-2);
}

/* =========================================================================
   COMPONENT · HERO SUBTITLE
   Supporting value-prop line beneath the hero title. Kept narrow so it reads
   as a single thought, with strong text-shadow against the image.
   ========================================================================= */
.c-hero__subtitle {
  max-width: 36ch;
  font-size: var(--type-lead); /* 1.0625rem — between body and h3 */
  line-height: var(--leading-snug);
  color: var(--text-primary);
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.7);
  margin: calc(var(--space-1) * -1) 0 var(--space-1);
}

/* =========================================================================
   COMPONENT · APP CHIPS (horizontal scroll)
   ========================================================================= */
.c-chip-scroll {
  /* Bleed to viewport edges so chips can scroll under the page padding */
  width: 100vw;
  margin-inline: calc(50% - 50vw);
}

.c-chip-scroll__list {
  display: flex;
  gap: var(--space-2);
  padding-inline: var(--space-4);
  list-style: none;
  margin: 0;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.c-chip-scroll__list::-webkit-scrollbar {
  display: none;
}

.c-chip {
  white-space: nowrap;
  padding: var(--space-2) var(--space-4);
  min-height: var(--tap-min); /* 44px floor for touch */
  background-color: var(--surface-raised);
  border: 2px solid var(--border-hairline);
  border-radius: var(--radius-full);
  font-size: var(--type-small);
  font-weight: var(--weight-medium);
  color: var(--text-secondary);
  transition:
    background-color var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out),
    color var(--duration-fast) var(--ease-out);
}

.c-chip:hover {
  border-color: var(--border-strong);
  color: var(--text-primary);
}

.c-chip--active,
.c-chip[aria-pressed="true"] {
  background-color: rgba(57, 255, 20, 0.08);
  border-color: var(--border-accent);
  color: var(--accent-pitch);
}

/* =========================================================================
   COMPONENT · MATCH CARD
   ========================================================================= */
.c-match-card {
  background-color: var(--surface-raised);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.c-match-card--elevated {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    var(--shadow-card);
}

.c-match-card__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--type-tiny);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--text-secondary);
}

.c-match-card__header time {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

.c-match-card__teams {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-4);
}

.c-match-card__team {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}

/* Flags as 3:2 rectangles — real flag proportions, no central-element cropping */
.c-match-card__flag {
  width: 56px;
  aspect-ratio: 3 / 2;
  border-radius: var(--radius-sm);
  background-color: var(--surface-overlay);
  background-size: cover;
  background-position: center;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

/* Featured hero card team name — full name always, no truncation. The
   card has vertical room for long names ("Bosnia and Herzegovina") to
   wrap to a second line; `text-wrap: balance` distributes characters
   evenly across the wrap (graceful no-op on older browsers). The hero
   is a promotional surface — abbreviating here would lose impact. */
.c-match-card__name {
  font-family: var(--font-body);
  font-weight: var(--weight-semibold);
  font-size: var(--type-small);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--text-primary);
  text-align: center;
  width: 100%;
  overflow-wrap: break-word;
  text-wrap: balance;
}

/* =========================================================================
   MILESTONE FEATURED CARD (TBD / unconfirmed-teams variant)
   When the featured (hero) match is a TBD knockout fixture, the card
   body swaps the flag-name-VS-name-flag grid for a single large trophy
   emblem above a "Teams to be confirmed" status line. The card header
   badge above still carries the stage label ("WORLD CUP FINAL"), so the
   body stays focused: visual anchor + transparent status. The booking
   CTA below continues to work — TBD matches are bookable when kickoff
   is outside the 3-hour cut-off.
   ========================================================================= */
.c-match-card--milestone .c-match-card__teams {
  /* Collapse the three-column grid into a single centred column.
     featuredMatch.js replaces the team children with milestone markup;
     this rule re-flows the container to suit. */
  grid-template-columns: 1fr;
  justify-items: center;
  text-align: center;
  gap: var(--space-3);
}

.c-match-card__milestone-emblem {
  display: inline-grid;
  place-items: center;
  width: 56px;
  height: 56px;
  color: var(--accent-pitch);
}

.c-match-card__milestone-emblem svg {
  width: 48px;
  height: 48px;
}

.c-match-card__milestone-note {
  margin: 0;
  font-family: var(--font-body);
  font-weight: var(--weight-medium);
  font-size: var(--type-small);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--accent-pitch);
  line-height: var(--leading-tight);
}

.c-match-card__vs {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--type-small);
  letter-spacing: var(--tracking-wide);
  color: var(--text-tertiary);
}

/* =========================================================================
   COMPONENT · BADGE
   ========================================================================= */
.c-badge {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-2);
  font-size: var(--type-tiny);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  border-radius: var(--radius-sm);
}

.c-badge--live {
  background-color: rgba(255, 61, 61, 0.14);
  color: var(--status-live);
}

.c-badge--mill {
  background-color: rgba(197, 160, 89, 0.14);
  color: var(--accent-mill);
}

/* Muted variant — used by the 3-hour booking cut-off to label fixtures
   that have closed online reservations but remain visible in the feed. */
.c-badge--muted {
  background-color: var(--surface-overlay);
  color: var(--text-secondary);
  border: 1px solid var(--border-hairline);
}

/* =========================================================================
   UTILITY · SKELETON LOADER
   Driven by parent's aria-busy state — robust, semantic, no string matching.
   ========================================================================= */
@keyframes skeleton-pulse {
  0%,
  100% {
    opacity: 0.5;
  }
  50% {
    opacity: 1;
  }
}

[aria-busy="true"] .u-skeleton {
  background-color: var(--surface-overlay);
  background-image: none !important;
  animation: skeleton-pulse 1.5s var(--ease-in-out) infinite;
  color: transparent;
}

/* =========================================================================
   UTILITY · SKELETON ROW
   Full-width placeholder bar for list loading states. Pulses in sync
   with .u-skeleton elements when inside an [aria-busy="true"] container.
   ========================================================================= */
.u-skeleton-row {
  height: 80px;
  margin-bottom: var(--space-2);
  border-radius: var(--radius-lg);
  background-color: var(--surface-overlay);
}

.u-skeleton-row:nth-child(1) {
  opacity: 0.5;
}

.u-skeleton-row:nth-child(2) {
  opacity: 0.3;
}

[aria-busy="true"] .u-skeleton-row {
  animation: skeleton-pulse 1.5s var(--ease-in-out) infinite;
}

/* =========================================================================
   COMPONENT · ZONES TEASER
   ========================================================================= */
.c-zones-teaser {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.c-zones-teaser__header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-3);
}

/* Inherits all heading styles from base.css — no overrides needed */
.c-zones-teaser__title {
  margin: 0;
}

.c-zones-teaser__grid {
  display: grid;
  gap: var(--space-4);
}

.c-zone-card {
  background-color: var(--surface-raised);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition:
    border-color var(--duration-fast) var(--ease-out),
    transform var(--duration-fast) var(--ease-out);
}

.c-zone-card:hover {
  border-color: var(--border-strong);
}

.c-zone-card:active {
  transform: none;
}

.c-zones-teaser .c-zone-card:active {
  transform: scale(0.98);
}

.c-zone-card__media {
  aspect-ratio: 16 / 9;
  background-color: var(--surface-overlay);
  background-size: cover;
  background-position: center;
}

/* Home-page zone-teaser variants — drives the image from CSS instead of inline style */
.c-zone-card__media--bar {
  background-image: url("../img/sports-bar-1.webp");
}

.c-zone-card__media--terrace {
  background-image: url("../img/terrace-1.webp");
}

.c-zone-card__content {
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* Inherits h3 styles from base.css */
.c-zone-card__title {
  margin: 0;
}

/* Static "→" arrow appended to the home zone-teaser title, signalling that
   the whole card is clickable (the link beneath is stretched via
   .u-stretched-link). The arrow sits on the <h3>'s ::after — NOT on the
   <a>'s ::after — to avoid colliding with .u-stretched-link::after, which
   is already in use to create the card-wide click overlay. */
.c-zones-teaser .c-zone-card__title::after {
  content: "→";
  display: inline-block;
  margin-left: var(--space-2);
  color: var(--accent-pitch);
  font-weight: var(--weight-bold);
  vertical-align: text-top;
  line-height: 1;
  transition: transform var(--duration-fast) var(--ease-out);
}

.c-zones-teaser .c-zone-card:hover .c-zone-card__title::after {
  transform: translateX(4px);
}

.c-zone-card__desc {
  font-size: var(--type-small);
  line-height: var(--leading-normal);
  color: var(--text-secondary);
  margin: 0;
}

.c-zone-card__specs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-4);
  list-style: none;
  margin: 0;
  padding: var(--space-2) 0 0;
  font-size: var(--type-tiny);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--text-primary);
}

.c-zone-card__specs li {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

/* Spec icons — 14×14, currentColor so they inherit the spec text colour */
.c-zone-card__specs svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  stroke-width: 1.75;
}

/* Mill variant — amber on specs*/
.c-zone-card__specs--mill {
  color: var(--accent-mill);
}

.c-zones-teaser .c-zone-card {
  position: relative;
}

.u-stretched-link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

.u-stretched-link {
  color: inherit;
  text-decoration: none;
}

#carboncard,
#terracecard,
#vipcard {
  scroll-margin-top: 80px;
}

/* Hero lede beneath the zones page H1 — supports the inline style now removed from HTML */
.p-zones__lede {
  max-width: 44ch;
  margin-top: var(--space-2);
}
/* =========================================================================
   COMPONENT · LINK ACTION (inline tertiary links)
   ========================================================================= */
.c-link-action {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  color: var(--accent-pitch);
  font-size: var(--type-small);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  transition: color var(--duration-fast) var(--ease-out);
}

.c-link-action::after {
  content: "→";
  transition: transform var(--duration-fast) var(--ease-out);
}

.c-link-action:hover {
  color: var(--accent-pitch-dim);
}

.c-link-action:hover::after {
  transform: translateX(2px);
}

/* =========================================================================
   LAYOUT · SECTION
   Generic semantic section wrapper. Provides internal vertical rhythm.
   Used in place of bespoke per-section layout flex/gap declarations.
   ========================================================================= */
.c-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* =========================================================================
   COMPONENT · SECTION HEADER
   Universal pattern: small caption + heading on the left, optional action on
   the right. Replaces bespoke .c-zones-teaser__header.
   ========================================================================= */
.c-section-header {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--space-3);
}

.c-section-header__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}

.c-section-header__text > * {
  margin: 0;
}

/* Hero variant — used on dedicated page headers (e.g. booking, zones) */
.c-section-header--hero .c-section-header__text {
  padding-bottom: var(--space-10);
}

/* =========================================================================
   COMPONENT · STATS BAND
   Venue-credibility moment. Numeric tiles, Pitch Green numerals, uppercase
   micro-labels. Auto-fits 2→3→4 columns by viewport.
   ========================================================================= */
.c-stats-band__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--space-3);
}

.c-stat-tile {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-5) var(--space-4);
  background-color: var(--surface-raised);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-lg);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.c-stat-tile__num {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--type-stat);
  line-height: var(--leading-flat);
  letter-spacing: var(--tracking-tight);
  color: var(--accent-pitch);
}

.c-stat-tile__label {
  font-size: var(--type-tiny);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--text-secondary);
}

/* =========================================================================
   PROMO DEALS
   ========================================================================= */

.c-promo-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.c-promo-item {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background-color: var(--surface-raised);
  border: 1px solid var(--border-hairline);
  transition: transform var(--duration-fast) var(--ease-out);
  max-width: 500px;
  margin-inline: auto;
  width: 100%;
}

.c-promo-item:active {
  transform: scale(0.98);
}

.c-promo-item__link {
  display: block;
  text-decoration: none;
  color: inherit;
}

.c-promo-item__media {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  margin: 0;
}

.c-promo-item::after {
  content: "";
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.2);
  pointer-events: none;
}

.c-promo-item__cta {
  position: absolute;
  z-index: var(--z-raised);
  bottom: var(--space-4);
  right: var(--space-4);
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-3);
  background-color: rgba(18, 18, 18, 0.72);
  backdrop-filter: var(--blur-glass);
  -webkit-backdrop-filter: var(--blur-glass);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-full);
  font-family: var(--font-display);
  font-size: var(--type-tiny);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--text-primary);
  transition:
    transform var(--duration-fast) var(--ease-out),
    background-color var(--duration-fast) var(--ease-out),
    color var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out);
}

.c-promo-item:hover .c-promo-item__cta {
  transform: translateY(-2px);
  background-color: var(--accent-pitch);
  border-color: var(--accent-pitch);
  color: var(--text-on-accent);
}

/* =========================================================================
   COMPONENT · VISIT
   The page's final moment. Full-bleed, subtle Mill Amber radial inflection
   from the top edge — roots the venue in its Stowmarket locale. Title takes
   the Amber. Hours typeset as a definition list with tabular numerals.
   ========================================================================= */
.c-visit {
  position: relative;
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  margin-top: var(--space-4);
  padding: var(--space-10) var(--space-5) var(--space-12);
  background-color: var(--surface-base);
  background-image: radial-gradient(
    ellipse 110% 80% at 50% 0%,
    rgba(197, 160, 89, 0.08),
    transparent 65%
  );
  border-top: 1px solid var(--border-hairline);
}

.c-visit__inner {
  max-width: var(--max-content);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-7);
}

.c-visit__header {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.c-visit__header > * {
  margin: 0;
}

.c-visit__title {
  color: var(--accent-mill);
}

.c-visit__body {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-6);
}

.c-visit__location {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.c-visit__address {
  font-style: normal;
  font-size: var(--type-body);
  line-height: var(--leading-relaxed);
  color: var(--text-secondary);
  margin: 0;
}

.c-visit__address strong {
  display: block;
  font-family: var(--font-display);
  font-size: var(--type-h3);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-primary);
  margin-bottom: var(--space-2);
}

.c-visit__hours {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: var(--space-5);
  row-gap: var(--space-2);
  font-size: var(--type-small);
  margin: 0;
  border-top: 1px dashed var(--border-hairline);
  padding-top: var(--space-3);
}

.c-visit__hours dt {
  font-size: var(--type-tiny);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--text-primary);
  align-self: center;
}

.c-visit__hours dd {
  margin: 0;
  font-variant-numeric: tabular-nums;
  color: var(--text-secondary);
}

.c-visit__hourscopy {
  margin: 0;
  padding-top: var(--space-3);
  font-size: var(--type-tiny);
  line-height: var(--leading-normal);
  font-style: italic;
  color: var(--text-secondary);
  opacity: 0.75;
}

.c-visit__links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.c-visit__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--tap-min);
  padding: var(--space-2) 0;
  font-size: var(--type-body);
  font-weight: var(--weight-medium);
  color: var(--text-primary);
  transition: color var(--duration-fast) var(--ease-out);
}

.c-visit__link:hover {
  color: var(--accent-mill);
}

.c-visit__link svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--accent-mill);
  stroke-width: 1.75;
}

/* =========================================================================
   COMPONENT: MOBILE NAV OVERLAY
   ========================================================================= */
.c-mobile-nav {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal); /* Sits above everything including bottom nav */
  background-color: var(--surface-base);
  padding: var(--space-20) var(--space-6) var(--space-12);
  display: flex;
  flex-direction: column;

  /* Safety net for short viewports (iPhone SE, landscape phones): allow the
     overlay to scroll if link list + footer exceed the viewport, so the
     social row at the bottom is always reachable. overscroll-behavior keeps
     the scroll contained — no chaining back to the (already-locked) body. */
  overflow-y: auto;
  overscroll-behavior: contain;

  /* Initial hidden state */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-10px);
  transition:
    opacity var(--duration-base) var(--ease-out),
    transform var(--duration-base) var(--ease-out),
    visibility var(--duration-base);
}

/* Open State */
.is-menu-open .c-mobile-nav {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

/* Consolidated .is-menu-open .c-header — single source of truth */
.is-menu-open .c-header {
  z-index: calc(var(--z-modal) + 1);
  position: fixed;
  background-color: var(--surface-base);
}

.c-mobile-nav__inner {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.c-mobile-nav__list {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.c-mobile-nav__link {
  display: flex; /* ensure tap target fills available width */
  align-items: center;
  min-height: var(--tap-min); /* 44px floor */
  padding-block: var(--space-1);
  font-size: var(--type-hero);
  text-decoration: none;
  color: var(--text-tertiary); /* Dimmed when not active */
  transition: color var(--duration-fast) var(--ease-out);
}

.c-mobile-nav__link:active {
  color: var(--accent-pitch);
}

/* The Active Page Highlight */
.c-mobile-nav__link.is-active {
  color: var(--accent-pitch); /* Our signature neon green */
}

/* Hover/Active states for non-active links */
.c-mobile-nav__link:not(.is-active):active {
  color: var(--text-primary);
}

.c-mobile-nav__link:hover {
  color: var(--text-primary);
  transition: color var(--duration-fast) var(--ease-out);
}

.c-mobile-nav__footer {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  border-top: 1px solid var(--border-hairline);
  padding-top: var(--space-6);
  color: var(--text-tertiary);
}

/* =========================================================================
   COMPONENT · MOBILE-NAV SOCIALS
   Horizontal row of icon-only links in the overlay footer. 44px tap targets
   keep them comfortably hittable beside the dense link list above. Hover
   shifts to Pitch Green so they read as interactive, matching the rest of
   the brand's interaction language.
   ========================================================================= */
.c-mobile-nav__socials {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.c-mobile-nav__social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tap-min);
  height: var(--tap-min);
  border-radius: var(--radius-md);
  color: var(--accent-pitch-dim);
  transition:
    color var(--duration-fast) var(--ease-out),
    background-color var(--duration-fast) var(--ease-out);
}

.c-mobile-nav__social:hover,
.c-mobile-nav__social:focus-visible {
  color: var(--accent-pitch);
  background-color: rgba(255, 255, 255, 0.04);
}

.c-mobile-nav__social svg {
  width: 30px;
  height: 30px;
}

/* =========================================================================
   HAMBURGER BUTTON · UNIFIED COMPONENT
   Handles: X-Morph, Sticky-Hover Fix, and Precise Alignment
   ========================================================================= */

.c-header__more svg {
  overflow: visible;
  display: block;
}

.c-header__more svg line {
  /* 1. Base Stroke Style */
  stroke: var(--text-primary);
  stroke-width: 2;
  stroke-linecap: round;

  /* 2. Animation Logic */
  transition:
    stroke var(--duration-fast) var(--ease-out),
    transform var(--duration-base) var(--ease-out),
    opacity var(--duration-base) var(--ease-out);
  transform-origin: center;
  transform-box: fill-box;
}

/* --- State: Menu Open (The "X") --- */

/* Morph lines into 'X' and turn Pitch Green */
.is-menu-open .c-header__more svg line {
  stroke: var(--accent-pitch);
}

.is-menu-open .c-header__more svg line:nth-child(1) {
  transform: translateY(5px) rotate(45deg);
}

.is-menu-open .c-header__more svg line:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}

.is-menu-open .c-header__more svg line:nth-child(3) {
  transform: translateY(-5px) rotate(-45deg);
}

/* --- State: Interaction (Hover/Sticky fix) --- */

/* Desktop only: Highlight on hover */
@media (hover: hover) {
  .c-header__more:hover svg line {
    stroke: var(--accent-pitch);
  }
}

/* Ensure color resets instantly when closed on mobile */
body:not(.is-menu-open) .c-header__more svg line {
  stroke: var(--text-primary);
}

/* =========================================================================
   ZONES PAGE
   These rules only apply to the Zones page to protect the Home layout.
   ========================================================================= */
/* =========================================================================
   PAGE SPECIFIC · ZONES (The Space)
   Additive rules to maximize atmosphere without breaking index.html
   ========================================================================= */

/* Solves the fixed-header overlap and adds page-level breathing room */
.p-zones {
  padding-block: var(--space-4) 0;
}

.c-section-header--hero {
  margin-bottom: var(--space-10);
}

.c-section-header--hero .u-display {
  font-size: var(--type-display-fluid);
  line-height: var(--leading-tight);
}

/* =========================================================================
   COMPONENT · FUNNEL HINT
   Transient notice surfaced by lib/funnelHint.js when the book.html gate
   redirected the user with a context message. Auto-dismisses; remains
   inert (hidden) on direct visits with no stashed hint. The component
   is placed at the top of the page content so it reads as page-level
   feedback rather than tied to any particular section.
   ========================================================================= */
.c-funnel-hint {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  margin-block: 0 var(--space-6);
  background: rgba(57, 255, 20, 0.06);
  border: 1px solid var(--border-accent);
  border-radius: var(--radius-md);
  color: var(--text-primary);
}

.c-funnel-hint[hidden] {
  display: none;
}

.c-funnel-hint__icon {
  flex-shrink: 0;
  display: inline-grid;
  place-items: center;
  width: var(--space-6);
  height: var(--space-6);
  border-radius: var(--radius-full);
  background-color: var(--border-accent);
  color: var(--text-on-accent);
  font-weight: var(--weight-bold);
  font-size: var(--type-small);
  line-height: 1;
}

.c-funnel-hint__text {
  flex: 1;
  margin: 0;
  font-size: var(--type-small);
  line-height: var(--leading-normal);
}

/* Dismiss tap target: 28×28 visual via 4×8 padding around a 20px glyph
   gives ~28×28 with comfortable surrounding space; combined with the
   adjacent text it meets WCAG AA's "adequate space" exception for
   secondary controls. The cursor + hover/focus states make affordance
   obvious. */
.c-funnel-hint__dismiss {
  flex-shrink: 0;
  background: transparent;
  border: none;
  color: var(--text-secondary);
  font-size: var(--type-h3);
  line-height: 1;
  padding: var(--space-1) var(--space-2);
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition:
    color var(--duration-fast) var(--ease-out),
    background-color var(--duration-fast) var(--ease-out);
}

.c-funnel-hint__dismiss:hover,
.c-funnel-hint__dismiss:focus-visible {
  color: var(--text-primary);
  background-color: var(--surface-overlay);
  outline: none;
}

/* =========================================================================
   COMPONENT · FIXTURE BANNER (zones page)
   Mounted when the user arrives at zones.html with fixture context. Mirrors
   the booking-summary glass-card treatment for visual continuity across the
   funnel (Fixture → Zones → Book).
   ========================================================================= */
.c-fixture-banner {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--space-2) var(--space-4);
  padding: var(--space-4) var(--space-5);
  margin-block: 0 var(--space-8);
  background: rgba(30, 30, 30, 0.5);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border: 1px solid var(--border-hairline);
  border-top: 1px solid var(--border-accent);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-summary);
  position: relative;
  overflow: hidden;
  animation: slideInDown var(--duration-deliberate) var(--ease-out);
}

/* Diagonal sheen — matches the summary card's signature highlight band. */
.c-fixture-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    145deg,
    transparent 0%,
    transparent 30%,
    rgba(57, 255, 20, 0.04) 32%,
    rgba(57, 255, 20, 0.09) 45%,
    rgba(197, 160, 89, 0.05) 50%,
    rgba(57, 255, 20, 0.04) 55%,
    transparent 58%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 1;
}

/* Soft blur orb — same Pitch/Mill radial as the summary, mirrored to the
   opposite corner so two adjacent surfaces don't render identically. */
.c-fixture-banner::after {
  content: "";
  position: absolute;
  top: -40%;
  right: -15%;
  width: 180px;
  height: 180px;
  background: radial-gradient(
    circle,
    rgba(57, 255, 20, 0.18) 0%,
    rgba(197, 160, 89, 0.06) 40%,
    transparent 70%
  );
  filter: blur(50px);
  pointer-events: none;
  z-index: 0;
}

/* Banner match block — mirrors the booking-summary title pattern: the
   container is a block, flags + slug flow inline-block / inline so when
   the slug wraps the flags follow the text positions instead of being
   stranded at the flex-allocated box edges. This also applies cleanly
   when fixturesPage's zone-banner uses the same class for a flag-less
   "MAIN BAR" label — the layout collapses to a centered text block. */
.c-fixture-banner__match {
  position: relative;
  z-index: 2;
  display: block;
  text-align: center;
  min-width: 0;
}

.c-fixture-banner__flag {
  width: 28px;
  aspect-ratio: 3 / 2;
  border-radius: var(--radius-sm);
  background-color: var(--surface-overlay);
  background-size: cover;
  background-position: center;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  display: inline-block;
  vertical-align: middle;
}

/* TBD knockout banner — zonesPage.js promotes flag-A to a trophy emblem
   host (innerHTML replaced with inline SVG) and hides flag-B. This rule
   neutralises the flag-rectangle styling so the slot becomes a clean
   icon container that inherits the accent colour. Visual outcome:
   `[trophy] WORLD CUP FINAL  ·  Sun 19 Jul · 20:00` — one cohesive
   line, no orphan flag-coloured boxes. */
.c-fixture-banner__flag.c-fixture-banner__flag-trophy {
  width: auto;
  aspect-ratio: auto;
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  color: var(--accent-pitch);
  line-height: 0;
}

.c-fixture-banner__flag-trophy svg {
  width: 28px;
  height: 28px;
  vertical-align: middle;
}

.c-fixture-banner__match #banner-flag-a {
  margin-right: var(--space-2);
}

.c-fixture-banner__match #banner-flag-b {
  margin-left: var(--space-2);
}

.c-fixture-banner__slug {
  font-family: var(--font-display);
  font-size: clamp(1rem, 4.5vw, var(--type-h3));
  font-weight: var(--weight-bold);
  line-height: 1.2;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-primary);
  /* Content-width block capped at calc(100% - 5.5rem) to reserve room
     for both 28px flags + margins, so flag B never wraps alone. */
  display: inline-block;
  width: max-content;
  max-width: calc(100% - 5.5rem);
  overflow-wrap: break-word;
  text-wrap: balance;
  vertical-align: middle;
}

.c-fixture-banner__hint {
  position: relative;
  z-index: 2;
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.c-fixture-banner__change {
  color: var(--accent-pitch);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  transition: color var(--duration-fast) var(--ease-out);
}

.c-fixture-banner__change:hover {
  color: var(--accent-pitch-dim);
}

/* =========================================================================
   COMPONENT · ZONE CUE
   Subordinate heading shown by zonesPage.js when the user arrives at
   zones.html via a fixture deep-link. Pairs with the fixture banner to
   make the next step explicit: "you've chosen the match — now choose
   where to watch it". Hidden by default; revealed alongside the banner.
   ========================================================================= */
.c-zone-cue {
  margin: 0 0 var(--space-8);
  font-family: var(--font-display);
  font-size: var(--type-card-title);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-primary);
  text-align: center;
}

/* --- The Feed --- */
.c-zone-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  padding-bottom: var(--space-16); /* Large gaps to separate 'Environments' */
}

.p-zones .c-zone-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.p-zones .c-zone-card__media {
  position: relative;
  aspect-ratio: 16 / 10; /* Cinematic widescreen ratio */
  border-radius: var(--radius-lg);
  overflow: hidden;
  background-color: var(--surface-raised);
}

.p-zones .c-zone-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration-base) var(--ease-out);
}

.p-zones .c-zone-card__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* Showcase Overlay: Gradient ensures labels on images are legible */
.p-zones .c-zone-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(18, 18, 18, 0.7) 0%,
    transparent 40%
  );
  display: flex;
  align-items: flex-end;
  padding: var(--space-4);
  pointer-events: none;
}

/* High-end glassmorphism tags */
.c-tag {
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  font-size: var(--type-tiny);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  border: 1px solid rgba(255, 255, 255, 0.1);
  pointer-events: auto;
}

.c-tag--pitch {
  background-color: var(--accent-pitch);
  color: var(--text-on-accent);
}

.c-tag--glass {
  background-color: rgba(18, 18, 18, 0.6);
  backdrop-filter: var(--blur-glass);
  -webkit-backdrop-filter: var(--blur-glass);
  color: var(--text-primary);
}

.p-zones .c-zone-card__content .u-display {
  font-size: var(--type-card-title);
  letter-spacing: var(--tracking-tight);
}

/* =========================================================================
   COMPONENT: ZONE META-DATA (The "Spec Row")
   ========================================================================= */
.c-zone-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3) var(--space-5);
  margin-block: var(--space-2) var(--space-4);
  padding-block: var(--space-3);
  border-top: 1px solid var(--border-hairline);
  list-style: none;
  padding-left: 0;
}

.c-zone-meta__item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--type-tiny); /* Keep it small and scannable */
  color: var(--text-secondary);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

/* Size and color the SVG icons */
.c-zone-meta__item svg {
  width: 14px;
  height: 14px;
  stroke: var(--accent-pitch); /* Tiny pop of neon green for branding */
  opacity: 0.8;
}

/* Ergonomics: Thumb-friendly full-width buttons */
.p-zones .c-zone-card .c-button {
  width: 100%;
}

/* =========================================================================
   COMPONENT · ZONE SLIDER (Native Swiper)
   ========================================================================= */

.c-zone-card__slider {
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  height: 100%;
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: none;
  scrollbar-width: none;
  touch-action: pan-x pan-y;
  transform: translateZ(0);
  will-change: transform, scroll-position;
}

.c-zone-card__slider::-webkit-scrollbar {
  display: none;
}

.c-zone-card__slider img {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  object-fit: cover;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

.c-zone-card__pagination {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  display: flex;
  gap: 6px;
  z-index: 2;
  padding: 6px 8px;
  background: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(4px);
  border-radius: var(--radius-full);
}

.c-zone-card__dot {
  width: 5px;
  height: 5px;
  background-color: rgba(255, 255, 255, 0.4);
  border-radius: var(--radius-full);
  transition:
    transform var(--duration-fast) var(--ease-out),
    background-color var(--duration-fast) var(--ease-out);
}

.c-zone-card__dot.is-active {
  background-color: var(--accent-pitch);
  transform: scale(1.4);
  box-shadow: 0 0 8px var(--accent-pitch);
}

/* =========================================================================
   COMPONENT: ZONE SLIDER (Native Swiper & Hints)
   ========================================================================= */

/* 1. The Kinetic Nudge Animation (Recipe) */
@keyframes swipeNudge {
  0%,
  100% {
    transform: translateX(0);
  }
  15% {
    transform: translateX(-6%);
  }
  30% {
    transform: translateX(0);
  }
}

@keyframes pulseChevron {
  0%,
  100% {
    transform: translate(0, -50%);
    opacity: 0.5;
  }
  50% {
    transform: translate(6px, -50%);
    opacity: 0.9;
  }
}

[data-component="zone-slider"] .c-zone-card__slider {
  animation: swipeNudge 0.8s var(--ease-spring) 1.5s 1;
}

[data-component="zone-slider"] .c-zone-card__media::after {
  content: "›";
  position: absolute;
  top: 50%;
  right: var(--space-4);
  transform: translateY(-50%);
  font-size: 3rem;
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  color: var(--accent-pitch-dim);
  text-shadow:
    0 0 12px rgba(57, 255, 20, 0.4),
    0 2px 8px rgba(0, 0, 0, 0.55);
  pointer-events: none;
  z-index: var(--z-raised);
  animation: pulseChevron 2s infinite var(--ease-in-out);
  transition: opacity var(--duration-fast) var(--ease-out);
}

/* 5. Fade out permanently when user interacts */
[data-component="zone-slider"].is-interacted .c-zone-card__media::after {
  opacity: 0;
  animation: none !important;
  transform: none !important;
  display: none;
}
/* =========================================================================
   ATMOSPHERE PORTAL
   ========================================================================= */
.c-atmosphere-portal {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  margin-top: var(--space-16);
  background-color: var(--surface-base);
  overflow: hidden;
  border: none;
  outline: none;
  transform: translateZ(0);
}

.c-atmosphere-portal::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 20vh;
  background: linear-gradient(
    to bottom,
    var(--surface-base) 0%,
    transparent 100%
  );
  z-index: 2;
  pointer-events: none;
}

.c-atmosphere-portal__inner {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1.2;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

@media (min-width: 768px) {
  .c-atmosphere-portal__inner {
    aspect-ratio: 21 / 9;
  }
}

.c-atmosphere-portal__video {
  position: absolute;
  inset: -2px;
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  object-fit: cover;
  transform: scale(1.01);
  filter: brightness(0.6) saturate(1.2);
}

.c-atmosphere-portal__vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at center,
    transparent 20%,
    var(--surface-base) 120%
  );
  pointer-events: none;
  z-index: 1;
}

.c-atmosphere-portal__content {
  position: relative;
  z-index: 2;
  padding: var(--space-8) var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  background: linear-gradient(
    to top,
    var(--surface-base) 20%,
    transparent 100%
  );
}

.c-atmosphere-portal__text h2 {
  font-size: clamp(3rem, 12vw, 5rem);
  line-height: 0.85;
  letter-spacing: var(--tracking-tight);
}

/* =========================================================================
   COMPONENT: BOOKING ENGINE
   ========================================================================= */

.p-booking {
  max-width: 600px;
  margin-inline: auto;
  padding-block: var(--space-4) 0;
  margin-bottom: var(--space-8);
}

.p-booking__lede {
  max-width: 44ch;
  margin-top: var(--space-2);
}

/* Native-first polish: page lifts the summary when the form below is focused */
.p-booking:has(.c-booking-form:focus-within) .c-booking-summary {
  box-shadow: var(--shadow-summary), var(--glow-pitch);
}

/* 1. The Summary Card — stacked receipt of two full-width rows. */
.c-booking-summary {
  background: rgba(30, 30, 30, 0.5);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border: 1px solid var(--border-hairline);
  border-top: 1px solid var(--border-accent);
  border-radius: var(--radius-lg);
  padding: clamp(var(--space-4), 4vw, var(--space-6));
  margin-bottom: var(--space-8);
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-summary);
  transition: box-shadow var(--duration-base) var(--ease-out);
  animation: slideInDown var(--duration-deliberate) var(--ease-out);
  /* Inner layout: vertical column of caption + match row + zone row. */
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

@keyframes slideInDown {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.c-booking-summary::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    145deg,
    transparent 0%,
    transparent 30%,
    rgba(57, 255, 20, 0.04) 32%,
    rgba(57, 255, 20, 0.09) 45%,
    rgba(197, 160, 89, 0.05) 50%,
    rgba(57, 255, 20, 0.04) 55%,
    transparent 58%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 1;
}

.c-booking-summary::after {
  content: "";
  position: absolute;
  top: -40%;
  left: -15%;
  width: 180px;
  height: 180px;
  background: radial-gradient(
    circle,
    rgba(57, 255, 20, 0.18) 0%,
    rgba(197, 160, 89, 0.06) 40%,
    transparent 70%
  );
  filter: blur(50px);
  pointer-events: none;
  z-index: 0;
}

/* Caption sits above both rows as the panel header. */
.c-booking-summary__caption {
  position: relative;
  z-index: 2;
  margin: 0;
}

/* Each row: defined flex container with the data left, "Change" link right.
   Subtle hairline separator between rows; cleared on the last child so the
   panel doesn't carry a dangling border above the form. */
.c-booking-summary__row {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--border-hairline);
}

.c-booking-summary__row:last-child {
  padding-bottom: 0;
  border-bottom: none;
}

/* Data side of each row.
   - column by default (match: flags+title stacked above meta)
   - --row modifier flips to horizontal for the zone (thumbnail + label)
   - min-width:0 lets the title truncate inside without bursting the row */
.c-booking-summary__data {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.c-booking-summary__data--row {
  flex-direction: row;
  align-items: center;
  gap: var(--space-3);
}

/* Match summary title — flags + text span flow INSIDE the h3 as
   inline-block so flags track the text on every wrapped line (a flex
   layout orphaned flag B on wrap). Reads as one stream: "[🇪]ENG VS BRA[🇧]". */
.c-booking-summary__match {
  display: block;
  margin: 0;
  text-align: center;
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  /* Matches #summary-title so the line box stays predictable on wrap. */
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--text-primary);
}

.c-booking-summary .c-fixture-row__flag {
  width: 24px;
  height: 16px;
  display: inline-block;
  vertical-align: middle;
}

/* TBD summary — flag-A hosts the trophy emblem (booking.js swaps its
   innerHTML), flag-B hides. Resets the flag-rectangle styling to a
   colour-inheriting icon slot. */
.c-booking-summary .c-fixture-row__flag.c-booking-summary__flag-trophy {
  width: auto;
  height: auto;
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  color: var(--accent-pitch);
  line-height: 0;
  margin-right: var(--space-2);
}

.c-booking-summary__flag-trophy svg {
  width: 24px;
  height: 24px;
  vertical-align: middle;
}

.c-booking-summary #summary-flag-a {
  margin-right: var(--space-2);
}

.c-booking-summary #summary-flag-b {
  margin-left: var(--space-2);
}

.c-booking-summary #summary-title {
  /* Content-width block capped at calc(100% - 5rem) to reserve room for
     both flags + margins, so flag B never wraps alone. Long titles wrap
     internally (text-wrap: balance) with flag B pinned to the right edge. */
  display: inline-block;
  width: max-content;
  max-width: calc(100% - 5rem);
  vertical-align: middle;
  font-size: clamp(1.125rem, 5vw, 2.5rem);
  line-height: 1.2;
  overflow-wrap: break-word;
  text-wrap: balance;
}

#summary-meta {
  margin: 0;
}

/* 2. Zone visual anchor — sits inline with its label inside the zone row.
   The frame and image styling are preserved; layout properties move to the
   row engine above. */
.c-zone-snapshot__frame {
  position: relative;
  flex: 0 0 auto;
  width: clamp(72px, 22vw, 96px);
  aspect-ratio: 16 / 10;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--border-hairline);
  background-color: var(--surface-overlay);
  box-shadow: var(--shadow-card);
}

.c-zone-snapshot__frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(18, 18, 18, 0.5) 0%,
    transparent 60%
  );
  pointer-events: none;
  z-index: 1;
}

.c-zone-snapshot__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.85;
  transition:
    opacity var(--duration-base) var(--ease-out),
    transform var(--duration-base) var(--ease-out);
}

/* ZONE SNAPSHOT — Image Load Failure Fallback State
   Triggers when booking.js appends the state class to the parent container */
.c-zone-snapshot--failed #zone-snapshot-label {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 120px;
  background-color: var(--surface-overlay);
  border-radius: var(--radius-md);
  font-family: var(--font-display);
  font-size: var(--type-h3);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  color: var(--accent-pitch);
  letter-spacing: var(--tracking-wide);

  /* Defensive styling: Ensure the text fills out the box beautifully */
  width: 100%;
  padding: var(--space-4, 1rem);
  box-sizing: border-box;
}

.c-booking-summary:hover .c-zone-snapshot__img {
  opacity: 1;
  transform: scale(1.02);
}

#zone-snapshot-label {
  font-size: var(--type-tiny);
  font-weight: var(--weight-bold);
  color: var(--accent-pitch);
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  line-height: var(--leading-tight);
  min-width: 0;
}

[hidden] {
  display: none !important;
}

/* Very small screens — tighten gaps + shrink the zone snapshot so the
   summary row never overflows. Title font-size is left to the base
   clamp. */
@media (max-width: 370px) {
  .c-booking-summary {
    gap: var(--space-3);
  }

  .c-booking-summary__row {
    gap: var(--space-3);
    padding-bottom: var(--space-3);
  }

  .c-zone-snapshot__frame {
    width: clamp(56px, 18vw, 72px);
  }
}

/* 3. Form Hierarchy & Select Icons */
.c-booking-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.c-form-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* Policy micro-copy beneath the date/time row. Hidden by default; revealed
   by booking.js whenever a fixture is selected. Left-edge accent + small
   padlock make the rationale legible at a glance without competing with
   the primary form controls. */
.c-policy-note {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  margin: 0;
  padding: var(--space-3) var(--space-4);
  background-color: var(--surface-raised);
  border: 1px solid var(--border-hairline);
  border-left: 2px solid var(--accent-pitch);
  border-radius: var(--radius-md);
  color: var(--text-muted);
  font-size: var(--type-caption);
  line-height: var(--leading-snug);
}

.c-policy-note[hidden] {
  display: none;
}

.c-policy-note__icon {
  flex: 0 0 14px;
  width: 14px;
  height: 14px;
  margin-top: 2px;
  color: var(--accent-pitch);
}

/* =========================================================================
   ZONES PAGE · STEP-2 CUE
   The existing #zone-cue heading carries a step indicator above the
   display heading. The kicker uses `.c-funnel-step` (defined below) for
   typography; this rule only handles its layout — forced to its own
   line above the heading for clean two-tier hierarchy.
   ========================================================================= */
.c-zone-cue__step {
  display: block;
  margin-bottom: var(--space-2);
}

.c-zone-cue__heading {
  display: block;
  font-size: var(--type-h2);
}

/* =========================================================================
   FUNNEL STEP INDICATOR · "Step N of 3" wayfinding label, shared across
   the zones / fixtures / book funnel kickers. Bolder + wider-tracked
   than a caption so it reads as the wayfinding anchor, not a helper.
   ========================================================================= */
.c-funnel-step {
  font-family: var(--font-body);
  font-size: var(--type-small);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-widest);
  line-height: var(--leading-tight);
  text-transform: uppercase;
  color: var(--accent-pitch);
}

/* =========================================================================
   BOOKING SUMMARY · CHANGE LINK
   Icon-only edit affordance — keeps row width for the match title on
   narrow viewports. aria-label carries the full action name for SR; the
   36×36 tap target meets WCAG AA.
   ========================================================================= */
.c-booking-summary__change {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: var(--radius-md);
  color: var(--text-tertiary);
  background-color: transparent;
  text-decoration: none;
  transition:
    color var(--duration-fast) var(--ease-out),
    background-color var(--duration-fast) var(--ease-out);
}

.c-booking-summary__change-icon {
  width: 18px;
  height: 18px;
  display: block;
}

.c-booking-summary__change:hover,
.c-booking-summary__change:focus-visible {
  color: var(--accent-pitch);
  background-color: var(--surface-overlay);
  outline: none;
}

/* =========================================================================
   BOOKING FORM · RECEIPT MODE · the stepper is the only visible field
   (match/zone/date/time ride as hidden inputs), so its glow signals
   "this is the only action left".
   ========================================================================= */
.c-booking-form .c-stepper {
  border-color: var(--border-accent);
  box-shadow:
    0 0 0 1px var(--border-accent),
    0 6px 20px rgba(57, 255, 20, 0.14);
}

/* =========================================================================
   MOBILE ERGONOMICS · KEYBOARD CLEARANCE
   When the on-screen keyboard opens (guest input focused), the browser
   scrolls the focused element into view. scroll-margin-bottom keeps the
   submit button from being flush against the keyboard's top edge once the
   user has typed and is reaching for "Reserve / Confirm".
   ========================================================================= */
.c-booking-form .c-button[type="submit"] {
  scroll-margin-bottom: var(--space-12);
  margin-top: var(--space-2);
}

@media (max-width: 768px) {
  /* Extra bottom buffer below the form so the submit button can always
     scroll above the bottom nav + virtual keyboard without clipping. */
  .c-booking-form {
    padding-bottom: var(--space-12);
  }
}

/* =========================================================================
   COMPONENT · STEPPER
   Numeric stepper with thumb-friendly +/- buttons. Native input retains form
   semantics (name, required, min/max); buttons are the interaction surface.
   ========================================================================= */
.c-stepper {
  display: grid;
  grid-template-columns: var(--tap-min) 1fr var(--tap-min);
  align-items: stretch;
  background-color: var(--surface-raised);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: border-color var(--duration-fast) var(--ease-out);
}

.c-stepper:hover {
  border-color: var(--border-strong);
}

.c-stepper:focus-within {
  border-color: var(--border-accent);
}

/* Subtle attention cue applied by booking.js when the user arrives at
   book.html with BOTH match and zone pre-selected — the stepper is the only
   required field remaining. JS removes the class on first interaction so
   the cue never lingers once the user has engaged. */
.c-stepper--highlight {
  border-color: var(--border-accent);
  box-shadow:
    0 0 0 1px var(--border-accent),
    0 6px 20px rgba(57, 255, 20, 0.14);
}

.c-stepper__btn {
  font-family: var(--font-display);
  font-size: var(--type-h2);
  font-weight: var(--weight-bold);
  line-height: 1;
  color: var(--text-primary);
  background-color: transparent;
  min-height: var(--tap-min);
  transition:
    background-color var(--duration-fast) var(--ease-out),
    color var(--duration-fast) var(--ease-out),
    transform var(--duration-fast) var(--ease-out);
}

.c-stepper__btn:hover {
  background-color: var(--surface-overlay);
}

.c-stepper__btn:active {
  background-color: var(--surface-overlay);
  color: var(--accent-pitch);
  transform: scale(0.92);
}

.c-stepper__btn:disabled {
  color: var(--text-tertiary);
  cursor: not-allowed;
  background-color: transparent;
  transform: none;
}

.c-stepper__input {
  appearance: none;
  -moz-appearance: textfield;
  text-align: center;
  border: none;
  background-color: transparent;
  min-height: var(--tap-min);
  width: 100%;
  padding: 0;
  font-family: var(--font-body);
  font-size: var(--type-body);
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
}

.c-stepper__input::-webkit-outer-spin-button,
.c-stepper__input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.c-stepper__input:focus {
  outline: none;
}

/* Overflow "Call the venue" link beneath the stepper. Accent-tinted and
   underlined so it reads as tappable; kept on one line so the number
   never wraps. Focus falls through to the global :focus-visible outline. */
.c-guests-call {
  color: var(--accent-pitch);
  font-weight: var(--weight-semibold);
  text-decoration: underline;
  text-underline-offset: 2px;
  white-space: nowrap;
}

.c-guests-call:hover {
  color: var(--accent-pitch-dim);
}

/* =========================================================================
   COMPONENT · FIXTURES LIST
   Shared across home teaser and full fixtures page.
   ========================================================================= */
.c-fixtures-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* =========================================================================
   COMPONENT · FIXTURE ROW
   Premium scannable card. Used in home teaser and fixtures page.
   ========================================================================= */
.c-fixture-row {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: var(--space-4);
  row-gap: var(--space-2);
  padding: var(--space-5);
  background-color: var(--surface-raised);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-lg);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  transition:
    border-color var(--duration-fast) var(--ease-out),
    background-color var(--duration-fast) var(--ease-out),
    transform var(--duration-fast) var(--ease-out);
}

.c-fixture-row:hover {
  border-color: var(--border-strong);
  background-color: var(--surface-overlay);
}

.c-fixture-row:active {
  transform: scale(0.98);
}

/* Milestone row (TBD knockout fixture) — subtle border-accent so the
   marquee event reads as distinguished from group-stage rows without
   over-decorating. The internal trophy + accent "Teams TBC" caption
   are the primary visual differentiators; this is a quiet supporting
   cue. Hover deepens the accent in step with the standard hover. */
.c-fixture-row--milestone {
  border-color: rgba(57, 255, 20, 0.22);
}

.c-fixture-row--milestone:hover {
  border-color: var(--border-accent);
}

.c-fixture-row__teams {
  grid-row: 1;
  grid-column: 1;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
}

.c-fixture-row__team {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-weight: var(--weight-semibold);
  font-size: var(--type-small);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--text-primary);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Responsive name/TLA toggle. Both variants render into the DOM; CSS
   chooses which is visible by viewport width. `display: none` removes
   the hidden variant from the accessibility tree as well as the visual
   flow, so screen readers only ever hear one. Below 600px the row is
   cramped — flag + 3-letter TLA + VS keeps everything on a single line
   without ellipsizing mid-word. At 600px+ the full team name takes
   over since the row has room. */
.c-fixture-row__name {
  display: inline;
}

.c-fixture-row__tla {
  display: none;
}

@media (max-width: 599px) {
  .c-fixture-row__name {
    display: none;
  }
  .c-fixture-row__tla {
    display: inline;
  }
}

.c-fixture-row__flag {
  width: 32px;
  aspect-ratio: 3 / 2;
  border-radius: var(--radius-sm);
  background-color: var(--surface-overlay);
  background-size: cover;
  background-position: center;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  flex-shrink: 0;
}

/* =========================================================================
   MILESTONE FIXTURE ROW (TBD / unconfirmed-teams variant)
   When a knockout fixture exists with no confirmed teams yet (true for
   every R32/R16/QF/SF/Final row pre-bracket-resolution), the row swaps
   its flag-name-VS-name-flag layout for a trophy emblem + stage label +
   "Teams TBC" sub-line. The stage IS the booking value when teams are
   unknown — "WORLD CUP FINAL" is the product, not a TBD VS TBD
   placeholder. Lives at the same grid slot as `__teams` (row 1, col 1)
   so the meta line + arrow keep the same alignment across both row
   variants — visual rhythm of the schedule is preserved.
   ========================================================================= */
.c-fixture-row__milestone {
  grid-row: 1;
  grid-column: 1;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
}

.c-fixture-row__milestone-emblem {
  flex-shrink: 0;
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  color: var(--accent-pitch);
}

.c-fixture-row__milestone-emblem svg {
  width: 24px;
  height: 24px;
}

.c-fixture-row__milestone-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.c-fixture-row__milestone-stage {
  font-family: var(--font-body);
  font-weight: var(--weight-semibold);
  font-size: var(--type-small);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--text-primary);
  line-height: var(--leading-tight);
}

.c-fixture-row__milestone-note {
  font-family: var(--font-body);
  font-weight: var(--weight-medium);
  font-size: var(--type-tiny);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--accent-pitch);
  line-height: var(--leading-tight);
}

.c-fixture-row__vs {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--type-tiny);
  letter-spacing: var(--tracking-wide);
  color: var(--text-tertiary);
  text-transform: uppercase;
  flex-shrink: 0;
}

.c-fixture-row__meta {
  grid-row: 2;
  grid-column: 1;
  margin: 0;
  font-size: var(--type-tiny);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
  display: flex;
  align-items: center;
  gap: var(--space-1);
  flex-wrap: wrap;
}

.c-fixture-row__arrow {
  grid-row: 1 / -1;
  grid-column: 2;
  align-self: center;
  color: var(--accent-pitch);
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  transition: transform var(--duration-fast) var(--ease-out);
}

.c-fixture-row:hover .c-fixture-row__arrow {
  transform: translateX(4px);
}

/* Locked row — match is inside the 3-hour booking cut-off. Rendered as a
   <div> (not <a>) by the JS feed; this rule strips the interactive
   affordances so the look matches the lack of behaviour. The "Walk-ins
   Only" badge takes the same grid slot the arrow occupies on bookable
   rows, keeping the two row variants pixel-aligned in the feed. */
.c-fixture-row--locked {
  cursor: default;
  opacity: 0.85;
}

.c-fixture-row--locked:hover {
  border-color: var(--border-hairline);
  background-color: var(--surface-raised);
}

.c-fixture-row--locked:active {
  transform: none;
}

.c-fixture-row__lock-badge {
  grid-row: 1 / -1;
  grid-column: 2;
  align-self: center;
  flex-shrink: 0;
}

/* =========================================================================
   COMPONENT · LOADER & SPINNER
   ========================================================================= */
.c-loader {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  color: var(--text-tertiary);
  width: 100%;
  list-style: none;
}

.c-spinner {
  width: 24px;
  height: 24px;
  border: 3px solid var(--border-strong);
  border-top-color: var(--accent-pitch);
  border-radius: var(--radius-full);
  animation: spin 0.6s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* Page-specific loader adjustments */
.p-fixtures .c-loader,
.p-fixtures__list > .c-loader {
  padding-block: var(--space-12);
  min-height: 40vh;
}

.c-fixtures-list .c-loader {
  padding-block: var(--space-10);
  min-height: 300px;
  background-color: rgba(255, 255, 255, 0.01);
  border-radius: var(--radius-md);
}

/* =========================================================================
   PAGE · FIXTURES
   ========================================================================= */
.p-fixtures {
  display: flex;
  flex-direction: column;
  padding-block: var(--space-4) 0;
  gap: var(--space-8);
  /* Exposed for sticky date-header calculations:
     filter padding (12px × 2) + chip min-height (44px) +
     track scroll-padding (2px) + bottom border (1px) = 71px → 72. */
  --filter-bar-height: 72px;
}

/* 1. Header & Cinematic Depth */
.p-fixtures__header {
  position: relative;
  text-align: center;
  padding-bottom: var(--space-8);
}

.p-fixtures__header-content {
  position: relative;
  z-index: var(--z-raised);
}

/* Scoped typographic upgrades — no HTML changes required */
.p-fixtures__header-content .u-display {
  font-size: var(--type-hero);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}

/* Targets the lede paragraph beneath the fixtures H1 — narrows it so it
   reads as a single thought beneath the display headline. */
.p-fixtures__header-content .u-dim {
  max-width: 40ch;
  margin-inline: auto;
  margin-top: var(--space-2);
}

.p-fixtures__divider {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 40%;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--accent-pitch),
    transparent
  );
  opacity: 0.3;
}

/* 2. Sticky Filter Navigation — glassmorphism shell cohesion.
   Single chip row pinned beneath the page header. Horizontally scrollable
   so the four category chips never wrap or hide on narrow viewports. */
.p-fixtures__filters {
  position: sticky;
  top: calc(var(--header-height) + env(safe-area-inset-top));
  z-index: var(--z-sticky);
  background-color: rgba(18, 18, 18, 0.85);
  backdrop-filter: var(--blur-glass);
  -webkit-backdrop-filter: var(--blur-glass);
  border-top: 1px solid var(--border-hairline);
  border-bottom: 1px solid var(--border-hairline);
  margin-inline: calc(var(--space-4) * -1);
  padding: var(--space-3) var(--space-4);
}

.p-fixtures__filter-track {
  display: flex;
  gap: var(--space-3);
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-bottom: 2px;
}

.p-fixtures__filter-track::-webkit-scrollbar {
  display: none;
}

/* 3. The Fixture List — tight app-like feed rhythm */
.p-fixtures__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding-block: var(--space-2) var(--space-12);
  min-height: 40vh;
}

/* 4. Tournament-Stage Accordions
   The fixtures-list partitions matches by tournament stage (Group MD1/2/3,
   R32, R16, QF, SF, 3rd Place, Final). Each stage is a native <details>
   so collapse/expand needs no JS and survives no-script environments. The
   summary is sticky beneath the page header + filter bar so the user
   always sees which bracket they're scrolling through. The earliest
   upcoming stage is opened by default at render time. */
.p-fixtures__stage-group {
  background-color: var(--surface-raised);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color var(--duration-fast) var(--ease-out);
}

.p-fixtures__stage-group:hover {
  border-color: var(--border-strong);
}

.p-fixtures__stage-group[open] {
  border-color: var(--border-strong);
}

/* Summary uses a 2×2 grid so every accordion renders with identical
   geometry regardless of name/meta content length: title row, meta row
   beneath, chevron pinned to a right column spanning both. No more
   horizontal "shifting" between buckets, no flex-baseline drift.
   Sticky positioning was removed — multi-stage sticky hand-offs caused
   the title to visually replace match rows during scroll transitions. */
.p-fixtures__stage-summary {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  column-gap: var(--space-3);
  row-gap: var(--space-1);
  align-items: center;
  cursor: pointer;
  list-style: none;
  padding: var(--space-4) var(--space-5);
  min-height: var(--tap-min);
  background-color: var(--surface-raised);
  border-bottom: 1px solid transparent;
  transition:
    background-color var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out);
}

.p-fixtures__stage-summary::-webkit-details-marker {
  display: none;
}

.p-fixtures__stage-summary::after {
  content: "▾";
  grid-column: 2;
  grid-row: 1 / -1;
  align-self: center;
  color: var(--accent-pitch);
  font-size: var(--type-small);
  transition: transform var(--duration-fast) var(--ease-out);
}

.p-fixtures__stage-group[open] > .p-fixtures__stage-summary {
  background-color: var(--surface-overlay);
  border-bottom-color: var(--border-hairline);
}

.p-fixtures__stage-group[open] > .p-fixtures__stage-summary::after {
  transform: rotate(180deg);
}

.p-fixtures__stage-name {
  grid-column: 1;
  grid-row: 1;
  font-family: var(--font-display);
  font-size: var(--type-h3);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-primary);
  line-height: var(--leading-tight);
  /* Truncation safety: long labels ellipsize within their grid cell
     rather than pushing the chevron or overlapping the meta row. */
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.p-fixtures__stage-meta {
  grid-column: 1;
  grid-row: 2;
  font-family: var(--font-body);
  font-size: var(--type-tiny);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--accent-pitch-dim);
  /* Same truncation safety as the name row. */
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.p-fixtures__stage-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3);
  background-color: var(--surface-base);
}

/* 5. England Priority Highlight */
.c-fixture-row--england {
  background: linear-gradient(
    90deg,
    rgba(57, 255, 20, 0.06) 0%,
    transparent 100%
  );
  border-left: 2px solid var(--accent-pitch);
}

.c-fixture-row--england:hover {
  background: linear-gradient(
    90deg,
    rgba(57, 255, 20, 0.1) 0%,
    var(--surface-overlay) 100%
  );
  border-color: var(--border-accent);
}

/* 6. Tactical Footer Call-to-Action */
.p-fixtures__footer {
  padding-block: var(--space-12);
  border-top: 1px solid var(--border-strong);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  background: linear-gradient(
    to bottom,
    transparent,
    rgba(255, 255, 255, 0.01)
  );
}

.p-fixtures__footer > p {
  color: var(--text-secondary);
  font-size: var(--type-small);
}

/* =========================================================================
   RESPONSIVE · STATS-GRID SYMMETRY GUARD (phablet range)
   With exactly four stat tiles, the default auto-fit grid produces a 3+1
   orphan at content widths 444px–595px (viewport ~476px–627px). This
   range query pins the grid to a 2×2 symmetric layout across the phablet
   range, eliminating the orphan without modifying the auto-fit fallback
   at small-phone widths (<480px) or the explicit 4-col layout at tablet+
   (≥768px below). Result: tiles render as 1×4 → 2×2 → 1×4 across all
   viewports — symmetric at every breakpoint.
   ========================================================================= */
@media (min-width: 480px) and (max-width: 767px) {
  .c-stats-band__list {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* =========================================================================
   RESPONSIVE · TABLET (≥768px)
   Multi-column transitions, hero presence, breathing room. Mobile defaults
   above this block are never mutated — only overridden inside the
   media query so the mobile-first contract is preserved.
   ========================================================================= */
@media (min-width: 768px) {
  /* ---- Shell ----------------------------------------------------------- */
  .l-page__content {
    padding-inline: var(--space-6);
  }

  /* ---- Hero — taller, more confident ---------------------------------- */
  .c-hero {
    min-height: 480px;
    padding: var(--space-12) var(--space-6) var(--space-8);
  }

  .c-hero__content {
    gap: var(--space-5);
  }

  .c-hero__subtitle {
    font-size: var(--type-h3);
  }

  /* ---- Section vertical rhythm ---------------------------------------- */
  .p-home,
  .p-fixtures {
    gap: var(--space-12);
  }

  /* ---- Featured match card ------------------------------------------- */
  .c-match-card {
    padding: var(--space-6);
  }

  .c-match-card__teams {
    gap: var(--space-6);
  }

  .c-match-card__flag {
    width: 72px;
  }

  /* ---- Zones teaser → 2-column ---------------------------------------- */
  .c-zones-teaser__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-6);
  }

  /* ---- Promo deals → 2-column grid (overrides mobile flex column) ----- */
  .c-promo-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-6);
  }

  .c-promo-item {
    /* mobile capped at 500px to keep portrait composition; in 2-col grid
       the cell controls width, so the cap is lifted */
    max-width: none;
  }

  /* ---- Chip filters — centre when they fit (no need to scroll) -------- */
  .c-chip-scroll__list {
    justify-content: center;
  }

  /* ---- Stats band — explicit 4-col for symmetry --------------------- */
  /* Replaces reliance on auto-fit so the four tiles render as a clean
     1×4 row from tablet upward, regardless of how many auto-fit tracks
     would have been generated at very wide viewports. */
  .c-stats-band__list {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-4);
  }

  /* ---- Fixture filter bar — scale full-bleed inset to match page padding */
  .p-fixtures__filters {
    margin-inline: calc(var(--space-6) * -1);
    padding-inline: var(--space-6);
  }

  /* ---- Booking page --------------------------------------------------- */
  .p-booking {
    max-width: 700px;
  }

  /* Stepper — uncapped on mobile (fills form group); on tablet+ a 240px
     cap keeps the 1-digit counter from sprawling across the wider form */
  .c-stepper {
    max-width: 240px;
  }

  .c-fixture-banner {
    padding: var(--space-5) var(--space-6);
  }

  /* ---- Zones page · cap zone-card width ------------------------------- */
  /* Stops cards from sprawling across the tablet content area while
     preserving the mobile portrait composition (media on top, content
     beneath). Centred so the card sits axially within the page. */
  .p-zones .c-zone-card {
    max-width: 700px;
    margin-inline: auto;
  }

  /* ---- Visit ---------------------------------------------------------- */
  .c-visit__body {
    gap: var(--space-8);
  }
}

/* =========================================================================
   RESPONSIVE · DESKTOP (≥1024px)
   ========================================================================= */
@media (min-width: 1024px) {
  /* ---- Shell ---------------------------------------------------------- */
  .l-page__content {
    padding-inline: var(--space-8);
  }

  /* ---- Hero — landing-page presence ---------------------------------- */
  .c-hero {
    min-height: 600px;
    padding: var(--space-16) var(--space-8) var(--space-12);
  }

  .c-hero__content {
    max-width: 640px;
    gap: var(--space-6);
  }

  /* ---- Bottom nav — constrain so 4 icons don't sprawl across 1200px --- */
  .c-nav__list {
    max-width: 560px;
  }

  .c-mobile-nav__link {
    font-size: var(--type-display);
  }

  /* ---- Section rhythm ------------------------------------------------- */
  .p-home,
  .p-fixtures {
    gap: var(--space-16);
  }

  .c-section-header--hero {
    margin-bottom: var(--space-12);
  }

  /* ---- Featured match flag ------------------------------------------- */
  .c-match-card__flag {
    width: 80px;
  }

  /* ---- Zones teaser --------------------------------------------------- */
  .c-zones-teaser__grid {
    gap: var(--space-8);
  }

  /* ---- Zone list (zones page) ---------------------------------------- */
  .c-zone-list {
    gap: var(--space-20);
  }

  /* ---- Zones page · feature-reveal layout ---------------------------- */
  /* Cards stop stacking vertically (which would produce a ~3000px scroll
     wall on desktop) and switch to a media-beside-content grid. Even-
     indexed cards flip the media to the right side via `order`, producing
     an editorial zigzag rhythm. Screen-reader / tab order is unchanged
     because `order` is purely visual; DOM order stays media → content. */
  .p-zones .c-zone-card {
    max-width: none; /* lift the tablet cap */
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-8);
    align-items: center;
  }

  .p-zones .c-zone-card:nth-child(even) .c-zone-card__media {
    order: 2;
  }

  /* Meta switches from centred (mobile portrait composition) to start-
     aligned to match the side-by-side reading flow. */
  .p-zones .c-zone-meta {
    justify-content: flex-start;
  }

  /* CTA stops being full-width — sits as a real desktop button. */
  .p-zones .c-zone-card .c-button {
    width: auto;
    min-width: 240px;
    align-self: flex-start;
  }

  /* ---- Promo deals ---------------------------------------------------- */
  .c-promo-list {
    gap: var(--space-8);
  }

  /* ---- Stats ---------------------------------------------------------- */
  .c-stat-tile {
    padding: var(--space-6) var(--space-5);
  }

  .c-stats-band__list {
    gap: var(--space-5);
  }

  /* ---- Fixture filter bar — scale inset to match page padding -------- */
  .p-fixtures__filters {
    margin-inline: calc(var(--space-8) * -1);
    padding-inline: var(--space-8);
  }

  /* ---- Booking page --------------------------------------------------- */
  .p-booking {
    max-width: 720px;
  }

  .c-zone-snapshot__frame {
    width: 140px;
  }

  /* ---- Visit ---------------------------------------------------------- */
  .c-visit {
    padding: var(--space-16) var(--space-8) var(--space-20);
  }

  .c-visit__body {
    gap: var(--space-10);
  }
}

/* =========================================================================
   RESPONSIVE · WIDE DESKTOP (≥1280px)
   Final breathing-room pass for very large viewports. Typography already
   self-scales via clamp tokens; only layout chrome needs nudging.
   ========================================================================= */
@media (min-width: 1280px) {
  .l-page__content {
    padding-inline: var(--space-10);
  }

  .c-hero {
    min-height: 680px;
  }

  .p-fixtures__filters {
    margin-inline: calc(var(--space-10) * -1);
    padding-inline: var(--space-10);
  }
}

/* =========================================================================
   COMPONENT · SITE FOOTER (legal accordion)
   A quiet, full-bleed strip below the page closer. Three native <details>
   blocks host Privacy / Booking Terms / Cookies — zero JS, opens/closes via
   the browser's built-in disclosure semantics. The body copy stays inline
   on the same page rather than living on dedicated /legal/ routes so users
   never leave the funnel to satisfy a compliance read.
   ========================================================================= */
.c-site-footer {
  position: relative;
  /* Sits outside <main> as a top-level <body> sibling so the browser
     applies the implicit `contentinfo` landmark role. Adds its own
     bottom-padding to clear the fixed bottom nav (.c-nav is 64px +
     iOS safe-area). The l-page padding-bottom only covers .l-page
     descendants, so the footer can't inherit it. */
  padding: var(--space-10) var(--space-5)
    calc(var(--space-10) + var(--nav-height) + env(safe-area-inset-bottom));
  background-color: var(--surface-base);
  border-top: 1px solid var(--border-hairline);
  color: var(--text-secondary);
  font-size: var(--type-small);
  line-height: var(--leading-normal);
}

.c-site-footer__inner {
  max-width: var(--max-content);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.c-site-footer__item {
  border-bottom: 1px solid var(--border-hairline);
}

.c-site-footer__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: var(--tap-min);
  padding-block: var(--space-3);
  cursor: pointer;
  list-style: none;
  font-family: var(--font-body);
  font-size: var(--type-caption);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--text-primary);
  transition: color var(--duration-fast) var(--ease-out);
}

.c-site-footer__summary::-webkit-details-marker {
  display: none;
}

.c-site-footer__summary:hover {
  color: var(--accent-pitch);
}

.c-site-footer__summary:focus-visible {
  color: var(--accent-pitch);
  /* Outline inherits from the global :focus-visible rule in base.css —
     2px solid accent-pitch + 2px offset. Kept visible for WCAG 2.4.7. */
}

.c-site-footer__summary::after {
  content: "+";
  font-family: var(--font-display);
  font-size: var(--type-h3);
  font-weight: var(--weight-bold);
  line-height: 1;
  color: var(--accent-pitch);
  transition: transform var(--duration-base) var(--ease-out);
}

.c-site-footer__item[open] > .c-site-footer__summary::after {
  transform: rotate(45deg);
}

.c-site-footer__body {
  padding-block: 0 var(--space-5);
  color: var(--text-secondary);
}

.c-site-footer__body > * + * {
  margin-top: var(--space-3);
}

.c-site-footer__body p {
  font-size: var(--type-small);
  line-height: var(--leading-relaxed);
}

.c-site-footer__body strong {
  color: var(--text-primary);
  font-weight: var(--weight-semibold);
}

.c-site-footer__body a {
  color: var(--accent-pitch);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.c-site-footer__body a:hover {
  color: var(--accent-pitch-dim);
}

/* Focus styles fall through to the global :focus-visible rule in base.css
   (outline + offset). Don't strip — required for keyboard wayfinding. */

.c-site-footer__body ul {
  list-style: disc;
  padding-left: var(--space-5);
}

.c-site-footer__body li + li {
  margin-top: var(--space-2);
}

.c-site-footer__meta {
  margin-top: var(--space-6);
  font-size: var(--type-tiny);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--text-tertiary);
  text-align: center;
}

@media (min-width: 768px) {
  .c-site-footer {
    padding-inline: var(--space-6);
  }
}

@media (min-width: 1024px) {
  .c-site-footer {
    padding-inline: var(--space-8);
  }
}