/* ==========================================================================
   LAYOUT PRIMITIVES
   Containers, grids, stacks, clusters — the load-bearing layout structures.
   Inspired by Every Layout but tuned for this campaign's content shapes.
   ========================================================================== */

/* ----------------------------------------------------------------------
   CONTAINER
   ---------------------------------------------------------------------- */

.container,
.wrap {
  inline-size: 100%;
  max-inline-size: var(--container-xl);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container--prose { max-inline-size: var(--container-prose); }
.container--xs    { max-inline-size: var(--container-xs); }
.container--sm    { max-inline-size: var(--container-sm); }
.container--md    { max-inline-size: var(--container-md); }
.container--lg    { max-inline-size: var(--container-lg); }
.container--xl    { max-inline-size: var(--container-xl); }
.container--2xl   { max-inline-size: var(--container-2xl); }
.container--wide  { max-inline-size: var(--container-wide); }
.container--full  { max-inline-size: 100%; padding-inline: 0; }
.container--tight { padding-inline: var(--gutter-tight); }
.container--bleed { max-inline-size: none; }

.container--narrow-on-mobile {
  max-inline-size: var(--container-prose);
}
@media (min-width: 48em) {
  .container--narrow-on-mobile {
    max-inline-size: var(--container-xl);
  }
}

/* ----------------------------------------------------------------------
   SECTION — vertical rhythm
   ---------------------------------------------------------------------- */

.section {
  padding-block: var(--section-y);
  position: relative;
}

.section--sm { padding-block: var(--section-y-sm); }
.section--lg { padding-block: var(--section-y-lg); }
.section--flush-top { padding-block-start: 0; }
.section--flush-bottom { padding-block-end: 0; }

.section--bg-alt { background: var(--surface-bg-alt); }
.section--bg-muted { background: var(--surface-bg-muted); }
.section--bg-brand-soft { background: var(--surface-bg-brand-soft); }
.section--bg-brand {
  background: var(--surface-bg-brand);
  color: var(--text-on-brand);
}
.section--bg-inverse {
  background: var(--surface-bg-inverse);
  color: var(--text-on-brand);
}

.section--bg-gradient-flag {
  background:
    radial-gradient(60% 100% at 50% 0%, rgba(255, 255, 255, 0.08) 0%, transparent 60%),
    linear-gradient(180deg, var(--color-navy-800) 0%, var(--color-navy-900) 60%, var(--color-navy-950) 100%);
  color: var(--text-on-brand);
}

.section--bg-gradient-desert {
  background:
    radial-gradient(80% 100% at 10% 90%, rgba(243, 200, 79, 0.18) 0%, transparent 50%),
    radial-gradient(60% 80% at 90% 10%, rgba(207, 45, 45, 0.10) 0%, transparent 50%),
    linear-gradient(180deg, var(--surface-bg-alt) 0%, var(--surface-bg) 100%);
}

.section__header {
  text-align: center;
  margin-block-end: var(--space-12);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
}

.section__header--start {
  align-items: flex-start;
  text-align: start;
}

.section__header--split {
  flex-direction: row;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  text-align: start;
  gap: var(--space-6);
}

.section__title {
  max-inline-size: 22ch;
}

.section__sub {
  max-inline-size: var(--measure-prose);
  color: var(--text-muted);
  font-size: var(--font-size-lg);
  line-height: var(--leading-relaxed);
  text-wrap: pretty;
}

/* ----------------------------------------------------------------------
   STACK — vertical flow
   ---------------------------------------------------------------------- */

.stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.stack--0  { gap: 0; }
.stack--1  { gap: var(--space-1); }
.stack--2  { gap: var(--space-2); }
.stack--3  { gap: var(--space-3); }
.stack--4  { gap: var(--space-4); }
.stack--5  { gap: var(--space-5); }
.stack--6  { gap: var(--space-6); }
.stack--8  { gap: var(--space-8); }
.stack--10 { gap: var(--space-10); }
.stack--12 { gap: var(--space-12); }
.stack--16 { gap: var(--space-16); }

.stack-divided > * + * {
  padding-block-start: var(--space-6);
  border-block-start: 1px solid var(--surface-border);
}

/* ----------------------------------------------------------------------
   CLUSTER — horizontal flow with wrap
   ---------------------------------------------------------------------- */

.cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-4);
  align-items: center;
}

