/* ==========================================================
   Ergotherapie con Amor
   layout.css

   Enthält:
   - Container
   - Sections
   - Section-Überschriften
   - Allgemeine Grid-Systeme

   Komponenten wie Header, Hero, Cards und Footer
   werden später separat ausgelagert.
   ========================================================== */


/* ==========================================================
   1. Container
   ========================================================== */

.container {
  width: min(
    var(--content-width),
    calc(100% - 32px)
  );

  margin: 0 auto;
}


/* ==========================================================
   2. Sections
   ========================================================== */

.section {
  padding: 80px 0;
}

.section-soft {
  background: var(--color-pink-light);
}

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


/* ==========================================================
   3. Section-Header
   ========================================================== */

.section-header {
  max-width: 760px;
  margin-bottom: 38px;
}

.section-kicker {
  margin-bottom: 8px;

  color: var(--color-teal);

  font-size: 0.9rem;
  font-weight: 700;

  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.section-lead {
  color: var(--color-text-light);
  font-size: 1.08rem;
}


/* ==========================================================
   4. Grid-System
   ========================================================== */

.grid-2 {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 36px;
  align-items: start;
}

.grid-3 {
  display: grid;

  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  gap: 24px;
}

/* ==========================================================
   5. Lebenslauf – unabhängige Kartenspalten
   ========================================================== */

.cv-layout {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 36px;
  align-items: start;
}

.cv-column {
  display: flex;
  flex-direction: column;
  gap: 30px;
}