/* Verhuisheldenblok versie 1 (editorial wit) op de pro-basis style.css. Bron: dossier varianten-verhuisheld/assets/css/verhuisheld.css, alleen de versie-1-regels. LEAD-310. */
.vh{padding-block:clamp(3.4rem,7vw,5.5rem)}
.vh .eyebrow{margin-bottom:.8rem}
.vh h2.vh__kop{font-size:clamp(1.8rem,3.4vw,2.6rem);max-width:16ch}
.vh__lead{margin-top:1.1rem;font-size:1.05rem;line-height:1.65;max-width:52ch}
.vh__lead a{font-weight:700;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}
.vh__sub{margin-top:1.8rem;font-size:1.25rem}
.vh__list{list-style:none;margin:.8rem 0 0;padding:0}
.vh__list li{display:flex;gap:1rem;align-items:baseline;padding:.85rem 0;border-bottom:1px solid var(--line)}
.vh__list li:first-child{border-top:1px solid var(--line)}
.vh__list li>div{min-width:0}
.vh__num{font-family:"Bricolage Grotesque",serif;font-weight:700;color:var(--orange);font-size:1rem;min-width:1.7rem;flex:none}
.vh__list b{display:block;font-weight:800}
.vh__list p{margin-top:.25rem;font-size:.97rem;line-height:1.55}
.vh__list p a{font-weight:700;text-decoration:underline;text-underline-offset:3px}
.vh__cta{margin-top:1.8rem;display:flex;flex-wrap:wrap;gap:.7rem}
.vh__title{font-size:clamp(2.2rem,4.6vw,3.4rem);line-height:.95;text-align:center}
.vh__title span{display:block;font-family:"Hanken Grotesk",system-ui,sans-serif;font-weight:600;font-size:clamp(1.05rem,1.8vw,1.35rem);letter-spacing:.01em;margin-bottom:.2rem}
.vh__figure{margin:0}
.vh__figure img{width:100%;height:auto;max-width:440px;margin-inline:auto;filter:drop-shadow(0 22px 30px rgba(14,44,74,.28))}

/* Versie 1: wit editorial, blauwe schuine kaart achter de foto */
.vh1{background:var(--white);border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden}
.vh1__grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(2rem,4vw,4rem);align-items:center}
.vh1 .vh__lead,.vh1 .vh__list p{color:var(--muted)}
.vh1 .vh__lead a,.vh1 .vh__list p a{color:#1D75BD;text-decoration-color:rgba(29,117,189,.35)}
.vh1 .vh__title span{color:var(--muted)}
.vh1 .vh__figure{margin:1.3rem auto 0;max-width:30rem}
.vh1__heroes{text-align:center}
.vh1__heroes .btn{margin-top:1.6rem}

@media (max-width:880px){
  .vh1__grid{grid-template-columns:1fr}
  .vh1__heroes{max-width:30rem;margin-inline:auto}
}
@media (max-width:420px){.vh .btn--lg{padding:.95rem 1.3rem;font-size:.98rem}}

/* LEAD-357 (regel Shahab 20:29, tekstkolom en beeld één geheel): op desktop twee even brede kolommen, rechterkolom even hoog als de tekstkolom; titel boven, verhuisheld vult de ruimte met de voeten op de knoppenlijn, knop onderaan gelijk met de knoppen links. Op smal scherm gestapeld ongewijzigd. CLAUDE-PARTICULIER, tijdelijk schrijfrecht van LEAD. */
@media (min-width:881px){
  .vh1__grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:stretch}
  .vh1__heroes{display:flex;flex-direction:column;align-items:center;min-height:0}
  .vh1 .vh__figure{flex:1 1 auto;min-height:0;display:flex;align-items:flex-end;justify-content:center;width:100%;max-width:30rem;margin:1.3rem auto 0}
  .vh1 .vh__figure img{height:100%;width:auto;max-width:100%;object-fit:contain;object-position:center bottom}
  .vh1__heroes .btn{margin-top:1.6rem}
}

/* De drie koplinks in de genummerde lijst stonden in de tekstkleur en zonder onderstreping, dus
   voor de bezoeker waren het geen links, terwijl de links in de inleiding eronder wel blauw en
   onderstreept zijn. Twee soorten linkgedrag in hetzelfde blok. Zelfde blauw als de inleiding, en
   een onderstreping op ruimere afstand omdat de kop vet is en de staarten anders geraakt worden.
   De koptypografie zelf is niet aangeraakt. LEAD-436 */
.vh1 .vh__list b a{color:#1D75BD;text-decoration-line:underline;text-decoration-thickness:2px;
  text-underline-offset:5px;text-decoration-color:rgba(29,117,189,.35)}
.vh1 .vh__list b a:hover{text-decoration-color:#1D75BD}