/* ============================================================
   YS-SPLIT — herbruikbare split-sectie (tekst + media)
   Yinga · layout-engine v1
   ------------------------------------------------------------
   Eén stylesheet, geen afhankelijkheid van Elementor-versie.
   Laad dit via child theme, Code Snippets of Elementor Custom Code.
   In Elementor ken je alleen de classes hieronder toe + vul je
   kleuren/typografie via Variables op de losse elementen.

   GEDRAG (geverifieerd):
   • Tekst-linkerrand lijnt op het 1200-grid van de site.
   • >1600px : foto komt los van de rand (min. --ys-edge-xl) + afronding terug.
   • t/m 1600: foto bleedt tot --ys-edge van de schermrand, rechte hoek.
   • >1400px : foto = gelijke hoogte als de tekst (cover) — mits .ys-fill.
   • 1025–1400: gelijke hoogte los, foto pakt --ys-ar verhouding.
   • ≤1024   : gestapeld (tekst boven, of .ys-stack-media-first voor foto boven).

   VEREISTE: de .ys-split container moet FULL-WIDTH staan (100% / geen
   max-width), anders klopt de bleed-berekening niet.
   ============================================================ */

/* voorkomt horizontale scroll door de full-bleed sectie (o.a. Windows-scrollbar).
   'clip' i.p.v. 'hidden' zodat sticky headers blijven werken. */
html, body{ overflow-x: clip; }

.ys-split{
  /* ---- instelbaar per sectie (overschrijf met lokale CSS of modifier-class) ---- */
  --ys-maxw:   1200px;   /* grid-breedte van de site (tekst lijnt hierop uit) */
  --ys-gutter: 24px;     /* minimale zijmarge onder 1200 */
  --ys-gap:    80px;     /* ruimte tussen tekst en media */
  --ys-edge:   40px;     /* afstand media → schermrand t/m 1600 (bleed) */
  --ys-edge-xl:80px;     /* minimale afstand media → schermrand boven 1600 */
  --ys-radius: 16px;     /* afronding media */
  --ys-textw:  500px;    /* breedte tekstkolom */
  --ys-ar:     4 / 3;    /* verhouding media wanneer gelijke hoogte los is */

  display: flex;
  align-items: stretch;
  gap: var(--ys-gap);
  box-sizing: border-box;
  /* breekt uit een eventuele boxed Elementor-container naar volle vensterbreedte,
     zodat de bleed-berekening altijd klopt (ook als de sectie niet full-width staat) */
  width: 100vw;
  max-width: 100vw;
  margin-left:  calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  /* tekst start op het grid; media stopt --ys-edge van de rechterrand */
  padding-left:  max(var(--ys-gutter), calc((100vw - var(--ys-maxw)) / 2));
  padding-right: var(--ys-edge);
}

/* media links i.p.v. rechts */
.ys-split.ys-img-left{
  flex-direction: row-reverse;
  padding-right: max(var(--ys-gutter), calc((100vw - var(--ys-maxw)) / 2));
  padding-left:  var(--ys-edge);
}

