/* ==========================================================================
   TECHIE ZEST — LAYOUT PRIMITIVES
   ========================================================================== */

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

.section { padding-block: var(--section-y); }
.section--tight { padding-block: calc(var(--section-y) * 0.6); }
.section--flush-top { padding-top: 0; }

/* Dark navy moment */
.section--invert {
  background: radial-gradient(circle at 85% 15%, rgba(16,159,102,.16), transparent 29%),
              linear-gradient(135deg, var(--bg-invert), var(--navy-deep));
  color: var(--text-invert);
}
.section--invert h1, .section--invert h2,
.section--invert h3, .section--invert h4 { color: var(--text-invert); }
.section--invert .muted { color: var(--text-invert-soft); }

/* 12-col grid */
.grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-cols), minmax(0, 1fr));
  gap: var(--space-lg) var(--gutter);
}
.grid--gap-lg { gap: var(--space-2xl) var(--gutter); }

/* Use `auto / span N` so an explicit .start-M can override the start line
   without wiping out the span (a bare `span N` shorthand would). */
.col-3 { grid-column: auto / span 3; }
.col-4 { grid-column: auto / span 4; }
.col-5 { grid-column: auto / span 5; }
.col-6 { grid-column: auto / span 6; }
.col-7 { grid-column: auto / span 7; }
.col-8 { grid-column: auto / span 8; }
.col-9 { grid-column: auto / span 9; }
.col-10 { grid-column: auto / span 10; }
.col-12 { grid-column: auto / span 12; }
.start-2 { grid-column-start: 2; }
.start-3 { grid-column-start: 3; }
.start-6 { grid-column-start: 6; }
.start-7 { grid-column-start: 7; }
.start-8 { grid-column-start: 8; }
.start-9 { grid-column-start: 9; }

/* Flex helpers */
.stack { display: flex; flex-direction: column; }
.stack > * + * { margin-top: var(--flow, var(--space-sm)); }
.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); }
.between { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); }

/* Rules */
.rule { border: 0; border-top: 1px solid var(--line); }
.rule--strong { border-top-color: var(--line-strong); }
.rule--gold { border: 0; border-top: 2px solid var(--gold); width: 3rem; box-shadow: 1.5rem 0 0 color-mix(in srgb, var(--gold) 28%, transparent); }
.rule--invert { border-top-color: var(--line-invert); }

/* Section header block */
.section-head { max-width: 60ch; }
.section-head .eyebrow { margin-bottom: var(--space-md); }
.section-head h2 { margin-bottom: var(--space-sm); }
.section-head--between {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--space-lg); max-width: none; margin-bottom: var(--space-xl);
}
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center .eyebrow { justify-content: center; }