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

   One closing call-to-action, one definition. Client, 2026-09-27: the CTA on
   /community/alumni/ - "Help build what comes next." - becomes the template
   for every page except the home page and the utility pages (404, search, the
   thank-you pages, parent login). It was variant 10 of eleven; the other ten
   and every variant modifier are retired, so this file now holds one design.

   WHERE EACH PART LIVES
     - this file ................ every rule the CTA renders with. It is linked
                                  from the shared <head> (index.html SHELL:HEAD),
                                  so every page already loads it.
     - tools/build-pages.py ..... the markup, cta_block(), rendered from
                                  tools/cta-content.json (the words) and
                                  tools/cta-photos/<set>/<slug>.json (the
                                  reviewed photograph, encoded by
                                  tools/prep-cta-photos.py). Generated pages get
                                  it through {{CTA}}, hand-built pages through
                                  install_graduated_cta(). Never hand-write one.

   WHAT IT IS. Variant 10 exactly as it RENDERED - frozen at
   tools/fixtures/cta-v10-2026-09-27.css and, measured in Chrome,
   tools/fixtures/cta-v10-rendered-2026-09-27.json - with four changes, each
   approved by the client on 2026-09-27 and each registered in
   tools/check-master-cta.mjs --equivalence so nothing else can drift:

     1. THE LABEL IS WRITTEN AS IT LOOKED. Variant 10's label asked for 11px,
        but it is a <p> and `.site-cta p` outranked `.site-cta__eyebrow`, so it
        rendered at 17.28px (15.04 on phones), .73 white, 22px above. The client
        likes it at that size ("keep it at 17 pixels"), so those values are
        now stated on the label itself instead of depending on a specificity
        accident that any tidy-up would have "fixed".
     2. THE HEADLINE SHRINKS SMOOTHLY. It used to sit at a 48px floor from 873px
        down to 621 and then jump to 73.6px at 620, so a phone showed a bigger
        headline than a tablet. Now clamp(2.6rem, 5.5vw, 6.6rem): identical at
        873px and up, easing to a 41.6px floor below, never growing as the
        screen narrows.
     3. A DESIGNED KEYBOARD RING. There was none; cream on the burgundy band is
        over 10:1, and the offset keeps it clear of the solid cream button.
     4. ONE WIDTH ON EVERY PAGE. The band used to be inset only by accident -
        on generated pages it sat inside a .wrap the template never closed -
        and ran full-bleed on hand-built pages. It now sets its own width, the
        .wrap measure min(88%, 1460px), so it is inset identically everywhere,
        and carries its own space above the footer.

   Descendant rules are written `.site-cta .site-cta__x` rather than
   `.site-cta__x`: page stylesheets style bare elements inside their own
   <main>, and a single-class rule loses to those.

   THE DARK BAND. A real two-stop gradient, never a flat fill. CLAUDE.md also
   asks for a noise layer on large dark sections; the client waived that for
   this band on 2026-09-27 ("you can ignore that rule").
   ========================================================================== */

.site-cta {
  --sc-red-dark: #5A1A12;
  --sc-cream: #F4EEE4;
  position: relative;
  isolation: isolate;
  /* The alumni box's own height, as a floor (client, 2026-09-27: every page
     keeps that box). Its heights were 605 / 616 / 652 / 665 / 706 px at 901 /
     1100 / 1366 / 1440 / 1920 wide; this floor sits just under each, so the
     alumni box itself is unchanged, while a page with a shorter headline or a
     single button is lifted to the same size instead of coming out squatter. */
  min-height: clamp(590px, 480px + 12vw, 706px);
  overflow: hidden;
  font-family: Inter,Arial,sans-serif;
  display: grid;
  grid-template-columns: 1fr 1fr;
  color: var(--sc-cream);
  background: linear-gradient(145deg,var(--sc-red-dark),#2C1F17);
  width: min(88%, 1460px);
  /* One small gap above and below, the same size (client, 2026-09-27: 75% less
     than the 112px that used to sit under the band; 16px on phones). */
  margin: clamp(16px, 1.95vw, 28px) auto;
}
/* Guard: a band that ends up inside a .wrap (an older page whose template left
   one open) takes the wrap's width instead of 88% of it. Without this the band
   shrank a second time - 1104px instead of 1254 at 1440 - and read squarer and
   taller than the alumni original (client, 2026-09-27). */
.wrap > .site-cta { width: auto; }
/* NO LATTICE BAND UNDER THE CARD (client, 2026-09-27). The band's bottom
   margin used to collapse out through <main> - no padding or border to stop it
   - so the gap above the footer sat outside <main> and showed the body's khatim
   lattice (site.css) as a strip across the page. flow-root makes <main> hold
   its children's margins, so both gaps are painted by the page itself; the
   page's own bottom padding goes, because the band now brings its own gap. */
main:has(> .site-cta) { display: flow-root; padding-bottom: 0; }
.site-cta * { box-sizing: border-box; }
.site-cta img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* The photograph FILLS its frame and never sizes it. It carries 1400x1400
   width/height attributes, and an in-flow square image would set the grid row
   to its own height - at 1920 that stretched every band to 768px against the
   alumni 706. Absolute, it takes whatever height the words give the row. */
.site-cta .site-cta__media img { position: absolute; inset: 0; }
.site-cta .site-cta__copy {
  position: relative;
  z-index: 2;
  align-self: center;
  padding: clamp(55px,8vw,110px);
}
.site-cta .site-cta__copy .site-cta__eyebrow {
  margin: 22px 0 0;
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: clamp(.94rem,1.25vw,1.08rem);
  font-weight: 800;
  color: rgba(255,255,255,.73);
}
/* Element rules are scoped under .site-cta__copy (two classes): the stage
   pages' .stage-page h2 / .stage-page p load later and tied a one-class rule. */
.site-cta .site-cta__copy h2 {
  margin: 0;
  font-family: "Cormorant Garamond",Georgia,serif;
  font-size: clamp(2.6rem,5.5vw,6.6rem);
  font-weight: 600;
  line-height: .88;
  letter-spacing: -.045em;
}
.site-cta .site-cta__copy p {
  max-width: 590px;
  margin: 22px 0 0;
  font-size: clamp(.94rem,1.25vw,1.08rem);
  line-height: 1.65;
  color: rgba(255,255,255,.73);
}
.site-cta .site-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 29px;
}
.site-cta .site-cta__button {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  min-height: 49px;
  padding: 0 21px;
  border: 1px solid currentColor;
  color: inherit;
  text-decoration: none;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  transition: transform .25s ease,background .25s ease,color .25s ease;
}
.site-cta .site-cta__button:first-child {
  color: var(--sc-red-dark);
  background: var(--sc-cream);
  border-color: var(--sc-cream);
}
.site-cta .site-cta__button:hover { transform: translateY(-3px); }
.site-cta .site-cta__button:focus-visible {
  outline: 2px solid var(--sc-cream);
  outline-offset: 3px;
}
.site-cta .site-cta__button span { font-size: 18px; }
.site-cta .site-cta__media {
  position: relative;
  overflow: hidden;
  margin: 38px 38px 38px 0;
  transform: rotate(2deg);
}

@media(max-width:900px) {
  .site-cta { grid-template-columns: 1fr; }
  .site-cta .site-cta__media {
    min-height: 360px;
    margin: 0 24px 24px;
  }
}

@media(max-width:620px) {
  .site-cta .site-cta__copy {
    width: 100%;
    padding: 44px 25px;
  }
  .site-cta .site-cta__media { min-height: 420px; }
}

@media(prefers-reduced-motion:reduce) {
  .site-cta .site-cta__button { transition: none; }
}