/* ============================================================
   layout.css — Paginastructuur (dark editorial)
   ============================================================ */

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

@media (min-width: 768px) {
  .container { padding-inline: var(--margin-page); }
}

/* --- Secties: afwisseling donker / crème --- */
.section { padding-block: var(--space-12); }

.section--navy  { background: var(--navy); }
.section--deep  { background: var(--navy-deep); }

/* Crème sectie: licht vlak met donkere tekst (inversie) */
.section--cream { background: var(--cream); color: var(--ink); }
.section--cream h1,
.section--cream h2,
.section--cream h3 { color: var(--ink); }

/* Smalle strip (manifest / sfeer) */
.strip { padding-block: var(--space-6); }

/* --- Sectiekop --- */
.section-head { margin-bottom: var(--space-8); }
.section-head--center { text-align: center; }
.section-head .label { display: block; margin-bottom: var(--space-2); }

/* ============================================================
   HERO — asymmetrisch: tekst links, illustratie rechts
   ============================================================ */
.hero {
  position: relative;
  background: var(--navy);
  padding-block: var(--space-8) var(--space-8);
  overflow: hidden;
}

.hero__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  align-items: center;
}

@media (min-width: 900px) {
  .hero__grid {
    grid-template-columns: 1.2fr 0.8fr;
    gap: var(--space-4);
  }
}

.hero__content { max-width: 34rem; }

/* Illustratie rechts (op mobiel onder de tekst, kleiner) */
.hero__art {
  display: flex;
  justify-content: center;
  align-items: flex-end;
}
.hero__art svg { width: 100%; max-width: 220px; height: auto; }

/* ============================================================
   "WIE IK BEN" — tekst naast een staande foto (placeholder)
   ============================================================ */
.about__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  align-items: center;
}
@media (min-width: 900px) {
  .about__grid {
    grid-template-columns: 1.1fr 0.9fr;
    gap: var(--space-12);
  }
}
.about__text { max-width: 38rem; }

/* ============================================================
   FOTO-PLACEHOLDERS (persoonlijke foto + sfeerfoto's)
   ============================================================ */
.photo-gallery {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gutter);
  margin-top: var(--space-8);
}
@media (min-width: 700px) {
  .photo-gallery { grid-template-columns: repeat(3, 1fr); }
}

/* ============================================================
   HET VERLOOP — momenten onder elkaar (interactief)
   ============================================================ */
.moments {
  display: grid;
  gap: var(--space-2);
  max-width: 600px;
  margin-inline: auto;
}

/* ============================================================
   SFEERBAND — illustraties naast elkaar
   ============================================================ */
.sfeer {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: center;
  gap: var(--space-6);
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer { background: var(--navy-deep); border-top: 1px solid var(--gold-faint); }

.footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  padding-block: var(--space-8);
}
@media (min-width: 768px) {
  .footer__grid { grid-template-columns: 2fr 1fr 1fr; }
}

.footer__bottom {
  border-top: 1px solid var(--gold-faint);
  padding-block: var(--space-3);
}
.footer__bottom-inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  align-items: center;
  text-align: center;
}
@media (min-width: 768px) {
  .footer__bottom-inner {
    flex-direction: row;
    justify-content: space-between;
  }
}