/* layout.css — Container, Band Rhythm, Section Padding, Grid Skeletons */

/* === Container (DESIGN-04) === */
.container {
  max-width: var(--max-width);              /* 1080px */
  margin: 0 auto;
  padding: 0 var(--space-container-mobile); /* 24px sides */
}

/* === Band Rhythm — section background/color utilities (DESIGN-02) === */

/* Dark bands: nav, hero, CTA-banner, footer */
.section-dark,
.hero,
.cta-banner,
.footer {
  background: var(--color-bg-dark);
  color: var(--color-text-light);
}

/* Light bands: body content sections */
.section-light {
  background: var(--color-bg-light);
  color: var(--color-text-dark);
}

/* === Section Padding === */

/* Mobile default */
.hero,
.section-dark,
.section-light,
.cta-banner {
  padding: var(--space-section-v-mobile) 0;
}

/* Desktop override at 980px */
@media (min-width: 980px) {
  .hero,
  .section-dark,
  .section-light,
  .cta-banner {
    padding: var(--space-section-v-desktop) 0;
  }
}

/* === Grid Skeletons — mobile-first (D-16: band-level structure only) === */

/* 4-card grid (Bausteine, Angebote, Outcomes) */
.grid-4 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
@media (min-width: 620px) {
  .grid-4 { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 980px) {
  .grid-4 { grid-template-columns: repeat(4, 1fr); }
}

/* 2-column layout (Person-Block: photo + text) */
.grid-2-col {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
}
@media (min-width: 620px) {
  .grid-2-col { grid-template-columns: 220px 1fr; align-items: start; }
}

/* Process steps (Angebot-Seite) */
.grid-steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}

/* === CTA-Banner inner width constraint (design spec: max 820px centered) === */
.cta-banner .container {
  max-width: 820px;
}