/* ==========================================================================
   Huda Academy — THE MASTER HERO (every interior page)

   One hero, one definition. Client, 2026-09-27: every page except the home
   page and the utility pages (404, search, the thank-you pages, parent login)
   opens with the About Our School hero - "the only things that change are the
   images and the text ... otherwise literally everything is going to be the
   same, the sizing, structure, placement, all of that."

   WHERE EACH PART LIVES
     - this file ............ every rule the hero renders with
     - assets/js/page-hero.js the scroll parallax (additive; the hero is
                              complete without it)
     - tools/build-pages.py . the markup, rendered from tools/hero-content.json
                              (the words) and the reviewed photographs. No page
                              hand-writes a hero: generated pages get it through
                              the template, hand-built pages through their
                              <!-- HERO:START/END --> region, the same way the
                              nav reaches them through SHELL regions.

   WHAT IT IS. The /about/ hero, declaration for declaration, renamed from
   `abt-` to `page-hero`. The frozen original is tools/fixtures/abt-hero-2026-
   09-27.css, and tools/check-master-hero.mjs --equivalence fails if any value
   here drifts from it. docs/HERO-STANDARD.md explains every number; read it
   before changing one, and change it here - never in a page stylesheet.

   THREE DELIBERATE DIFFERENCES FROM THE /about/ ORIGINAL, all structural:
     1. Tokens live on `.page-hero`, not on the page's <main>. The hero lands
        inside a dozen different <main> classes; it must not depend on any of
        them. (/about/'s `.abt { background: paper }` was the PAGE's background,
        not the hero's, so it is not carried.)
     2. Descendant rules are written `.page-hero .page-hero__x` rather than
        `.page-hero__x`. Page stylesheets on this site style bare elements
        inside their own <main> (`.acr h1`, `.pg h1`, `.abm p` ...), and a
        single-class rule loses to those. Two classes wins against every one of
        them without an !important anywhere.
     3. The image reset `.abt img { width/height 100%; cover }` was page-wide on
        /about/; here it is scoped to the hero's own image.
   ========================================================================== */

.page-hero {
  --ph-rust: var(--terracotta);
  --ph-rust2: var(--terracotta-deep);
  --ph-cream: #F4EEE4;
  --ph-paper: #F8F4EE;
  --ph-gold: #CFAF82;
  --ph-ink: var(--ink);
  --ph-line: rgba(35,22,12,.18);
  --ph-shadow: 0 24px 60px rgba(64,30,14,.14);
  color: var(--ph-ink);
  font-family: "DM Sans", Inter, ui-sans-serif, system-ui, sans-serif;

  height: calc(100vh - var(--banner-h) - var(--nav-h));
  height: calc(100svh - var(--banner-h) - var(--nav-h));
  min-height: 0;
  display: grid;
  align-items: center;
  padding: clamp(16px, min(4.8vw, 7svh), 70px) clamp(28px, 7vw, 112px);
  position: relative;
  background: var(--ph-cream);
  isolation: isolate;
  overflow: hidden;
}
.page-hero .page-hero__image img { width: 100%; height: 100%; object-fit: cover; }
.page-hero a { text-decoration: none; }