.cluster--center { justify-content: center; }
.cluster--between { justify-content: space-between; }
.cluster--end { justify-content: flex-end; }
.cluster--start { justify-content: flex-start; }
.cluster--top { align-items: flex-start; }
.cluster--bottom { align-items: flex-end; }
.cluster--tight { gap: var(--space-2); }
.cluster--loose { gap: var(--space-6); }
.cluster--no-wrap { flex-wrap: nowrap; }

/* ----------------------------------------------------------------------
   SWITCHER — flexible row that switches to stack at narrow widths
   ---------------------------------------------------------------------- */

.switcher {
  display: flex;
  flex-wrap: wrap;
  gap: var(--grid-gap);
}

.switcher > * {
  flex-grow: 1;
  flex-basis: calc((40rem - 100%) * 999);
}

.switcher--threshold-sm > * {
  flex-basis: calc((24rem - 100%) * 999);
}

.switcher--threshold-md > * {
  flex-basis: calc((32rem - 100%) * 999);
}

.switcher--threshold-lg > * {
  flex-basis: calc((48rem - 100%) * 999);
}

/* ----------------------------------------------------------------------
   COVER — hero with min-height and content centered
   ---------------------------------------------------------------------- */

.cover {
  display: flex;
  flex-direction: column;
  min-block-size: 60vh;
  min-block-size: 60dvh;
  padding-block: var(--space-12);
}

.cover > * {
  margin-block: var(--space-4);
}

.cover > :first-child { margin-block-start: 0; }
.cover > :last-child  { margin-block-end: 0; }
.cover > .cover__center {
  margin-block: auto;
}

.cover--tall {
  min-block-size: 85vh;
  min-block-size: 85dvh;
}

.cover--full {
  min-block-size: 100vh;
  min-block-size: 100dvh;
}

/* ----------------------------------------------------------------------
   CENTER — horizontally center a column
   ---------------------------------------------------------------------- */

.center {
  display: block;
  margin-inline: auto;
  max-inline-size: var(--measure-prose);
}

.center-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* ----------------------------------------------------------------------
   SIDEBAR — main + sidebar layout that gracefully stacks
   ---------------------------------------------------------------------- */

.with-sidebar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--grid-gap);
}

.with-sidebar > :first-child {
  flex-basis: 18rem;
  flex-grow: 1;
}

.with-sidebar > :last-child {
  flex-basis: 0;
  flex-grow: 999;
  min-inline-size: 60%;
}

.with-sidebar--end > :first-child {
  flex-basis: 0;
  flex-grow: 999;
  min-inline-size: 60%;
}

.with-sidebar--end > :last-child {
  flex-basis: 18rem;
  flex-grow: 1;
}

/* ----------------------------------------------------------------------
   GRID — responsive auto-fit grid
   ---------------------------------------------------------------------- */

.grid {
  display: grid;
  gap: var(--grid-gap);
}

.grid--auto {
  grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr));
}

.grid--auto-sm {
  grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr));
}

.grid--auto-md {
  grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
}

.grid--auto-lg {
  grid-template-columns: repeat(auto-fit, minmax(min(26rem, 100%), 1fr));
}

.grid--auto-fill {
  grid-template-columns: repeat(auto-fill, minmax(min(18rem, 100%), 1fr));
}

.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
.grid--6 { grid-template-columns: repeat(6, 1fr); }
.grid--12 { grid-template-columns: repeat(12, 1fr); }

