/* ==========================================================================
   Huda Academy — skeleton pages

   Loaded ONLY by the generated pages (tools/page.template.html), after
   site.css and never instead of it. Everything here reads site.css's tokens
   rather than restating any colour or face, so these pages cannot drift from
   the brand — and so the day a section gets its real design, deleting the rule
   here is the whole cleanup.

   Kept out of site.css on purpose: that file is 200KB of home-page work that
   has been through client review, and none of this has been in front of anyone.

   NO REVEAL CLASSES, NO ANIMATION. Per CLAUDE.md, content visibility must never
   depend on JS or on a transition completing. These pages have no .rv elements
   at all, so there is nothing to fail open.
   ========================================================================== */

.pg {
  /* The banner and the nav sit above this in normal flow, so the page does not
     need to reserve room for them — but it does need air under a sticky nav
     that pins at --nav-h once the banner scrolls away. */
  padding: clamp(2.5rem, 6vw, 5rem) 0 clamp(4rem, 9vw, 7rem);
  background: var(--paper);
}

/* ---------- breadcrumb ---------------------------------------------------- */
.crumb {
  margin: 0 0 clamp(1.5rem, 3vw, 2.4rem);
}
.crumb p {
  margin: 0;
  font-size: .82rem;
  letter-spacing: .04em;
  color: var(--ink-soft);
}
.crumb a {
  color: var(--ink-soft);
  text-decoration: none;
  border-bottom: 1px solid rgba(101,85,72,.28);
}
.crumb a:hover {
  color: var(--terracotta);
  border-color: var(--terracotta);
}
.crumb__sep {
  margin: 0 .5em;
  color: var(--tan);
}
.crumb [aria-current="page"] {
  color: var(--ink);
  font-weight: 600;
}

/* ---------- page head ----------------------------------------------------- */
.phead {
  max-width: 46ch;
  margin: 0 0 clamp(2rem, 4vw, 3rem);
}
.phead .kicker {
  margin: 0 0 .7rem;
  color: var(--terracotta);
}
.phead h1 {
  margin: 0;
  font-family: "Cormorant Garamond", Georgia, serif;
  /* 600, not 300: over paper this is fine either way, but the site's hairline
     weights were the thing that read as washy in review (CLAUDE.md), and there
     is no reason to reintroduce the argument on 59 pages. */
  font-weight: 600;
  font-size: clamp(2.1rem, 5.2vw, 3.4rem);
  line-height: 1.08;
  color: var(--ink);
}
.phead__purpose {
  margin: 1.1rem 0 0;
  font-size: clamp(1.02rem, 1.5vw, 1.2rem);
  line-height: 1.6;
  color: var(--ink-soft);
}

/* ---------- the two notices ----------------------------------------------- */
/* Every generated page says plainly that it is a placeholder. This is a preview
   build shown to the school; a page that looks finished and is not is worse
   than an obviously unfinished one. */
.pstub {
  max-width: 60ch;
  margin: 0 0 clamp(2.2rem, 4vw, 3.2rem);
  padding: .85rem 1.1rem;
  border-left: 3px solid var(--tan);
  background: var(--paper-2);
  font-size: .9rem;
  line-height: 1.55;
  color: var(--ink-soft);
}

/* Louder than .pstub, and only on the three pages whose very existence is
   unresolved — see UNCONFIRMED in tools/build-pages.py. */
.pflag {
  max-width: 60ch;
  margin: 0 0 1.6rem;
  padding: 1rem 1.2rem;
  border-left: 3px solid var(--terracotta);
  background: var(--paper-3);
  font-size: .9rem;
  line-height: 1.6;
  color: var(--ink);
}
.pflag strong {
  color: var(--terracotta-deep);
}

/* ---------- the next step ------------------------------------------------- */
.pnext {
  margin: 0 0 .7rem;
}
.pnext__why {
  max-width: 56ch;
  margin: 0 0 clamp(2.4rem, 5vw, 3.6rem);
  font-size: .88rem;
  line-height: 1.55;
  color: var(--ink-soft);
}

/* ---------- the link lists ------------------------------------------------ */
.plinks {
  max-width: 68ch;
  margin: 0 0 clamp(2rem, 4vw, 3rem);
}
/* Above the master closing CTA the gap is the CTA's own (28px, client
   2026-09-27). The last list's bottom margin would otherwise collapse into it
   and make the gap above the card 48px against 28 below. */
