/* ==========================================================================
   Superior Locksmith — Layout primitives
   ========================================================================== */

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

.container--wide { max-width: var(--container-wide); }
.container--text { max-width: var(--container-text); }

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

.section--surface { background: var(--surface); }
.section--surface-2 { background: var(--surface-2); }
.section--warm { background: var(--surface-warm); }

.section--ink {
  background: var(--ink-900);
  color: var(--text-invert-soft);
}
.section--ink h1, .section--ink h2, .section--ink h3,
.section--ink h4, .section--ink h5, .section--ink h6 { color: var(--text-invert); }

.section--charcoal {
  background: var(--charcoal);
  color: var(--text-invert-soft);
}
.section--charcoal h2, .section--charcoal h3, .section--charcoal h4 { color: var(--text-invert); }

/* Hairline divider between same-coloured sections */
.section--ruled { border-top: 1px solid var(--line); }

/* ---- Section headers ---- */
.section-head { max-width: 62ch; margin-bottom: var(--sp-7); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--wide { max-width: 78ch; }

.section-head > * + * { margin-top: var(--sp-4); }

.section-head p {
  font-size: var(--fs-lead);
  color: var(--text-muted);
  line-height: 1.6;
}

.section--ink .section-head p,
.section--charcoal .section-head p { color: var(--text-invert-soft); }

/* ---- Eyebrow ---- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-heading);
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--brand-ink);
}

.eyebrow::before {
  content: "";
  width: 1.75rem;
  height: 2px;
  background: var(--brand);
  flex: none;
}

.section-head--center .eyebrow::after {
  content: "";
  width: 1.75rem;
  height: 2px;
  background: var(--brand);
  flex: none;
}

.section--ink .eyebrow,
.section--charcoal .eyebrow,
.on-dark .eyebrow { color: var(--brand); }

/* ---- Grids ---- */
.grid { display: grid; gap: var(--sp-5); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid--gap-lg { gap: var(--sp-6); }

/* Editorial split: text + media, alternating */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 1rem + 4vw, 4.5rem);
  align-items: center;
}

.split--text-lead { grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); }
.split--media-lead { grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); }
.split--top { align-items: start; }
.split--reverse > :first-child { order: 2; }

/* Asymmetric content + rail */
.with-rail {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: clamp(2rem, 1rem + 3.5vw, 4rem);
  align-items: start;
}

.rail { position: sticky; top: calc(var(--header-h) + 1.5rem); }

/* Flow utility */
.flow > * + * { margin-top: var(--sp-5); }
.flow-sm > * + * { margin-top: var(--sp-3); }
.flow-lg > * + * { margin-top: var(--sp-6); }

/* ---- Responsive ---- */
@media (max-width: 1080px) {
  .with-rail { grid-template-columns: minmax(0, 1fr); }
  .rail { position: static; }
  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .split,
  .split--text-lead,
  .split--media-lead { grid-template-columns: minmax(0, 1fr); }
  .split--reverse > :first-child { order: 0; }
  .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: minmax(0, 1fr); }
  :root { --header-h: var(--header-h-sm); }
}