/* =============================================================
   LAYOUT.CSS
   Structural, reusable layout primitives: container, grid system,
   section spacing. Component-specific visuals live elsewhere.
============================================================= */

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

/* ---------- Generic section spacing ----------
   Every <section> gets consistent vertical rhythm by default.
   Override per-section only when the design explicitly requires it
   (e.g. hero, cta-banner already set their own padding). */
section {
  padding-block: var(--space-20);
}

/* ---------- Section heading pattern ----------
   Reused at the top of most sections: eyebrow + title (+ optional
   description). Two layout variants: left-aligned split, and
   centered. */
.section-heading {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--space-8);
  margin-bottom: var(--space-12);
}

.section-heading__text {
  max-width: 600px;
}

.section-heading__title {
  font-size: var(--fs-2xl);
  letter-spacing: -0.01em;
}

.section-heading__desc {
  max-width: 460px;
  color: var(--color-slate-400);
  font-size: var(--fs-md);
}

.section-heading--center {
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.section-heading--center .section-heading__desc {
  max-width: 620px;
}

/* ---------- Reusable card grid ----------
   .card-grid--N controls the desktop column count; responsive
   breakpoints collapse this in responsive.css. */
.card-grid {
  display: grid;
  gap: var(--space-8);
}

.card-grid--4 {
  grid-template-columns: repeat(4, 1fr);
}

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

/* ---------- Gallery grid (kept for future use, e.g. before/after
   photos) — not populated with images in the current build. ---------- */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}