/* =====================================================================
   SALSOSOS FUTSAL — styles.css
   Design system. Tweak the variables below to re-skin the whole site.
   Palette + type are copied from the reference "vibe" only.
   ===================================================================== */

:root {
  /* --- Palette --------------------------------------------------- */
  --bg:            #0a0a0a;   /* page background (near-black)         */
  --bg-2:          #111111;   /* raised panels / cards                */
  --bg-3:          #171717;   /* hover / nested panels                */
  --line:          #262626;   /* hairline dividers / borders          */
  --line-2:        #333333;   /* stronger borders                     */
  --volt:          #c8f82a;   /* electric accent (buttons, dashes)    */
  --volt-dim:      #9bc21f;   /* muted accent                         */
  --alert:         #ff5a2a;   /* "live"/alert orange                  */
  --white:         #f5f5f5;   /* headings                             */
  --gray:          #8a8a8a;   /* labels / secondary text              */
  --gray-2:        #5a5a5a;   /* faint / ghost text                   */

  /* --- Type ------------------------------------------------------ */
  --font-display: "Archivo", "Anton", system-ui, sans-serif; /* heavy uppercase */
  --font-body:    "Archivo", "Inter", system-ui, sans-serif;
  --font-mono:    "Space Mono", "IBM Plex Mono", ui-monospace, monospace;

  /* --- Layout ---------------------------------------------------- */
  --maxw: 1200px;
  --pad:  clamp(20px, 5vw, 64px);   /* horizontal page gutter        */
  --gap-section: clamp(72px, 12vh, 140px); /* vertical section rhythm */
  --topbar-h: 72px;                 /* sticky bar height; hero subtracts it */
  --logo-h: 48px;                   /* crest height in the top bar          */
  --logo-h-foot: 96px;              /* crest height in the footer           */

  /* --- Hero background video ------------------------------------- */
  /* How visible the looping clip is behind the hero scrim. ~0.34 keeps the
     goal readable without pulling focus off the headline; raise toward 0.5
     for more footage, drop toward 0.25 for a quieter hero.               */
  --hero-video-opacity: 0.34;
  /* How long the clip dissolves out of its last frame and back into its
     first one, so the loop point is a fade rather than a hard cut.       */
  --hero-loop-fade: 700ms;
}

/* --- reset ------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  /* Stops iOS Safari inflating body copy when a phone is rotated. */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  background: var(--bg);
  color: var(--white);
  font-family: var(--font-body);
  font-weight: 500;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  -webkit-tap-highlight-color: rgba(200, 248, 42, 0.22); /* volt tap feedback */
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }

/* --- shared layout ---------------------------------------------- */
.wrap { max-width: var(--maxw); margin: 0 auto; padding-left: var(--pad); padding-right: var(--pad); }
.section { padding-top: var(--gap-section); padding-bottom: var(--gap-section); position: relative; }
.hairline { height: 1px; background: var(--line); border: 0; }

/* --- micro-label: "— LABEL" with a volt dash --------------------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: 14px;
  font-family: var(--font-body);
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--gray);
}
.eyebrow::before {
  content: ""; width: 40px; height: 2px; background: var(--volt); flex: none;
}

/* --- section heading with giant outlined "ghost" 2nd line -------- */
.section-head { margin-bottom: clamp(36px, 6vh, 64px); }
.section-title {
  font-family: var(--font-display);
  font-weight: 900;
  text-transform: uppercase;
  line-height: 0.92;
  letter-spacing: -0.01em;
  font-size: clamp(40px, 8vw, 96px);
  margin-top: 18px;
}
.section-title .ghost {
  display: block;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--line-2);
  text-stroke: 1.5px var(--line-2);
}