/* ---- kolommen ---- */
.ys-split__text{
  flex: 0 0 var(--ys-textw);
  max-width: var(--ys-textw);
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.ys-split__media{
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
}

/* ============================================================
   GELIJKE HOOGTE (cover)
   Zet .ys-fill op het media-vak → foto/video vult de teksthoogte.
   Laat .ys-fill weg → media houdt eigen hoogte, verticaal gecentreerd.
   De media is absoluut gepositioneerd, zodat de TEKST de hoogte
   bepaalt en de foto daarnaartoe cropt (niet andersom).
   ============================================================ */
.ys-split__media.ys-fill img,
.ys-split__media.ys-fill video,
.ys-split__media.ys-fill iframe,
.ys-split__media.ys-fill .ys-cover{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  object-position: var(--ys-objpos, 50% 50%);
  border-radius: var(--ys-radius);
}

/* zonder .ys-fill: eigen hoogte, gecentreerd naast de tekst */
.ys-split__media:not(.ys-fill){ align-self: center; }
.ys-split__media:not(.ys-fill) img,
.ys-split__media:not(.ys-fill) video,
.ys-split__media:not(.ys-fill) .ys-cover{
  width: 100%; height: auto;
  display: block; border-radius: var(--ys-radius);
}

/* afronding eraf aan de bleed-kant (t/m 1600) */
.ys-split.ys-img-right .ys-split__media.ys-fill img,
.ys-split.ys-img-right .ys-split__media.ys-fill video,
.ys-split.ys-img-right .ys-split__media.ys-fill iframe,
.ys-split.ys-img-right .ys-split__media.ys-fill .ys-cover{
  border-top-right-radius: 0; border-bottom-right-radius: 0;
}
.ys-split.ys-img-left .ys-split__media.ys-fill img,
.ys-split.ys-img-left .ys-split__media.ys-fill video,
.ys-split.ys-img-left .ys-split__media.ys-fill iframe,
.ys-split.ys-img-left .ys-split__media.ys-fill .ys-cover{
  border-top-left-radius: 0; border-bottom-left-radius: 0;
}

/* ============================================================
   BOVEN 1600px — media los van de rand + afronding terug
   ============================================================ */
@media (min-width: 1601px){
  .ys-split.ys-img-right{ padding-right: max(var(--ys-edge-xl), calc((100vw - var(--ys-maxw)) / 2)); }
  .ys-split.ys-img-left { padding-left:  max(var(--ys-edge-xl), calc((100vw - var(--ys-maxw)) / 2)); }

  .ys-split.ys-img-right .ys-split__media.ys-fill img,
  .ys-split.ys-img-right .ys-split__media.ys-fill video,
  .ys-split.ys-img-right .ys-split__media.ys-fill iframe,
  .ys-split.ys-img-right .ys-split__media.ys-fill .ys-cover{
    border-top-right-radius: var(--ys-radius); border-bottom-right-radius: var(--ys-radius);
  }
  .ys-split.ys-img-left .ys-split__media.ys-fill img,
  .ys-split.ys-img-left .ys-split__media.ys-fill video,
  .ys-split.ys-img-left .ys-split__media.ys-fill iframe,
  .ys-split.ys-img-left .ys-split__media.ys-fill .ys-cover{
    border-top-left-radius: var(--ys-radius); border-bottom-left-radius: var(--ys-radius);
  }
}

/* ============================================================
   1025–1400px — gelijke hoogte loslaten, media blijft naast tekst
   ============================================================ */
@media (min-width: 1025px) and (max-width: 1400px){
  .ys-split{ align-items: center; }
  .ys-split__media.ys-fill img,
  .ys-split__media.ys-fill video,
  .ys-split__media.ys-fill iframe,
  .ys-split__media.ys-fill .ys-cover{
    position: static; height: auto; aspect-ratio: var(--ys-ar);
  }
}

/* ============================================================
   ≤1024px — stapelen
   ============================================================ */
@media (max-width: 1024px){
  .ys-split,
  .ys-split.ys-img-left{
    flex-direction: column;
    gap: 32px;
    padding-left:  var(--ys-gutter);
    padding-right: var(--ys-gutter);
  }
  /* media boven tekst op mobiel/tablet */
  .ys-split.ys-stack-media-first,
  .ys-split.ys-img-left.ys-stack-media-first{ flex-direction: column-reverse; }

  .ys-split__text{ flex: 1 1 auto; max-width: 100%; }
  .ys-split__media.ys-fill img,
  .ys-split__media.ys-fill video,
  .ys-split__media.ys-fill iframe,
  .ys-split__media.ys-fill .ys-cover{
    position: static; height: auto; aspect-ratio: var(--ys-ar);
  }
}

/* ============================================================
   OPTIONELE WAARDE-MODIFIERS (klik-en-klaar, geen CSS typen)
   Zet er één bij op de .ys-split container.
   ============================================================ */
.ys-split.ys-radius-0   { --ys-radius: 0; }
.ys-split.ys-radius-12  { --ys-radius: 12px; }
.ys-split.ys-radius-24  { --ys-radius: 24px; }
.ys-split.ys-radius-32  { --ys-radius: 32px; }

.ys-split.ys-edge-0     { --ys-edge: 0px; }
.ys-split.ys-edge-24    { --ys-edge: 24px; }
.ys-split.ys-edge-60    { --ys-edge: 60px; }

.ys-split.ys-gap-40     { --ys-gap: 40px; }
.ys-split.ys-gap-60     { --ys-gap: 60px; }
.ys-split.ys-gap-120    { --ys-gap: 120px; }

.ys-split.ys-textw-420  { --ys-textw: 420px; }
.ys-split.ys-textw-560  { --ys-textw: 560px; }

/* ============================================================
   WIDGET-EXTRA'S (gebruikt door de Yinga Split widget)
   ============================================================ */

/* knoppenrij */
.ys-split__buttons{
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}
.ys-split__btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  line-height: 1.2;
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}

