/* ==========================================================================
   Huda Academy — THE MASTER RELATED-PAGES SECTION ("Continue exploring")

   One design, rendered by tools/build-pages.py (links_block) from
   tools/links-content.json and the destination photo sidecars in
   tools/links-photos/. The reference is docs/LINKS-STANDARD.md.

   WHAT THIS IS. /about/'s "Continue exploring" section as it rendered on
   2026-09-27 (CSS frozen at tools/fixtures/about-links-2026-09-27.css,
   geometry at tools/fixtures/links-about-rendered-2026-09-27.json), moved
   out of about.css and restated under site-links* names so every content
   page can carry it. Moved, not copied: about.css no longer styles it.

   THE DELTAS, and they are the only differences from the frozen section:
     a. no intro paragraph beside the headline (client, 2026-09-27);
     b. no tint over the photograph AT ALL - the words sit on a small solid
        tag in the bottom corner (.site-links__body), sized to the words;
     c. the headline is drawn in the weight its face ships. Libre Caslon
        Display comes in 400 only; the browser's default h2 bold made Chrome
        SYNTHESIZE a 700 by smearing the 400 outlines, which is what drew a
        ring round the dot of the "i" in "behind";
     d. the two short tiles' titles fit on ONE line above 900px, at 18px or
        more, for every destination title (they are capped at 20 characters
        by the copy contract) - see the title-size note below;
     e. the photographs are served from a srcset with a real `sizes`
        (written by the build per slot), framed at the sidecar's focal point;
     f. the section loads its own faces (the LINKS:HEAD region), because the
        three section-index pages that will carry it have no hero head.
   Everything else - padding, cream field, eyebrow, headline size, the grid
   at each breakpoint, tile heights, label, the big tile's title, the arrow,
   hover, focus ring, reduced motion - is the frozen section. The phone
   layout (<=900px) is kept exactly as it was: the client will specify it.

   IT MUST STAND ON ITS OWN. On /about/ it sits inside `.abt`, whose rules
   (DM Sans, `.abt img` sizing, `.abt a` underline removal) it used to lean
   on. Nothing here depends on them now: a page with only site.css and this
   file renders the same section.
   ========================================================================== */

.site-links {
  padding: clamp(95px, 11vw, 170px) clamp(28px, 8vw, 140px);
  background: #EEE7DC;
  color: var(--ink, #34231A);
  font-family: "DM Sans", Inter, ui-sans-serif, system-ui, sans-serif;
}
.site-links__head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 30px;
  margin-bottom: 50px;
}
.site-links__eyebrow {
  margin: 0 0 clamp(8px, 2.2svh, 19px);
  color: var(--terracotta, #A83226);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .2em;
}
/* DELTA c. font-weight 400 is not a style choice, it is the only weight the
   face has. Anything heavier is synthesized. */
.site-links h2 {
  margin: 0 0 30px;
  font-family: "Libre Caslon Display", "Cormorant Garamond", Georgia, serif;
  font-size: clamp(43px, 5vw, 73px);
  font-weight: 400;
  line-height: 1.03;
  letter-spacing: -.025em;
  color: var(--ink, #34231A);
  opacity: 1;
}

/* ---------- the grid: one tall tile, two stacked ------------------------ */
.site-links__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(300px, .75fr);
  grid-template-rows: repeat(2, 270px);
  gap: 18px;
}
.site-links__tile {
  position: relative;
  min-height: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  background: #86251B;
  color: #FFFFFF;
  border: 0;
  box-shadow: none;
  text-decoration: none;
  /* The short tiles size their title off their own width (cqi, below). The
     tile's width comes from the grid track, never from its content, so the
     inline-size containment this needs changes nothing about the layout. */
  container-type: inline-size;
}
.site-links__tile:first-child { grid-row: 1 / 3; }

.site-links__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  min-height: 0;
  overflow: hidden;
  background: #86251B;
}
/* object-position is written on the <img> by the build from the photo
   sidecar's focal point, so the subject stays in frame at every tile shape
   (0.64:1 to 3.1:1). */
.site-links__media img {
  position: absolute;
  z-index: 0;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  transition: transform .8s cubic-bezier(.2, .7, .2, 1);
}

/* DELTA b. THE PHOTOGRAPH IS NOT TINTED, ANYWHERE (client, 2026-09-27 and
   again 2026-09-28: "it's really hard to see the images because you all tint
   ... get rid of them"). The first fix swapped the full-tile scrim for a
   gradient plate behind the caption; on the short tiles that plate still
   covered two-thirds of the photograph, so it went too. The client chose the
   replacement: the words sit on a small SOLID tag in the bottom-left corner,
   as wide as the words need and no wider, inset from the tile's edges. Every
   pixel outside the tag is the photograph, untouched. There is no gradient
   and no scrim on the tile, its media or any pseudo-element that covers them.
   tools/check-master-links.mjs --css and --render hold both halves: no tint,
   and a tag (inset, at most a third of the tile) rather than a band. */