.pg:has(> .site-cta) .plinks:last-child { margin-bottom: 0; }
.plinks h2 {
  margin: 0 0 1rem;
  padding-bottom: .55rem;
  border-bottom: 1px solid rgba(176,159,136,.45);
  font-family: "Inter", system-ui, sans-serif;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .19em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.plinks ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.plinks li + li {
  margin-top: .85rem;
}

/* EVERY ROW IS A CARD NOW, and the whole card is the link. Each destination in
   the inventory has its own photograph, so a link to /about/mission/ shows the
   mission picture wherever on the site it appears - see
   tools/quicklink-photos.json and lab/quick-links-inventory.html.

   The picture is a sibling of the text inside one <a>, not a background, so it
   is a real <img> with width/height and can be lazily loaded. Its alt is empty
   because the destination is named in the row beside it; describing the photo
   as well would have a screen reader read each row twice. */
.plink {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
  padding: .55rem;
  margin-left: -.55rem;
  border-radius: 3px;
  text-decoration: none;
  color: inherit;
  transition: background .22s ease;
}
.plink__shot {
  display: block;
  width: 96px;
  height: 66px;
  object-fit: cover;
  border-radius: 2px;
  /* A tint UNDER the photograph, not decoration. Several of these images are
     pale - ql-prayer is a figure in white against a light wall - and at 96px a
     pale shot on paper reads as an empty box rather than as a picture. The
     tint gives it an edge to sit against while it loads, too. */
  background: rgba(52,35,26,.06);
  /* a hairline rather than a shadow: these sit on paper, and a shadow on 200+
     thumbnails is a lot of paint for no information */
  box-shadow: 0 0 0 1px rgba(52,35,26,.10);
}
.plink__body { display: block; min-width: 0; }
.plink__name {
  display: inline-block;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.35rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--ink);
  border-bottom: 1px solid rgba(168,50,38,.35);
}
.plink:hover { background: rgba(176,159,136,.13); }
.plink:hover .plink__name {
  color: var(--terracotta);
  border-color: var(--terracotta);
}
.plink:focus-visible {
  outline: 3px solid var(--terracotta);
  outline-offset: 3px;
}
/* A row with no photograph - a route outside the inventory, currently only
   /parents/login/ - KEEPS its first column and fills it with a quiet empty
   tile. Collapsing the column instead was the first attempt and it was worse:
   the one photo-less row jumped 112px left of every other row in the list and
   the ragged edge was far more noticeable than a blank tile is.
   :has() is doing the work, so on an engine without it the row simply falls
   back to being flush left - which is where it started. */
.plink:not(:has(.plink__shot))::before {
  content: "";
  display: block;
  width: 96px;
  height: 66px;
  border-radius: 2px;
  background: rgba(52,35,26,.05);
  box-shadow: inset 0 0 0 1px rgba(52,35,26,.09);
}
/* The IA gives every link a reason. Showing it is most of the value of these
   pages: it says why the school thought this route mattered. */
.plink__why {
  display: block;
  max-width: 58ch;
  margin-top: .3rem;
  font-size: .88rem;
  line-height: 1.55;
  color: var(--ink-soft);
}

/* ---------- current page in the nav --------------------------------------- */
/* The nav had no hook for "you are here" — it only ever ran on the home page.
   The attribute is what matters; this just makes it visible. Underline rather
   than a colour change: the dropdown panels and the drawer use different
   grounds, and one rule has to work on both. */
.nav__menu a[aria-current="page"],
.nav__flyout a[aria-current="page"],
.nav__drawer a[aria-current="page"] {
  text-decoration: underline;
  text-underline-offset: .25em;
  font-weight: 700;
}

@media (max-width: 640px) {
  /* The thumbnail shrinks rather than dropping. At 96px it was taking a third
     of a 320px row and squeezing the destination name onto four lines; at 64
     the name gets its width back and the picture still reads. */
  .plink { grid-template-columns: 64px minmax(0, 1fr); gap: .8rem; }
  .plink__shot,
  .plink:not(:has(.plink__shot))::before { width: 64px; height: 46px; }
  .plink__name { font-size: 1.2rem; }
}

/* ---------- the old skeleton hero (.phero): RETIRED 2026-09-27 -------------
   Every in-scope page now opens with the MASTER hero - assets/css/page-hero.css,
   the /about/ hero, rendered by tools/build-pages.py. This file keeps only the
   flush-top rule below, which is about the <main>, not the hero. Do not bring
   hero rules back here: one hero, one stylesheet. */

/* The hero is flush under the nav - it is the fold, so any padding above it is
   a cream stripe between the nav and the photograph. The air that .pg used to
   put above the breadcrumb moves to the body content instead, which now starts
   below the hero rather than at the top of the page. */
.pg--hero { padding-top: 0; }
.pg--hero > .wrap { padding-top: clamp(2.5rem, 6vw, 5rem); }