/* =============================================================
   WPBakery-element zo_about_stack  (Aannemersbedrijf Noordhout)
   Sticky media links + verspringende blokken rechts, verbonden
   door geskewde "verbindingsvlakken" die diepte suggereren.

   Alles is token-gedreven (--zo-as-*). Kleuren, stap, gap en
   media-verhouding kunnen per element worden overschreven via
   inline custom properties (zie templates/zo-about-stack.php).
   ============================================================= */

.zo-about{
  /* kleur */
  --zo-as-ink:           #14143c;   /* sectietitel */
  /* achtergrond blok-koppen: --zo-as-title-bg, valt terug op Hub's --color-primary */
  --zo-as-body:          #4f4f6a;   /* paragrafen */
  --zo-as-outline:       var(--zo-outline-color, #c9c9d3);   /* stroke outline-titel (sitebrede stijl uit style.css) */
  --zo-as-card:          #ffffff;
  --zo-as-line:          #24243c;   /* hairline rond kaart/vlak */
  --zo-as-plane-a:       #ffffff;   /* verbindingsvlak boven */
  --zo-as-plane-b:       #efeff2;   /* verbindingsvlak onder */

  /* typografie: niets gezet. Tekst erft de body uit Hub (Theme Options >
     Typography), koppen volgen Hubs h2-h6; de blokkoppen krijgen de
     grootte via de class .h2-.h6 (optie "Kopgrootte" per blok). */

  /* geometrie */
  --zo-as-card-pad:      clamp(1.5rem, 3vw, 3.5rem);
  --zo-as-gap:           92px;      /* geometrische hoogte van het verbindingsvlak */
  --zo-as-step:          70px;      /* horizontale stap per blok (naar links) */
  --zo-as-ratio:         9/16;
  --zo-as-shadow:        18px 22px 40px -18px rgba(20,20,60,.28);
  --zo-as-sticky-top:    12vh;

  position:relative;
  color:var(--zo-as-body);
  overflow-x:clip;              /* schaduw/verspringing mag niet scrollen */
}
.zo-about *,
.zo-about *::before,
.zo-about *::after{box-sizing:border-box}

/* --- kop: outline-titel + titel + lead ----------------------- */
.zo-about__intro{
  position:relative;
  text-align:center;
  margin-bottom:clamp(3rem,7vw,6rem);
}
.zo-about__intro.has-outline{padding-top:clamp(2.5rem,7vw,6rem)}
.zo-about__outline{
  position:absolute;
  inset-block-start:0;
  inset-inline:0;
  font-family:var(--zo-outline-font, inherit);
  font-weight:var(--zo-outline-weight, 700);
  font-size:var(--zo-outline-size, clamp(4rem, 10vw, 15.5rem));
  line-height:var(--zo-outline-leading, .35);
  letter-spacing:var(--zo-outline-tracking, -.02em);
  color:transparent;
  -webkit-text-stroke:var(--zo-outline-width, 1.5px) var(--zo-as-outline);
  user-select:none;
  pointer-events:none;
  white-space:nowrap;
}
.zo-about .zo-about__title{
  position:relative;
  margin:0 0 1.25rem;
  color:var(--zo-as-ink);
}
.zo-about .zo-about__lead{
  position:relative;
  max-width:56ch;
  margin:0 auto;
}

/* =============================================================
   Body: sticky media + track
   ============================================================= */
.zo-about__body{
  display:grid;
  grid-template-columns:minmax(0,32fr) minmax(0,68fr);
  gap:clamp(1rem,2vw,2rem);
  align-items:start;
}

.zo-about__media{
  position:sticky;
  top:var(--zo-as-sticky-top);
  z-index:1;                     /* onder de kaarten: die mogen eroverheen */
}
.zo-about__mediaframe{
  margin:0;
  aspect-ratio:var(--zo-as-ratio);
  overflow:hidden;
  background:var(--zo-as-plane-b);
}
.zo-about__mediaframe > img,
.zo-about__mediaframe > video{
  display:block;
  width:100%;
  height:100%;
  max-width:none;
  object-fit:cover;
}

/* --- de verspringende blokken -------------------------------- */
.zo-about__track{
  position:relative;
  z-index:2;
  display:flex;
  flex-direction:column;
  gap:var(--zo-as-gap);
}

/* WPBakery frontend-editor wikkelt elk blok in een .vc_element.
   display:contents maakt de blokken weer directe flex-items. */
.zo-about__track > .vc_element{display:contents}

.zo-about__step{
  --zo-shift:0px;
  --zo-pull:0px;
  position:relative;
  /* JS zet een aflopende z-index: een later blok ligt ACHTER het vorige,
     zodat een blok met --zo-pull er echt onder vandaan komt. */
  z-index:2;
  background:var(--zo-as-card);
  border:1px solid var(--zo-as-line);
  padding:var(--zo-as-card-pad);
  /* verspringen: translateX houdt de breedte gelijk, dus het blok
     schuift als geheel naar links over de media heen */
  transform:translateX(var(--zo-shift));
  transition:transform .4s var(--zo-ease,cubic-bezier(.16,1,.3,1));
  /* --zo-pull: dit blok begint ACHTER het vorige. De negatieve marge trekt
     het omhoog; alles boven de onderrand van het vorige blok zit erachter.
     Verborgen hoogte = pull - gap, en die tellen we bij de padding-top op,
     zodat de zichtbare bovenruimte gelijk blijft aan --zo-as-card-pad. */
  margin-top:calc(-1 * var(--zo-pull));
  padding-top:calc(var(--zo-as-card-pad) + max(0px, var(--zo-pull) - var(--zo-as-gap)));
}
/* naar voren: naar links + schaduw */
.zo-about__step.is-forward{
  --zo-shift:calc(-1 * var(--zo-as-step));
  box-shadow:var(--zo-as-shadow);
}
/* pull = 2 x gap laat het blok precies een vlakhoogte achter het vorige beginnen */
.zo-about__step.is-tucked{--zo-pull:calc(2 * var(--zo-as-gap))}
/* het eerste blok heeft geen voorganger om achter te duiken */
.zo-about__track > .zo-about__step:first-child,
.zo-about__track > .vc_element:first-child > .zo-about__step{--zo-pull:0px}

/* Kop als volle balk bovenin het blok: negatieve marges ter grootte van de
   blok-padding laten hem tot de randen doorlopen. Bij een wegduikend blok
   nemen we ook de verborgen padding (pull - gap) terug, zodat de balk op de
   echte bovenkant start (achter het vorige blok, onder het wigvlak); dezelfde
   hoeveelheid gaat er als padding-top bij, zodat de tekst zichtbaar blijft. */
.zo-about .zo-about__steptitle{
  --zo-hidden:max(0px, var(--zo-pull) - var(--zo-as-gap));
  --zo-title-pad:clamp(1rem,1.6vw,1.5rem);
  margin:
    calc(-1 * (var(--zo-as-card-pad) + var(--zo-hidden)))
    calc(-1 * var(--zo-as-card-pad))
    15px;
  padding:calc(var(--zo-title-pad) + var(--zo-hidden)) var(--zo-as-card-pad) var(--zo-title-pad);
  background:var(--zo-as-title-bg,var(--color-primary,#3a2f9e));
  color:var(--zo-as-title-ink,#fff);
}
.zo-about__steptext > :first-child{margin-top:0}
.zo-about__steptext > :last-child{margin-bottom:0}
.zo-about .zo-about__steptext p{margin:0}
.zo-about .zo-about__steptext p + p,
.zo-about .zo-about__steptext * + ul,
.zo-about .zo-about__steptext * + ol{margin-top:1.1rem}
.zo-about .zo-about__actions{margin:2rem 0 0}

.zo-about .zo-btn{
  display:inline-block;
  padding:.7rem 1.4rem;
  border:1px solid var(--zo-as-line);
  color:var(--zo-as-ink);
  font-size:.8em;                /* t.o.v. de Hub-body */
  line-height:1.4;
  text-decoration:none;
  transition:background .25s,color .25s;
}
.zo-about .zo-btn:hover,
.zo-about .zo-btn:focus-visible{background:var(--zo-as-ink);color:#fff}

/* --- verbindingsvlakken (door JS ingevoegd) ------------------ */
.zo-about__plane{
  position:absolute;
  z-index:1;                     /* achter de kaarten */
  background:linear-gradient(175deg,var(--zo-as-plane-a) 0%,var(--zo-as-plane-b) 100%);
  border-inline:1px solid var(--zo-as-line);
  transform-origin:top left;     /* skew laat de onderrand meelopen met de volgende kaart */
  pointer-events:none;
}
/* Het vlak van een wegduikend blok ligt BOVENOP dat blok en bedekt diens
   bovenrand; die lijn geven we hier terug. */
.zo-about__plane--tucked{border-top:1px solid var(--zo-as-line)}

/* =============================================================
   Mobiel: geen sticky, geen verspringing, geen vlakken
   ============================================================= */
@media (max-width:900px){
  .zo-about__body{grid-template-columns:1fr}
  .zo-about__media{position:static}
  .zo-about__mediaframe{aspect-ratio:16/10}
  .zo-about__track{gap:1.5rem}
  .zo-about__step,
  .zo-about__step.is-forward,
  .zo-about__step.is-tucked{
    --zo-pull:0px;             /* ook de titelbalk rekent hiermee */
    transform:none;
    box-shadow:none;
    margin-top:0;
    padding-top:var(--zo-as-card-pad);
    z-index:auto !important;   /* de door JS gezette z-index overrulen */
  }
  .zo-about__plane{display:none}
}

@media (prefers-reduced-motion:reduce){
  .zo-about__step{transition:none}
}