/* layout.css — Container, sections, responsive grid foundation */

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

section {
  padding-block: var(--section-gap);
}

/* Asymmetric two-column grid (60/40 split) */
.grid-asymmetric {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 4vw, 4rem);
  align-items: center;
}

.grid-asymmetric--60-40 {
  grid-template-columns: 3fr 2fr;
}

.grid-asymmetric--40-60 {
  grid-template-columns: 2fr 3fr;
}

/* Two-column equal grid for case studies */
.grid-2col {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1.5rem, 3vw, 2rem);
}

/* Section label (small uppercase above section heading) */
.section-label {
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  font-weight: 500;
  color: var(--blue);
  letter-spacing: 0.05em;
  margin-bottom: 1rem;
}

/* ── Responsive ── */
@media (max-width: 768px) {
  .grid-asymmetric,
  .grid-asymmetric--60-40,
  .grid-asymmetric--40-60,
  .grid-2col {
    grid-template-columns: 1fr;
  }
}