/* ══════════════════════════════════════════════════════════════════════
   SURYA SPORTS ACADEMY — its own small site (templates/academy/).

   Loaded AFTER site.css, never instead of it. The cards, buttons, prose, pager
   and footer grid are the school's own (sp-), because an academy post IS a
   school post and a sports result IS a school achievement. Everything here is
   what makes these pages the academy's: a dark navy menu instead of the
   school's cream one, a full-bleed pitch for a hero, and a field-green accent
   beside the gold.

   ⚠ No second copy of the palette. The navy, gold and their ink twins come
   from site.css's :root, so contrast_test A10's copy of --gold-ink stays the
   only one to keep fixed. The tokens below are the academy's ADDITIONS.
   Same rule as audit 7.3: --field fills a shape, --field-ink carries a word.

   Prefix: ac- ("academy"). Nothing may collide with sp- or lg-.
══════════════════════════════════════════════════════════════════════ */
:root {
  --field:       #1d7a4c;   /* fills: rules, dots, glows. White on it is 5.3:1 */
  --field-deep:  #135c38;
  --field-ink:   #17683f;   /* a WORD on paper — 6.8:1 on white */
  --field-soft:  rgba(29,122,76,.10);
  --field-line:  rgba(29,122,76,.30);
  --pitch:       #081b38;   /* the hero's night sky — deeper than --navy-deep */
}

/* Audit 7.5 — the shared ring is navy, invisible on every dark surface below.
   Re-pointed once here instead of per control. Gold on navy is 6.4:1. */
.ac-util, .ac-nav, .ac-mobile, .ac-hero, .ac-page-hero, .ac-join { --focus-ring: var(--gold); }

/* ══════════════════════════ THE WAY BACK ══════════════════════════ */
.ac-util { background: var(--pitch); color: rgba(255,255,255,.78); font-size: 12.5px; font-weight: 600; }
/* 40px around 32px links: the shared focus ring (a11y.css) sits 4px outside
   the element, and at 36px its top fell off the top of the window and its
   bottom went under the sticky menu — focus_motion_test measured the ring on
   "back to the school" at 576 of 792 pixels. */
.ac-util-in { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 40px; }
.ac-util a { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; transition: color .2s; min-width: 0; }
.ac-util a:hover { color: var(--gold); }
.ac-util-back span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ac-util-call { flex-shrink: 0; }
.ac-util i { font-size: 12px; color: var(--gold); }

/* ══════════════════════════ THE MENU ══════════════════════════ */
.ac-nav { position: sticky; top: 0; z-index: 40; background: rgba(11,42,91,.97); backdrop-filter: blur(14px); box-shadow: 0 1px 0 rgba(255,255,255,.06), 0 10px 30px rgba(3,14,32,.28); }
/* Gold and green meeting in the middle — the school's colour and the ground's. */
.ac-nav::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: linear-gradient(90deg, var(--gold) 0%, var(--gold) 50%, var(--field) 50%, var(--field) 100%); }
.ac-nav-in { display: flex; align-items: center; gap: 24px; height: 74px; }