/* --- buttons ----------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--font-body);
  font-weight: 800; font-size: 14px;
  letter-spacing: 0.14em; text-transform: uppercase;
  padding: 16px 30px;
  border: 2px solid var(--volt);
  white-space: nowrap;        /* "Book Now" must never wrap to two lines */
  transition: transform .15s ease, background .15s ease, color .15s ease;
}
.btn--solid { background: var(--volt); color: #000; }
.btn--ghost { background: transparent; color: var(--volt); }
/* Hover effects only where a real pointer exists. On touch, :hover latches
   after a tap and leaves the button stuck in its hovered state. */
@media (hover: hover) {
  .btn--solid:hover { background: #d7ff45; transform: translateY(-2px); }
  .btn--ghost:hover { background: var(--volt); color: #000; }
}
.btn:active { transform: translateY(1px); }

/* =====================================================================
   FILL-IN placeholder helpers — make gaps obvious
   ===================================================================== */
.fill {                       /* inline text needing real copy        */
  color: var(--volt);
  background: rgba(200, 248, 42, 0.08);
  border-bottom: 1px dashed var(--volt-dim);
  padding: 0 4px;
  font-style: normal;
  font-weight: 700;
}
.fill--muted {                /* longer placeholder blurbs            */
  color: var(--gray);
  font-style: italic;
}
.imgph {                      /* image / video placeholder box        */
  display: flex; align-items: center; justify-content: center; text-align: center;
  border: 2px dashed var(--line-2);
  background:
    repeating-linear-gradient(45deg, #0f0f0f 0 12px, #131313 12px 24px);
  color: var(--gray);
  font-size: 12px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase;
  padding: 20px; min-height: 160px;
}
.tag-todo {                   /* little "FILL IN" chip                */
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: 0.12em;
  color: #000; background: var(--volt);
  padding: 2px 8px; margin-left: 8px; vertical-align: middle;
  text-transform: uppercase;
}

/* =====================================================================
   TOP BAR
   ===================================================================== */
.topbar {
  position: sticky; top: 0; z-index: 50;
  background: rgba(10,10,10,0.82);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.topbar__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  height: var(--topbar-h);
}
.logo {
  display: inline-flex; align-items: center; gap: 11px;
  color: var(--white); min-width: 0;
}
.logo__mark {
  height: var(--logo-h); width: auto; flex: none; display: block;
}
.logo__text {
  display: flex; flex-direction: column; justify-content: center;
  min-width: 0;               /* let the name ellipsis rather than push the CTA */
}
.logo__name {
  font-family: var(--font-display);
  font-weight: 900; font-size: 21px; line-height: 1; letter-spacing: 0.03em;
  text-transform: uppercase;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.logo__sub {
  margin-top: 4px;
  font-family: var(--font-mono); font-size: 9px; line-height: 1;
  letter-spacing: 0.34em; text-transform: uppercase; color: var(--volt);
  white-space: nowrap;
}

/* Section-scroll nav — a deliberate client-requested exception to the
   "no nav links that scroll to page sections" rule documented in
   CLAUDE.md. Hidden below 900px: the topbar is already tight against
   the crest + Book Now button there (see MOBILE REFINEMENTS). */
.topbar__nav {
  display: flex; align-items: center; gap: 15px;
  flex: 1; min-width: 0; margin: 0 16px;
  overflow-x: auto;
}
.topbar__nav a {
  flex: none; white-space: nowrap;
  color: var(--gray); font-family: var(--font-body); font-weight: 700;
  font-size: 11px; letter-spacing: 0.03em; text-transform: uppercase;
  transition: color .15s ease;
}
@media (hover: hover) { .topbar__nav a:hover { color: var(--volt); } }
@media (max-width: 899px) { .topbar__nav { display: none; } }

/* =====================================================================
   HERO  (looping gameplay video behind a scrim)
   ===================================================================== */
/* Fills exactly one screen (viewport minus the 72px sticky top bar),
   with the content vertically centred so there is no dead space above
   the eyebrow. Grows past one screen only if content genuinely needs it. */
.hero {
  position: relative;
  /* One screen minus the sticky bar (+ its 1px border). The svh line wins in
     browsers that support it: on phones 100vh is measured against the *expanded*
     viewport, so the hero would run taller than the screen and push the CTA
     under the fold until the URL bar collapses. */
  min-height: calc(100vh  - (var(--topbar-h) + 1px));
  min-height: calc(100svh - (var(--topbar-h) + 1px));
  display: flex; align-items: center;
  padding-top: 24px; padding-bottom: 24px;
  overflow: hidden;           /* keeps the cover-scaled video inside the section */
  background: var(--bg);      /* what shows before/instead of the video */
}
/* Background video. Deliberately held back: --hero-video-opacity is the one
   knob for "how visible is the footage" — the goal is that the ball going in
   still reads, without the clip competing with the headline. Fades in only
   once playback has actually started (main.js adds .is-playing), so a blocked
   or skipped video never flashes a black rectangle. */
.hero__video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0; transition: opacity 900ms ease;
  pointer-events: none;
  z-index: 0;
  transform: scale(1.06);
}
@media (max-width: 640px) {
  .hero__video {
    transform: scale(1);
  }
}
.hero__video.is-playing { opacity: var(--hero-video-opacity, 0.34); }
/* Loop seam: main.js adds .is-looping over the tail of the clip and drops it
   the moment playback wraps, so the last frame dissolves into the first one
   instead of cutting. The shorter transition applies to both halves. */
.hero__video.is-playing.is-looping { opacity: 0; }
.hero__video.is-playing { transition-duration: var(--hero-loop-fade, 700ms); }
/* Scrim over the video: darkest at the top and bottom so the hero blends into
   the sticky bar and the hairline below, and a left-weighted wash to protect
   the (left-aligned) headline and subline. */
.hero__scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(10,10,10,0.80) 0%, rgba(10,10,10,0.45) 45%, rgba(10,10,10,0.20) 100%),
    linear-gradient(180deg, rgba(10,10,10,0.85) 0%, rgba(10,10,10,0.15) 38%, rgba(10,10,10,0.25) 70%, rgba(10,10,10,0.90) 100%);
}
.hero > .wrap { width: 100%; max-width: var(--maxw); position: relative; z-index: 2; }
.hero__grid { display: grid; grid-template-columns: 1fr; gap: 40px; }
.hero__title {
  font-family: var(--font-display);
  font-weight: 900; text-transform: uppercase;
  line-height: 0.9; letter-spacing: -0.015em;
  /* Archivo 900 renders ≈ 7.544 × font-size wide for "COMPETITIVE", so
     5.3vw puts the longest word at ≈ 40% of the viewport (the 96px cap holds
     it near that share on very wide screens). Re-measure if the words change. */
  font-size: clamp(28px, 5.3vw, 96px);
  margin: 18px 0 18px;
  text-shadow: 0 2px 24px rgba(10, 10, 10, 0.6);
}
.hero__title .accent { color: var(--volt); display: block; }
.hero__title .light  { color: var(--white); display: block; }
.hero__sub {
  max-width: 540px; color: var(--gray);
  font-size: clamp(15px, 2vw, 18px); margin-bottom: 34px;
  text-shadow: 0 1px 16px rgba(10, 10, 10, 0.8);
}

/* Live-status card — lives in #schedule above the calendar. Sits as a single
   row on wider screens, stacks on narrow ones. */
.status-card {
  border: 1px solid var(--line-2);
  background: var(--bg-2);
  padding: 18px 22px; margin-bottom: 18px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 24px;
}
.status-card .live {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 11px; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase; color: var(--alert);
}
.status-card .live::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--alert); }
.status-card .big { font-family: var(--font-display); font-weight: 800; font-size: 20px; }
.status-card__value { color: var(--volt); }

