/* ══════════════════════════════════════════════════════════════════════
   SURYODYA — public site pages (Achievements, Blog). Standalone.

   Shares the crest identity — navy + sunrise gold, Cinzel display — with
   templates/school_website.html, static/css/legal.css and the printed
   letterhead. Self-contained on purpose: these pages load NONE of the ERP
   bundle, exactly like the homepage and the legal notices, because they are
   served to visitors who have no session and no reason to download an
   application's stylesheet.

   That standalone-ness is why the palette is repeated below rather than
   imported. It is a SECOND COPY, and tests/contrast_test.py part A10 knows
   it: fixing a token here is not fixing it on the homepage, and fixing it on
   the homepage is not fixing it here. --gold-ink is the one that matters —
   #f4a300 on white is 2.1:1 and fails AA outright, which is why no word on
   any of these pages is ever painted in --gold on a light surface.

   Prefix: sp- ("site page"). Nothing here may collide with the lg- classes in
   legal.css or the un-prefixed classes inside school_website.html, since a
   future page could reasonably load two of the three.
══════════════════════════════════════════════════════════════════════ */
:root {
  --navy:        #0b2a5b;
  --navy-hover:  #103a78;
  --navy-deep:   #07203f;
  --navy-soft:   rgba(11,42,91,.06);
  --navy-line:   rgba(11,42,91,.10);
  --gold:        #f4a300;
  --gold-deep:   #d98a00;
  --gold-ink:    #8a5600;   /* 4.1:1 -> 6.2:1 on paper. Audit 7.3 */
  --gold-soft:   rgba(244,163,0,.12);
  --gold-line:   rgba(244,163,0,.32);
  --paper:       #ffffff;
  --ivory:       #FFFDF8;
  --cream:       #FAF6EE;
  --cream-deep:  #F3ECDD;
  --text:        #17233b;
  --text-body:   #3c4964;
  --text-mid:    #5b6a80;   /* 4.4:1 on cream. Audit 7.3 */
  --text-muted:  #5f6c80;   /* 4.6:1 on white. Audit 7.3 */
  --border:      rgba(11,42,91,.10);
  --border-gold: rgba(244,163,0,.30);
  --shadow-sm:   0 4px 14px rgba(11,42,91,.07);
  --shadow-md:   0 10px 34px rgba(11,42,91,.10);
  --shadow-lg:   0 22px 60px rgba(11,42,91,.14);
  --shadow-gold: 0 12px 30px rgba(244,163,0,.28);
  --r-sm:8px; --r-md:14px; --r-lg:20px; --r-xl:28px; --r-2xl:34px; --r-pill:999px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --serif: 'Cinzel', 'Playfair Display', Georgia, 'Times New Roman', serif;
  --sans: 'Libre Franklin', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--sans); color: var(--text-body); background: var(--ivory);
  -webkit-font-smoothing: antialiased; line-height: 1.6; overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }
img { max-width: 100%; height: auto; display: block; }
ul { list-style: none; }

.sp-wrap { max-width: 1160px; margin: 0 auto; padding: 0 28px; }

/* Audit 7.5 — the shared focus ring (base/a11y.css) is navy, which is right on
   paper and invisible on the navy panels. --focus-ring is a custom property, so
   re-pointing it on the dark surfaces gives every control inside a gold ring
   with no per-control rules. Gold on navy is 6.4:1. */
.sp-hero, .sp-foot, .sp-cta { --focus-ring: var(--gold); }

