/* ============================================
   Paginakop (components/page-hero.njk)
   Basis: gecentreerde witte kop. Varianten:
   --photo  achtergrondfoto met zwarte laag (boeidelen, gevelbekleding; Elementor 49ad2b30)
   --plain  effen donker vlak, smalle inhoud (offerte; Elementor f9dec4d)
   De foto en zijn positie komen uit de pagina-CSS via --hero-img en --hero-pos.
   ============================================ */
.page-hero__title,
.page-hero__text { max-width: 100%; }
.page-hero__title {
  color: var(--color-white);
  text-align: center;
}

/* --- Variant: achtergrondfoto -------------------------------------------- */
.page-hero--photo {
  --hero-img: none;
  --hero-pos: 0 0;
  --minh: 385px;
  --justify: center;
  --align: stretch;
  --gap: 70px;
  --pt: 5%; --pr: 2%; --pb: 5%; --pl: 2%;
  --bg: #F3F5F8;
  background-image: var(--hero-img);
  background-position: var(--hero-pos);
  background-repeat: no-repeat;
  background-size: cover;
}
.page-hero--photo::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--color-text);
  opacity: 0.54;
}
.page-hero--photo > .box__in { position: relative; }
.page-hero--photo .page-hero__text {
  color: var(--color-white);
  font-size: 18px;
  font-weight: 500;
  text-align: center;
}
.page-hero--photo .page-hero__text p { margin-inline: 4%; }

@media (min-width: 768px) {
  .page-hero--photo { --content: 1140px; }
}
@media (max-width: 1024px) {
  .page-hero--photo { --hero-pos: 0 0; --gap: 50px; --pt: 5%; --pr: 8%; --pb: 5%; --pl: 8%; }
}
@media (max-width: 880px) {
  .page-hero--photo { --pt: 0px; --pr: 0px; --pb: 0px; --pl: 0px; }
}
@media (max-width: 767px) {
  .page-hero--photo { --gap: 30px; --pt: 10%; --pr: 5%; --pb: 10%; --pl: 5%; }
  .page-hero--photo .page-hero__text p { margin-inline: 0; }
}

/* --- Variant: effen donker vlak ------------------------------------------ */
.page-hero--plain {
  --pt: 50px; --pr: 0px; --pb: 50px; --pl: 0px;
  --bg: var(--color-primary);
}
/* marge in % rekent met de breedte van de kop (= de inhoudsbreedte) */
.page-hero--plain .page-hero__title {
  margin-block: 2%;
  font-size: 38px;
}
@media (min-width: 768px) {
  .page-hero--plain { --content: 710px; }
}
@media (max-width: 767px) {
  .page-hero--plain { --pt: 50px; --pr: 15px; --pb: 50px; --pl: 15px; }
  .page-hero--plain .page-hero__title { font-size: 34px; }
}