/* =====================================================================
   ABOUT / VALUES
   ===================================================================== */
.about__grid { display: grid; gap: 40px; }
/* Lead statement: acts as a header over the core-value chips, so it is set
   heavier, larger and italic than body copy to carry the emphasis. */
.about__lead {
  font-size: clamp(22px, 3.4vw, 34px);
  font-weight: 800; font-style: italic;
  line-height: 1.25; letter-spacing: -0.01em;
  color: var(--white); max-width: 22ch;
}
.about__body { color: var(--gray); margin-top: 22px; max-width: 60ch; }
.values { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.value-chip {
  border: 1px solid var(--line-2); padding: 10px 18px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gray);
}
/* about — bullet points under the lead statement */
.about__points { list-style: none; margin-top: 28px; display: grid; gap: 13px; }
.about__points li {
  position: relative; padding-left: 26px;
  font-size: 16px; font-weight: 600; color: var(--white); letter-spacing: 0.01em;
}
.about__points li::before { content: "\25B8"; position: absolute; left: 0; color: var(--volt); }
.about__points li.hl { font-size: 18px; }
.about__points li.hl strong { color: var(--volt); font-style: italic; }

/* Group-photo collage beside the copy.
   Tiles are laid out at a fixed 4:3 so rows are a known height before the JPEGs
   load; main.js then hides whole rows that would not fit next to the text (and
   trims a ragged last row), which is why the tile count on screen varies with
   the column width. The mask fades the collage out — downward by default,
   to the right once the grid goes two-up. */
.about__media {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
  align-content: start;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 52%, rgba(0, 0, 0, 0) 100%);
          mask-image: linear-gradient(to bottom, #000 0%, #000 52%, rgba(0, 0, 0, 0) 100%);
}
/* Tiles open the same lightbox as the gallery, so they carry the same
   cursor / zoom / "+" affordance (the .plus rules live with the gallery). */
