/* ============================================================
   components/layout.css  —  ds-container, ds-section, ds-cols, ds-card-grid
   All sizing driven by --ds-* tokens. No hardcoded colours.
   ============================================================ */

/* ── Container ────────────────────────────────────────────── */
.ds-container {
  width: 100%;
  max-width: var(--ds-container-max-width, 1280px);
  margin-inline: auto;
  padding-inline: var(--ds-container-px, 1.5rem);
}

.ds-container--narrow  { max-width: 800px; }
.ds-container--wide    { max-width: 1440px; }
.ds-container--full    { max-width: 100%; }

/* ── Section ──────────────────────────────────────────────── */
.ds-section {
  padding-block: var(--ds-section-py, 5rem);
}
.ds-section--flush {
  padding-block: 0;
}
.ds-section--sm {
  padding-block: calc(var(--ds-section-py, 5rem) * 0.6);
}
.ds-section--lg {
  padding-block: calc(var(--ds-section-py, 5rem) * 1.4);
}

/* Section heading block: kicker + heading + optional subtext */
.ds-section__heading {
  margin-bottom: var(--ds-space-10, 2.5rem);
  text-align: var(--ds-section-heading-align, center);
}
.ds-section__heading--left  { text-align: left; }
.ds-section__heading--right { text-align: right; }

/* ── Two-column layout ────────────────────────────────────── */
.ds-cols-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--ds-cols-gap, 2rem);
  align-items: start;
}
.ds-cols-2--center { align-items: center; }

/* ── Three-column layout ──────────────────────────────────── */
.ds-cols-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--ds-cols-gap, 2rem);
  align-items: start;
}

/* ── Card grid ────────────────────────────────────────────── */
.ds-card-grid {
  display: grid;
  grid-template-columns: repeat(var(--ds-card-grid-cols, 3), 1fr);
  gap: var(--ds-card-grid-gap, 1.5rem);
}
.ds-card-grid--2 { grid-template-columns: repeat(2, 1fr); }
.ds-card-grid--4 { grid-template-columns: repeat(4, 1fr); }
.ds-card-grid--auto {
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

/* ── Responsive breakpoints ───────────────────────────────── */
@media (max-width: 1024px) {
  .ds-cols-3    { grid-template-columns: repeat(2, 1fr); }
  .ds-card-grid { grid-template-columns: repeat(2, 1fr); }
  .ds-card-grid--4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .ds-cols-2    { grid-template-columns: 1fr; }
  .ds-cols-3    { grid-template-columns: 1fr; }
  .ds-card-grid { grid-template-columns: 1fr; }
  .ds-card-grid--2 { grid-template-columns: 1fr; }
  .ds-container { padding-inline: var(--ds-space-4, 1rem); }
}