/**
 * layout.css
 * Container, CSS Grid system, section wrappers, vertical rhythm.
 * Depends on: tokens.css
 */

/* --------------------------------------------------------------------------
 * Container
 * -------------------------------------------------------------------------- */

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

.container--narrow {
  max-width: 720px;
  margin-inline: auto;
  padding-inline: var(--container-pad);
  width: 100%;
}

.container--form {
  max-width: 620px;
  margin-inline: auto;
  padding-inline: var(--container-pad);
  width: 100%;
}

/* --------------------------------------------------------------------------
 * Grid system
 * 12-col at lg (≥1024px), 6-col at md (768–1023px), single col mobile.
 * -------------------------------------------------------------------------- */

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

/* Default: single column on mobile */
.grid--12 {
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .grid--12 {
    grid-template-columns: var(--grid-cols-6);
  }
}

@media (min-width: 1024px) {
  .grid--12 {
    grid-template-columns: var(--grid-cols-12);
  }
}

/* Column span utilities (12-col context) */
@media (min-width: 1024px) {
  .col-1   { grid-column: span 1;  }
  .col-2   { grid-column: span 2;  }
  .col-3   { grid-column: span 3;  }
  .col-4   { grid-column: span 4;  }
  .col-5   { grid-column: span 5;  }
  .col-6   { grid-column: span 6;  }
  .col-7   { grid-column: span 7;  }
  .col-8   { grid-column: span 8;  }
  .col-9   { grid-column: span 9;  }
  .col-10  { grid-column: span 10; }
  .col-11  { grid-column: span 11; }
  .col-12  { grid-column: span 12; }

  /* Column start positions */
  .col-start-1  { grid-column-start: 1;  }
  .col-start-2  { grid-column-start: 2;  }
  .col-start-3  { grid-column-start: 3;  }
  .col-start-4  { grid-column-start: 4;  }
  .col-start-5  { grid-column-start: 5;  }
  .col-start-6  { grid-column-start: 6;  }
  .col-start-7  { grid-column-start: 7;  }
  .col-start-8  { grid-column-start: 8;  }
  .col-start-9  { grid-column-start: 9;  }
  .col-start-10 { grid-column-start: 10; }
  .col-start-11 { grid-column-start: 11; }
  .col-start-12 { grid-column-start: 12; }

  /* Explicit column range utilities */
  .col-1-5   { grid-column: 1 / 6;  }
  .col-1-6   { grid-column: 1 / 7;  }
  .col-1-7   { grid-column: 1 / 8;  }
  .col-1-8   { grid-column: 1 / 9;  }
  .col-5-12  { grid-column: 5 / 13; }
  .col-6-12  { grid-column: 6 / 13; }
  .col-7-12  { grid-column: 7 / 13; }
  .col-8-12  { grid-column: 8 / 13; }
  .col-9-12  { grid-column: 9 / 13; }
}

@media (min-width: 768px) {
  .md-col-3 { grid-column: span 3; }
  .md-col-6 { grid-column: span 6; }
}

/* --------------------------------------------------------------------------
 * Section wrappers
 * -------------------------------------------------------------------------- */

.section {
  padding-block: var(--section-py);
}

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

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

.section--surface-alt {
  background-color: var(--color-surface-alt);
}

.section--spread {
  background-color: var(--color-spread-bg);
  color: var(--color-spread-text);
}

.section--spread h2,
.section--spread h3,
.section--spread h4 {
  color: var(--color-spread-text);
}

.section--spread p {
  color: var(--color-spread-muted);
}

.section--spread .eyebrow {
  color: var(--color-spread-muted);
}

/* --------------------------------------------------------------------------
 * Section heading area (eyebrow + heading + lede)
 * -------------------------------------------------------------------------- */

.section-intro {
  margin-bottom: var(--space-12);
}

.section-intro .eyebrow {
  margin-bottom: var(--space-4);
}

.section-intro h2 {
  margin-bottom: var(--space-6);
}

.section-intro .lede {
  font-size: var(--text-body-lg);
  line-height: var(--lh-body-lg);
  color: var(--color-ink-500);
  max-width: 60ch;
}

/* --------------------------------------------------------------------------
 * Two-column section layout (text + visual)
 * Used on media page sections and services.
 * -------------------------------------------------------------------------- */

.split-layout {
  display: grid;
  gap: var(--space-12);
  align-items: center;
}

@media (min-width: 1024px) {
  .split-layout {
    grid-template-columns: 5fr 7fr;
    gap: var(--grid-gap);
  }

  .split-layout--reverse {
    grid-template-columns: 7fr 5fr;
  }

  .split-layout--reverse .split-layout__text {
    order: 2;
  }

  .split-layout--reverse .split-layout__visual {
    order: 1;
  }
}

/* --------------------------------------------------------------------------
 * Vertical rhythm utilities
 * -------------------------------------------------------------------------- */

.mt-4  { margin-top: var(--space-4);  }
.mt-6  { margin-top: var(--space-6);  }
.mt-8  { margin-top: var(--space-8);  }
.mt-10 { margin-top: var(--space-10); }
.mt-12 { margin-top: var(--space-12); }

.mb-4  { margin-bottom: var(--space-4);  }
.mb-6  { margin-bottom: var(--space-6);  }
.mb-8  { margin-bottom: var(--space-8);  }
.mb-10 { margin-bottom: var(--space-10); }
.mb-12 { margin-bottom: var(--space-12); }

/* --------------------------------------------------------------------------
 * Flex utilities
 * -------------------------------------------------------------------------- */

.flex        { display: flex; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.flex-gap-2  { gap: var(--space-2); }
.flex-gap-4  { gap: var(--space-4); }
.flex-gap-6  { gap: var(--space-6); }
.flex-gap-8  { gap: var(--space-8); }

/* --------------------------------------------------------------------------
 * Full-bleed wrapper (for sections needing edge-to-edge backgrounds)
 * -------------------------------------------------------------------------- */

.full-bleed {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}