/* ==========================================================================
   Vanguard Avionics — layout
   Container, 12-column grid, section rhythm, the draughtsman section header.
   ========================================================================== */

.wrap {
  width: 100%;
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: var(--page-gutter);
}

.wrap--narrow {
  max-width: 960px;
}

.wrap--wide {
  max-width: 1560px;
}

/* Full-bleed escape hatch for a child of .wrap */
.bleed {
  width: 100vw;
  margin-inline: calc(50% - 50vw);
}

/* --- 12-col grid -------------------------------------------------------- */

.grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--s-6) var(--s-5);
}

.grid--tight {
  gap: var(--s-4);
}
.grid--loose {
  gap: var(--s-8) var(--s-6);
}

/* Columns are declared with the LONG-HAND properties on purpose.
   `grid-column: span N` is shorthand that also writes grid-column-start, so a
   later `grid-column-start: auto` (the responsive start reset) silently wiped
   the span and collapsed the element to one column. Keeping start and end as
   separate declarations means the two can never clobber each other. */
.col-1  { grid-column-end: span 1; }
.col-2  { grid-column-end: span 2; }
.col-3  { grid-column-end: span 3; }
.col-4  { grid-column-end: span 4; }
.col-5  { grid-column-end: span 5; }
.col-6  { grid-column-end: span 6; }
.col-7  { grid-column-end: span 7; }
.col-8  { grid-column-end: span 8; }
.col-9  { grid-column-end: span 9; }
.col-10 { grid-column-end: span 10; }
.col-11 { grid-column-end: span 11; }
.col-12 { grid-column-end: span 12; }

.start-2  { grid-column-start: 2; }
.start-3  { grid-column-start: 3; }
.start-4  { grid-column-start: 4; }
.start-5  { grid-column-start: 5; }
.start-6  { grid-column-start: 6; }
.start-7  { grid-column-start: 7; }
.start-8  { grid-column-start: 8; }
.start-9  { grid-column-start: 9; }
.start-10 { grid-column-start: 10; }
.start-11 { grid-column-start: 11; }

/* --- tablet ------------------------------------------------------------- */
@media (max-width: 1024px) {
  .col-md-3  { grid-column-end: span 3; }
  .col-md-4  { grid-column-end: span 4; }
  .col-md-6  { grid-column-end: span 6; }
  .col-md-12 { grid-column-end: span 12; }
  .md-start-auto { grid-column-start: auto; }
}

/* --- phone --------------------------------------------------------------
   Everything goes full width unless it explicitly opts out with .col-sm-*,
   and every explicit start position is dropped. */
@media (max-width: 720px) {
  .grid {
    gap: var(--s-5) var(--s-4);
  }
  .col-1, .col-2, .col-3, .col-4, .col-5, .col-6,
  .col-7, .col-8, .col-9, .col-10, .col-11,
  .col-md-3, .col-md-4, .col-md-6 {
    grid-column-end: span 12;
  }
  .col-sm-4 { grid-column-end: span 4; }
  .col-sm-6 { grid-column-end: span 6; }
  [class*="start-"] { grid-column-start: auto; }
}

/* --- section rhythm ------------------------------------------------------
   Sections are deliberately not all the same height. --pad-block is set per
   section so a dense spec block can sit tight while an editorial spread
   breathes, which is what stops the page reading as a stack of equal slabs. */

.section {
  padding-block: var(--pad-block, var(--s-9));
  background: var(--bg);
  color: var(--fg);
  position: relative;
}

.section--tight {
  --pad-block: var(--s-7);
}
.section--roomy {
  --pad-block: var(--s-10);
}
.section--flush-top {
  padding-block-start: 0;
}
.section--flush-bottom {
  padding-block-end: 0;
}

.section--sunken {
  background: var(--bg-sunken);
}
.section--raised {
  background: var(--bg-raised);
}

/* Hairline between consecutive sections of the same tone. */
.section--ruled {
  border-block-start: 1px solid var(--rule);
}

/* --- the section header --------------------------------------------------
   Modelled on an engineering drawing title block: an index number, an em
   rule, the sheet name. It repeats on every page and is the main thing
   tying the site together. */

.sec-head {
  display: grid;
  gap: var(--s-4);
  margin-block-end: var(--s-7);
}

.sec-head__index {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  font-family: var(--font-mono);
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
}

/* The rule grows out of the number and runs to the end of the column. It
   draws itself in from the left as the header scrolls into view — site.js
   tags every .sec-head__index with data-reveal, so .is-in arrives via the
   same IntersectionObserver as everything else on the page. The parent's
   own opacity/translateY reveal (from the generic [data-reveal] rule) and
   this scaleX are independent, since transform never inherits in CSS. */
.sec-head__index::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--rule-accent), transparent);
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform 900ms var(--ease-out-expo) 200ms;
}

.sec-head__index.is-in::after {
  transform: scaleX(1);
}

@media (prefers-reduced-motion: reduce) {
  .sec-head__index::after {
    transform: none;
    transition: none;
  }
}

.sec-head__title {
  max-width: 20ch;
}

.sec-head--wide .sec-head__title {
  max-width: 26ch;
}

.sec-head__intro {
  max-width: 54ch;
  color: var(--fg-muted);
  font-size: var(--t-lead);
  line-height: 1.6;
}

/* Header with the title left and supporting copy right — used where the
   section below is a wide grid and a centred header would float. */
.sec-head--split {
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
  align-items: end;
  column-gap: var(--s-7);
}

.sec-head--split .sec-head__index {
  grid-column: 1 / -1;
}

@media (max-width: 860px) {
  .sec-head--split {
    grid-template-columns: 1fr;
  }
}

/* --- utility ------------------------------------------------------------- */

.stack > * + * {
  margin-block-start: var(--flow, var(--s-4));
}
.stack-sm { --flow: var(--s-3); }
.stack-lg { --flow: var(--s-5); }
.stack-xl { --flow: var(--s-6); }

.row {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex-wrap: wrap;
}

.row--between {
  justify-content: space-between;
}

.center {
  text-align: center;
}
.center-x {
  margin-inline: auto;
}

.hairline {
  height: 1px;
  background: var(--rule);
  border: 0;
}

.sticky-side {
  position: sticky;
  top: calc(var(--nav-h) + var(--s-5));
}

@media (max-width: 1024px) {
  .sticky-side {
    position: static;
  }
}

.hide-sm {
  display: initial;
}
@media (max-width: 720px) {
  .hide-sm {
    display: none !important;
  }
}