@media (max-width: 48em) {
  .grid--2, .grid--3, .grid--4, .grid--6, .grid--12 {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 48em) and (max-width: 64em) {
  .grid--3, .grid--4 {
    grid-template-columns: repeat(2, 1fr);
  }
  .grid--6 { grid-template-columns: repeat(3, 1fr); }
  .grid--12 { grid-template-columns: repeat(6, 1fr); }
}

.grid--tight { gap: var(--grid-gap-tight); }
.grid--wide { gap: var(--grid-gap-wide); }

/* Grid spans */
.col-span-1  { grid-column: span 1; }
.col-span-2  { grid-column: span 2; }
.col-span-3  { grid-column: span 3; }
.col-span-4  { grid-column: span 4; }
.col-span-5  { grid-column: span 5; }
.col-span-6  { grid-column: span 6; }
.col-span-7  { grid-column: span 7; }
.col-span-8  { grid-column: span 8; }
.col-span-9  { grid-column: span 9; }
.col-span-10 { grid-column: span 10; }
.col-span-11 { grid-column: span 11; }
.col-span-12 { grid-column: span 12; }
.col-span-full { grid-column: 1 / -1; }

@media (max-width: 48em) {
  .col-span-sm-full { grid-column: 1 / -1; }
}

.row-span-2 { grid-row: span 2; }
.row-span-3 { grid-row: span 3; }
.row-span-full { grid-row: 1 / -1; }

/* ----------------------------------------------------------------------
   BLEED — break out of container to viewport edge
   ---------------------------------------------------------------------- */

.bleed-full {
  inline-size: 100vw;
  margin-inline-start: 50%;
  transform: translateX(-50%);
}

.bleed-right {
  margin-inline-end: calc(50% - 50vw);
}

.bleed-left {
  margin-inline-start: calc(50% - 50vw);
}

/* ----------------------------------------------------------------------
   ASPECT RATIOS
   ---------------------------------------------------------------------- */

.aspect-square   { aspect-ratio: 1 / 1; }
.aspect-video    { aspect-ratio: 16 / 9; }
.aspect-portrait { aspect-ratio: 3 / 4; }
.aspect-photo    { aspect-ratio: 4 / 3; }
.aspect-wide     { aspect-ratio: 21 / 9; }
.aspect-golden   { aspect-ratio: 1.618 / 1; }
.aspect-poster   { aspect-ratio: 2 / 3; }
.aspect-og       { aspect-ratio: 1.91 / 1; }

/* ----------------------------------------------------------------------
   SPACING UTILITIES (margin, padding)
   Use sparingly — prefer stack/cluster.
   ---------------------------------------------------------------------- */

.m-0 { margin: 0; }
.m-auto { margin: auto; }
.mt-0 { margin-block-start: 0; }
.mt-1 { margin-block-start: var(--space-1); }
.mt-2 { margin-block-start: var(--space-2); }
.mt-3 { margin-block-start: var(--space-3); }
.mt-4 { margin-block-start: var(--space-4); }
.mt-5 { margin-block-start: var(--space-5); }
.mt-6 { margin-block-start: var(--space-6); }
.mt-8 { margin-block-start: var(--space-8); }
.mt-10 { margin-block-start: var(--space-10); }
.mt-12 { margin-block-start: var(--space-12); }
.mt-16 { margin-block-start: var(--space-16); }
.mt-20 { margin-block-start: var(--space-20); }
.mt-24 { margin-block-start: var(--space-24); }
.mb-0 { margin-block-end: 0; }
.mb-1 { margin-block-end: var(--space-1); }
.mb-2 { margin-block-end: var(--space-2); }
.mb-3 { margin-block-end: var(--space-3); }
.mb-4 { margin-block-end: var(--space-4); }
.mb-5 { margin-block-end: var(--space-5); }
.mb-6 { margin-block-end: var(--space-6); }
.mb-8 { margin-block-end: var(--space-8); }
.mb-10 { margin-block-end: var(--space-10); }
.mb-12 { margin-block-end: var(--space-12); }
.mb-16 { margin-block-end: var(--space-16); }
.mx-auto { margin-inline: auto; }
.mi-auto { margin-inline: auto; }

.p-0 { padding: 0; }
.p-1 { padding: var(--space-1); }
.p-2 { padding: var(--space-2); }
.p-3 { padding: var(--space-3); }
.p-4 { padding: var(--space-4); }
.p-5 { padding: var(--space-5); }
.p-6 { padding: var(--space-6); }
.p-8 { padding: var(--space-8); }
.p-10 { padding: var(--space-10); }
.p-12 { padding: var(--space-12); }
.pt-0 { padding-block-start: 0; }
.pt-6 { padding-block-start: var(--space-6); }
.pt-8 { padding-block-start: var(--space-8); }
.pt-12 { padding-block-start: var(--space-12); }
.pb-0 { padding-block-end: 0; }
.pb-6 { padding-block-end: var(--space-6); }
.pb-8 { padding-block-end: var(--space-8); }
.pb-12 { padding-block-end: var(--space-12); }
.py-4 { padding-block: var(--space-4); }
.py-6 { padding-block: var(--space-6); }
.py-8 { padding-block: var(--space-8); }
.py-12 { padding-block: var(--space-12); }
.px-3 { padding-inline: var(--space-3); }
.px-4 { padding-inline: var(--space-4); }
.px-6 { padding-inline: var(--space-6); }
.px-8 { padding-inline: var(--space-8); }

/* ----------------------------------------------------------------------
   DISPLAY UTILITIES
   ---------------------------------------------------------------------- */

.d-block { display: block; }
.d-inline { display: inline; }
.d-inline-block { display: inline-block; }
.d-flex { display: flex; }
.d-inline-flex { display: inline-flex; }
.d-grid { display: grid; }
.d-none { display: none; }
.d-contents { display: contents; }

@media (max-width: 36em) {
  .hide-on-xs { display: none !important; }
}
@media (max-width: 48em) {
  .hide-on-sm { display: none !important; }
}
@media (max-width: 62em) {
  .hide-on-md { display: none !important; }
}
@media (max-width: 80em) {
  .hide-on-lg { display: none !important; }
}
@media (min-width: 36em) {
  .show-on-xs { display: none !important; }
}
@media (min-width: 48em) {
  .show-on-sm { display: none !important; }
}
@media (min-width: 62em) {
  .show-on-md { display: none !important; }
}
@media (min-width: 80em) {
  .show-on-lg { display: none !important; }
}

/* ----------------------------------------------------------------------
   POSITION UTILITIES
   ---------------------------------------------------------------------- */

.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }
.sticky { position: sticky; }
.static { position: static; }