/* video embed (YouTube/Vimeo) — 16:9 box, vult in gelijke-hoogte modus */
.ys-split__embed{
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--ys-radius);
  overflow: hidden;
}
.ys-split__embed iframe{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0; display: block;
}
.ys-split__media.ys-fill .ys-split__embed{
  position: absolute; inset: 0;
  aspect-ratio: auto; height: 100%;
}
/* embed valt terug op eigen ratio waar gelijke hoogte los is */
@media (min-width:1025px) and (max-width:1400px){
  .ys-split__media.ys-fill .ys-split__embed{ position: relative; aspect-ratio: var(--ys-ar); height: auto; }
}
@media (max-width:1024px){
  .ys-split__media.ys-fill .ys-split__embed{ position: relative; aspect-ratio: var(--ys-ar); height: auto; }
}

/* ============================================================
   VRIJE INHOUD (embed / HTML / shortcode)
   Eigen hoogte, gecentreerd naast de tekst. Een iframe (bijv.
   Google Maps) vult automatisch de breedte en krijgt afronding.
   ============================================================ */
.ys-split__content{ width: 100%; align-self: center; }
.ys-split__content > *:first-child{ margin-top: 0; }
.ys-split__content > *:last-child{ margin-bottom: 0; }
.ys-split__content iframe{
  width: 100%; border: 0; display: block;
  border-radius: var(--ys-radius);
}
.ys-split__content img{
  max-width: 100%; height: auto; display: block;
  border-radius: var(--ys-radius);
}

/* ============================================================
   INSCHUIF-ANIMATIE (media komt in beeld bij scrollen)
   Progressive enhancement: de begintoestand geldt alleen als het
   script draait (html.ys-anim-ready). Zonder JS blijft media zichtbaar.
   ============================================================ */
