/* ==========================================================================
   SEGAL — Layout System
   Container, section rhythm, and grid patterns reused across sections.
   Logical properties (inline/block) used so RTL can be added later
   without restructuring.
   ========================================================================== */

.container {
  max-inline-size: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-padding);
}

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

.section--tight {
  padding-block: var(--space-2xl);
}

.section--dark {
  background-color: var(--color-asphalt);
  color: var(--color-text-on-dark);
}

.section--navy {
  background-color: var(--color-navy);
  color: var(--color-text-on-dark);
}

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

.section__header {
  margin-block-end: var(--space-2xl);
  max-inline-size: 46rem;
}

.section__heading {
  font-size: var(--fs-display-lg);
  text-transform: uppercase;
  margin-block-start: var(--space-sm);
}

.section__intro {
  font-size: var(--fs-body-lg);
  color: var(--color-text-muted);
  margin-block-start: var(--space-md);
  max-inline-size: 52ch;
}

.section--dark .section__intro,
.section--navy .section__intro {
  color: var(--color-text-on-dark-muted);
}

/* ---- Generic responsive grids ---- */

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

.grid--2 {
  grid-template-columns: 1fr;
}

.grid--3 {
  grid-template-columns: 1fr;
}

.grid--auto {
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .grid--2 {
    grid-template-columns: repeat(2, 1fr);
  }

  .grid--auto {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .grid--3 {
    grid-template-columns: repeat(3, 1fr);
  }

  .grid--auto {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ---- Split layout (hero, project blocks) ---- */

.split {
  display: grid;
  grid-template-columns: 1fr;
  align-items: stretch;
}

@media (min-width: 900px) {
  .split {
    grid-template-columns: 1fr 1fr;
  }

  .split--reverse > :first-child {
    order: 2;
  }

  .split--reverse > :last-child {
    order: 1;
  }
}