/* ═══════════════════════════════════════════════════════════════════════
   LAYOUT — wrappers, grids, sections, page heroes
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Content wrappers ──────────────────────────────────────────────────*/
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap-narrow { max-width: var(--wrap-narrow); }
.wrap-wide   { max-width: var(--wrap-wide); }

/* ── Sections ──────────────────────────────────────────────────────────*/
.section        { padding-block: var(--section-y); }
.section-sm     { padding-block: var(--section-y-sm); }
.section-cream  { background: var(--cream); }
.section-white  { background: var(--white); }
.section-navy   { background: var(--navy); color: rgba(255,255,255,.88); }
.section-navy-deep { background: var(--navy-deep); color: rgba(255,255,255,.88); }

/* ── Section headers ───────────────────────────────────────────────────*/
.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-bottom: var(--sp-5);
  flex-wrap: wrap;
}
/* min-width:0 + a 0 flex-basis lets the heading shrink below its content
   width instead of forcing the row to stretch when the CTA wraps. */
.section-head > div { flex: 1 1 0; min-width: min(340px, 100%); }
.section-head h2 { margin-bottom: var(--sp-2); }
.section-head p  { color: var(--ink-2); margin-bottom: 0; }
.on-navy .section-head p { color: rgba(255,255,255,.78); }

.section-head-center {
  text-align: center;
  max-width: 680px;
  margin: 0 auto var(--sp-5);
}
.section-head-center p { margin-inline: auto; }

/* Small-caps eyebrow above a major section heading.
   12px / .12em tracking. On light backgrounds it uses --gold-deep
   (6.68:1 on white) because raw --gold is only 2.35:1 and would fail AA
   at this size; on navy the bright --gold is used (7.01:1).
   A short gold rule sits to its left as a brand cue. */
.eyebrow {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--gold-deep);
  margin-bottom: var(--sp-2);
}
.eyebrow::before {
  content: "";
  width: 22px;
  height: 2px;
  background: var(--gold);
  flex-shrink: 0;
}
.section-head-center .eyebrow { justify-content: center; }
.on-navy .eyebrow, .section-navy .eyebrow { color: var(--gold); }

/* ── Grids ─────────────────────────────────────────────────────────────*/
/* minmax(0,1fr) throughout so long words, tables, and wide media can never
   force a grid wider than its container. */
.grid { display: grid; gap: var(--sp-4); }
.grid > * { min-width: 0; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Auto-fitting grid — the default for card decks */
.grid-auto {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.grid-auto-sm { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.grid-auto-lg { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }

/* Sidebar layout for interior pages.
   minmax(0,1fr) — NOT plain 1fr. A bare `1fr` track refuses to shrink below
   its content's intrinsic min-width, which pushes the whole grid wider than
   the viewport on narrow screens. minmax(0,…) lets it actually shrink. */
.layout-sidebar {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  gap: var(--sp-5);
  align-items: start;
}
.layout-sidebar > * { min-width: 0; }

/* ── Page hero — SOLID BRAND NAVY ──────────────────────────────────────
   Per the approved reference shot: interior heroes are a flat navy field,
   not a photograph behind a scrim. Three reasons this is better here:
     · the brand colour carries the page instead of stock photography
     · white text sits at a fixed, guaranteed 16.4:1 — no dependence on
       which photo happens to load, or on how dark that photo's left edge is
     · it removes a full-bleed image request from every interior page
   The <img> stays in the markup (hidden below) so this is a pure CSS
   change: revert these two rules and the photographic hero returns. */
.page-hero {
  position: relative;
  background: var(--navy);
  overflow: hidden;
  isolation: isolate;
}
/* The hero photograph stays in the DOM (so reverting is a CSS-only change)
   but is not painted. Positioning is kept for that revert. */
.page-hero-img {
  display: none;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}
.page-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  /* Barely-there depth so the navy field reads as a surface rather than a
     flat swatch. Both stops are navy, so contrast is unaffected: white
     text is 16.4:1 against the lightest point. */
  background:
    radial-gradient(120% 150% at 12% 0%, var(--navy-2) 0%, transparent 62%),
    var(--navy);
}
/* Substantial, not slim — the banner should feel like a real header.
   min-height keeps it consistent whether the page has a one-line or a
   three-line title. */
.page-hero { min-height: clamp(260px, 30vw, 380px); display: flex; align-items: flex-end; }
.page-hero-inner {
  padding-block: clamp(3rem, 2.2rem + 3.4vw, 5rem);
  position: relative;
  width: 100%;
}
.page-hero h1 {
  color: var(--white);
  margin-bottom: var(--sp-3);
  font-size: clamp(2.1rem, 1.5rem + 2.9vw, 3rem);
  text-shadow: 0 2px 24px rgba(0,0,0,.28);
}
.page-hero-sub {
  color: rgba(255,255,255,.88);
  font-size: var(--fs-lg);
  max-width: 60ch;
  margin-bottom: 0;
}
/* Gold rule under the page hero — brand signature */
.page-hero-rule { height: 4px; background: var(--gold); }

/* ── Breadcrumbs ───────────────────────────────────────────────────────*/
.breadcrumb {
  font-size: var(--fs-sm);
  margin-bottom: var(--sp-3);
  color: rgba(255,255,255,.72);
}
.breadcrumb ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin: 0;
  padding: 0;
}
.breadcrumb li { margin: 0; display: flex; align-items: center; gap: var(--sp-2); }
.breadcrumb li + li::before { content: "/"; opacity: .5; }
.breadcrumb a { color: rgba(255,255,255,.86); text-decoration: none; }
.breadcrumb a:hover { color: var(--gold); text-decoration: underline; }
.breadcrumb [aria-current="page"] { color: var(--gold); font-weight: 600; }

/* ── Utility spacing helpers ───────────────────────────────────────────*/
.mt-0 { margin-top: 0; }    .mb-0 { margin-bottom: 0; }
.mt-4 { margin-top: var(--sp-4); }  .mb-4 { margin-bottom: var(--sp-4); }
.mt-6 { margin-top: var(--sp-5); }  .mb-6 { margin-bottom: var(--sp-5); }
.text-center { text-align: center; }

.flex { display: flex; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-3 { gap: var(--sp-3); }
.gap-4 { gap: var(--sp-4); }

/* ═══════════════════════════════════════════════════════════════════════
   PAGE RHYTHM — alternating white / cream bands
   ───────────────────────────────────────────────────────────────────────
   Long interior pages read as one undifferentiated white sheet. Giving the
   page a subtle band rhythm makes each block feel deliberate and helps the
   eye find where one topic ends and the next begins.

   `.rhythm` on <main> tints every EVEN full-width .section. Sections that
   set their own background (.section-cream / .section-navy) opt out.
   ═══════════════════════════════════════════════════════════════════════ */
.rhythm > .section:nth-of-type(even):not(.section-cream):not(.section-navy):not(.section-navy-deep):not(.section-white) {
  background: var(--cream);
}

/* Callouts sitting on cream need to separate from it */
.section-cream .callout { background: var(--white); }

/* Interior pages have ONE full-width section wrapping a sidebar layout, so
   the band rhythm above does not apply to them. Their rhythm comes instead
   from the cream sidebar, the cream callouts, and the white content cards. */