/* ============================================
   Losse pagina's (bedankpagina)
   ============================================ */
.thanks__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  max-width: 1140px;
  margin: 0 auto;
  padding: 100px 0;
}

.thanks__title { color: var(--color-text); font-size: 50px; }

@media (max-width: 1024px) { .thanks__inner { padding: 50px 40px; } }
@media (max-width: 767px) { .thanks__inner { padding: 30px 15px; } .thanks__title { font-size: 35px; } }

/* ============================================
   Paginakop (subpagina's)
   Variabelen per pagina, gezet met .page-hero--<naam> in de pagina-CSS:
   --ph-img, --ph-pos (desktop), --ph-pos-t (tablet), --ph-pos-m (mobiel),
   --ph-min, --ph-min-m, --ph-overlay, --ph-align (center | flex-start), --ph-intro-w
   ============================================ */
.page-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: var(--ph-min, 372px);
  background-color: var(--color-primary);
  background-image: var(--ph-img);
  background-position: var(--ph-pos, 0 50%);
  background-repeat: no-repeat;
  background-size: cover;
}

.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--color-primary);
  opacity: var(--ph-overlay, .76);
}

.page-hero .wave svg { --wave-h: 67px; }

.page-hero__inner {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: var(--ph-align, center);
  justify-content: center;
  gap: 20px;
  width: 100%;
  max-width: 1322px;
  margin: 0 auto;
  padding: 50px 0;
}

.page-hero__title { flex-shrink: 0; width: 100%; color: var(--color-white); font-size: 50px; }

.page-hero__intro {
  flex-shrink: 0;
  align-self: flex-start;
  width: var(--ph-intro-w, 63%);
  max-width: var(--ph-intro-w, 63%);
  color: var(--color-white);
}

/* ============================================
   Inhoudssectie (kop, tekst, knop) op subpagina's
   ============================================ */
.page-section__inner {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: min(100%, 1140px);
  margin: 0 auto;
  padding: 30px 0;
}

.page-section__title { color: var(--color-text); font-size: 40px; }

@media (max-width: 1024px) {
  .page-hero { background-position: var(--ph-pos-t, 0 0%); }
}

@media (max-width: 767px) {
  .page-hero {
    min-height: var(--ph-min-m, var(--ph-min, 372px));
    padding: 0 15px;
    background-position: var(--ph-pos-m, 0 55%);
  }

  .page-hero .wave svg { width: calc(231% + 1.3px); --wave-h: 23px; }

  .page-hero__inner { gap: 10px; max-width: min(100%, 767px); padding: var(--ph-pad-m, 20px 0 30px); }
  .page-hero__title { font-size: 35px; }
  .page-hero__intro { width: 100%; max-width: 100%; }

  .page-section { padding: 0 15px; }
  .page-section__inner { max-width: min(100%, 767px); padding: 20px 0; }
  .page-section__title { font-size: 25px; }
}