/* Graviteit — Beeldvergelijker.
   De vormgeving (kleuren, verhouding, handvat, labels) komt uit Elementor via variabelen;
   dit blad doet enkel de indeling: twee beelden over elkaar, één bijgesneden tot aan de
   scheiding, met een handvat erop. Zonder JS staat de scheiding op de startstand. */

.gic-wrap{
  display:flex;
  width:100%;
}

.gic{
  --gic-pos: 50;                 /* stand van de scheiding, 0-100, gezet door JS/inline */
  --gic-fit: cover;
  --gic-lijn: #ffffff;
  --gic-lijn-dikte: 3px;
  --gic-knop: 44px;
  --gic-knop-bg: var(--e-global-color-a2cf421, #084147);
  --gic-knop-kleur: var(--e-global-color-76c389d, #f9d3e6);
  --gic-knop-radius: 0px;
  --gic-schaduw: 0 2px 10px rgba(0,0,0,.28);
  --gic-label-bg: var(--e-global-color-76c389d, #f9d3e6);
  --gic-label-kleur: var(--e-global-color-a2cf421, #084147);
  --gic-label-rand: 16px;

  position:relative;
  width:100%;
  aspect-ratio: 4 / 3;           /* overschreven door PHP (voor-beeld) of de eigen verhouding */
  overflow:hidden;
  touch-action:none;             /* zelf slepen, de browser mag niet meescrollen */
  user-select:none;
  -webkit-user-select:none;
  isolation:isolate;
  background:#0000;
}

/* De twee beelden vullen elk het hele vlak; verschuiven en schalen gebeurt per beeld. */
.gic__pane{ position:absolute; inset:0; overflow:hidden; }
.gic__pane img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit: var(--gic-fit, cover);
  transform: translate(var(--gic-x, 0), var(--gic-y, 0)) scale(var(--gic-s, 1));
  transform-origin:center center;
  -webkit-user-drag:none;
  user-drag:none;
  pointer-events:none;
}

/* Beide beelden worden bijgesneden tot precies hun eigen kant van de scheiding: het voor-
   beeld tot aan de lijn, het na-beeld ervoorbij. Zo overlappen ze nooit. Dat is nodig voor
   beelden met doorzichtige delen: lag het voor-beeld onbewerkt onder het na-beeld, dan zou
   het door de doorzichtige plekken heen schemeren, ook als het na-beeld helemaal open staat.
   Nu toont elke doorzichtige plek gewoon wat er achter de widget zit. */
.gic--h .gic__pane--voor{ clip-path: inset(0 calc((100 - var(--gic-pos)) * 1%) 0 0); }
.gic--h .gic__pane--na  { clip-path: inset(0 0 0 calc(var(--gic-pos) * 1%)); }
.gic--v .gic__pane--voor{ clip-path: inset(0 0 calc((100 - var(--gic-pos)) * 1%) 0); }
.gic--v .gic__pane--na  { clip-path: inset(calc(var(--gic-pos) * 1%) 0 0 0); }

/* Labels: rechthoekige merkblokjes, een vol vlak in de achtergrondkleur met de tekst in de
   tekstkleur, net als de leestijd-labels elders op de site. Elk label zit in zijn eigen
   beeldvlak (.gic__pane), zodat de scheiding het samen met dat beeld bijsnijdt: schuif je er
   met de scheiding overheen, dan verdwijnt het mee. Elk label kan in een eigen hoek staan. */
.gic__label{
  position:absolute;
  z-index:2;
  pointer-events:none;
  display:inline-block;
  background:var(--gic-label-bg);
  color:var(--gic-label-kleur);
  line-height:1;
  white-space:nowrap;
}
.gic__label--lb{ top:var(--gic-label-rand);    left:var(--gic-label-rand); }
.gic__label--rb{ top:var(--gic-label-rand);    right:var(--gic-label-rand); }
.gic__label--lo{ bottom:var(--gic-label-rand); left:var(--gic-label-rand); }
.gic__label--ro{ bottom:var(--gic-label-rand); right:var(--gic-label-rand); }

/* Het handvat: een lijn over de volle hoogte/breedte met een knop in het midden.
   De achtergrond en rand worden hard uitgezet in elke toestand: het thema geeft knoppen
   anders bij focus of hover een eigen vlak, en dat zou als een balk over het beeld vallen. */
.gic__handvat,
.gic__handvat:hover,
.gic__handvat:focus,
.gic__handvat:focus-visible,
.gic__handvat:active{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  -webkit-appearance:none;
  appearance:none;
  text-decoration:none;
  /* Het thema legt "transition: all .3s" op elke knop; dat laat het handvat achter de
     scheiding aan slepen. Tijdens het slepen moet het handvat de cursor op de voet volgen,
     dus hier hard uit. De zachte overgang komt alleen terug bij .gic--anim (toets/klik/intro). */
  transition:none !important;
}
.gic__handvat{
  position:absolute;
  margin:0; padding:0;
  color:var(--gic-knop-kleur);
  cursor:inherit;
  z-index:3;
  display:flex; align-items:center; justify-content:center;
}
.gic--h .gic__handvat{
  top:0; bottom:0;
  left: calc(var(--gic-pos) * 1%);
  width: max(var(--gic-knop), 2px);
  transform: translateX(-50%);
  cursor: ew-resize;
}
.gic--v .gic__handvat{
  left:0; right:0;
  top: calc(var(--gic-pos) * 1%);
  height: max(var(--gic-knop), 2px);
  transform: translateY(-50%);
  cursor: ns-resize;
}

.gic__lijn{
  position:absolute;
  background:var(--gic-lijn);
  box-shadow:var(--gic-schaduw);
}
.gic--h .gic__lijn{ top:0; bottom:0; left:50%; width:var(--gic-lijn-dikte); transform:translateX(-50%); }
.gic--v .gic__lijn{ left:0; right:0; top:50%; height:var(--gic-lijn-dikte); transform:translateY(-50%); }

.gic__grip{
  position:relative;
  width:var(--gic-knop); height:var(--gic-knop);
  display:flex; align-items:center; justify-content:center;
  background:var(--gic-knop-bg);
  border-radius:var(--gic-knop-radius);
  box-shadow:var(--gic-schaduw);
  overflow:hidden;   /* op knop-grootte 0 blijft alleen de lijn over */
  /* Eigen kleur op de grip, zodat de pijltjes (currentColor) niet meeveranderen als het
     thema de knop bij hover een andere kleur geeft. */
  color:var(--gic-knop-kleur);
}
.gic__grip svg{ width:56%; height:56%; }   /* schaalt mee met de knopgrootte */
.gic--v .gic__grip{ transform:rotate(90deg); }

/* Toetsenbord: duidelijke focus op de knop. */
.gic__handvat:focus-visible{ outline:none; }
.gic__handvat:focus-visible .gic__grip{
  outline:2px solid var(--gic-knop-bg);
  outline-offset:3px;
}

/* Zachte overgang wanneer JS de stand zet (klik/toets/intro), niet tijdens het slepen.
   Meer specifiek dan de transition:none-regel hierboven, zodat die het hier weer aanzet. */
.gic--anim .gic__pane--voor,
.gic--anim .gic__pane--na{ transition: clip-path .35s ease; }
.gic--anim .gic__handvat{ transition: left .35s ease, top .35s ease !important; }

/* Meebewegen met de muis: geen aanwijzer nodig. */
.gic[data-gic-move="hover"]{ cursor:default; }
.gic[data-gic-move="hover"] .gic__handvat{ cursor:default; }

.gic__leeg{
  display:block; padding:24px; text-align:center;
  border:1px dashed currentColor; opacity:.7; border-radius:8px;
}

@media (prefers-reduced-motion: reduce){
  .gic--anim .gic__pane--na,
  .gic--anim .gic__handvat{ transition:none; }
}
/* In een container die op gsm mag doorlopen naar een volgende kolom (flex-wrap) rekent de
   browser de breedte van de widget eerst als 0, waardoor de verhouding een hoogte van 0
   oplevert en het beeld over de tekst eronder valt. Een vaste volle breedte voorkomt dat. */
.elementor-widget-gft_imgcompare{ width:100%; }