/* ============================================================================
   GARAGE GALS . LAYOUT + PRIMITIVES + UTILITIES
   ----------------------------------------------------------------------------
   Containers, sections (always symmetric vertical padding), grids, stacks,
   and the small graphic devices (safety stripe, pegboard, dividers, chips).
   Depends on tokens.css.
   ============================================================================ */

/* ---- Containers ---------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--wide   { max-width: var(--container-wide); }
.container--narrow { max-width: var(--container-narrow); }
.container--flush  { padding-inline: 0; }

/* ---- Sections . SYMMETRIC top/bottom padding is a hard brand rule --------- */
.section {
  position: relative;
  padding-block: var(--section-pad);
}
.section--sm { padding-block: var(--section-pad-sm); }
.section--lg { padding-block: var(--section-pad-lg); }
.section--flush-top    { padding-top: 0; }
.section--flush-bottom { padding-bottom: 0; }

/* Tone helpers: paint a band light, cream-sunk, or ink-dark */
.tone-cream { background: var(--cream-150); }
.tone-cream-2 { background: var(--cream-200); }
.tone-paper { background: var(--grad-paper); }
.tone-ink {
  background: var(--ink-900);
  background-image: var(--grad-ink-depth);
}
.tone-red {
  background: var(--grad-red-flare);
  color: var(--cream-50);
}

/* ---- Section heading lockup ---------------------------------------------- */
.section-head {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  max-width: 56ch;
  margin-bottom: clamp(2rem, 1rem + 3vw, 4rem);
}
.section-head--center {
  align-items: center;
  text-align: center;
  margin-inline: auto;
}
.section-head__title { font-size: var(--fs-h2); }
.section-head__sub { color: var(--fg-soft); font-size: var(--fs-lead); max-width: 50ch; }
.section-head--center .section-head__sub { margin-inline: auto; }

/* ---- Grid system --------------------------------------------------------- */
.grid { display: grid; gap: var(--space-lg); }
.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--12 { grid-template-columns: repeat(12, 1fr); }
.grid--auto {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
}
.grid--auto-sm {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
}
.grid--gap-sm { gap: var(--space-sm); }
.grid--gap-lg { gap: var(--space-xl); }

/* split layout: copy + visual */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(2rem, 1rem + 5vw, 6rem);
}
.split--reverse > :first-child { order: 2; }
.split--40-60 { grid-template-columns: 4fr 6fr; }
.split--60-40 { grid-template-columns: 6fr 4fr; }

/* ---- Flow / stack / cluster (composition primitives) --------------------- */
.stack { display: flex; flex-direction: column; }
.stack > * + * { margin-top: var(--stack-gap, var(--space-sm)); }
.stack--xs { --stack-gap: var(--space-2xs); }
.stack--sm { --stack-gap: var(--space-sm); }
.stack--md { --stack-gap: var(--space-md); }
.stack--lg { --stack-gap: var(--space-lg); }

.cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--cluster-gap, var(--space-sm));
}
.cluster--center { justify-content: center; }
.cluster--between { justify-content: space-between; }

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

/* ---- Aspect ratio boxes -------------------------------------------------- */
.ratio { position: relative; overflow: hidden; }
.ratio > * { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ratio-1\/1   { aspect-ratio: 1 / 1; }
.ratio-4\/3   { aspect-ratio: 4 / 3; }
.ratio-3\/2   { aspect-ratio: 3 / 2; }
.ratio-16\/9  { aspect-ratio: 16 / 9; }
.ratio-21\/9  { aspect-ratio: 21 / 9; }

/* ---- Surfaces ------------------------------------------------------------ */
.surface {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-2);
}
.surface--flat { box-shadow: none; }
.surface--raised { box-shadow: var(--shadow-card); }

/* ---- Graphic devices: the garage kit ------------------------------------- */

/* Safety stripe . the edgy red/cream diagonal band */
.safety-stripe {
  height: 0.85rem;
  width: 100%;
  background: var(--grad-safety);
  background-size: 50.91px 50.91px; /* 36 * sqrt(2) for crisp 135deg repeat */
}
.safety-stripe--thin { height: 0.4rem; }
[data-theme="dark"] .safety-stripe {
  background: repeating-linear-gradient(135deg, var(--red-500) 0 18px, var(--ink-900) 18px 36px);
}

/* Pegboard texture overlay . garage-wall nod */
.pegboard-bg {
  position: relative;
}
.pegboard-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--grad-pegboard);
  background-size: 26px 26px;
  opacity: 0.5;
  pointer-events: none;
  z-index: 0;
}
.pegboard-bg > * { position: relative; z-index: 1; }

/* Hairline divider */
.divider {
  height: 1px;
  width: 100%;
  background: var(--rule);
  border: none;
}
.divider--strong { background: var(--rule-strong); }
.divider--gradient {
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent) 30%, var(--accent) 70%, transparent);
  opacity: 0.7;
}

/* ---- Chips / tags / badges ----------------------------------------------- */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.4rem 0.85rem;
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--fg-soft);
  background: var(--surface-2);
  border: 1px solid var(--rule);
  border-radius: var(--r-pill);
}
.chip--accent {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 35%, transparent);
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
}
.chip--dot::before {
  content: "";
  width: 0.5rem; height: 0.5rem;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: var(--glow-red-sm);
}

.badge-stars {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  color: var(--ember-400);
  letter-spacing: 0.08em;
  font-size: 1.05em;
}

/* ---- Number marker (01 / 02 / 03) ---------------------------------------- */
.num-marker {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: clamp(2.4rem, 1.6rem + 3vw, 4.2rem);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.4px var(--accent);
  text-stroke: 1.4px var(--accent);
  opacity: 0.85;
  font-variant-numeric: tabular-nums;
}

/* ---- Spacing utilities (rarely needed, but handy) ------------------------ */
.mt-0 { margin-top: 0; }
.mt-sm { margin-top: var(--space-sm); }
.mt-md { margin-top: var(--space-md); }
.mt-lg { margin-top: var(--space-lg); }
.mt-xl { margin-top: var(--space-xl); }
.mb-0 { margin-bottom: 0; }
.mb-sm { margin-bottom: var(--space-sm); }
.mb-md { margin-bottom: var(--space-md); }
.mb-lg { margin-bottom: var(--space-lg); }
.mb-xl { margin-bottom: var(--space-xl); }

/* ---- Visibility helpers -------------------------------------------------- */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-balance { text-wrap: balance; }
.text-pretty { text-wrap: pretty; }
.relative { position: relative; }
.full-bleed { width: 100vw; margin-left: 50%; transform: translateX(-50%); }
.overflow-clip { overflow: clip; }
.no-select { user-select: none; }