/* ══════════════════════════════ NAV ══════════════════════════════ */
.sp-nav { position: sticky; top: 0; z-index: 40; background: rgba(255,253,248,.94); backdrop-filter: blur(16px); border-bottom: 1px solid var(--border); }
.sp-nav-accent { height: 3px; background: linear-gradient(90deg, var(--navy), var(--gold) 50%, var(--navy)); }
.sp-nav-in { display: flex; align-items: center; justify-content: space-between; gap: 18px; height: 70px; }
.sp-logo { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.sp-logo-mark { width: 44px; height: 44px; border-radius: 50%; overflow: hidden; border: 2px solid var(--gold-line); background: #fff; flex-shrink: 0; }
.sp-logo-mark img { width: 100%; height: 100%; object-fit: cover; }
.sp-logo-mark-ph { width: 100%; height: 100%; background: var(--navy); color: var(--gold); display: flex; align-items: center; justify-content: center; font-size: 20px; }
.sp-logo-name { font-family: var(--serif); font-size: 16px; font-weight: 700; color: var(--navy); letter-spacing: .4px; white-space: nowrap; }
.sp-logo-sub { font-size: 10px; font-weight: 600; letter-spacing: 1.4px; text-transform: uppercase; color: var(--gold-ink); display: block; }

.sp-links { display: flex; align-items: center; gap: 2px; }
.sp-links a { font-size: 13.5px; font-weight: 600; color: var(--text-body); padding: 8px 12px; border-radius: var(--r-pill); transition: color .2s; position: relative; white-space: nowrap; }
.sp-links a:hover { color: var(--navy); }
.sp-links a[aria-current="page"] { color: var(--navy); }
.sp-links a[aria-current="page"]::after { content: ''; position: absolute; bottom: 2px; left: 12px; right: 12px; height: 2px; background: var(--gold); border-radius: 2px; }

.sp-doors { display: flex; align-items: stretch; border: 1.5px solid var(--navy-line); border-radius: var(--r-pill); overflow: hidden; flex-shrink: 0; }
.sp-doors a { font-size: 13px; font-weight: 700; color: var(--navy); padding: 8px 14px; display: flex; align-items: center; gap: 6px; transition: background .2s; white-space: nowrap; }
.sp-doors a + a { border-left: 1.5px solid var(--navy-line); }
.sp-doors a:hover { background: var(--navy-soft); }

.sp-burger { display: none; flex-direction: column; gap: 5px; padding: 10px; }
.sp-burger span { width: 22px; height: 2px; background: var(--navy); border-radius: 2px; }
.sp-mobile { display: none; background: var(--ivory); border-top: 1px solid var(--border); padding: 12px 0; }
.sp-mobile.is-open { display: block; }
.sp-mobile a { display: block; padding: 12px 28px; font-size: 16px; font-weight: 600; color: var(--text-body); }
.sp-mobile a:hover { color: var(--gold-ink); }
.sp-mobile-doors { display: flex; gap: 10px; padding: 14px 28px 4px; flex-wrap: wrap; }

/* ══════════════════════════════ BUTTONS ══════════════════════════════ */
.sp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; font-weight: 700; font-size: 14px; padding: 12px 24px; border-radius: var(--r-pill); transition: transform .25s var(--ease), background .25s, border-color .25s, color .25s; white-space: nowrap; }
.sp-btn-gold { background: var(--gold); color: var(--navy-deep); box-shadow: var(--shadow-gold); }
.sp-btn-gold:hover { background: var(--gold-deep); transform: translateY(-2px); }
.sp-btn-outline { background: transparent; color: var(--navy); border: 1.5px solid var(--navy-line); }
.sp-btn-outline:hover { border-color: var(--gold); color: var(--gold-ink); background: var(--gold-soft); }
.sp-btn-ghost { background: rgba(255,255,255,.10); color: #fff; border: 1.5px solid rgba(255,255,255,.26); }
.sp-btn-ghost:hover { background: rgba(255,255,255,.18); border-color: var(--gold); }

/* ══════════════════════════════ HERO BAND ══════════════════════════════ */
.sp-hero { background: linear-gradient(160deg, var(--navy) 0%, var(--navy-deep) 100%); color: #fff; padding: 60px 0 54px; position: relative; overflow: hidden; }
.sp-hero::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, transparent, var(--gold), transparent); }
.sp-hero-rays { position: absolute; top: -150px; right: -90px; width: 420px; height: 420px; border-radius: 50%; background: radial-gradient(circle, rgba(244,163,0,.16), transparent 65%); pointer-events: none; }
.sp-hero-in { position: relative; z-index: 1; max-width: 760px; }
.sp-kicker { display: inline-flex; align-items: center; gap: 12px; font-family: var(--serif); font-size: 11.5px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: var(--gold); margin-bottom: 14px; }
.sp-kicker::before { content: ''; width: 30px; height: 1.5px; background: var(--gold-line); }
.sp-hero h1 { font-family: var(--serif); font-size: clamp(30px, 4.4vw, 48px); font-weight: 700; line-height: 1.16; letter-spacing: .3px; margin-bottom: 14px; }
.sp-hero h1 span { color: var(--gold); }
.sp-hero-sub { font-size: 16.5px; line-height: 1.75; color: rgba(255,255,255,.76); max-width: 620px; }

.sp-hero-stats { display: flex; flex-wrap: wrap; gap: 30px; margin-top: 30px; }
.sp-hero-stat { position: relative; padding-left: 16px; }
.sp-hero-stat::before { content: ''; position: absolute; left: 0; top: 4px; bottom: 4px; width: 2px; background: var(--gold-line); border-radius: 2px; }
.sp-hero-stat-num { font-family: var(--serif); font-size: 26px; font-weight: 700; color: var(--gold); line-height: 1.1; }
.sp-hero-stat-label { font-size: 11.5px; font-weight: 600; letter-spacing: .4px; color: rgba(255,255,255,.72); }

/* Breadcrumb — a real one, because these pages are reachable from search and a
   visitor may never have seen the homepage. */
.sp-crumb { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; color: rgba(255,255,255,.66); margin-bottom: 16px; position: relative; z-index: 1; }
.sp-crumb a { color: rgba(255,255,255,.66); transition: color .2s; }
.sp-crumb a:hover { color: var(--gold); }
.sp-crumb i { font-size: 10px; opacity: .6; }

/* ══════════════════════════════ PAGE BODY ══════════════════════════════ */
.sp-main { padding: 56px 0 72px; }
.sp-section + .sp-section { margin-top: 54px; }
/* …and a section that follows something which is NOT a section. The academy
   page puts its selections straight after the post grid, and without this the
   two blocks touch: the group heading lands on the bottom of the last card. */
.sp-lead + .sp-section,
.sp-posts + .sp-section,
.sp-grid + .sp-section,
.sp-nothing + .sp-section,
.sp-article + .sp-section { margin-top: 54px; }

.sp-group-head { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; padding-bottom: 14px; border-bottom: 1px solid var(--border); }
.sp-group-ic { width: 46px; height: 46px; border-radius: var(--r-md); background: var(--navy); color: var(--gold); display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; }
.sp-group-title { font-family: var(--serif); font-size: 21px; font-weight: 700; color: var(--navy); }
.sp-group-head > .sp-chip { margin-left: auto; flex-shrink: 0; }
.sp-group-head > .sp-chip:hover { background: var(--gold); color: var(--navy-deep); }
.sp-group-count { font-size: 12px; font-weight: 700; color: var(--gold-ink); background: var(--gold-soft); border: 1px solid var(--gold-line); border-radius: var(--r-pill); padding: 3px 11px; margin-left: auto; flex-shrink: 0; }

/* ══════════════════════════ ACHIEVEMENT CARDS ══════════════════════════ */
.sp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }

.sp-ach { background: var(--paper); border: 1px solid var(--border); border-radius: var(--r-xl); overflow: hidden; display: flex; flex-direction: column; transition: transform .28s var(--ease), box-shadow .28s, border-color .28s; position: relative; }
.sp-ach:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); border-color: var(--border-gold); }
.sp-ach-photo { position: relative; background: var(--cream-deep); }
.sp-ach-photo img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.sp-ach-body { padding: 20px 22px 22px; display: flex; flex-direction: column; gap: 8px; flex: 1; }

/* ── A card with NO photograph ─────────────────────────────────────────────
   It does not get a big empty navy panel where the picture would be. An entry
   typed in from a certificate has no photo, most will not have one for a long
   time, and 140px of flat colour with one small glyph in it does not read as a
   design choice — it reads as an image that failed to load.
   So: a gold rule across the top and a crest badge beside the words. Same
   identity, no hole, and the text starts where the eye already is. */
.sp-ach.is-plain, .sp-post.is-plain { border-top: 3px solid var(--gold); }
.sp-crest-badge {
  width: 42px; height: 42px; border-radius: var(--r-md); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--navy); color: var(--gold); font-size: 18px;
  box-shadow: var(--shadow-sm);
}

.sp-chip { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; font-size: 11px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: var(--gold-ink); background: var(--gold-soft); border: 1px solid var(--gold-line); border-radius: var(--r-pill); padding: 4px 11px; }
.sp-ach-title { font-family: var(--serif); font-size: 17px; font-weight: 700; color: var(--navy); line-height: 1.35; }
.sp-ach-who { display: flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 700; color: var(--text); }
.sp-ach-who i { color: var(--gold-ink); font-size: 14px; flex-shrink: 0; }
.sp-ach-detail { font-size: 13.5px; line-height: 1.65; color: var(--text-mid); }
.sp-ach-when { margin-top: auto; padding-top: 12px; font-size: 12px; font-weight: 600; color: var(--text-muted); display: flex; align-items: center; gap: 6px; }
.sp-ach-when i { font-size: 12px; }