.ys-anim-ready .ys-anim{
  transform: translate(var(--ys-anim-x, 0), var(--ys-anim-y, 0)) scale(var(--ys-anim-s, 1));
  transition:
    opacity   var(--ys-anim-dur, 800ms) ease,
    transform var(--ys-anim-dur, 800ms) cubic-bezier(.22,.61,.36,1);
  transition-delay: var(--ys-anim-delay, 0ms);
  will-change: opacity, transform;
}
/* alleen vervagen/inzoomen starten onzichtbaar; inschuiven blijft volledig zichtbaar */
.ys-anim-ready .ys-anim-fade,
.ys-anim-ready .ys-anim-zoom{ opacity: 0; }
.ys-anim-ready .ys-anim.ys-in{ opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce){
  .ys-anim-ready .ys-anim{ opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ============================================================
   PARALLAX (de hele foto komt van de zijkant en schuift mee)
   De transform staat op de héle mediakolom (kader + afronding),
   niet op de foto binnen het kader. Geen inzoom. De foto mag vrij
   van de zijkant komen; body overflow-x:clip vangt wat buiten beeld valt.
   --ys-px-x / --ys-px-y worden live door JS gezet.
   ============================================================ */
.ys-split__media.ys-parallax{
  transform: translate3d(var(--ys-px-x, 0px), var(--ys-px-y, 0px), 0);
  will-change: transform;
}
@media (prefers-reduced-motion: reduce){
  .ys-split__media.ys-parallax{ transform: none !important; }
}

/* ---- gulden-snede ritme (fluid, schaalt vloeiend mee) ---- */
.ys-split{
  --ys-rhythm: clamp(1rem, 0.72rem + 1.1vw, 1.5rem); /* ~16px → 24px */
  --ys-sp-xs: calc(var(--ys-rhythm) * 0.382);  /* φ⁻² */
  --ys-sp-sm: calc(var(--ys-rhythm) * 0.618);  /* φ⁻¹ */
  --ys-sp-md: var(--ys-rhythm);                /* φ⁰  */
  --ys-sp-lg: calc(var(--ys-rhythm) * 1.618);  /* φ¹  */
  --ys-sp-xl: calc(var(--ys-rhythm) * 2.618);  /* φ²  */
}

/* ---- nette defaults (overschrijfbaar via de widget-controls/Variables) ---- */
.ys-split__eyebrow{
  margin: 0 0 var(--ys-sp-sm);
  font-size: .8rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  color: #00A24F;
}
.ys-split__title{
  margin: 0 0 var(--ys-sp-md);
  font-size: clamp(1.6rem, 3vw, 2.4rem); line-height: 1.1;
  overflow-wrap: break-word; color: #0B2230;
}
.ys-split__body{ color: #33454f; }
.ys-split__body > p{ margin: 0 0 var(--ys-sp-sm); }
.ys-split__body > p:last-child{ margin-bottom: 0; }

/* tussenkopjes binnen de tekst: ruim erboven, dicht eronder */
.ys-split__body :is(h2,h3,h4,h5,h6){
  margin: var(--ys-sp-lg) 0 var(--ys-sp-xs);
  line-height: 1.2; font-weight: 700; color: #0B2230;
}
.ys-split__body :is(h2,h3,h4,h5,h6):first-child{ margin-top: 0; }
.ys-split__body h2{ font-size: 1.5rem; }
.ys-split__body h3{ font-size: 1.25rem; }
.ys-split__body h4{ font-size: 1.1rem; }

/* lijst met vinkjes (Yinga-groen) */
.ys-split__body ul{
  list-style: none; margin: var(--ys-sp-sm) 0; padding: 0;
}
.ys-split__body ul li{
  position: relative; padding-left: 1.9em; margin-bottom: var(--ys-sp-xs);
}
.ys-split__body ul li::before{
  content: ""; position: absolute; left: 0; top: 0.15em;
  width: 1.2em; height: 1.2em;
  background: var(--ys-checkc, #00A24F);
  -webkit-mask: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  mask: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}
/* genummerde lijst */
.ys-split__body ol{ margin: var(--ys-sp-sm) 0; padding-left: 1.3em; }
.ys-split__body ol li{ margin-bottom: var(--ys-sp-xs); }
/* links in de tekst */
.ys-split__body a{ color: #007BC4; text-underline-offset: 2px; }

/* afstand boven de knoppen volgt hetzelfde ritme */
.ys-split__buttons{ margin-top: var(--ys-sp-lg); }

.ys-split__btn--1{ background: #007BC4; color: #fff; }
.ys-split__btn--1:hover{ background: #0069a8; }
.ys-split__btn--2{ background: transparent; color: #007BC4; border: 2px solid #007BC4; }
.ys-split__btn--2:hover{ background: #007BC4; color: #fff; }

/* ---- knoppengroep / tags ---- */
.ys-split__tags-label{
  margin: var(--ys-sp-md) 0 var(--ys-sp-sm);
  font-weight: 700; color: #0B2230;
}
.ys-split__tags{
  --ys-tagc: #C0603A; --ys-tagw: 2px;
  display: flex; flex-wrap: wrap; gap: 12px;
  margin-top: var(--ys-sp-sm);
}
.ys-split__tag{
  display: inline-flex; align-items: center; gap: .5em;
  padding: 11px 20px; border-radius: 10px; line-height: 1.2;
  border: var(--ys-tagw, 2px) solid var(--ys-tagc); color: var(--ys-tagc);
  background: transparent; text-decoration: none; cursor: pointer;
  transition: background-color .18s ease, color .18s ease;
}
a.ys-split__tag:hover{ background: var(--ys-tagc); color: #fff; }
.ys-split__tag--active{ background: var(--ys-tagc); color: #fff; }
.ys-split__tag--active::before{
  content: ""; width: 1em; height: 1em; flex: none;
  background: currentColor;
  -webkit-mask: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  mask: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}