/* Purpose: The site shell - containers, the 12/8/4 grid, section rhythm and utility stacks.
   One alignment contract for every page. No page may invent its own container width. */

/* ============================================================
   CONTAINER - the shared content width
   ============================================================ */
.container{
  width:min(calc(100% - (2 * var(--container-pad))), var(--container-max));
  margin-inline:auto;
}
.container--wide{
  width:min(calc(100% - (2 * var(--container-pad))), var(--container-wide));
  margin-inline:auto;
}
.container--narrow{
  width:min(calc(100% - (2 * var(--container-pad))), var(--container-narrow));
  margin-inline:auto;
}

/* ============================================================
   GRID - 4 mobile / 8 tablet / 12 desktop
   minmax(0,1fr) so long content can never force overflow
   ============================================================ */
.grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:var(--grid-gap);
}
@media (min-width:768px){
  .grid{grid-template-columns:repeat(8,minmax(0,1fr))}
}
@media (min-width:1024px){
  .grid{grid-template-columns:repeat(12,minmax(0,1fr))}
}

/* Column spans - mobile default is full width (4 of 4) */
.col-full{grid-column:1 / -1}
@media (min-width:768px){
  .col-t-4{grid-column:span 4}
  .col-t-8{grid-column:span 8}
}
@media (min-width:1024px){
  .col-d-3{grid-column:span 3}
  .col-d-4{grid-column:span 4}
  .col-d-5{grid-column:span 5}
  .col-d-6{grid-column:span 6}
  .col-d-7{grid-column:span 7}
  .col-d-8{grid-column:span 8}
  .col-d-12{grid-column:span 12}
}

/* Auto-fit card rows - the workhorse for card libraries */
.cards{
  display:grid;
  grid-template-columns:repeat(1,minmax(0,1fr));
  gap:var(--grid-gap);
}
@media (min-width:640px){ .cards{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (min-width:1024px){
  .cards--2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cards--3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .cards--4{grid-template-columns:repeat(4,minmax(0,1fr))}
}

/* ============================================================
   SECTION RHYTHM - spacing comes from section padding,
   never from ad-hoc margins between sections
   ============================================================ */
/* The reference runs a flat 100px band on every section, top and bottom. */
.section{
  padding-block:var(--space-64);
  position:relative;
}
.section--large{padding-block:var(--space-80)}
.section--compact{padding-block:var(--space-48)}
.section--flush{padding-block:0}

@media (min-width:768px){
  .section{padding-block:var(--space-80)}
  .section--large{padding-block:var(--space-96)}
  .section--compact{padding-block:var(--space-64)}
}
@media (min-width:1024px){
  .section{padding-block:var(--section-pad-lg)}
  .section--large{padding-block:var(--section-pad-lg)}
  .section--compact{padding-block:var(--space-64)}
}

/* Full-bleed background bands - readable content still aligns to .container */
.section--panel{background:var(--c-bg-alt)}
.section--bordered{border-block:1px solid var(--c-border)}
.section--wash{
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(var(--rgb-navy),.44) 0%, rgba(var(--rgb-void),0) 68%),
    var(--c-bg);
}

/* ============================================================
   STACKS & ROWS - vertical/horizontal rhythm on the 4-pt scale
   ============================================================ */
.stack > * + *{margin-top:var(--space-16)}
.stack--sm > * + *{margin-top:var(--space-8)}
.stack--lg > * + *{margin-top:var(--space-24)}
.stack--xl > * + *{margin-top:var(--space-32)}
@media (min-width:1024px){
  .stack > * + *{margin-top:var(--space-24)}
  .stack--lg > * + *{margin-top:var(--space-32)}
  .stack--xl > * + *{margin-top:var(--space-40)}
}

.row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-16)}
.row--tight{gap:var(--space-8)}
.row--between{justify-content:space-between}
.row--center{justify-content:center}

/* ============================================================
   SPLIT - the copy + media two-up used across the site
   ============================================================ */
.split{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:var(--space-48);
  align-items:center;
}
@media (min-width:1024px){
  .split{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--space-80)}
  .split--reverse .split__media{order:-1}
  .split--copy-wide{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}
}

/* ============================================================
   SECTION HEAD - eyebrow + heading + optional trailing link
   ============================================================ */
.section-head{
  display:grid;
  gap:var(--space-24);
  align-items:end;
  margin-bottom:var(--space-48);
}
@media (min-width:1024px){
  .section-head{
    grid-template-columns:minmax(0,1fr) auto;
    gap:var(--space-40);
    margin-bottom:var(--space-64);
  }
}
.section-head--center{
  justify-items:center;
  text-align:center;
  grid-template-columns:minmax(0,1fr);
}
.section-head--center .lede{margin-inline:auto}

/* ============================================================
   MAIN - reserves space under the fixed header, no CLS
   ============================================================ */
/* The drone flight starts with the drone bleeding off the right edge, so the page is
   clipped horizontally. `clip` rather than `hidden`: hidden would make this a scroll
   container, which would break the sticky hero inside it. */
.site-main{min-height:50vh;overflow-x:clip}
.site-main--offset{padding-top:var(--header-offset)}

/* ============================================================
   UTILITIES - the small, named set templates are allowed to use
   instead of an inline style. Every value is a token.
   ============================================================ */
.u-mt-12{margin-top:var(--space-12)}
.u-mt-16{margin-top:var(--space-16)}
.u-mt-24{margin-top:var(--space-24)}
.u-mt-32{margin-top:var(--space-32)}
.u-mt-40{margin-top:var(--space-40)}
.u-mb-16{margin-bottom:var(--space-16)}
.u-mb-24{margin-bottom:var(--space-24)}
.u-mb-32{margin-bottom:var(--space-32)}
.u-mb-48{margin-bottom:var(--space-48)}
.u-my-12-32{margin:var(--space-12) 0 var(--space-32)}
.u-flush{margin:0;padding:0}
.u-push-end{margin-inline-start:auto}

/* Deliberate short measures for display headings */
.u-measure-20{max-width:20ch}
.u-measure-22{max-width:22ch}
.u-measure-24{max-width:24ch}

/* A narrow reading column that fills its parent container rather than re-centring */
.u-narrow-inner{width:100%;max-width:var(--container-narrow);padding:0}