/* The gold corner on a featured entry. A ribbon rather than a brighter card:
   every card on this page is something the school is proud of, so "featured"
   has to read as a small mark rather than as the others being lesser. */
.sp-ach.is-featured { border-color: var(--border-gold); }
.sp-ach-star { position: absolute; top: 12px; right: 12px; z-index: 1; width: 30px; height: 30px; border-radius: 50%; background: var(--gold); color: var(--navy-deep); display: flex; align-items: center; justify-content: center; font-size: 13px; box-shadow: var(--shadow-sm); }

/* ══════════════════════════════ BLOG ══════════════════════════════ */
.sp-filters { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 30px; }
.sp-filter { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 700; color: var(--navy); background: var(--paper); border: 1.5px solid var(--navy-line); border-radius: var(--r-pill); padding: 9px 17px; transition: all .2s; }
.sp-filter:hover { border-color: var(--gold); background: var(--gold-soft); color: var(--gold-ink); }
.sp-filter.is-on { background: var(--navy); border-color: var(--navy); color: #fff; }
.sp-filter.is-on:hover { background: var(--navy-hover); color: #fff; }

/* The lead post. One story given room, then the rest as cards — a blog whose
   every post is the same size reads as an archive rather than as news. */
.sp-lead { display: grid; grid-template-columns: 1.15fr 1fr; gap: 0; background: var(--paper); border: 1px solid var(--border); border-radius: var(--r-2xl); overflow: hidden; margin-bottom: 26px; box-shadow: var(--shadow-sm); transition: transform .28s var(--ease), box-shadow .28s, border-color .28s; }
.sp-lead:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--border-gold); }
.sp-lead-photo { position: relative; min-height: 260px; background: var(--cream-deep); }
.sp-lead-photo img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.sp-lead-crest {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  background:
    radial-gradient(420px 220px at 50% 34%, rgba(244,163,0,.18), transparent 70%),
    linear-gradient(150deg, var(--navy), var(--navy-deep));
  color: var(--gold); font-size: 40px;
}
.sp-lead-crest span {
  font-family: var(--serif); font-size: 11px; font-weight: 700;
  letter-spacing: 3px; text-transform: uppercase; color: rgba(255,255,255,.62);
}
.sp-lead-body { padding: 34px 36px; display: flex; flex-direction: column; gap: 12px; justify-content: center; }
.sp-lead-title { font-family: var(--serif); font-size: clamp(21px, 2.4vw, 28px); font-weight: 700; color: var(--navy); line-height: 1.28; }
.sp-lead-ex { font-size: 14.5px; line-height: 1.75; color: var(--text-mid); }
.sp-lead-more { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 700; color: var(--gold-ink); margin-top: 4px; }