.about__shot { position: relative; aspect-ratio: 4 / 3; overflow: hidden; cursor: pointer; background: var(--bg-2); }
.about__shot[hidden] { display: none; }
.about__shot img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s ease, filter .35s ease; }
@media (hover: hover) {
  .about__shot:hover img { transform: scale(1.06); }
}
@media (min-width: 900px) {
  .about__grid { grid-template-columns: 1fr 1fr; align-items: center; }
  .about__media {
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    -webkit-mask-image: linear-gradient(to right, #000 0%, #000 55%, rgba(0, 0, 0, 0) 100%);
            mask-image: linear-gradient(to right, #000 0%, #000 55%, rgba(0, 0, 0, 0) 100%);
  }
}

/* =====================================================================
   STANDINGS  (posted as images)
   ---------------------------------------------------------------------
   The league publishes rankings as a graphic and wants to keep it that
   way, so this is two swappable images rather than a data table. The
   expandable ".matrix" table that lived here — plus its ≤760px block and
   the row-expand handler in main.js — was removed 2026-08-26.
   ===================================================================== */
.rankings {
  display: grid; gap: 24px; grid-template-columns: 1fr;
  border-top: 1px solid var(--line); padding-top: 28px;
}
.rank { margin: 0; border: 1px solid var(--line); background: var(--bg-2); }
/* Deliberately NO aspect-ratio: the league's graphics arrive at whatever
   shape they arrive at, and cropping a standings table loses rows. */
.rank img { display: block; width: 100%; height: auto; }
.rank figcaption {
  padding: 14px 16px; border-top: 1px solid var(--line);
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--volt);
}
.matrix__note { color: var(--gray); max-width: 46ch; margin-top: 8px; }
@media (min-width: 800px) {
  .rankings { grid-template-columns: 1fr 1fr; gap: 28px; }
}

/* =====================================================================
   SCHEDULE / CALENDAR
   ===================================================================== */
.cal__error {
  display: flex; align-items: center; gap: 12px; margin-bottom: 20px; padding: 14px 18px;
  border: 1px solid var(--alert); background: rgba(255, 90, 42, 0.08); color: var(--alert);
  font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.01em;
}
.cal__error[hidden] { display: none; }
.cal__error-ico { font-size: 16px; flex: none; }

.cal { display: grid; gap: 20px; grid-template-columns: 1fr; }
@media (min-width: 900px) { .cal { grid-template-columns: 1.5fr 1fr; align-items: start; } }
.cal__panel { border: 1px solid var(--line); background: var(--bg-2); }
.cal__month { padding: clamp(16px, 3vw, 24px); }

.cal__bar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.cal__title {
  font-family: var(--font-display); font-weight: 900; text-transform: uppercase;
  font-size: clamp(20px, 3vw, 28px); letter-spacing: -0.01em;
}
.cal__nav {
  width: 40px; height: 40px; border: 1px solid var(--line-2); color: var(--white); font-size: 20px;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
@media (hover: hover) {
  .cal__nav:hover { background: var(--volt); color: #000; border-color: var(--volt); }
}

.cal__dow { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-bottom: 8px; }
.cal__dow span {
  text-align: center; font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--gray-2);
}
.cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.cal__cell {
  position: relative; aspect-ratio: 1; border: 1px solid var(--line); padding: 6px 8px;
  font-family: var(--font-mono); font-size: 13px; color: var(--gray); cursor: pointer;
  transition: background .12s ease, color .12s ease, border-color .12s ease;
}
@media (hover: hover) {
  .cal__cell:hover { border-color: var(--line-2); background: var(--bg-3); color: var(--white); }
}
.cal__cell.is-empty { border-color: transparent; background: transparent; cursor: default; }
.cal__cell.is-today { color: var(--white); border-color: var(--gray-2); }
.cal__cell.has-events { color: var(--white); }
.cal__cell.is-selected { background: var(--volt); color: #000; border-color: var(--volt); }
.cal__num { position: absolute; top: 6px; right: 8px; }
.cal__dots { position: absolute; left: 7px; bottom: 7px; display: flex; flex-wrap: wrap; gap: 3px; max-width: 72%; }
.cal__dot { width: 6px; height: 6px; background: var(--volt); } /* colour set inline per event */
.cal__today {
  margin-top: 18px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--volt); border-bottom: 1px solid transparent;
}
.cal__today:hover { border-bottom-color: var(--volt); }

.cal__events { padding: clamp(16px, 3vw, 24px); }
.cal__events-head { border-bottom: 1px solid var(--line); padding-bottom: 16px; margin-bottom: 18px; }
.cal__events-date {
  font-family: var(--font-display); font-weight: 800; text-transform: uppercase; font-size: 20px; margin-top: 12px;
}
.cal__events-list { display: grid; gap: 12px; }
.cal__empty { color: var(--gray); font-size: 14px; }

.cal-ev { border: 1px solid var(--line); background: var(--bg); padding: 16px; }
.cal-ev__time { font-family: var(--font-mono); font-size: 12px; color: var(--volt); letter-spacing: 0.05em; }
.cal-ev__title {
  font-family: var(--font-display); font-weight: 800; text-transform: uppercase; font-size: 18px; margin: 6px 0 4px;
}
.cal-ev__meta { font-family: var(--font-mono); font-size: 12px; color: var(--gray); }
.cal-ev__desc { color: var(--gray); font-size: 13px; line-height: 1.5; margin-top: 12px; word-break: break-word; }
.cal-ev__desc a { color: var(--volt); }
.cal-ev__desc.is-clamped {
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.cal-ev__more {
  display: block; margin-top: 6px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--volt); background: none; border: none; padding: 0; cursor: pointer;
}
@media (hover: hover) {
  .cal-ev__more:hover { text-decoration: underline; }
}
.cal-ev__tag {
  display: inline-block; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em;
  text-transform: uppercase; color: #000; background: var(--volt); padding: 2px 7px; margin-top: 8px;
}
.cal-ev__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.cal-ev__btn {
  font-family: var(--font-body); font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 8px 12px; border: 1px solid var(--line-2); color: var(--white);
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
@media (hover: hover) {
  .cal-ev__btn:hover { background: var(--volt); color: #000; border-color: var(--volt); }
}

/* =====================================================================
   COACHES
   ===================================================================== */
.coaches { display: grid; gap: 24px; grid-template-columns: 1fr; }
.coach { border: 1px solid var(--line); background: var(--bg-2); }
/* Now a real <img> (so /edit can swap it), not the old .imgph div — needs
   the block/cover pair or it would letterbox inside the ratio box. */
.coach__photo { aspect-ratio: 4/5; display: block; width: 100%; object-fit: cover; }
.coach__body { padding: 22px 22px 26px; }
.coach__name { font-family: var(--font-display); font-weight: 900; text-transform: uppercase; font-size: 22px; }
.coach__role { font-family: var(--font-mono); color: var(--volt); font-size: 12px; letter-spacing: 0.1em; margin-top: 6px; }
.coach__bio { color: var(--gray); font-size: 14px; margin-top: 14px; }
@media (min-width: 640px)  { .coaches { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .coaches { grid-template-columns: repeat(4, 1fr); } }

/* =====================================================================
   GALLERY  (real photos)
   ===================================================================== */
.gallery {
  display: grid; gap: 10px;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: 160px;        /* fixed row track = predictable box height */
  grid-auto-flow: dense;        /* fill holes left by spanning items        */
}
.gallery__item { position: relative; overflow: hidden; cursor: pointer; background: var(--bg-2); }
.gallery__item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s ease, filter .35s ease; filter: grayscale(0.15); }
@media (hover: hover) {
  .gallery__item:hover img { transform: scale(1.06); filter: grayscale(0); }
}
.gallery__item.tall  { grid-row: span 2; }   /* two row tracks tall  */
.gallery__item.wide  { grid-column: span 2; } /* two columns wide     */
/* Also used by #about's group-photo collage — same lightbox, same marker. */
.gallery__item .plus, .about__shot .plus {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: var(--volt); font-size: 30px; opacity: 0; background: rgba(0,0,0,0.35); transition: opacity .25s ease;
}
@media (hover: hover) {
  .gallery__item:hover .plus, .about__shot:hover .plus { opacity: 1; }
}
/* Touch has no hover, so the "tap to enlarge" affordance would never appear.
   Show a small corner marker instead of the full-tile wash. */
@media (hover: none) {
  .gallery__item .plus, .about__shot .plus {
    opacity: 1; background: none;
    align-items: flex-end; justify-content: flex-end;
    padding: 6px 10px; font-size: 20px;
    text-shadow: 0 1px 6px rgba(0,0,0,0.9);
  }
}
@media (min-width: 800px) { .gallery { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 200px; } }

/* lightbox */
.lightbox {
  position: fixed; inset: 0; z-index: 100; display: none;
  align-items: center; justify-content: center; background: rgba(0,0,0,0.92); padding: 30px;
}
.lightbox.is-open { display: flex; }
.lightbox img { max-width: 92vw; max-height: 88vh; object-fit: contain; }
.lightbox__close { position: absolute; top: 22px; right: 26px; color: var(--white); font-size: 34px; line-height: 1; }
.lightbox__nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  font-size: 44px; color: var(--white); padding: 10px 18px; user-select: none;
}
.lightbox__nav.prev { left: 8px; } .lightbox__nav.next { right: 8px; }

/* book-now menu */
.book-menu {
  position: fixed; inset: 0; z-index: 110; display: none;
  align-items: center; justify-content: center; background: rgba(0,0,0,0.82); padding: 20px;
}
.book-menu.is-open { display: flex; }
.book-menu__panel {
  position: relative; width: 100%; max-width: 400px; background: var(--bg-2);
  border: 2px solid var(--volt); padding: clamp(28px, 5vw, 40px) clamp(24px, 5vw, 32px);
}
.book-menu__close {
  position: absolute; top: 12px; right: 14px; background: none; border: none;
  color: var(--gray); font-size: 28px; line-height: 1; padding: 4px; cursor: pointer;
}
@media (hover: hover) { .book-menu__close:hover { color: var(--volt); } }
.book-menu__title {
  font-family: var(--font-display); font-weight: 900; text-transform: uppercase;
  font-size: clamp(24px, 4vw, 30px); margin: 6px 0 22px;
}
.book-menu__list { display: flex; flex-direction: column; gap: 8px; }
.book-menu__item {
  display: flex; align-items: center; gap: 14px; padding: 14px 12px;
  border: 1px solid var(--line); color: var(--white); font-family: var(--font-body);
  font-weight: 800; text-transform: uppercase; font-size: 14px; letter-spacing: 0.03em;
  transition: background .15s ease, border-color .15s ease;
}
.book-menu__ico {
  flex: none; width: 34px; height: 34px; display: flex; align-items: center;
  justify-content: center; border: 1px solid var(--line-2); color: var(--volt); font-size: 15px;
}
.book-menu__sub {
  display: block; font-family: var(--font-mono); font-weight: 400; text-transform: none;
  font-size: 12px; letter-spacing: normal; color: var(--gray); margin-top: 2px;
}
@media (hover: hover) { .book-menu__item:hover { background: var(--bg-3); border-color: var(--volt); } }

/* =====================================================================
   TESTIMONIALS
   ===================================================================== */
.quote {
  background: var(--volt); color: #000; padding: clamp(34px, 6vw, 64px);
  max-width: 780px;
}
.quote__mark { font-family: var(--font-display); font-weight: 900; font-size: 60px; line-height: 0.6; }
.quote__text {
  font-family: var(--font-display); font-weight: 800; text-transform: uppercase;
  font-size: clamp(22px, 3.4vw, 36px); line-height: 1.15; margin: 14px 0 26px;
}
.quote__by { font-weight: 800; font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; }

/* =====================================================================
   PROGRAMS + REGISTRATION  (one tier per program: what it is + what it costs)
   ===================================================================== */
.tiers { display: grid; gap: 20px; grid-template-columns: 1fr; }
.tier { border: 1px solid var(--line-2); background: var(--bg-2); padding: 34px 30px; display: flex; flex-direction: column; }
.tier.is-feature { border-color: var(--volt); }
.tier__num { font-family: var(--font-mono); color: var(--volt); font-size: 13px; margin-bottom: 12px; }
.tier__name { font-family: var(--font-display); font-weight: 900; text-transform: uppercase; font-size: 24px; }
.tier__price {
  font-family: var(--font-display); font-weight: 900; font-size: 52px; margin: 16px 0 4px;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px;
}
.tier__price .per { font-family: var(--font-mono); font-size: 14px; color: var(--gray); font-weight: 400; }
.tier__price .tag-todo { margin-left: 0; }
.tier__body { color: var(--gray); font-size: 15px; margin-top: 16px; }
.tier__list { list-style: none; margin: 22px 0 28px; padding-top: 20px; border-top: 1px solid var(--line); display: grid; gap: 12px; }
.tier__list li { color: var(--gray); font-size: 14px; padding-left: 22px; position: relative; }
.tier__list li::before { content: "→"; position: absolute; left: 0; color: var(--volt); }
.tier .btn { margin-top: auto; }
/* Two tiers (Kids / Open) — one column on phones, side by side from 700px.
   There is no 3-column step any more: the Playoffs & Tournaments tier was
   removed (playoffs and tournaments are included in both leagues), and a
   3-column grid holding two cards left a dead third column. */
@media (min-width: 700px)  { .tiers { grid-template-columns: repeat(2, 1fr); } }
.tiers__lead { color: var(--gray); font-size: 15px; max-width: 60ch; margin-top: 16px; }
.tiers__note { margin-top: 22px; color: var(--gray); font-size: 13px; max-width: 70ch; }
.tiers__note .tag-todo { margin-left: 0; margin-right: 10px; }

/* =====================================================================
   FAQ
   ===================================================================== */
.faq { border-top: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__q {
  width: 100%; text-align: left; display: flex; justify-content: space-between; align-items: center; gap: 20px;
  padding: 26px 4px; font-family: var(--font-display); font-weight: 800; text-transform: uppercase; font-size: clamp(17px, 2.4vw, 22px);
}
.faq__q .sign { color: var(--volt); font-size: 26px; transition: transform .2s ease; flex: none; }
.faq__item.is-open .sign { transform: rotate(45deg); }
.faq__a { max-height: 0; overflow: hidden; transition: max-height .28s ease; color: var(--gray); }
/* Headroom for the longest answer (playoff format) once it wraps on a phone. */
.faq__item.is-open .faq__a { max-height: 420px; }
.faq__a-inner { padding: 0 4px 26px; max-width: 70ch; line-height: 1.65; }
.faq__a-inner strong { color: var(--white); font-weight: 700; }
.faq__a-inner a { color: var(--volt); border-bottom: 1px solid rgba(200, 248, 42, 0.35); }
@media (hover: hover) { .faq__a-inner a:hover { border-bottom-color: var(--volt); } }

/* =====================================================================
   FOOTER / CONTACT
   ===================================================================== */
.footer { border-top: 1px solid var(--line); padding-top: clamp(60px, 10vh, 120px); position: relative; overflow: hidden; }
.footer__grid { display: grid; gap: 44px; grid-template-columns: 1fr; }
.footer__title {
  font-family: var(--font-display); font-weight: 900; text-transform: uppercase; line-height: 0.9;
  font-size: clamp(40px, 7vw, 72px);
}
.footer__title .accent { color: var(--volt); display: block; }
.contact-list { list-style: none; display: grid; gap: 16px; }
.contact-list li { display: flex; align-items: center; gap: 14px; color: var(--gray); font-size: 15px; }
.contact-list .ico { color: var(--volt); flex: none; width: 20px; text-align: center; }
.foot-links { display: grid; gap: 10px; }
.foot-links .fs-label { font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gray-2); margin-bottom: 6px; }
.foot-links nav { display: grid; gap: 10px; }
.foot-links a { color: var(--gray); font-family: var(--font-mono); font-size: 14px; transition: color .15s ease; }
@media (hover: hover) { .foot-links a:hover { color: var(--volt); } }
@media (min-width: 900px) { .footer__grid { grid-template-columns: 1.2fr 1fr 1fr; } }

/* crest above the "Hit The Court." heading */
.footer__brand { display: block; margin-bottom: 26px; }
.footer__brand img { height: var(--logo-h-foot); width: auto; display: block; }

/* giant outlined ghost wordmark */
.footer__ghost {
  margin-top: clamp(50px, 9vh, 110px);
  font-family: var(--font-display); font-weight: 900; text-transform: uppercase;
  /* Sized so the whole name fits instead of being sliced mid-letter. In
     Archivo 900 "SALSOSOS" renders 6.159x its font-size, and the wrap is
     ~0.9vw wide until it caps at 1200px (a 1072px box) -- so 0.9vw / 6.159
     = 14.2vw, capped at 170px. 13.8vw is that with margin to spare, because
     vw counts the scrollbar the layout box does not. Re-measure if the name
     changes -- a longer one clips silently (nowrap + overflow:hidden). */
  font-size: clamp(80px, 13.8vw, 170px); line-height: 0.8; letter-spacing: 0.02em;
  color: transparent; -webkit-text-stroke: 1.5px var(--line-2); text-stroke: 1.5px var(--line-2);
  white-space: nowrap; overflow: hidden; user-select: none;
}
.footer__bar {
  border-top: 1px solid var(--line); margin-top: 30px; padding: 24px 0 40px;
  display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between;
  color: var(--gray-2); font-size: 12px; letter-spacing: 0.08em;
}
/* Staff link into /edit. Intentionally quiet — it should be findable by
   someone looking for it, not a call to action for visitors. Tap target is
   padded to 44px tall so it clears the touch minimum on phones. */
.footer__edit {
  color: var(--gray-2); text-decoration: none;
  border-bottom: 1px solid var(--line-2);
  padding: 12px 0; margin: -12px 0;
}
@media (hover: hover) {
  .footer__edit:hover { color: var(--volt); border-bottom-color: var(--volt); }
}

/* =====================================================================
   MOBILE REFINEMENTS  (≤ 640px)
   ---------------------------------------------------------------------
   Everything above is the full-size design. This block only tightens it
   for phones: element sizing, tap targets (44px minimum) and vertical
   rhythm. It changes nothing about the desktop composition.
   ===================================================================== */
@media (max-width: 640px) {
  :root {
    --topbar-h: 60px;      /* 72px ate ~10% of a phone screen           */
    --gap-section: 56px;   /* was ~90px top AND bottom = 180px per seam */
    --logo-h: 40px;        /* leaves 10px of bar above and below        */
    --logo-h-foot: 72px;
  }

  /* --- top bar ----------------------------------------------------- */
  /* The CTA rendered 80px tall inside the 72px bar, so it overhung the
     bar and crossed the hairline; "Book Now" also wrapped to two lines. */
  .topbar .btn {
    padding: 11px 16px; font-size: 12px; letter-spacing: 0.1em; border-width: 1.5px;
  }
  /* The crest + wordmark + CTA all share a 320px-wide bar, so the wordmark
     tightens rather than letting the name push the button off the edge. */
  .logo { gap: 8px; min-height: 40px; }
  .logo__name { font-size: 17px; letter-spacing: 0.02em; }
  .logo__sub { font-size: 8px; letter-spacing: 0.26em; margin-top: 3px; }
  .footer__brand { margin-bottom: 20px; }

  /* --- hero -------------------------------------------------------- */
  /* The clamp's 28px floor left the headline reading small on phones.
     34px matches 5.3vw exactly at this breakpoint, so the desktop curve
     is untouched and the two meet without a jump. */
  .hero__title { font-size: clamp(30px, 9vw, 34px); margin: 14px 0 16px; }
  .hero__sub { margin-bottom: 26px; }
  .hero { padding-top: 16px; padding-bottom: 16px; }

  /* --- section headings -------------------------------------------- */
  .section-head { margin-bottom: 28px; }
  .section-title { margin-top: 12px; }

  /* --- about ------------------------------------------------------- */
  .about__grid { gap: 28px; }
  .about__points { margin-top: 22px; }
  .values { margin-top: 24px; }

  /* --- standings --------------------------------------------------- */
  .row__main { padding: 16px 12px; }
  .row__team { font-size: 18px; }
  .row__pts { font-size: 20px; }

  /* --- calendar ---------------------------------------------------- */
  .status-card { padding: 16px; }
  .cal__month, .cal__events { padding: 16px 14px; }
  /* aspect-ratio:1 made the day cells 38×38 — under the 44px touch
     minimum. Let them go taller than they are wide instead. */
  .cal__cell { aspect-ratio: auto; min-height: 44px; }
  .cal__grid, .cal__dow { gap: 4px; }
  .cal__today { display: block; padding: 14px 0; margin-top: 8px; }  /* was 17px tall */
  .cal-ev__actions { gap: 8px; }
  .cal-ev__btn { flex: 1 1 100%; padding: 12px 14px; }               /* was 35px tall */

  /* --- coaches ----------------------------------------------------- */
  /* 4/5 at full width made each photo slot 417px tall and the section
     2,676px — an enormous scroll through empty placeholders. */
  .coaches { gap: 16px; }
  .coach__photo { aspect-ratio: 3/2; }
  .coach__body { padding: 18px 18px 22px; }

  /* --- gallery ----------------------------------------------------- */
  .gallery { gap: 8px; }

  /* --- pricing ----------------------------------------------------- */
  .tiers { gap: 14px; }
  .tier { padding: 26px 20px; }
  .tier__price { font-size: 42px; }
  .tier__list { margin: 18px 0 24px; }

  /* --- faq --------------------------------------------------------- */
  .faq__q { padding: 20px 2px; gap: 14px; }

  /* --- footer ------------------------------------------------------ */
  .footer__grid { gap: 32px; }
  /* The ghost wordmark is white-space:nowrap inside an overflow:hidden
     box: at the clamp's 80px floor it was 642px of text in a 335px box,
     so it was sliced mid-letter. 12vw fits "YOUR NAME" from 320px up
     (measured: 263px of text in a 265px box at the 320px worst case).
     Re-measure when the real league name replaces it. */
  .footer__ghost { font-size: 12vw; margin-top: 44px; }
  .contact-list li { min-height: 44px; }        /* 24px rows were poor tap targets */
  .contact-list li a { display: inline-block; padding: 10px 0; }

  /* --- lightbox ---------------------------------------------------- */
  .lightbox { padding: 16px; }
  .lightbox__close { top: 10px; right: 12px; padding: 4px 10px; }
  .lightbox__nav { font-size: 34px; padding: 16px 12px; }
}