/* ============================================================
 * material-layout.preview.css · CONSOLIDATED 2026-05-20.
 *
 * Single source of truth for LAYOUT PRIMITIVES across ALL 25 material
 * grade pages. Previously, each grade had its own per-slug copy of
 * this file (material-pla.preview.css, material-pa12-cf.preview.css,
 * etc.) — all 26 of those files (25 grades + hub.preview.css) were
 * byte-identical. They've been archived to
 * wp-import/archive/2026-05-20-css-consolidation/ for recovery.
 *
 * Hubs (materials, carbon-fibre-3d-printing, nylon-3d-printing) had
 * their own per-slug hub.preview.css that was also byte-identical to
 * this file. Hub previews still reference this file post-consolidation,
 * but hub HTML doesn't have hero-dark/perfect-for/not-for/tldr-*/spec-*
 * sections so most of the rules below silently no-op on hubs — the
 * actual hub-compare-* primitives live in brand.preview.css.
 *
 * Decoration lives in brand.preview.css (MATERIAL-PAGE COMPONENTS
 * block). This file holds:
 *
 *   - Body reset (margin: 0)
 *   - Top-strip kill (announcement bar + container top padding)
 *   - Body-level full-bleed treatment for hero, not-for, cta-close
 *     (matches the large-scale-activations pattern)
 *   - Bridge-band gradient strips at dark↔light transitions
 *   - Section spacing for contained sections
 *   - Grid track counts (key-props 4-up, apps-grid 4-up,
 *     proc-strip 6-up, trust-stack 4-up, etc.)
 *   - Mobile collapse @ 860px
 *
 * Every grade preview HTML references this file via
 *   <link href="material-layout.preview.css?v=<datestamp>" rel="stylesheet"/>
 * The port script copies this file into wp-child-theme/assets/material-layout.css
 * for the WordPress deploy.
 * ============================================================ */

/* Reset body UA-margin · default 8px would otherwise gap the
 * body-level full-width sections from the viewport edge. */
body { margin: 0; }

/* Top-strip kill · hide the shared announcement bar on this page
 * and tighten the first-container padding so the nav-pill sits
 * flush to the top edge above the hero. */
.sec-00 { display: none; }
.container:first-of-type { padding-top: 0; padding-bottom: 0; margin-bottom: 0; }
.container:first-of-type > .sec-01 { margin-bottom: 0; padding-bottom: 0; }
.container:first-of-type .sec-01 > div { padding-top: 0; padding-bottom: 0; }

/* ----- Body-level full-bleed sections · sit OUTSIDE .container -----
 * Hero, Not-for, CTA-close are direct children of body. Border-radius
 * and margin go to 0 so they butt up against neighbouring sections /
 * bridge bands cleanly. */
.hero-dark,
.perfect-for,
.not-for,
.cta-close {
  border-radius: 0;
  box-shadow: none;
  margin: 0;
}
/* Pull hero UP behind the body-level sticky header so its dark fill the
 * area behind the nav-pill · kills the white strip at the top of viewport.
 * Compensate copy padding so the H1 doesn't sit under the nav. */
.hero-dark { margin-top: -100px; }
.hero-dark .copy { padding-top: 132px; }
.hero-dark .stage { height: 720px; }

/* Breathing space after body-level dark/colour bands · stops the next
 * .container's content butting up against the band edge. */
.hero-dark + .container,
.perfect-for + .container,
.not-for + .container,
.close-band + .container,
.perfect-for + section,
.not-for + section { padding-top: 56px; }
.not-for + .container > section:first-of-type,
.perfect-for + .container > section:first-of-type { margin-top: 0; }

/* Cinematic stretch height for any inner photo slot in body-level
 * full-bleed sections. */
@media (max-width: 860px) {
  .hero-dark .stage { height: 460px; }
}

/* ----- Bridge-band gradient strips · 80px tall full-width fades
 *      between dark and light sections. Carries colour through the
 *      page so the eye flows (large-scale page lesson). ----- */
.bridge-band {
  width: 100%;
  height: 80px;
  margin: 0;
  display: block;
}
.bridge-band--into-dark    { background: linear-gradient(180deg, transparent 0%, var(--purple-900) 100%); }
.bridge-band--out-of-dark  { background: linear-gradient(180deg, var(--purple-900) 0%, transparent 100%); }
.bridge-band--dark-to-light{ background: linear-gradient(180deg, var(--purple-900) 0%, var(--paper) 100%); }
.bridge-band--light-to-dark{ background: linear-gradient(180deg, var(--paper) 0%, var(--purple-900) 100%); }

/* ----- Container section spacing · contained chunks get breathing room ----- */
.container > section,
.container > .tldr-card,
.container > .anchor-nav,
.container > .process-banner,
.container > .related-materials {
  margin-bottom: 32px;
}

/* ----- Grid track counts · the canonical material-page shapes ----- */
.key-props {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.apps-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.proc-strip {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
}
.trust-stack {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.dfam-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
.post-options-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

/* ----- Section-heading typography · material-page H2 ----- */
.material-page section > h2,
.material-page > h2 {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.02em;
  margin: 0 0 6px;
  line-height: 1.15;
}
.material-page section > .sec-heading,
.material-page .sec-heading {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-600);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 10px;
}
.material-page section > .lede {
  font-size: 14.5px;
  color: var(--ink-700);
  margin: 0 0 18px;
  line-height: 1.6;
  max-width: 760px;
}

/* ----- Footer (shared chrome) · 4-col by default, no override needed
 *      since brand.preview.css already has .footer rules for service
 *      pages. Kept as a safety override here. ----- */
.footer {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

/* ----- Mobile collapse · 860px ----- */
@media (max-width: 860px) {
  .key-props        { grid-template-columns: repeat(2, 1fr); }
  .apps-grid        { grid-template-columns: repeat(2, 1fr); }
  .proc-strip       { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .trust-stack      { grid-template-columns: repeat(2, 1fr); }
  .dfam-grid        { grid-template-columns: 1fr; }
  .post-options-grid{ grid-template-columns: 1fr; }
  .footer           { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 540px) {
  .proc-strip       { grid-template-columns: 1fr; }
  .trust-stack      { grid-template-columns: 1fr; }
  .footer           { grid-template-columns: 1fr; }
}


/* === MOBILE-NAV-FIX 2026-05-22 === append-only override (James/Claude) ===
 * (1) Hero H1 sat ~18px UNDER the wrapped mobile nav-pill. The desktop
 * .hero-dark{margin-top:-100px}/.copy{padding-top:132px} clearance is too
 * short once the pill wraps taller <=880px. Add mobile clearance. */
@media (max-width: 880px) {
  .hero-dark .copy { padding-top: 84px !important; }
}
/* === /MOBILE-NAV-FIX 2026-05-22 === */