/* Manufacturing — assets/css/manufacturing.css
   Loaded only on /manufacturing/ by inc/routes.php (zeroy_enqueue_page_style('manufacturing'),
   which depends on 'zeroy-site', so these rules follow style.css and tokens.css). No other page
   of the theme uses anything in this file.

   Every colour, size, space and radius is a var() token from assets/css/tokens.css: no colour
   literals, no font declarations, no :root edits, no !important, no JS, no animation library.
   Mobile first: one column by default, columns from 48em.

   The sections this file is responsible for, in page order:
     1. .mfg-hero            opening band: copy beside the workshop photograph
     2. .mfg-routes          our own workshop / the partner lines, plus the closing note
     3. .mfg-placement       the six factors a line is chosen on, plus the repeat-order card
     4. .mfg-floor           production photographs with their captions
     5. .mfg-responsibility  one responsibility: copy beside the single-contact card
     6. .mfg-cta             dark closing band: copy, buttons, contact lines

   .section, .wrap, .stack, .grid, .split, .card, .media, .btn, .btn-row, .eyebrow, .lead,
   .meta and .rule-accent come from style.css and are not redefined here: the .mfg-* selectors
   below only add what is specific to this page. */

/* --- 1. hero ------------------------------------------------------------ */
/* Page-scoped padding only; .section itself is untouched. */
.mfg-hero{padding-block:var(--section-y-tight) var(--section-y)}
.mfg-hero__grid{display:grid;gap:var(--space-6);align-items:center}
.mfg-hero__copy h1{max-width:24ch}
.mfg-hero__copy .lead{max-width:58ch}
.mfg-hero__copy .btn-row{margin-bottom:0}
.mfg-hero__media{margin:0}

/* --- section head shared by bands 2, 3 and 4 ---------------------------- */
.mfg-head{max-width:var(--wrap-narrow);margin-bottom:var(--space-6)}
.mfg-head h2{max-width:32ch}
.mfg-head .lead{margin-top:var(--space-2)}

/* --- 2. two routes to the same standard --------------------------------- */
.mfg-routes__cards .card h3{margin-bottom:var(--space-2)}
.mfg-routes__cards .card p:last-child{margin-bottom:0}
.mfg-routes__note{margin-top:var(--space-5);margin-bottom:0}

/* --- 3. how the line is chosen: six factors ----------------------------- */
/* Auto-fit: the column count follows the room instead of being fixed. */
.mfg-factors{
  list-style:none;
  margin:0;
  padding:0;
  max-width:none;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr));
  gap:var(--space-5)}
.mfg-factor{
  margin:0;
  padding-top:var(--space-4);
  border-top:1px solid var(--c-line-strong)}
/* Factor headings label one short paragraph each, so they stay small. */
.mfg-factor h3{
  font-size:var(--fs-h4);
  letter-spacing:normal;
  margin-bottom:var(--space-2)}
.mfg-factor p{margin-bottom:0;color:var(--c-ink-soft)}

/* the repeat-order card sits under the factors, not beside them */
.mfg-placement__body{margin-top:var(--space-6)}
.mfg-placement__body .card{max-width:var(--wrap-narrow)}
.mfg-placement__body .card h3{margin-bottom:var(--space-3)}
.mfg-placement__body .card p:last-child{margin-bottom:0}

/* --- 4. from the production floor --------------------------------------- */
.mfg-floor__grid{gap:var(--space-5)}
/* .media is the frame (radius, overflow); the caption sits on its own surface plate. */
.mfg-photo{margin:0;background:var(--c-surface)}
.mfg-photo figcaption{
  padding:var(--space-3) var(--space-4);
  border-top:var(--border-hair)}

/* --- 5. one responsibility ---------------------------------------------- */
/* .split centres its columns; here the tall copy and the short card both start at the top. */
.mfg-responsibility__body{align-items:start}
.mfg-responsibility__card h3{max-width:24ch;margin-bottom:var(--space-3)}
.mfg-responsibility__card p:last-child{margin-bottom:0}

/* --- 6. closing call to action ------------------------------------------ */
.mfg-cta__inner{display:grid;gap:var(--space-6);align-items:start}
.mfg-cta__copy h2{max-width:28ch;margin-bottom:var(--space-4)}
.mfg-cta__copy .lead{max-width:54ch;margin-bottom:var(--space-5)}
.mfg-cta__copy .btn-row{margin-bottom:0}
/* The global .btn--ghost border and hover colours are tuned for light backgrounds; on the
   .section--ink surface they would leave the label dark on dark. This button alone therefore
   takes the light-on-dark tokens tokens.css already defines: --c-on-ink for the label,
   --c-on-ink-line for the border and for the hover wash. */
.mfg-cta__ghost{border-color:var(--c-on-ink-line);color:var(--c-on-ink)}
.mfg-cta__ghost:hover{border-color:var(--c-on-ink);color:var(--c-on-ink);background:var(--c-on-ink-line)}
.mfg-cta__contact{border-top:1px solid var(--c-on-ink-line);padding-top:var(--space-5)}
.mfg-cta__line{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--space-2) var(--space-4);margin:0 0 var(--space-3);font-size:var(--fs-small)}
.mfg-cta__line:last-child{margin-bottom:0}
.mfg-cta__label{min-width:8rem;font-size:var(--fs-eyebrow);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--c-on-ink-mute)}
.mfg-cta__contact a{color:var(--c-on-ink)}

/* --- from 48em: the opening band becomes two columns -------------------- */
@media (min-width:48em){
  .mfg-hero{padding-block:var(--section-y)}
  .mfg-hero__grid{grid-template-columns:1.05fr .95fr;gap:var(--space-7)}
  .mfg-floor__grid{gap:var(--space-6)}
  .mfg-cta__line{flex-wrap:nowrap}
}

/* --- from 62em: the closing band splits copy from contact details ------- */
@media (min-width:62em){
  .mfg-factors{gap:var(--space-6)}
  .mfg-cta__inner{grid-template-columns:1.15fr .85fr;gap:var(--space-7)}
  .mfg-cta__contact{border-top:0;padding-top:0}
  .mfg-cta__contact a{text-decoration-color:var(--c-on-ink-line)}
}