/* =========================================================
   VELO VITAL — Verhaal detail page
   Long-form story / article layout
   ========================================================= */

/* ---------- verhaal hero ---------- */
.verhaal-hero{
  position:relative;min-height:50vh;display:flex;align-items:flex-end;
  padding:10rem clamp(1.1rem,4vw,2.2rem) 3.5rem;overflow:hidden;isolation:isolate;
  background:var(--purple);
}
.verhaal-hero::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(ellipse at 20% 70%,rgba(255,47,178,.5),transparent 55%),
    radial-gradient(ellipse at 80% 20%,rgba(255,140,35,.45),transparent 50%);
  pointer-events:none;
}
.verhaal-hero__content{position:relative;max-width:var(--maxw);width:100%;margin:0 auto}
.verhaal-hero__back{
  display:inline-flex;align-items:center;gap:.5rem;color:rgba(255,255,255,.8);
  font-size:.85rem;font-weight:600;margin-bottom:1.6rem;transition:color .3s;
}
.verhaal-hero__back:hover{color:#fff}
.verhaal-hero__back svg{transition:transform .3s var(--ease)}
.verhaal-hero__back:hover svg{transform:translateX(-4px)}
.verhaal-hero__title{
  font-family:var(--font-d);font-size:clamp(2.8rem,7vw,5rem);font-weight:500;
  color:#fff;line-height:1.15;margin-bottom:1rem;
}
.verhaal-hero__subtitle{font-size:1.1rem;color:rgba(255,255,255,.88);max-width:54ch;margin-bottom:2rem;line-height:1.7}
.verhaal-hero__meta{display:flex;gap:1.5rem;flex-wrap:wrap}
.verhaal-hero__tag{
  display:inline-flex;align-items:center;gap:.5rem;
  background:rgba(255,255,255,.16);backdrop-filter:blur(8px);
  border:1.5px solid rgba(255,255,255,.4);padding:.5rem 1.1rem;border-radius:100px;
  color:#fff;font-weight:700;font-size:.85rem;
}
.verhaal-hero__tag svg{color:var(--orange);flex-shrink:0}

/* ---------- verhaal article ---------- */
.verhaal-article{
  max-width:740px;margin:0 auto;
  padding:4rem clamp(1.1rem,4vw,2.2rem) 2rem;
}

.verhaal__lead{
  font-size:1.3rem;line-height:1.7;color:var(--ink);font-weight:500;
  margin-bottom:2.5rem;
}

.verhaal__text{
  font-size:1.05rem;line-height:1.8;color:rgba(26,11,24,.75);margin-bottom:1.8rem;
}
.verhaal__text strong{color:var(--ink);font-weight:600}

.verhaal__heading{
  font-family:var(--font-d);font-size:clamp(1.6rem,4vw,2.2rem);font-weight:500;
  color:var(--ink);margin:3rem 0 1.2rem;line-height:1.2;
}

/* pull quote */
.verhaal__quote{
  position:relative;margin:3rem 0;padding:2rem 0 2rem 2rem;
  border-left:4px solid var(--orange);
}
.verhaal__quote p{
  font-family:var(--font-d);font-size:clamp(1.3rem,3.5vw,1.8rem);font-weight:400;
  color:var(--purple);line-height:1.5;margin:0;
}
.verhaal__quote cite{
  display:block;margin-top:.8rem;font-family:var(--font-b);
  font-size:.88rem;font-style:normal;font-weight:600;color:rgba(26,11,24,.55);
}

/* barriers / list of quotes */
.verhaal__barriers{
  list-style:none;display:flex;flex-direction:column;gap:.8rem;
  margin:2rem 0;padding:1.8rem 2rem;
  background:rgba(128,0,255,.04);border-radius:var(--r);
  border:1.5px solid rgba(128,0,255,.08);
}
.verhaal__barriers li{
  font-size:1.05rem;color:rgba(26,11,24,.7);line-height:1.6;
  padding-left:1.6rem;position:relative;
}
.verhaal__barriers li::before{
  content:"\201C";position:absolute;left:0;top:-.1em;
  font-family:var(--font-d);font-size:1.5rem;color:var(--pink);font-weight:600;
}

/* image in article */
.verhaal__image{
  margin:3rem -2rem;position:relative;border-radius:var(--r-lg);overflow:hidden;
  box-shadow:var(--shadow);
}
.verhaal__image img{width:100%;height:auto;display:block}
.verhaal__image figcaption{
  padding:1rem 1.4rem;background:rgba(26,11,24,.03);
  font-size:.85rem;color:rgba(26,11,24,.55);font-weight:500;
}

/* highlight block */
.verhaal__highlight{
  margin:3rem 0;padding:2.2rem 2rem;border-radius:var(--r-lg);
  background:var(--purple);color:#fff;position:relative;overflow:hidden;
}
.verhaal__highlight::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(circle at 80% 30%,rgba(255,140,35,.3),transparent 50%),
              radial-gradient(circle at 20% 70%,rgba(255,47,178,.3),transparent 50%);
  pointer-events:none;
}
.verhaal__highlight>*{position:relative}
.verhaal__highlight h3{
  font-family:var(--font-d);font-size:1.5rem;font-weight:500;margin-bottom:.8rem;
}
.verhaal__highlight p{font-size:1.05rem;line-height:1.7;color:rgba(255,255,255,.9);margin-bottom:.5rem}
.verhaal__highlight p:last-child{margin-bottom:0}

/* closing / call to action text */
.verhaal__closing{
  text-align:center;margin:3rem 0 1rem;padding:2rem 0;
  border-top:2px solid rgba(128,0,255,.1);
}
.verhaal__closing p{
  font-family:var(--font-d);font-size:clamp(1.4rem,4vw,2rem);font-weight:500;
  color:var(--ink);line-height:1.4;margin-bottom:1.2rem;
}
.verhaal__closing .btn{margin-top:.5rem}

/* ---------- more stories teaser ---------- */
.meer-verhalen{
  background:rgba(128,0,255,.03);padding:4rem clamp(1.1rem,4vw,2.2rem);
}
.meer-verhalen__inner{max-width:var(--maxw);margin:0 auto;text-align:center}
.meer-verhalen h2{font-size:clamp(2rem,5vw,3rem);margin-bottom:.6rem}
.meer-verhalen>p{font-size:1rem;color:rgba(26,11,24,.6);margin-bottom:2rem}

/* ---------- verhaal cta ---------- */
.verhaal-cta{padding:4rem clamp(1.1rem,4vw,2.2rem);text-align:center;background:var(--grad)}
.verhaal-cta__inner{max-width:550px;margin:0 auto;color:#fff}
.verhaal-cta h2{font-size:clamp(2rem,5vw,3rem);margin-bottom:1rem}
.verhaal-cta p{font-size:1.05rem;color:rgba(255,255,255,.92);margin-bottom:1.8rem}
.verhaal-cta .btn{--bg:#fff;color:var(--purple)}
.verhaal-cta .btn:hover{background:#fff;color:var(--purple-d)}

/* ---------- responsive ---------- */
@media(max-width:760px){
  .verhaal-hero{padding-top:7rem}
  .verhaal__image{margin:2rem -1rem}
  .verhaal__quote{padding-left:1.4rem}
  .nav__links{display:none}
  .nav__cta{display:none}
  .nav__burger{display:flex}
}