/* home.css — alleen voor de homepage: hero, "Why Wellsun?" en de slider "The 5 Benefits".
   Maten gemeten op de oude site bij 1366 px: hero 620 px hoog, linkervlak 40%, tekstblok 396 px breed,
   gecentreerd in het linkervlak; slider 980 × 519 px met bijschriftbalk van 83 px. */

/* Hero ------------------------------------------------------------------ */
.hero { display: grid; grid-template-columns: 40% 60%; height: 620px; overflow: hidden; background: var(--kleur-geel); }
.hero__links, .hero__rechts { position: relative; overflow: hidden; }
.hero__beeld { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Oude site: gebouwfoto rechts is 900 px hoog en 66 px omhoog geschoven binnen de hero van 620 px */
.hero__rechts .hero__beeld { top: -66px; height: 900px; bottom: auto; }
.hero__tekst {
  position: relative; width: min(396px, 100% - 2 * var(--rand)); margin: 75px auto 0;
  color: var(--kleur-wit);
}
.hero__kop {
  font-size: 2.125rem; line-height: 1.2; letter-spacing: 0.05em; font-weight: var(--gewicht-normaal);
  margin-bottom: 90px; text-shadow: 0 1px 12px rgba(12, 60, 96, 0.35);
}
.hero__tekst p { font-size: 1.0625rem; line-height: 1.24; font-weight: var(--gewicht-licht); text-shadow: 0 1px 8px rgba(12, 60, 96, 0.45); margin: 0; }

@media (max-width: 767px) {
  .hero { display: block; height: auto; }
  .hero__links { min-height: 540px; padding-bottom: var(--ruimte-4); }
  .hero__tekst { margin-top: var(--ruimte-4); width: auto; padding: 0 var(--rand); }
  .hero__kop { font-size: 2rem; margin-bottom: var(--ruimte-4); }
  .hero__tekst p { font-size: 1.1875rem; line-height: 1.2; }   /* oude mobiele site toont de tekst ~17% groter */
  .hero__rechts { height: 270px; }
  .hero__rechts .hero__beeld { top: 0; height: 100%; }
}

/* Why Wellsun ----------------------------------------------------------- */
.waarom { padding-top: 57px; padding-bottom: 0; }
.waarom .kop-2 { margin-bottom: 38px; }
.waarom .lijst-geel { margin-left: 1.3rem; }

/* Slider "The 5 Benefits" (basis in slider.css) --------------------------- */
.voordelen { padding-top: var(--ruimte-3); }
.voordelen .kop-2 { margin-bottom: 0; }
.slider__dia { flex: 0 0 100%; scroll-snap-align: start; }
.slider__dia figure { margin: 0; }
.slider__dia img { width: 100%; aspect-ratio: 980 / 519; object-fit: cover; }
.slider__dia figcaption {
  display: flex; align-items: center; justify-content: center; min-height: 83px;
  padding: var(--ruimte-2) var(--ruimte-3); margin-top: -13px; position: relative;
  background: #313e4f; color: var(--kleur-wit); text-align: center;
  font-size: 1rem; font-weight: var(--gewicht-halfvet); line-height: 1.3;
}
.voordelen .slider__knop { top: calc((100% - 70px) / 2); }
@media (max-width: 767px) {
  .slider__dia figcaption { font-size: 0.875rem; font-weight: var(--gewicht-normaal); min-height: 70px; }
}