.page-hero .page-hero__copy {
  z-index: 2;
  width: min(660px, 52vw);
  margin-left: auto;
  max-height: 100%;
  padding: clamp(18px, min(6vw, 6svh), 78px) clamp(20px, 6vw, 78px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  background: rgba(248,244,238,.96);
  box-shadow: var(--ph-shadow);
}
.page-hero .page-hero__crumbs {
  font-size: 13px;
  color: #715E56;
  margin-bottom: clamp(8px, 4.2svh, 38px);
}
/* Paints the "/" separator AND the current-page label; the rule below then
   darkens the label, because #B09D91 is 2.51:1 - fine for an aria-hidden
   slash, a fail for text (HERO-STANDARD section 11, item 3). */
.page-hero .page-hero__crumbs span { margin: 0 10px; color: #B09D91; }
.page-hero .page-hero__crumbs [aria-current="page"] { color: #7B675D; }
.page-hero .page-hero__eyebrow {
  color: var(--ph-rust);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .2em;
  margin-bottom: clamp(8px, 2.2svh, 19px);
}
.page-hero .page-hero__title {
  font-family: "Libre Caslon Display", "Cormorant Garamond", Georgia, serif;
  font-weight: 400;
  font-size: clamp(38px, min(5.3vw, 9.2svh), 82px);
  line-height: .91;
  letter-spacing: -.04em;
  margin: 0;
  max-width: 720px;
}
.page-hero .page-hero__title span { display: block; }
.page-hero .page-hero__lede {
  font-size: clamp(14px, min(1.4vw, 2.4svh), 18px);
  line-height: 1.5;
  max-width: 610px;
  color: #5F4D46;
  margin: clamp(8px, 3.4svh, 31px) 0 clamp(8px, 3.3svh, 30px);
}
.page-hero .page-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(10px, 2vw, 28px);
}

.page-hero .page-hero__btn {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  background: var(--ph-rust);
  color: #FFFFFF;
  padding: clamp(10px, 1.8svh, 17px) 22px;
  border-radius: 3px;
  font-size: 14px;
  font-weight: 700;
  transition: background .3s, transform .3s;
}
.page-hero .page-hero__btn:hover { background: var(--ph-rust2); transform: translateY(-2px); }
.page-hero .page-hero__link {
  font-size: 14px;
  font-weight: 700;
  border-bottom: 1px solid var(--ph-ink);
  padding-bottom: 4px;
}
/* The designed keyboard ring (HERO-STANDARD section 11, item 5). Terracotta
   on the card is 6.6:1, and the offset leaves a strip of card between ring and
   button so the ring reads on the button as well as on text. */
.page-hero .page-hero__btn:focus-visible,
.page-hero .page-hero__link:focus-visible {
  outline: 2px solid var(--ph-rust);
  outline-offset: 3px;
}
.page-hero .page-hero__crumbs a:focus-visible {
  outline: 2px solid var(--ph-rust);
  outline-offset: 2px;
  border-radius: 2px;
}

.page-hero .page-hero__image {
  position: absolute;
  z-index: 0;
  inset: 0;
  overflow: hidden;
}
/* `backwards`, never `both`: a finished animation that keeps filling outranks
   the inline transform page-hero.js writes, and the parallax goes dead
   (HERO-STANDARD section 11, item 1). */
.page-hero .page-hero__image img {
  transform: scale(1.06);
  animation: pageHeroIn 1.25s cubic-bezier(.2, .7, .2, 1) backwards;
}
.page-hero .page-hero__image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(33,18,10,.16), rgba(33,18,10,.02) 45%, rgba(33,18,10,.26));
}

@keyframes pageHeroIn {
  from { opacity: 0; transform: scale(1.14); }
  to   { opacity: 1; transform: scale(1.06); }
}

@media (max-width: 1100px) {
  .page-hero .page-hero__copy { width: min(650px, 58vw); padding: clamp(44px, 5vw, 64px); }
}

/* The phone layout: the card goes full width and drops to the bottom. */
@media (max-width: 760px) {
  .page-hero {
    height: calc(100vh - var(--banner-h) - var(--nav-h));
    height: calc(100svh - var(--banner-h) - var(--nav-h));
    min-height: 0;
    display: grid;
    align-items: end;
    padding: clamp(8px, 3svh, 28px) clamp(12px, 4vw, 18px);
  }
  .page-hero .page-hero__copy {
    width: min(680px, 100%);
    margin: 0 auto;
    padding: clamp(12px, 4svh, 38px) clamp(16px, 6vw, 26px);
  }
  .page-hero .page-hero__crumbs { margin-bottom: clamp(6px, 3svh, 28px); }
  .page-hero .page-hero__title { font-size: clamp(32px, min(12vw, 9svh), 48px); }
  .page-hero .page-hero__actions {
    align-items: center;
    flex-direction: row;
    gap: clamp(8px, 3vw, 22px);
  }
  .page-hero .page-hero__btn { padding-inline: clamp(13px, 4vw, 22px); font-size: 13px; }
  .page-hero .page-hero__link { font-size: 13px; }
}

/* A 17-character line at 58px overhung a 320px phone (HERO-STANDARD DEVIATION 7). */
@media (max-width: 420px) {
  .page-hero .page-hero__title { font-size: clamp(32px, min(12.4vw, 9svh), 48px); }
}

/* Short screens: height, not width, is the binding constraint. The breadcrumb
   is secondary navigation, so it is the first and only thing to step out. */
@media (max-height: 600px) {
  .page-hero { padding-block: clamp(6px, 3svh, 18px); }
  .page-hero .page-hero__copy { padding-block: clamp(9px, 3.5svh, 20px); }
  .page-hero .page-hero__crumbs { display: none; }
  .page-hero .page-hero__eyebrow {
    font-size: 10px;
    margin-bottom: clamp(5px, 1.8svh, 9px);
  }
  .page-hero .page-hero__title { font-size: clamp(30px, min(7vw, 9svh), 48px); }
  .page-hero .page-hero__lede {
    line-height: 1.35;
    margin: clamp(5px, 2svh, 10px) 0 clamp(7px, 2.4svh, 12px);
  }
  .page-hero .page-hero__btn { padding-block: 9px; }
}

@media (prefers-reduced-motion: reduce) {
  .page-hero *,
  .page-hero *::before,
  .page-hero *::after {
    animation: none !important;
    transition: none !important;
  }
  .page-hero .page-hero__image img { animation: none; transform: scale(1.06); }
}