.site-links__body {
  position: relative;
  z-index: 2;
  display: block;
  align-self: flex-start;
  width: fit-content;
  max-width: calc(100% - 32px);
  margin: 0 16px 16px;
  padding: 16px 20px 17px;
  background: #2C1F17;
  border-radius: 2px;
}
/* A small solid dark area, so the house noise film stays on it (the hairline
   rule in CLAUDE.md is about flat dark fills; it costs nothing here).
   z-index -1 inside the tag's own stacking context: above the fill, below
   the words. */
.site-links__body::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  border-radius: inherit;
  opacity: .035;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/></svg>");
}
.site-links__label {
  position: relative;
  z-index: 2;
  display: block;
  margin-bottom: 9px;
  color: #FFD27A;
  font-size: 11px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .18em;
}
.site-links__title {
  display: flex;
  align-items: center;
  gap: 18px;
  font-family: "Libre Caslon Display", "Cormorant Garamond", Georgia, serif;
  font-size: clamp(26px, 3vw, 43px);
  font-weight: 400;
  line-height: 1.04;
  color: #FFFFFF;
}
.site-links__arrow {
  width: 46px;
  height: 46px;
  border: 1px solid rgba(255,255,255,.56);
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex: none;
  color: #FFFFFF;
  transition: background .3s, color .3s, transform .3s;
}

/* DELTA d. THE SHORT TILES' TITLES FIT ON ONE LINE (client, 2026-09-27).
   Above 900px only - the phone layout is on hold and keeps the frozen size.
   The size is set by the TILE's width (100cqi), not the screen's, because the
   tile is what the words have to fit in:

     room for the words = tile - 32px of tag margin - 40px of tag padding
                          - 38px arrow - 14px gap
                        = 100cqi - 124px
     widest title       = 9.4em   (the widest real 20-character title,
                                   "Women & Mothers Hub"-shaped, is 9.14em in
                                   Libre Caslon Display; 9.4 leaves 3%)

   so font-size = (100cqi - 124px) / 9.4, floored at 18px (the narrowest short
   tile, 308px at 901, gives 19.6px) and capped at 34px, which keeps it plainly
   subordinate to the big tile's 43px. Measured: 20px at 901, 27.6px at 1100,
   31.7px at 1366, 34px from 1440 up. The arrow circle is kept, smaller and
   in proportion to the words: 1.12em of the title, between 30px and 38px
   (38px from 1440 up, 30px at 901). A fixed 38px circle set the row height
   round a 20px title and pushed the words ~8px away from their label on the
   narrow screens; at 1.12em the label-to-title gap stays close to the big
   tile's. The room above assumes the full 38px, so a smaller circle only
   leaves more. tools/check-master-links.mjs --render proves the fit with
   every destination title in tools/links-content.json and a stress set of
   wide 20-character ones. */
@media (min-width: 901px) {
  .site-links__tile:not(:first-child) .site-links__title {
    gap: 14px;
    font-size: clamp(18px, calc((100cqi - 124px) / 9.4), 34px);
  }
  .site-links__tile:not(:first-child) .site-links__arrow {
    width: clamp(30px, 1.12em, 38px);
    height: clamp(30px, 1.12em, 38px);
  }
}

@media (hover: hover) and (pointer: fine) {
  .site-links__tile:hover .site-links__media img {
    transform: scale(1.05);
  }
  .site-links__tile:hover .site-links__arrow {
    background: #FFFFFF;
    color: var(--terracotta, #A83226);
    transform: rotate(-35deg);
  }
}
.site-links__tile:active { transform: scale(.985); }
.site-links__tile:focus-visible {
  outline: 3px solid var(--terracotta, #A83226);
  outline-offset: 3px;
}

@media (max-width: 1100px) {
  .site-links__grid {
    grid-template-columns: minmax(0, 1.15fr) minmax(280px, .85fr);
    grid-template-rows: repeat(2, 250px);
  }
}

/* The phone layout, exactly as the frozen section had it. */
@media (max-width: 760px) {
  .site-links { padding: 90px 18px; }
  .site-links__head { display: block; }
  .site-links__grid { display: block; }
  .site-links__tile,
  .site-links__tile:first-child,
  .site-links__tile:last-child {
    grid-column: auto;
    grid-row: auto;
    height: 320px;
    min-height: 0;
    margin-top: 14px;
  }
  .site-links__tile:first-child { height: 460px; margin-top: 0; }
}

@media (max-width: 480px) {
  .site-links__body { margin: 0 12px 12px; max-width: calc(100% - 24px); padding: 14px 16px 15px; }
  .site-links__tile:first-child { height: 400px; }
  .site-links__tile:not(:first-child) { height: 300px; }
}

/* Reduced motion: the frozen section's rule, scoped to this section. */
@media (prefers-reduced-motion: reduce) {
  .site-links *,
  .site-links *::before,
  .site-links *::after {
    animation: none !important;
    transition: none !important;
  }
}