/* =============================================================
   POC — zo/about-stack  (Aannemersbedrijf Noordhout)
   Sticky media links + verspringende blokken rechts, verbonden
   door geskewde "verbindingsvlakken" die diepte suggereren.

   Alles is token-gedreven (--zo-as-*) zodat de definitieve waarden
   later in de themetokenlaag kunnen landen.
   ============================================================= */

/* --- fonts (uit wp-content/themes/) ------------------------- */
@font-face{font-family:"Poppins";src:url("/wp-content/themes/zeeuwsonline-theme-git/fonts/Poppins/Poppins-SemiBold.ttf") format("truetype");font-weight:600;font-display:swap}
@font-face{font-family:"Poppins";src:url("/wp-content/themes/zeeuwsonline-theme-git/fonts/Poppins/Poppins-Bold.ttf") format("truetype");font-weight:700;font-display:swap}
@font-face{font-family:"Poppins";src:url("/wp-content/themes/zeeuwsonline-theme-git/fonts/Poppins/Poppins-ExtraBold.ttf") format("truetype");font-weight:800;font-display:swap}
@font-face{font-family:"Inter Tight";src:url("/wp-content/themes/zeeuwsonline-theme-git/fonts/Inter_Tight/static/InterTight-Regular.ttf") format("truetype");font-weight:400;font-display:swap}
@font-face{font-family:"Inter Tight";src:url("/wp-content/themes/zeeuwsonline-theme-git/fonts/Inter_Tight/static/InterTight-Medium.ttf") format("truetype");font-weight:500;font-display:swap}

:root{
  /* kleur */
  --zo-as-bg:            #ffffff;
  --zo-as-ink:           #14143c;   /* detail-heading */
  --zo-as-accent:        #3a2f9e;   /* blok-koppen */
  --zo-as-body:          #4f4f6a;   /* paragrafen */
  --zo-as-outline:       #e6e6ee;   /* stroke sectietitel */
  --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 */

  /* 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-shadow:        18px 22px 40px -18px rgba(20,20,60,.28);
  --zo-as-sticky-top:    12vh;
}

/* --- basis (alleen voor de losse POC-pagina) ---------------- */
*,*::before,*::after{box-sizing:border-box}
body{
  margin:0;background:var(--zo-as-bg);color:var(--zo-as-body);
  font-family:"Inter Tight",system-ui,sans-serif;line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img,video{display:block;max-width:100%;height:auto}

/* =============================================================
   Sectie
   ============================================================= */
.zo-about{
  --zo-as-container: 1360px;
  max-width:var(--zo-as-container);
  margin-inline:auto;
  padding:clamp(4rem,10vh,9rem) clamp(1rem,4vw,3rem);
  overflow-x:clip;               /* schaduw/verspringing mag niet scrollen */
}

/* --- kop: outline-titel + detail-heading + lead -------------- */
.zo-about__intro{
  position:relative;
  text-align:center;
  padding-top:clamp(2.5rem,7vw,6rem);
  margin-bottom:clamp(3rem,7vw,6rem);
}
.zo-about__outline{
  position:absolute;
  inset-block-start:0;
  inset-inline:0;
  font-family:"Poppins",sans-serif;
  font-weight:800;
  font-size:clamp(4rem,13vw,11.5rem);
  line-height:.85;
  letter-spacing:-.02em;
  color:transparent;
  -webkit-text-stroke:2px var(--zo-as-outline);
  text-stroke:2px var(--zo-as-outline);
  user-select:none;
  pointer-events:none;
  white-space:nowrap;
}
.zo-about__title{
  position:relative;
  margin:0 0 1.25rem;
  font-family:"Poppins",sans-serif;
  font-weight:800;
  font-size:clamp(2rem,5vw,3.75rem);
  line-height:1.05;
  letter-spacing:-.02em;
  color:var(--zo-as-ink);
}
.zo-about__lead{
  position:relative;
  max-width:56ch;
  margin:0 auto;
  font-size:clamp(.95rem,1.05vw,1.0625rem);
}

/* =============================================================
   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:9/16;
  overflow:hidden;
  background:var(--zo-as-plane-b);
}
.zo-about__mediaframe > img,
.zo-about__mediaframe > video{width:100%;height:100%;object-fit:cover}

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

.zo-about__step{
  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,0px));
  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.
     Pull = 2 * gap laat het blok precies een vlakhoogte achter het vorige
     beginnen. */
  margin-top:calc(-1 * var(--zo-pull,0px));
  padding-top:calc(
    var(--zo-as-card-pad) + max(0px, var(--zo-pull,0px) - var(--zo-as-gap))
  );
}
/* een blok dat naar links is geschoven komt "naar voren" → schaduw */
.zo-about__step.is-forward{box-shadow:var(--zo-as-shadow)}

.zo-about__step h3{
  margin:0 0 1.5rem;
  font-family:"Poppins",sans-serif;
  font-weight:700;
  font-size:clamp(1.35rem,2.2vw,2.05rem);
  line-height:1.15;
  letter-spacing:-.01em;
  color:var(--zo-as-accent);
}
.zo-about__step p{margin:0;font-size:clamp(.9rem,1vw,1rem)}
.zo-about__step p + p{margin-top:1.1rem}
.zo-about__actions{margin-top:2rem !important}

.zo-btn{
  display:inline-block;
  padding:.7rem 1.4rem;
  border:1px solid var(--zo-as-line);
  color:var(--zo-as-ink);
  font-size:.875rem;
  text-decoration:none;
  transition:background .25s,color .25s;
}
.zo-btn:hover{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 daarmee zijn
   bovenrand. Die lijn geven we hier terug: hij markeert waar het blok naar
   achter wegvalt en maakt de wig als vlak leesbaar. */
.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{
    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}
}