.sp-posts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.sp-post { background: var(--paper); border: 1px solid var(--border); border-radius: var(--r-xl); overflow: hidden; display: flex; flex-direction: column; transition: transform .28s var(--ease), box-shadow .28s, border-color .28s; }
.sp-post:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); border-color: var(--border-gold); }
.sp-post-photo { background: var(--cream-deep); }
.sp-post-photo img { width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.sp-post-body { padding: 19px 21px 21px; display: flex; flex-direction: column; gap: 9px; flex: 1; }
.sp-post-title { font-family: var(--serif); font-size: 17px; font-weight: 700; color: var(--navy); line-height: 1.35; }
.sp-post-ex { font-size: 13.5px; line-height: 1.65; color: var(--text-mid); }
.sp-post-meta { margin-top: auto; padding-top: 12px; display: flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 600; color: var(--text-muted); flex-wrap: wrap; }
.sp-post-meta .sp-dot { width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: .5; }

/* ══════════════════════════ ONE POST ══════════════════════════ */
.sp-article { max-width: 760px; margin: 0 auto; }
.sp-cover { border-radius: var(--r-2xl); overflow: hidden; border: 5px solid #fff; outline: 1px solid var(--border-gold); box-shadow: var(--shadow-md); margin-bottom: 34px; }
.sp-cover img { width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.sp-prose > * + * { margin-top: 20px; }
.sp-prose p { font-size: 16.5px; line-height: 1.85; color: var(--text-body); white-space: pre-line; }
.sp-prose h2 { font-family: var(--serif); font-size: 22px; font-weight: 700; color: var(--navy); margin-top: 36px; line-height: 1.3; }
.sp-prose p:first-of-type { font-size: 18px; color: var(--text); }
/* A verse. Centred, larger, in the display serif, on a tinted panel with a gold
   rule — so a śloka in the school's Bhagavad Gita series reads as scripture and
   not as the first paragraph of an article. `pre-line` keeps the line breaks the
   office typed, because a verse's lines are where the writer put them.
   The text is still escaped like every other block; only the tag differs. */
.sp-verse {
  font-family: var(--serif); font-size: clamp(19px, 2.3vw, 25px);
  line-height: 1.85; color: var(--navy); text-align: center;
  white-space: pre-line; letter-spacing: .3px;
  background: var(--cream); border-radius: var(--r-xl);
  border-left: 4px solid var(--gold); border-right: 4px solid var(--gold);
  padding: 28px 30px; margin-top: 26px;
}
@media (max-width: 480px) { .sp-verse { padding: 22px 18px; font-size: 19px; } }

/* A sentence that was marked as a heading. Deliberately the BODY face, not the
   display serif: that serif is a capital-letter design, and a 150-character
   question set in it became a wall of shouting. Bold, navy, a touch larger than
   the paragraphs around it, with a gold rule so it still reads as a stressed
   line rather than as ordinary text. */
.sp-prose .sp-emph {
  font-family: var(--sans); font-size: 17.5px; font-weight: 700;
  line-height: 1.7; color: var(--navy);
  border-left: 3px solid var(--gold); padding-left: 16px;
}

/* ── The pager ───────────────────────────────────────────────────────────── */
.sp-pages { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 38px; flex-wrap: wrap; }
.sp-pages-at { font-size: 13px; font-weight: 700; color: var(--text-mid); padding: 0 6px; }

.sp-post-head { margin-bottom: 30px; }
.sp-post-head h1 { font-family: var(--serif); font-size: clamp(27px, 3.6vw, 40px); font-weight: 700; color: var(--navy); line-height: 1.2; margin: 12px 0 14px; }
.sp-byline { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13px; font-weight: 600; color: var(--text-mid); }
.sp-byline .sp-dot { width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: .5; }

.sp-share { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 40px; padding-top: 26px; border-top: 1px solid var(--border); }
.sp-share-label { font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--text-muted); }

.sp-pager { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 34px; }
.sp-pager-card { background: var(--paper); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 16px 20px; transition: border-color .2s, box-shadow .2s; }
.sp-pager-card:hover { border-color: var(--gold); box-shadow: var(--shadow-sm); }
.sp-pager-dir { font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--gold-ink); display: flex; align-items: center; gap: 6px; margin-bottom: 5px; }
.sp-pager-title { font-family: var(--serif); font-size: 14.5px; font-weight: 700; color: var(--navy); line-height: 1.4; }
.sp-pager-card.is-next { text-align: right; }
.sp-pager-card.is-next .sp-pager-dir { justify-content: flex-end; }

/* ══════════════════════ NOTHING HERE YET ══════════════════════ */
/* Deliberately NOT one of the ERP's `.erp-empty-state` skins: these pages load
   none of the app bundle that states.css lives in, exactly like the homepage
   and the legal notices. It is also a different message — a visitor cannot
   "retry" an empty page, so this points them somewhere useful instead. */
.sp-nothing { background: var(--paper); border: 1px dashed var(--border-gold); border-radius: var(--r-2xl); padding: 60px 32px; text-align: center; }
.sp-nothing i { font-size: 42px; color: var(--gold); opacity: .45; display: block; margin-bottom: 14px; }
.sp-nothing-title { font-family: var(--serif); font-size: 19px; font-weight: 700; color: var(--navy); margin-bottom: 7px; }
.sp-nothing-text { font-size: 14.5px; color: var(--text-mid); max-width: 420px; margin: 0 auto 20px; line-height: 1.7; }

/* ══════════════════════════ CLOSING CTA ══════════════════════════ */
.sp-cta { background: linear-gradient(155deg, var(--navy) 0%, var(--navy-deep) 100%); border-radius: var(--r-2xl); padding: 44px 40px; color: #fff; text-align: center; margin-top: 60px; border: 1px solid var(--gold-line); }
.sp-cta h2 { font-family: var(--serif); font-size: clamp(22px, 2.6vw, 30px); font-weight: 700; margin-bottom: 10px; }
.sp-cta h2 span { color: var(--gold); }
.sp-cta p { font-size: 15px; color: rgba(255,255,255,.74); max-width: 520px; margin: 0 auto 24px; line-height: 1.7; }
.sp-cta-btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ══════════════════════════════ FOOTER ══════════════════════════════ */
.sp-foot { background: var(--navy-deep); color: rgba(255,255,255,.62); margin-top: 0; }
.sp-foot-accent { height: 3px; background: linear-gradient(90deg, var(--navy), var(--gold), var(--navy)); }
.sp-foot-main { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.1fr; gap: 40px; padding: 54px 0 40px; border-bottom: 1px solid rgba(255,255,255,.07); }
.sp-foot-brand-row { display: flex; align-items: center; gap: 12px; margin-bottom: 15px; }
.sp-foot-mark { width: 40px; height: 40px; border-radius: 50%; overflow: hidden; border: 1.5px solid var(--gold-line); background: #fff; flex-shrink: 0; }
.sp-foot-mark img { width: 100%; height: 100%; object-fit: cover; }
.sp-foot-mark-ph { width: 100%; height: 100%; background: var(--navy); color: var(--gold); display: flex; align-items: center; justify-content: center; font-size: 16px; }
.sp-foot-name { font-family: var(--serif); font-size: 16px; font-weight: 700; color: #fff; letter-spacing: .4px; }
.sp-foot-sub { font-size: 10px; color: var(--gold); letter-spacing: 1.2px; text-transform: uppercase; display: block; }
.sp-foot-tagline { font-size: 13px; line-height: 1.75; max-width: 300px; }
.sp-foot-entity { margin-top: 13px; padding-top: 13px; border-top: 1px solid rgba(255,255,255,.09); font-size: 12.5px; line-height: 1.7; max-width: 320px; }
.sp-foot-entity b { color: #fff; font-weight: 600; }
.sp-foot-title { font-family: var(--serif); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; color: var(--gold); margin-bottom: 15px; }
.sp-foot-links { display: flex; flex-direction: column; gap: 10px; }
.sp-foot-links a { font-size: 13.5px; transition: color .2s; }
.sp-foot-links a:hover { color: var(--gold); }
.sp-foot-row { display: flex; gap: 10px; font-size: 13px; line-height: 1.5; margin-bottom: 11px; }
.sp-foot-row i { color: var(--gold); flex-shrink: 0; margin-top: 2px; }
.sp-foot-row a:hover { color: var(--gold); }
.sp-foot-bottom { display: flex; align-items: center; justify-content: space-between; padding: 18px 0; font-size: 12px; flex-wrap: wrap; gap: 10px; }
.sp-foot-legal { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sp-foot-legal a:hover { color: var(--gold); }

/* ══════════════════════════════ RESPONSIVE ══════════════════════════════ */
/* ⚠ The same measured problem as the homepage nav, and the same shape of fix.
   This bar carries eight links, the crest and the sign-in pair, and adding
   "Sports" (migration 0046) pushed the pair four pixels past the viewport at
   1280. It was invisible: `body { overflow-x: hidden }` above clips an
   overflowing nav rather than scrolling it, so nothing looks wrong and the
   Staff button is simply half gone. Measure the right edge of .sp-doors against
   the viewport, never the document's scrollWidth.

   Two tightening steps with headroom, then the phone menu at 1100 — below which
   eight links and two doors genuinely do not fit. */
/* The office's academy label may be two words ("Sports Academy"), and in full
   it overran the doors at the bottom of every tier — by 7px at 1401, 11px at
   1221, 30px at 1101 (measured 2026-09-15). Below 1460 the bar shows its first
   word only; the whole label stays as the link's aria-label and in the phone
   menu. Same rule as the homepage, which needs it from 1680. */
@media (max-width: 1460px) {
  .sp-link-more { display: none; }
}
@media (max-width: 1400px) {
  .sp-links a { padding: 8px 9px; font-size: 13px; }
  .sp-logo-name { font-size: 15px; }
  .sp-logo-mark { width: 40px; height: 40px; }
}
@media (max-width: 1220px) {
  .sp-doors a i { display: none; }
  .sp-links a { padding: 8px 7px; }
}
@media (max-width: 1100px) {
  .sp-links, .sp-doors { display: none; }
  .sp-burger { display: flex; }
  .sp-grid, .sp-posts { grid-template-columns: repeat(2, 1fr); }
  .sp-lead { grid-template-columns: 1fr; }
  .sp-lead-photo { min-height: 220px; aspect-ratio: 16/9; }
  .sp-foot-main { grid-template-columns: 1fr 1fr; gap: 28px; }
}
@media (max-width: 768px) {
  .sp-wrap { padding: 0 20px; }
  .sp-mobile a { padding: 12px 20px; }
  .sp-mobile-doors { padding: 14px 20px 4px; }
  .sp-hero { padding: 44px 0 40px; }
  .sp-main { padding: 40px 0 56px; }
  .sp-section + .sp-section { margin-top: 40px; }
  .sp-grid, .sp-posts { grid-template-columns: 1fr; }
  .sp-lead-body { padding: 26px 24px; }
  .sp-pager { grid-template-columns: 1fr; }
  .sp-pager-card.is-next { text-align: left; }
  .sp-pager-card.is-next .sp-pager-dir { justify-content: flex-start; }
  .sp-cta { padding: 34px 24px; }
  .sp-foot-main { grid-template-columns: 1fr; gap: 24px; padding: 40px 0 30px; }
  .sp-foot-bottom { justify-content: center; text-align: center; }
}
@media (max-width: 480px) {
  /* Audit 7.1 — the 360px floor. These pages are reached on a parent's own
     phone from a WhatsApp link, before they have any login, so they get the
     same two rules as the app: nothing a thumb must hit is under 32px, and no
     text is under 10px. */
  .sp-foot-links a, .sp-foot-legal a, .sp-foot-row a, .sp-crumb a {
    display: inline-flex; align-items: center; min-height: 32px;
  }
  .sp-hero-stats { gap: 20px; }
  .sp-prose p { font-size: 16px; }
  .sp-cta-btns .sp-btn { width: 100%; }
}

/* ══════════════════════════ ADMISSION ENQUIRY (/admissions/enquire) ══════════════════════════
   Portal audit M6. The form borrows the academy's ac- form styles (academy.css,
   linked by that one page) rather than keeping a second copy. Here the academy's
   field-green accent becomes the school's navy, with gold beside it as on every
   other school page. */
.sp-enquiry {
  --field: var(--navy); --field-deep: var(--navy-deep); --field-ink: var(--navy);
  --field-soft: rgba(11,42,91,.10); --field-line: rgba(11,42,91,.30);
}
.sp-enquiry .ac-joinpage-side { border-color: var(--gold-line); }