.inset-0 { inset: 0; }
.inset-x-0 { inset-inline: 0; }
.inset-y-0 { inset-block: 0; }
.top-0 { inset-block-start: 0; }
.bottom-0 { inset-block-end: 0; }
.left-0 { inset-inline-start: 0; }
.right-0 { inset-inline-end: 0; }

.sticky-top {
  position: sticky;
  inset-block-start: 0;
  z-index: var(--z-sticky);
}

.sticky-under-header {
  position: sticky;
  inset-block-start: var(--header-height);
  z-index: var(--z-sticky);
}

/* ----------------------------------------------------------------------
   FLEX UTILITIES (rarely needed thanks to cluster/stack, but useful)
   ---------------------------------------------------------------------- */

.flex { display: flex; }
.flex-wrap { flex-wrap: wrap; }
.flex-nowrap { flex-wrap: nowrap; }
.flex-1 { flex: 1 1 0; }
.flex-auto { flex: 1 1 auto; }
.flex-none { flex: none; }
.flex-row { flex-direction: row; }
.flex-row-reverse { flex-direction: row-reverse; }
.flex-col { flex-direction: column; }
.flex-col-reverse { flex-direction: column-reverse; }
.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.items-center { align-items: center; }
.items-stretch { align-items: stretch; }
.items-baseline { align-items: baseline; }
.justify-start { justify-content: flex-start; }
.justify-end { justify-content: flex-end; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-around { justify-content: space-around; }
.justify-evenly { justify-content: space-evenly; }
.self-start { align-self: flex-start; }
.self-end { align-self: flex-end; }
.self-center { align-self: center; }
.self-stretch { align-self: stretch; }

/* ----------------------------------------------------------------------
   GAP UTILITIES
   ---------------------------------------------------------------------- */

.gap-0 { gap: 0; }
.gap-1 { gap: var(--space-1); }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.gap-5 { gap: var(--space-5); }
.gap-6 { gap: var(--space-6); }
.gap-8 { gap: var(--space-8); }
.gap-10 { gap: var(--space-10); }
.gap-12 { gap: var(--space-12); }
.gap-16 { gap: var(--space-16); }

/* ----------------------------------------------------------------------
   SIZE UTILITIES
   ---------------------------------------------------------------------- */

.w-full { inline-size: 100%; }
.w-screen { inline-size: 100vw; }
.w-auto { inline-size: auto; }
.h-full { block-size: 100%; }
.h-screen { block-size: 100vh; block-size: 100dvh; }
.h-auto { block-size: auto; }
.min-h-screen { min-block-size: 100vh; min-block-size: 100dvh; }
.min-w-0 { min-inline-size: 0; }
.max-w-prose { max-inline-size: var(--measure-prose); }
.max-w-narrow { max-inline-size: var(--measure-narrow); }
.max-w-wide { max-inline-size: var(--measure-wide); }

/* ----------------------------------------------------------------------
   OVERFLOW
   ---------------------------------------------------------------------- */

.overflow-hidden { overflow: hidden; }
.overflow-x-auto { overflow-x: auto; overflow-y: visible; }
.overflow-y-auto { overflow-y: auto; overflow-x: visible; }
.overflow-scroll { overflow: scroll; }
.overflow-clip { overflow: clip; }
.overflow-visible { overflow: visible; }

.scrollbar-thin::-webkit-scrollbar { inline-size: 6px; block-size: 6px; }
.scrollbar-thin::-webkit-scrollbar-thumb {
  background: var(--surface-border-strong);
  border-radius: var(--radius-pill);
}
.scrollbar-thin::-webkit-scrollbar-track { background: transparent; }

/* ----------------------------------------------------------------------
   ROUNDED UTILITIES
   ---------------------------------------------------------------------- */

.rounded-none { border-radius: var(--radius-none); }
.rounded-xs { border-radius: var(--radius-xs); }
.rounded-sm { border-radius: var(--radius-sm); }
.rounded-md { border-radius: var(--radius-md); }
.rounded-lg { border-radius: var(--radius-lg); }
.rounded-xl { border-radius: var(--radius-xl); }
.rounded-2xl { border-radius: var(--radius-2xl); }
.rounded-3xl { border-radius: var(--radius-3xl); }
.rounded-4xl { border-radius: var(--radius-4xl); }
.rounded-pill { border-radius: var(--radius-pill); }
.rounded-full { border-radius: var(--radius-full); }

/* ----------------------------------------------------------------------
   SHADOWS
   ---------------------------------------------------------------------- */

.shadow-none { box-shadow: none; }
.shadow-xs { box-shadow: var(--shadow-xs); }
.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow-md { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }
.shadow-xl { box-shadow: var(--shadow-xl); }
.shadow-2xl { box-shadow: var(--shadow-2xl); }
.shadow-brand { box-shadow: var(--shadow-brand); }
.shadow-brand-strong { box-shadow: var(--shadow-brand-strong); }
.shadow-glow-gold { box-shadow: var(--shadow-glow-gold); }
.shadow-glow-blue { box-shadow: var(--shadow-glow-blue); }

/* ----------------------------------------------------------------------
   BORDERS
   ---------------------------------------------------------------------- */

.border { border: 1px solid var(--surface-border); }
.border-strong { border: 1px solid var(--surface-border-strong); }
.border-t { border-block-start: 1px solid var(--surface-border); }
.border-b { border-block-end: 1px solid var(--surface-border); }
.border-l { border-inline-start: 1px solid var(--surface-border); }
.border-r { border-inline-end: 1px solid var(--surface-border); }
.border-2 { border-width: 2px; }
.border-4 { border-width: 4px; }
.border-dashed { border-style: dashed; }
.border-dotted { border-style: dotted; }
.border-brand { border-color: var(--surface-border-brand); }
.border-none { border: 0; }

/* ----------------------------------------------------------------------
   BACKGROUND TINTS — for cards and callouts
   ---------------------------------------------------------------------- */

.bg-white      { background: var(--color-ink-0); }
.bg-alt        { background: var(--surface-bg-alt); }
.bg-muted      { background: var(--surface-bg-muted); }
.bg-brand      { background: var(--surface-bg-brand); color: var(--text-on-brand); }
.bg-brand-soft { background: var(--surface-bg-brand-soft); }
.bg-inverse    { background: var(--surface-bg-inverse); color: var(--text-on-brand); }
.bg-success    { background: var(--color-success-bg); }
.bg-warning    { background: var(--color-warning-bg); }
.bg-danger     { background: var(--color-danger-bg); }
.bg-gold-soft  { background: var(--color-gold-50); }
.bg-red-soft   { background: var(--color-red-50); }
.bg-sage-soft  { background: var(--color-sage-50); }
.bg-transparent { background: transparent; }

/* Faded patriotic background — soft flag-inspired wash */
.bg-flag-wash {
  background:
    radial-gradient(at 0% 0%, rgba(34, 83, 160, 0.05), transparent 50%),
    radial-gradient(at 100% 0%, rgba(207, 45, 45, 0.04), transparent 50%),
    radial-gradient(at 50% 100%, rgba(239, 177, 42, 0.06), transparent 60%),
    var(--surface-bg-alt);
}