/*
 * Onderzoek scroll reveal
 *
 * Geen fixatie/pin: de pagina scrolt gewoon. De afbeeldingen in container
 * .elementor-element-bddcfae faden EEN VOOR EEN in beeld op basis van hun eigen
 * scrollpositie (met een subtiel zetje van rechts) -- duidelijk anders dan de
 * dramatische slide van het zwarte tekstblok.
 *
 * De reveal wordt door de JS gescrubd (inline opacity/transform); de transition
 * houdt het soepel. De reveal latcht: terugscrollen laat de foto's staan.
 *
 * Belangrijk: dit werkt OOK als de oude Elementor entrance-animatie (fadeInRight)
 * nog op de widgets zou staan -- we schakelen die hard uit en nemen de
 * zichtbaarheid volledig zelf over.
 */

/* Verbergen tot de JS de reveal start. Editor-zichtbaarheid wordt door de JS
   geregeld (showInEditor), niet via deze CSS. */
.elementor-element-bddcfae .elementor-widget-image {
  animation: none !important;       /* schakelt Elementor's fadeInRight uit */
  visibility: visible !important;   /* overschrijft .elementor-invisible    */
  opacity: 0;
  transform: translateY(40px);      /* subtiel zetje van onderen (omhoog in) */
  transition: opacity 0.2s ease, transform 0.2s ease;
  will-change: opacity, transform;
}

/*
 * UNIFORME SCHAAL PER BREAKPOINT
 * Elke kaart krijgt zijn EIGEN natuurlijke breedte x EEN factor per breakpoint.
 * Daardoor is 1 viewBox-eenheid overal even groot -> de LETTERS zijn gelijk over
 * alle 5 kaarten (korte tekst = smalle kaart, lange tekst = brede kaart).
 * Per breakpoint kleiner: desktop > tablet > mobiel.
 *
 * max-width:none zodat de kolombreedte de kaarten NIET ongelijk kan inkrimpen
 * (dat veroorzaakte juist de afwijkende lettergroottes).
 * Natuurlijke breedtes (viewBox): O1 287, O2 402, O3 402, O4 302, O5 441.
 * Pas alleen de factor aan om alles uniform groter/kleiner te maken.
 */
.elementor-element-bddcfae .elementor-widget-image img {
  max-width: none;
  height: auto;
}

/* Desktop (>=1025px) -- factor 1.035 */
@media (min-width: 1025px) {
  .elementor-element-bddcfae .elementor-element-84f80cc img { width: 297px; }
  .elementor-element-bddcfae .elementor-element-8ef670a img { width: 416px; }
  .elementor-element-bddcfae .elementor-element-1db167a img { width: 416px; }
  .elementor-element-bddcfae .elementor-element-5af5434 img { width: 313px; }
  .elementor-element-bddcfae .elementor-element-62fc8da img { width: 456px; }
}

/* Tablet (768-1024px) -- factor 0.828 */
@media (min-width: 768px) and (max-width: 1024px) {
  .elementor-element-bddcfae .elementor-element-84f80cc img { width: 238px; }
  .elementor-element-bddcfae .elementor-element-8ef670a img { width: 333px; }
  .elementor-element-bddcfae .elementor-element-1db167a img { width: 333px; }
  .elementor-element-bddcfae .elementor-element-5af5434 img { width: 250px; }
  .elementor-element-bddcfae .elementor-element-62fc8da img { width: 365px; }
}

/* Mobiel (<=767px) -- factor 0.667 */
@media (max-width: 767px) {
  .elementor-element-bddcfae .elementor-element-84f80cc img { width: 191px; }
  .elementor-element-bddcfae .elementor-element-8ef670a img { width: 268px; }
  .elementor-element-bddcfae .elementor-element-1db167a img { width: 268px; }
  .elementor-element-bddcfae .elementor-element-5af5434 img { width: 201px; }
  .elementor-element-bddcfae .elementor-element-62fc8da img { width: 294px; }
}