.ac-brand { display: flex; align-items: center; gap: 12px; min-width: 0; margin-right: auto; }
.ac-badge {
  width: 46px; height: 46px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle, var(--navy-deep) 0 58%, var(--field) 58% 66%, var(--navy-deep) 66% 74%, var(--gold) 74% 100%);
  color: var(--gold); font-size: 19px;
  box-shadow: 0 0 0 2px rgba(255,255,255,.12);
}
.ac-badge-sm { width: 40px; height: 40px; font-size: 16px; }
.ac-brand-txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.ac-brand-name { font-family: var(--serif); font-size: 17px; font-weight: 700; color: #fff; letter-spacing: .5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ac-brand-sub { font-size: 10.5px; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; color: rgba(255,255,255,.66); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.ac-links { display: flex; align-items: center; gap: 4px; }
.ac-links a { position: relative; font-size: 14px; font-weight: 600; color: rgba(255,255,255,.8); padding: 10px 14px; border-radius: var(--r-pill); white-space: nowrap; transition: color .2s, background .2s; }
.ac-links a:hover { color: #fff; background: rgba(255,255,255,.07); }
.ac-links a[aria-current="page"] { color: #fff; }
.ac-links a[aria-current="page"]::after { content: ''; position: absolute; left: 14px; right: 14px; bottom: 3px; height: 2px; border-radius: 2px; background: var(--gold); }

.ac-nav-join { padding: 11px 20px; font-size: 13.5px; box-shadow: none; flex-shrink: 0; }

.ac-burger { display: none; flex-direction: column; gap: 5px; padding: 10px; flex-shrink: 0; }
.ac-burger span { width: 22px; height: 2px; background: #fff; border-radius: 2px; }

.ac-mobile { display: none; background: var(--navy-deep); border-top: 1px solid rgba(255,255,255,.08); padding: 10px 0 18px; }
.ac-mobile.is-open { display: block; }
.ac-mobile > a { display: block; padding: 13px 28px; font-size: 16px; font-weight: 600; color: rgba(255,255,255,.86); }
.ac-mobile > a:hover, .ac-mobile > a[aria-current="page"] { color: var(--gold); }
.ac-mobile-foot { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 14px 28px 0; margin-top: 8px; border-top: 1px solid rgba(255,255,255,.08); }
.ac-mobile-back { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; font-size: 14px; font-weight: 600; color: rgba(255,255,255,.72); }

/* ══════════════════════════ THE PITCH (shared by both heroes) ══════════════════════════ */
/* Mown stripes and a crease line, drawn in CSS. The academy has no photographs
   on the site yet (SPORTS_ACADEMY_PLAN §11), and a hero that waits for one is
   a hero with an empty frame in it. */
.ac-field-lines {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg, transparent 0 calc(100% - 1px), rgba(255,255,255,.05) calc(100% - 1px)),
    repeating-linear-gradient(100deg, rgba(29,122,76,.10) 0 90px, rgba(29,122,76,.03) 90px 180px);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 55%);
          mask-image: linear-gradient(180deg, transparent 0%, #000 55%);
}

/* ══════════════════════════ HOME HERO ══════════════════════════ */
.ac-hero { position: relative; overflow: hidden; color: #fff; background: linear-gradient(170deg, var(--navy) 0%, var(--pitch) 78%); padding: 84px 0 136px; }
.ac-hero-glow { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(640px 420px at 82% 26%, rgba(244,163,0,.16), transparent 64%), radial-gradient(620px 380px at 6% 100%, rgba(29,122,76,.30), transparent 70%); }
.ac-hero-in { position: relative; z-index: 1; display: grid; grid-template-columns: 1.2fr .8fr; gap: 56px; align-items: center; }
.ac-hero h1 { font-family: var(--serif); font-size: clamp(34px, 5vw, 58px); font-weight: 700; line-height: 1.1; letter-spacing: .3px; margin-bottom: 18px; }
.ac-hero h1 span { color: var(--gold); }
.ac-hero-sub { font-size: 17.5px; line-height: 1.75; color: rgba(255,255,255,.8); max-width: 590px; }
.ac-hero-btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

/* The target. Same rings as the homepage band (school_website.html), so the
   door on the front page and the room it opens into look like one place. */
.ac-hero-art { position: relative; width: 100%; max-width: 380px; margin-left: auto; }
.ac-target {
  position: relative; width: 100%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle closest-side,
    #ffd23f 0 9%, #f4b400 9% 19%, #e63b3b 19% 29%, #c62828 29% 39%,
    #3a86d6 39% 49%, #2266b5 49% 59%, #1c2330 59% 69%, #11161f 69% 79%,
    #faf7ef 79% 89%, #e8e2d2 89% 100%);
  box-shadow: 0 0 0 14px rgba(255,255,255,.05), 0 0 0 15px rgba(29,122,76,.35), 0 40px 80px rgba(0,0,0,.5);
}
.ac-arrow { position: absolute; left: 50%; top: 50%; width: 60%; height: 5px; margin-top: -2.5px; border-radius: 3px; background: linear-gradient(90deg, #6b4a2b, #b08455); transform: rotate(-32deg); transform-origin: 0 50%; box-shadow: 0 6px 10px rgba(0,0,0,.35); }
.ac-arrow::after { content: ''; position: absolute; right: -4px; top: 50%; width: 30px; height: 18px; transform: translateY(-50%); background: var(--gold); clip-path: polygon(0 50%, 40% 0, 100% 0, 60% 50%, 100% 100%, 40% 100%); }

/* Quick facts — lifted over the bottom of the hero, so the first thing under
   the heading is what the academy IS, in four words or so each. */
.ac-facts-wrap { position: relative; z-index: 2; margin-top: -68px; }
.ac-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; }
.ac-fact { display: flex; align-items: center; gap: 14px; background: var(--paper); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 18px 20px; box-shadow: var(--shadow-md); }
.ac-fact-ic { width: 48px; height: 48px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: var(--field-soft); border: 1px solid var(--field-line); font-size: 23px; line-height: 1; }
.ac-fact-label { font-size: 15px; font-weight: 700; color: var(--navy); line-height: 1.35; }

/* ══════════════════════════ INNER-PAGE HERO ══════════════════════════ */
.ac-page-hero { position: relative; overflow: hidden; color: #fff; background: linear-gradient(170deg, var(--navy) 0%, var(--pitch) 90%); padding: 48px 0 52px; }
.ac-page-hero-in { position: relative; z-index: 1; max-width: 1160px; }
.ac-page-hero h1 { font-family: var(--serif); font-size: clamp(28px, 4vw, 44px); font-weight: 700; line-height: 1.16; letter-spacing: .3px; margin-bottom: 12px; max-width: 820px; }
.ac-page-hero h1 span { color: var(--gold); }
.ac-page-hero .sp-hero-sub { max-width: 680px; }
.ac-stat-sm { font-size: 17px; }

/* ══════════════════════════ PAGE BODY ══════════════════════════ */
.ac-main { padding-top: 60px; }
.ac-block-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 24px; flex-wrap: wrap; }
.ac-eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: 11.5px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--field-ink); margin-bottom: 6px; }
.ac-eyebrow::before { content: ''; width: 22px; height: 2px; border-radius: 2px; background: var(--field); }
.ac-block-title { font-family: var(--serif); font-size: clamp(24px, 3vw, 32px); font-weight: 700; color: var(--navy); line-height: 1.2; }
.ac-more { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 18px; border-radius: var(--r-pill); border: 1.5px solid var(--navy-line); font-size: 13.5px; font-weight: 700; color: var(--navy); transition: border-color .2s, background .2s, color .2s; }
.ac-more:hover { border-color: var(--gold); background: var(--gold-soft); color: var(--gold-ink); }
.ac-more i { transition: transform .2s; }
.ac-more:hover i { transform: translateX(3px); }

/* A plain card on these pages carries a green rule, not the school's gold one —
   the one place a card says which site it is on. */
.ac .sp-ach.is-plain, .ac .sp-post.is-plain { border-top-color: var(--field); }

/* ══════════════════════════ JOIN BAND ══════════════════════════ */
.ac-join { position: relative; overflow: hidden; margin-top: 64px; display: grid; grid-template-columns: 1.3fr auto; gap: 32px; align-items: center; padding: 46px 48px; border-radius: var(--r-2xl); color: #fff; background: linear-gradient(150deg, var(--navy) 0%, var(--pitch) 100%); border: 1px solid rgba(29,122,76,.4); scroll-margin-top: 96px; }
.ac-join-glow { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(420px 260px at 100% 0%, rgba(244,163,0,.16), transparent 70%), radial-gradient(460px 300px at 0% 100%, rgba(29,122,76,.32), transparent 70%); }
.ac-join-copy, .ac-join-btns { position: relative; z-index: 1; }
.ac-join h2 { font-family: var(--serif); font-size: clamp(24px, 3vw, 34px); font-weight: 700; line-height: 1.2; margin-bottom: 10px; }
.ac-join h2 span { color: var(--gold); }
.ac-join p { font-size: 15.5px; line-height: 1.7; color: rgba(255,255,255,.8); max-width: 560px; }
.ac-join .ac-join-where { display: flex; gap: 9px; margin-top: 14px; font-size: 13.5px; color: rgba(255,255,255,.7); }
.ac-join-where i { color: var(--gold); margin-top: 3px; flex-shrink: 0; }
.ac-join-btns { display: flex; flex-direction: column; gap: 12px; align-items: stretch; }
/* The main's first block is this band when nothing else has content — the
   hero's facts already sit above it, so it does not need the full gap. */
.ac-main .sp-wrap > .ac-join:first-child { margin-top: 8px; }

/* ══════════════════════════ FOOTER ══════════════════════════ */
.ac-foot-accent { background: linear-gradient(90deg, var(--gold) 0%, var(--gold) 50%, var(--field) 50%, var(--field) 100%); }
.ac-foot .sp-foot-brand-row .ac-badge { box-shadow: 0 0 0 1.5px rgba(255,255,255,.14); }

/* ══════════════════════════ PHASE C — SPORTS, COACHES, TIMINGS ══════════════════════════ */

/* The utility bar's right side: WhatsApp (when the office has set a number)
   and the phone. */
.ac-util-reach { display: flex; align-items: center; gap: 18px; flex-shrink: 0; }
.ac-util-wa i { color: #4fd18b; }

/* An uploaded logo sits inside the same round badge the bullseye does, so the
   bar keeps its shape whichever the office has chosen. */
.ac-badge-img { background: #fff; overflow: hidden; }
.ac-badge-img img { width: 100%; height: 100%; object-fit: contain; }

/* The Sports disclosure. <details> so it opens with no script at all;
   js/pages/academy.js only closes it on Escape and on a click elsewhere. */
.ac-drop { position: relative; }
.ac-drop > summary { list-style: none; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-size: 14px; font-weight: 600; color: rgba(255,255,255,.8); padding: 10px 14px; border-radius: var(--r-pill); white-space: nowrap; transition: color .2s, background .2s; }
.ac-drop > summary::-webkit-details-marker { display: none; }
.ac-drop > summary:hover, .ac-drop[open] > summary { color: #fff; background: rgba(255,255,255,.07); }
/* inline-block: a transform does not apply to an inline box. */
.ac-drop > summary i { display: inline-block; font-size: 11px; line-height: 1; transition: transform .2s; }
.ac-drop[open] > summary i { transform: rotate(180deg); }
.ac-drop.is-here > summary { color: #fff; position: relative; }
.ac-drop.is-here > summary::after { content: ''; position: absolute; left: 14px; right: 14px; bottom: 3px; height: 2px; border-radius: 2px; background: var(--gold); }
.ac-drop-panel { position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%); min-width: 210px; background: var(--navy-deep); border: 1px solid rgba(255,255,255,.1); border-radius: var(--r-md); padding: 8px; box-shadow: 0 18px 40px rgba(3,14,32,.45); z-index: 50; display: flex; flex-direction: column; gap: 2px; }
.ac-drop-panel a { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--r-sm); font-size: 14px; font-weight: 600; color: rgba(255,255,255,.86); white-space: nowrap; }
.ac-drop-panel a:hover { background: rgba(255,255,255,.07); color: #fff; }
/* The page you are on is tinted, not underlined — the bar's underline rule
   (.ac-links a[aria-current]) would otherwise draw across the list item. */
.ac-drop-panel a[aria-current="page"] { color: var(--gold); background: rgba(244,163,0,.10); }
.ac-drop-panel a[aria-current="page"]::after { content: none; }
.ac-drop-ic { width: 22px; text-align: center; font-size: 17px; line-height: 1; }

/* ── A photograph behind a hero ──
   The office's picture of the ground, darkened from the left so the heading
   keeps its contrast over any photograph somebody uploads. */
.ac-hero.has-photo { background: var(--pitch); }
.ac-hero-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ac-hero.has-photo::after { content: ''; position: absolute; inset: 0; z-index: 0; background: linear-gradient(90deg, rgba(8,27,56,.94) 0%, rgba(8,27,56,.78) 45%, rgba(8,27,56,.35) 100%), linear-gradient(0deg, rgba(8,27,56,.75) 0%, transparent 45%); }
.ac-hero.has-photo .ac-field-lines, .ac-hero.has-photo .ac-hero-glow { display: none; }
.ac-hero.has-photo .ac-hero-in { grid-template-columns: 1fr; max-width: 1160px; }
.ac-hero.has-photo .ac-hero-in > div { max-width: 680px; }

/* A sport's hero is shorter than the home's: there are no facts to lift over it. */
.ac-sport-hero { padding: 56px 0 72px; }
.ac-sport-hero .ac-hero-in { grid-template-columns: 1fr; }
.ac-sport-hero-ic { font-size: .8em; }

/* ── Sport cards ── */
.ac-sports { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; }
.ac-sports.is-one { grid-template-columns: minmax(0, 560px); }
/* "Other sports" at the foot of a sport's page: a way onward, not a second
   hero — so a small side-by-side card, however few sports there are. */
.ac-sports.is-compact { grid-template-columns: repeat(auto-fill, minmax(300px, 380px)); gap: 14px; }
.ac-sports.is-compact .ac-sport { flex-direction: row; border-radius: var(--r-lg); }
.ac-sports.is-compact .ac-sport-photo { flex: 0 0 120px; aspect-ratio: auto; min-height: 110px; }
.ac-sports.is-compact .ac-sport-ic { font-size: 40px; }
.ac-sports.is-compact .ac-sport-body { border-top: 0; border-left: 3px solid var(--field); padding: 16px 18px; gap: 4px; }
.ac-sports.is-compact .ac-sport-name { font-size: 18px; }
.ac-sports.is-compact .ac-sport-sum { font-size: 13.5px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.ac-sport { display: flex; flex-direction: column; background: var(--paper); border: 1px solid var(--border); border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--shadow-sm); transition: transform .3s var(--ease), box-shadow .3s; }
.ac-sport:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.ac-sport-photo { position: relative; aspect-ratio: 16/9; background: linear-gradient(160deg, var(--navy) 0%, var(--pitch) 100%); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.ac-sport-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.ac-sport:hover .ac-sport-photo img { transform: scale(1.04); }
.ac-sport-photo .ac-field-lines { -webkit-mask-image: none; mask-image: none; }
.ac-sport-ic { position: relative; font-size: 64px; line-height: 1; filter: drop-shadow(0 10px 18px rgba(0,0,0,.35)); }
.ac-sport-body { padding: 22px 24px 24px; display: flex; flex-direction: column; gap: 8px; flex: 1; border-top: 3px solid var(--field); }
.ac-sport-name { font-family: var(--serif); font-size: 22px; font-weight: 700; color: var(--navy); line-height: 1.25; }
.ac-sport-sum { font-size: 14.5px; line-height: 1.65; color: var(--text-mid); }
.ac-sport-more { margin-top: auto; padding-top: 10px; display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 700; color: var(--field-ink); }
.ac-sport-more i { transition: transform .2s; }
.ac-sport:hover .ac-sport-more i { transform: translateX(4px); }

/* ── Why train with us + Meet the coaches, side by side ── */
.ac-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }
.ac-pair.is-single { grid-template-columns: 1fr; }
.sp-section + .ac-pair, .ac-pair + .sp-section { margin-top: 54px; }
.ac-pair > .sp-section + .sp-section { margin-top: 0; }
.ac-reasons { display: grid; gap: 12px; }
.ac-pair.is-single .ac-reasons { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.ac-reason { display: flex; gap: 14px; align-items: flex-start; background: var(--paper); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 16px 18px; }
.ac-reason-ic { width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: var(--field-soft); border: 1px solid var(--field-line); font-size: 20px; line-height: 1; }
.ac-reason strong { display: block; font-size: 15px; font-weight: 700; color: var(--navy); line-height: 1.35; }
.ac-reason span { display: block; font-size: 14px; line-height: 1.6; color: var(--text-mid); margin-top: 2px; }

/* ── Coaches ── */
.ac-coaches { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 18px; }
.ac-coaches.is-compact { grid-template-columns: 1fr; gap: 12px; }
.ac-coach { display: flex; gap: 18px; align-items: flex-start; background: var(--paper); border: 1px solid var(--border); border-radius: var(--r-xl); padding: 20px; box-shadow: var(--shadow-sm); }
.ac-coaches.is-compact .ac-coach { align-items: center; padding: 14px 16px; border-radius: var(--r-lg); box-shadow: none; }
.ac-coach-photo { width: 84px; height: 84px; border-radius: 50%; overflow: hidden; flex-shrink: 0; background: linear-gradient(160deg, var(--navy) 0%, var(--pitch) 100%); box-shadow: 0 0 0 3px var(--paper), 0 0 0 5px var(--field-line); display: flex; align-items: center; justify-content: center; }
.ac-coaches.is-compact .ac-coach-photo { width: 56px; height: 56px; }
.ac-coach-photo img { width: 100%; height: 100%; object-fit: cover; }
.ac-coach-initials { font-family: var(--serif); font-size: 26px; font-weight: 700; color: var(--gold); letter-spacing: 1px; }
.ac-coaches.is-compact .ac-coach-initials { font-size: 18px; }
.ac-coach-body { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.ac-coach-name { font-family: var(--serif); font-size: 18px; font-weight: 700; color: var(--navy); line-height: 1.3; }
.ac-coach-role { font-size: 13.5px; font-weight: 600; color: var(--text-mid); }
.ac-coach-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.ac-coach-tags:empty { display: none; }
.ac-tag { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--field-ink); background: var(--field-soft); border: 1px solid var(--field-line); border-radius: var(--r-pill); padding: 3px 11px; min-height: 26px; }
/* A tag that is a LINK (a coach's sport) is a tap target: 32px, the audit 7.1
   floor. A plain tag stays 26px — nothing to press. */
a.ac-tag { min-height: 32px; }
a.ac-tag:hover { background: rgba(29,122,76,.18); }
.ac-tag-plain { color: var(--gold-ink); background: var(--gold-soft); border-color: rgba(244,163,0,.28); }
.ac-coach-bio { font-size: 14.5px; line-height: 1.7; color: var(--text-body); margin-top: 4px; }

.ac-ticks { display: grid; gap: 8px; margin-top: 4px; }
.ac-ticks li { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; line-height: 1.55; color: var(--text-body); }
.ac-ticks i { color: var(--field); margin-top: 2px; flex-shrink: 0; }

/* ── What a child learns ── */
.ac-prose { max-width: 820px; }
.ac-prose h3 { font-family: var(--serif); font-size: 20px; font-weight: 700; color: var(--navy); margin-top: 32px; line-height: 1.3; }

/* ── Kit ── */
.ac-kit { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.ac-kit.is-single { grid-template-columns: minmax(0, 620px); }
.ac-kit-card { background: var(--paper); border: 1px solid var(--border); border-top: 3px solid var(--field); border-radius: var(--r-xl); padding: 22px 24px; }
.ac-kit-card.is-bring { border-top-color: var(--gold); }
.ac-kit-card.is-bring .ac-ticks i { color: var(--gold-ink); }
.ac-kit-card h3 { display: flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 700; color: var(--navy); margin-bottom: 12px; }
.ac-kit-card h3 i { color: var(--field); }
.ac-kit-card.is-bring h3 i { color: var(--gold-ink); }

/* ── Batch tables ── */
.ac-table-wrap { overflow-x: auto; background: var(--paper); border: 1px solid var(--border); border-radius: var(--r-xl); box-shadow: var(--shadow-sm); }
.ac-table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.ac-table th { text-align: left; font-size: 11.5px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--text-muted); background: var(--cream); padding: 13px 18px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.ac-table td { padding: 14px 18px; border-bottom: 1px solid var(--border); color: var(--text-body); vertical-align: top; }
.ac-table tr:last-child td { border-bottom: 0; }
.ac-table td strong { color: var(--navy); }
.ac-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.ac-note { display: flex; gap: 10px; align-items: flex-start; margin-top: 16px; font-size: 14px; line-height: 1.6; color: var(--text-mid); }
.ac-note i { color: var(--field); margin-top: 3px; flex-shrink: 0; }
.ac-batch-group + .ac-batch-group { margin-top: 44px; }

/* ══════════════════════════ PHASE D — PHOTOS, JOIN ══════════════════════════ */

/* ── Photos ── A square-ish grid, captions under the picture rather than over
   it: a caption laid over a photograph has no contrast anybody can promise. */
/* align-items:start — a photo with no caption ends at its picture, rather than
   being stretched to its captioned neighbour with an empty white strip. */
.ac-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; align-items: start; }
.ac-photos.is-home { grid-template-columns: repeat(3, 1fr); }
.ac-photo figure { margin: 0; display: flex; flex-direction: column; background: var(--paper); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-sm); }
.ac-photo img { display: block; width: 100%; aspect-ratio: 4 / 3; height: auto; object-fit: cover; background: var(--cream); }
.ac-photo figcaption { padding: 10px 14px 12px; font-size: 13.5px; line-height: 1.5; color: var(--text-mid); border-top: 3px solid var(--field); }
.ac-note a { color: var(--field-ink); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }

/* ── The Join page ── the form, and beside it the way to just ring. */
.ac-joinpage { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 32px; align-items: start; }
.ac-form, .ac-done { background: var(--paper); border: 1px solid var(--border); border-top: 4px solid var(--field); border-radius: var(--r-xl); padding: 30px 32px 32px; box-shadow: var(--shadow-sm); }
.ac-form-title { font-family: var(--serif); font-size: 21px; font-weight: 700; color: var(--navy); line-height: 1.3; }
.ac-form-title.is-second { margin: 30px 0 14px; padding-top: 24px; border-top: 1px solid var(--border); }
.ac-form-lead { font-size: 14px; line-height: 1.6; color: var(--text-mid); margin: 6px 0 20px; }
.ac-req { display: inline-block; font-size: 10.5px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--gold-ink); background: var(--gold-soft); border-radius: var(--r-pill); padding: 1px 8px; vertical-align: 1px; }
.ac-opt { font-size: 12px; font-weight: 500; color: var(--text-muted); }

.ac-form-row { display: grid; grid-template-columns: 1fr; gap: 0 18px; }
.ac-form-row.is-two { grid-template-columns: 1fr 1fr; }
.ac-form-row.is-two:has(.is-narrow) { grid-template-columns: 1fr 130px; }
.ac-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 18px; min-width: 0; }
.ac-field label, .ac-choice legend { font-size: 14px; font-weight: 700; color: var(--navy); line-height: 1.4; }
.ac-field input[type="text"], .ac-field input[type="tel"], .ac-field select {
  width: 100%; min-height: 46px; padding: 10px 14px; font: inherit; font-size: 15.5px; color: var(--text-body);
  background: #fff; border: 1.5px solid var(--border); border-radius: var(--r-md); transition: border-color .2s, box-shadow .2s;
}
.ac-field input:hover, .ac-field select:hover { border-color: var(--navy-line); }
.ac-field input:focus, .ac-field select:focus { border-color: var(--field); box-shadow: 0 0 0 3px var(--field-soft); outline: none; }
.ac-field [aria-invalid="true"] { border-color: #c62828; }
.ac-field-err { display: flex; gap: 7px; align-items: flex-start; font-size: 13.5px; font-weight: 600; line-height: 1.45; color: #b71c1c; }
.ac-field-err i { margin-top: 2px; flex-shrink: 0; }

.ac-choice { border: 0; padding: 0; margin: 0 0 18px; }
.ac-choice legend { padding: 0; margin-bottom: 8px; }
.ac-choice-row { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.ac-radio, .ac-check { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-size: 15px; color: var(--text-body); }
.ac-radio { min-height: 44px; padding: 0 18px 0 14px; border: 1.5px solid var(--border); border-radius: var(--r-pill); background: #fff; }
.ac-radio:has(input:checked) { border-color: var(--field); background: var(--field-soft); color: var(--navy); font-weight: 700; }
.ac-radio input, .ac-check input { width: 20px; height: 20px; margin: 0; accent-color: var(--field); flex-shrink: 0; }
.ac-field-sub { margin-bottom: 0; }

/* Off the page for people, off the tree for screen readers (aria-hidden), and
   out of the tab order (tabindex -1). NOT display:none — some scripts skip a
   box that is not rendered, and those are the ones this is here to catch.
   The label and box are each the standard 1px clipped proxy, rather than sitting
   in a clipping wrapper: responsive_test B4 reads "a box that clips, holding
   something outside it" as content lost, and would be right to. */
.ac-hp { position: absolute; left: -10000px; top: auto; }
.ac-hp > * { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; border: 0; overflow: hidden; white-space: nowrap; clip: rect(0 0 0 0); clip-path: inset(50%); }

.ac-consent { margin: 8px 0 22px; padding: 16px 18px; border-radius: var(--r-md); background: var(--cream); border: 1px solid var(--border); }
.ac-consent.is-invalid { border-color: #c62828; }
.ac-check { align-items: flex-start; font-weight: 600; color: var(--navy); line-height: 1.5; }
.ac-check input { margin-top: 2px; }
.ac-consent .ac-field-err { margin-top: 8px; }
.ac-consent-note { margin-top: 10px; font-size: 13px; line-height: 1.6; color: var(--text-mid); }
.ac-consent-note a, .ac-form-errors a { color: var(--field-ink); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.ac-form-send { width: 100%; justify-content: center; min-height: 52px; font-size: 16px; }

.ac-form-errors { margin: 0 0 22px; padding: 14px 18px; border-radius: var(--r-md); background: #fdecea; border: 1.5px solid #e57373; color: #7f1d1d; font-size: 14px; line-height: 1.55; }
.ac-form-errors:focus { outline: 3px solid #c62828; outline-offset: 2px; }
.ac-form-errors-title { font-weight: 700; }
.ac-form-errors ul { margin: 6px 0 0; padding-left: 20px; list-style: disc; }
.ac-form-errors li + li { margin-top: 3px; }
.ac-form-errors a { color: #7f1d1d; }

.ac-done { text-align: center; padding: 44px 32px; }
.ac-done-ic { width: 64px; height: 64px; margin: 0 auto 16px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 30px; color: #fff; background: var(--field); box-shadow: 0 0 0 8px var(--field-soft); }
.ac-done.is-closed .ac-done-ic { background: var(--navy); box-shadow: 0 0 0 8px var(--gold-soft); color: var(--gold); font-size: 26px; }
.ac-done h2 { font-family: var(--serif); font-size: 26px; font-weight: 700; color: var(--navy); margin-bottom: 10px; }
.ac-done p { font-size: 16px; line-height: 1.7; color: var(--text-body); max-width: 520px; margin: 0 auto; }
.ac-done-btns { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 24px; }

.ac-joinpage-side { position: sticky; top: 100px; color: #fff; background: linear-gradient(160deg, var(--navy) 0%, var(--pitch) 100%); border: 1px solid rgba(29,122,76,.4); border-radius: var(--r-xl); padding: 26px 26px 28px; --focus-ring: var(--gold); }
.ac-joinpage-side h2 { font-family: var(--serif); font-size: 22px; font-weight: 700; margin-bottom: 8px; }
.ac-joinpage-side > p { font-size: 14.5px; line-height: 1.65; color: rgba(255,255,255,.8); }
.ac-side-btns { display: flex; flex-direction: column; gap: 10px; margin: 18px 0; }
.ac-side-btns .sp-btn { justify-content: center; }
.ac-side-where p { display: flex; gap: 9px; font-size: 13.5px; line-height: 1.55; color: rgba(255,255,255,.75); margin-top: 8px; }
.ac-side-where i { color: var(--gold); margin-top: 3px; flex-shrink: 0; }
.ac-side-where a { color: var(--gold); font-weight: 700; }
.ac-joinpage-side .ac-more { margin-top: 18px; color: #fff; border-color: rgba(255,255,255,.3); }
.ac-joinpage-side .ac-more:hover { color: var(--navy); }

/* ══════════════════════════ RESPONSIVE ══════════════════════════ */
/* NAV BREAKPOINT — measured, not guessed. Phase C (2026-09-15): the six-item
   menu (Home, Sports, Coaches, Timings & Fees, News, On the Field + Join) had
   39px to spare above 1160px, and Phase D's Photos item did not fit at any
   width. Phase D re-planned the bar rather than squeezing it: "Home" left the
   bar (the brand is the home link and carries aria-current on the home page;
   the phone menu and footer keep Home) and Photos took its place. See the
   Phase D note in docs/SPORTS_ACADEMY_PLAN.md §9 for the re-measurement.
   Measure the brand name's scrollWidth against its clientWidth and the right
   edge of .ac-nav-join against window.innerWidth, never the page's
   scrollWidth, which site.css's `body { overflow-x: hidden }` hides a clipped
   bar from. */
@media (max-width: 1024px) {
  .ac-hero-in { grid-template-columns: 1fr; gap: 40px; }
  .ac-hero-art { max-width: 260px; margin: 0; }
  .ac-join { grid-template-columns: 1fr; }
  .ac-join-btns { flex-direction: row; flex-wrap: wrap; }
  .ac-pair { grid-template-columns: 1fr; gap: 0; }
  .ac-pair > .sp-section + .sp-section { margin-top: 54px; }
  .ac-kit { grid-template-columns: 1fr; }
  .ac-joinpage { grid-template-columns: 1fr; }
  .ac-joinpage-side { position: static; }
  .ac-photos.is-home { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 1160px) {
  .ac-links, .ac-nav-join { display: none; }
  .ac-burger { display: flex; }
  .ac-nav-in { height: 66px; }
}
@media (max-width: 768px) {
  .ac-mobile > a { padding: 13px 20px; }
  .ac-mobile-foot { padding: 14px 20px 0; }
  .ac-hero { padding: 56px 0 112px; }
  .ac-hero-art { display: none; }
  .ac-hero-sub { font-size: 16px; }
  .ac-facts { grid-template-columns: 1fr 1fr; gap: 10px; }
  .ac-fact { flex-direction: column; align-items: flex-start; gap: 10px; padding: 16px; }
  .ac-fact-ic { width: 42px; height: 42px; font-size: 20px; }
  .ac-fact-label { font-size: 14px; }
  .ac-page-hero { padding: 38px 0 42px; }
  .ac-main { padding-top: 44px; }
  .ac-join { padding: 34px 24px; margin-top: 48px; }
  .ac-sport-hero { padding: 40px 0 52px; }
  .ac-sports, .ac-sports.is-compact, .ac-coaches { grid-template-columns: 1fr; }
  .ac-sport-name { font-size: 20px; }
  .ac-coach { padding: 16px; gap: 14px; }
  .ac-coach-photo { width: 64px; height: 64px; }
  .ac-coach-initials { font-size: 20px; }
  .ac-util-reach { gap: 12px; }
  .ac-form, .ac-done { padding: 22px 18px 24px; }
  .ac-form-row.is-two, .ac-form-row.is-two:has(.is-narrow) { grid-template-columns: 1fr; }
  .ac-photos, .ac-photos.is-home { grid-template-columns: 1fr 1fr; gap: 10px; }
  .ac-photo figcaption { padding: 8px 10px 10px; font-size: 12.5px; }
  /* A batch table becomes one small card per batch, each value labelled from
     its cell's data-label — five columns do not fit a phone, and a table that
     scrolls sideways hides the Fee column from the parent looking for it. */
  .ac-table thead { display: none; }
  .ac-table, .ac-table tbody, .ac-table tr, .ac-table td { display: block; width: 100%; }
  .ac-table tr { padding: 12px 16px; border-bottom: 1px solid var(--border); }
  .ac-table tr:last-child { border-bottom: 0; }
  .ac-table td { display: flex; justify-content: space-between; gap: 14px; padding: 4px 0; border: 0; text-align: right; }
  .ac-table td::before { content: attr(data-label); flex-shrink: 0; font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--text-muted); text-align: left; padding-top: 2px; }
}
@media (max-width: 480px) {
  /* Audit 7.1 — the 360px floor: nothing a thumb must hit under 32px. */
  .ac-brand-name { font-size: 15px; }
  .ac-brand-sub { font-size: 10px; letter-spacing: .6px; }
  .ac-badge { width: 40px; height: 40px; font-size: 16px; }
  .ac-hero-btns .sp-btn, .ac-join-btns .sp-btn { width: 100%; }
  .ac-facts-wrap { margin-top: -84px; }
  .ac-block-head { align-items: flex-start; }
  /* The utility bar at 360px: the school's name gives way to the two ways to
     reach the academy, which keep their icons and drop their words. */
  .ac-util-wa span { display: none; }
  .ac-sport-ic { font-size: 52px; }
}