/* ==========================================================================
   FUSION CNC — LAYOUT PRIMITIVES
   Grid, containers, section rhythm, section headers.
   ========================================================================== */

.container{
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--narrow{ max-width: var(--container-nar); }

.section{ padding-block: var(--section-y); }
.section--tight{ padding-block: calc(var(--section-y) * 0.62); }
.section--grey{ background: var(--surface-2); }
.section--dark{ background: var(--ink); color: var(--on-dark-2); }
.section--dark h1,.section--dark h2,.section--dark h3,.section--dark h4{ color: var(--on-dark); }

/* --------------------------------------------------------------------------
   DARK CANVAS — was a shared near-black system for mid-page "moment"
   sections (a Vision/Mission block, every page's closing CTA band). Client
   feedback: no black sections anywhere on the site. Repointed to a plain
   light ground instead — same class name and markup (.dark-canvas__grid /
   __glow spans stay in the HTML but are inert, see below) so no page needed
   editing, only this shared definition. */
.dark-canvas{
  position: relative;
  background: var(--surface-2);
  color: var(--ink-3);
  overflow: hidden;
  isolation: isolate;
}
.dark-canvas > .container{ position: relative; z-index: 2; }
.dark-canvas h1,
.dark-canvas h2,
.dark-canvas h3,
.dark-canvas h4{ color: var(--ink); }
/* The grid/glow decorative layers were tuned for a dark ground (white
   hairlines, an additive glow) and would be wrong on light — rather than
   retint them, they're switched off here so old markup just renders as a
   plain surface. */
.dark-canvas__grid,
.dark-canvas__glow{ display: none; }

/* --- 12-column grid ------------------------------------------------------ */
.grid{
  display: grid;
  grid-template-columns: repeat(12, minmax(0,1fr));
  gap: var(--s-8);
}

/* Auto-fit card grids. minmax() means the same class works from 360px to
   1440px without a breakpoint per grid. */
.cards{
  display: grid;
  gap: var(--s-6);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
}
.cards--wide{ grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); }
.cards--3    { grid-template-columns: repeat(auto-fit,  minmax(min(100%, 300px), 1fr)); }

/* --- Section header ------------------------------------------------------ */
.section-head{ max-width: 65ch; margin-bottom: var(--s-12); }
.section-head--center{ margin-inline: auto; text-align: center; }

/* Eyebrow: uppercase micro-label with a short orange rule. Uses --brand-ink,
   not --brand, because this is small text on white and must clear 4.5:1. */
.eyebrow{
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  font-family: var(--font-body);
  font-size: var(--t-eyebrow);
  font-weight: 700;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--brand);
  margin-bottom: var(--s-5);
}
.eyebrow::before{
  content: "";
  width: 28px;
  height: 2px;
  background: var(--brand);
  flex: none;
}
/* --brand only measures 3.4:1 on #111 — below AA for this small text — so
   dark sections use --brand-bright instead. See tokens.css. .dark-canvas is
   no longer dark (see above), so it's not in this list — its eyebrow uses
   the default --brand colour like any other light section. */
.section--dark .eyebrow,
.on-dark .eyebrow{ color: var(--brand-bright); }
.section-head--center .eyebrow{ justify-content: center; }

.section-head p{
  margin-top: var(--s-5);
  font-size: var(--t-lead);
  color: var(--ink-3);
  max-width: 58ch;
}
.section-head--center p{ margin-inline: auto; }
/* Body copy must flip on a genuinely dark context — .dark-canvas is no
   longer one (see above), so only .section--dark needs this now. */
.section--dark .section-head p{ color: var(--on-dark-2); }

/* Head row: title left, action right — collapses to stacked on small. */
.head-row{
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s-8);
  margin-bottom: var(--s-12);
  flex-wrap: wrap;
}
.head-row .section-head{ margin-bottom: 0; }

/* --- Utilities ----------------------------------------------------------- */
.stack > * + *{ margin-top: var(--s-4); }
.stack-lg > * + *{ margin-top: var(--s-6); }
.center{ text-align: center; }
.hairline{ height: 1px; background: var(--line); border: 0; }
.section--dark .hairline{ background: var(--line-on-dark); }
.lead{ font-size: var(--t-lead); color: var(--ink-3); }
.muted{ color: var(--ink-4); }
.nowrap{ white-space: nowrap; }