/* Verhuistips: hub en artikelen. Bouwt op de tokens en componenten van style.css
   (--orange, --ink, --line, .wrap, .eyebrow, .btn, .hero) en voegt alleen toe wat een
   artikelpagina nodig heeft. Geen nieuwe kleuren, geen eigen knoppen.
   CLAUDE-TIPS, 15 september 2026. */
.tip-page{overflow:clip}
.tip-page .btn svg{width:18px;height:18px;flex:none}

/* ---------- hero: korte, brede band met kruimelpad ---------- */
.tip-hero{min-height:0}
.tip-hero .hero__poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 45%;z-index:-3}
/* Het verloop in style.css is gemaakt voor een hero van 860px: op 26 procent hoogte staat het al
   terug op .12 dekking. In deze korte band van 520 tot 640px valt het kruimelpad daardoor op een licht
   stuk van de foto, en wit op wit mat daar 1,00:1 op de slechtste pixel en 2,35 tot 2,77:1 gemiddeld.
   Deze band krijgt daarom een eigen verloop dat bovenin donker blijft. */
.tip-hero .hero__veil{
  background:
    linear-gradient(180deg,rgba(13,21,38,.88) 0%,rgba(13,21,38,.70) 34%,rgba(13,21,38,.66) 64%,rgba(13,21,38,.92) 100%),
    radial-gradient(120% 90% at 70% 18%,rgba(21,35,59,0) 30%,rgba(21,35,59,.55) 100%);
}
.tip-hero .hero__content{padding-block:9rem clamp(3.2rem,2.4rem + 4vh,4.6rem);max-width:54rem}  /* 9rem = 144px: de gedeelde header staat fixed en is 112px hoog, een korte hero zonder die ruimte laat het kruimelpad eronder verdwijnen */
.tip-hero .hero__title{font-size:clamp(2.1rem,4.4vw,3.4rem)}
/* de eyebrow in brandoranje haalde op de herofoto maar 2,57:1 op de glyphregels en in --gold 3,59:1,
   allebei onder de 4,5:1 die voor deze tekstgrootte geldt; wit met het oranje streepje ervoor haalt het wel */
.tip-hero .eyebrow{color:#fff;text-shadow:0 2px 12px rgba(13,21,38,.85),0 0 22px rgba(13,21,38,.7)}
.tip-hero .eyebrow::before{background:var(--orange)}  /* het oranje streepje blijft het merkaccent */
.tip-kruim{font-size:.85rem;margin-bottom:1.1rem;color:rgba(255,255,255,.82)}
.tip-kruim ol{list-style:none;display:flex;flex-wrap:wrap;gap:.5rem;padding:0;margin:0}
.tip-kruim li+li::before{content:"/";margin-right:.5rem;opacity:.6}
.tip-kruim a{color:#fff;text-decoration:underline;text-underline-offset:3px}
.tip-meta{display:flex;flex-wrap:wrap;gap:.5rem .9rem;margin-top:1.2rem;padding:0;list-style:none;
  font-family:"Poppins",sans-serif;font-size:.8rem;font-weight:600;color:rgba(255,255,255,.9)}
.tip-meta li{display:inline-flex;align-items:center;gap:.4rem;background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.22);border-radius:999px;padding:.3rem .8rem}

/* ---------- indeling: artikel plus zijkolom ---------- */
.tip-body{background:var(--paper-2);padding-block:clamp(2.4rem,5vw,4rem)}
.tip-layout{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:clamp(1.4rem,2.6vw,2.2rem);align-items:start}
.tip-artikel{background:#fff;border-radius:22px;box-shadow:var(--shadow);padding:clamp(1.5rem,3.2vw,3rem);min-width:0}
.tip-artikel>*{margin:0}
.tip-artikel>*+*{margin-top:1.25rem}
/* let op: geen margin op .tip-artikel p zetten, die selector is specifieker dan .tip-artikel>*+*
   en zette de tussenruimte tussen alinea's stilletjes terug op nul */
.tip-artikel p{font-size:1.03rem}
.tip-artikel a{color:var(--orange-deep);text-decoration:underline;text-underline-offset:3px}
.tip-artikel a:hover{color:var(--ink)}

/* koppen met het oranje streepje van de huisstijl */
.tip-artikel h2{font-size:clamp(1.45rem,2.4vw,1.95rem);margin-top:2.4rem;padding-top:1.6rem;border-top:1px solid var(--line);position:relative}
.tip-artikel h2::before{content:"";position:absolute;top:-1px;left:0;width:56px;height:3px;background:var(--orange);border-radius:2px}
.tip-artikel h2:first-of-type{margin-top:1.6rem}
.tip-artikel h3{font-size:1.12rem;margin-top:1.8rem;color:var(--ink)}
.tip-intro{font-size:1.12rem;color:var(--muted);border-left:3px solid var(--orange);padding-left:1rem}

/* inhoudsopgave */
.tip-inhoud{background:var(--paper-2);border:1px solid var(--line);border-radius:var(--radius);padding:1.1rem 1.3rem}
.tip-inhoud h2{all:unset;display:block;font-family:"Poppins",sans-serif;font-weight:700;font-size:.78rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:.6rem}
.tip-inhoud ol{margin:0;padding-left:1.1rem;display:grid;gap:.25rem}
.tip-inhoud a{color:var(--ink);text-decoration:none;font-weight:600}
.tip-inhoud a:hover{color:var(--orange-deep);text-decoration:underline}

/* lijsten met het oranje vinkje */
.tip-lijst{list-style:none;margin:0;padding:0;display:grid;gap:.6rem}
.tip-lijst li{position:relative;padding-left:1.9rem}
.tip-lijst li::before{content:"";position:absolute;left:0;top:.42em;width:1.05rem;height:1.05rem;border-radius:50%;
  background:var(--orange-soft);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12'/%3E%3C/svg%3E") center/contain no-repeat}
.tip-lijst li::after{content:"";position:absolute;left:.28rem;top:.62em;width:.5rem;height:.28rem;
  border-left:2px solid var(--orange-fill);border-bottom:2px solid var(--orange-fill);transform:rotate(-45deg)}
.tip-lijst strong{color:var(--ink)}

/* beeld */
.tip-figuur{margin:1.8rem 0 0;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm);background:var(--paper-2)}
.tip-figuur img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover}
@media(max-width:560px){.tip-figuur img{aspect-ratio:4/3}}
.tip-figuur figcaption{font-size:.85rem;color:var(--muted);padding:.7rem 1rem}

/* veelgestelde vragen */
.tip-faq{display:grid;gap:.6rem;margin-top:1.2rem}
.tip-faq details{border:1px solid var(--line);border-radius:var(--radius-sm);background:#fff;overflow:hidden}
.tip-faq details[open]{border-color:var(--orange)}
.tip-faq summary{cursor:pointer;list-style:none;padding:.9rem 2.6rem .9rem 1rem;position:relative;
  font-family:"Poppins",sans-serif;font-weight:600;font-size:.98rem;color:var(--ink)}
.tip-faq summary::-webkit-details-marker{display:none}
.tip-faq summary::after{content:"";position:absolute;right:1.1rem;top:1.15rem;width:.55rem;height:.55rem;
  border-right:2px solid var(--orange-fill);border-bottom:2px solid var(--orange-fill);transform:rotate(45deg);transition:transform .2s var(--ease)}
.tip-faq details[open] summary::after{transform:rotate(225deg);top:1.35rem}
.tip-faq summary:focus-visible{outline:3px solid var(--orange);outline-offset:-3px}
.tip-faq__body{padding:0 1rem 1rem;color:var(--muted)}

/* afsluiting in het artikel */
.tip-slot{margin-top:2.2rem;background:var(--ink);color:#fff;border-radius:var(--radius);padding:clamp(1.3rem,2.6vw,2rem)}
.tip-slot h2{all:unset;display:block;font-family:"Bricolage Grotesque",sans-serif;font-weight:700;
  font-size:1.35rem;line-height:1.1;letter-spacing:-.02em;margin-bottom:.6rem}
.tip-slot p{color:rgba(255,255,255,.88)}
.tip-slot a{color:var(--gold)}
.tip-slot .tip-slot__cta{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.2rem}
.tip-slot .tip-slot__cta a{text-decoration:none;color:inherit}

/* ---------- zijkolom ---------- */
.tip-aside{display:grid;gap:1rem;position:sticky;top:5.5rem}
.tip-kaart{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1.3rem;box-shadow:var(--shadow-sm)}
.tip-kaart h2{all:unset;display:block;font-family:"Bricolage Grotesque",sans-serif;font-weight:700;
  font-size:1.15rem;line-height:1.15;letter-spacing:-.02em;color:var(--ink);margin-bottom:.5rem}
.tip-kaart p{margin:0 0 .9rem;font-size:.95rem;color:var(--muted)}
.tip-kaart .btn{width:100%;justify-content:center}
.tip-kaart .btn+.btn{margin-top:.5rem}
.tip-kaart--ink{background:var(--ink);border-color:var(--ink)}
.tip-kaart--ink h2{color:#fff}
.tip-kaart--ink p{color:rgba(255,255,255,.82)}
.tip-links{list-style:none;margin:0;padding:0;display:grid;gap:.55rem}
.tip-links a{display:flex;align-items:center;justify-content:space-between;gap:.6rem;
  color:var(--ink);text-decoration:none;font-weight:600;font-size:.95rem;
  border-bottom:1px solid var(--line);padding-bottom:.55rem}
.tip-links li:last-child a{border-bottom:0;padding-bottom:0}
.tip-links a:hover{color:var(--orange-deep)}
.tip-links svg{width:16px;height:16px;flex:none;color:var(--orange)}

/* keurmerken: zelfde vorm als op de dienstpagina's, hier lokaal omdat dienst.css niet meelaadt */
.tip-page .keurmerken{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.tip-page .keurmerken li{display:flex;align-items:center;justify-content:center;background:#fff;
  border:1px solid rgba(14,44,74,.12);border-radius:10px;padding:7px 10px;min-height:46px}
.tip-page .keurmerken img{display:block;height:30px;width:auto}
.tip-page .keurmerken__tekst{font-family:"Poppins",sans-serif;font-weight:700;font-size:.82rem;color:var(--ink);white-space:nowrap}

/* ---------- breekpunten ---------- */
@media(max-width:1000px){
  .tip-layout{grid-template-columns:1fr}
  .tip-aside{position:static}
}
@media(max-width:760px){
  .tip-hero .hero__content{padding-block:8.5rem 2.3rem}  /* 4,8px minder: vier koppen kwamen op 390 net boven 640 uit */
  .tip-artikel{padding:1.2rem;border-radius:18px}
  .tip-artikel h2{margin-top:2rem}
}

/* ================= hub /blog/ ================= */
.tip-hero--hub .hero__content{max-width:48rem}

/* springers naar de onderwerpen */
.tip-springer{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1rem;margin-bottom:clamp(1.6rem,3vw,2.4rem)}
.tip-springer__label{font-family:"Poppins",sans-serif;font-weight:700;font-size:.78rem;
  letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.tip-springer ul{list-style:none;display:flex;flex-wrap:wrap;gap:.5rem;padding:0;margin:0}
.tip-springer a{display:inline-flex;align-items:center;gap:.5rem;font-weight:700;font-size:.9rem;
  padding:.5rem .95rem;border-radius:999px;border:1.5px solid var(--line);background:#fff;
  color:var(--ink);text-decoration:none}
.tip-springer a:hover{border-color:var(--orange);color:var(--orange-deep)}
.tip-springer a span{background:var(--ink);color:#fff;font-size:.72rem;padding:.1rem .45rem;border-radius:999px}

/* groep per onderwerp */
.tip-groep{margin-bottom:clamp(2rem,4vw,3.2rem);scroll-margin-top:7.5rem}
.tip-groep__kop{display:flex;flex-wrap:wrap;align-items:baseline;gap:.8rem;
  font-size:clamp(1.3rem,2.2vw,1.7rem);margin-bottom:1.1rem;padding-top:1.2rem;
  border-top:1px solid var(--line);position:relative}
.tip-groep__kop::before{content:"";position:absolute;top:-1px;left:0;width:56px;height:3px;
  background:var(--orange);border-radius:2px}
.tip-groep__aantal{font-family:"Hanken Grotesk",sans-serif;font-weight:600;font-size:.88rem;color:var(--muted)}

/* kaartenraster */
.tip-raster{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:clamp(1rem,2vw,1.5rem)}
.tip-kaartje{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);
  border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm);
  transition:transform .2s var(--ease),box-shadow .2s var(--ease)}
.tip-kaartje:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.tip-kaartje__beeld{display:block;background:var(--paper-2)}
.tip-kaartje__beeld img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover}
.tip-kaartje__body{display:flex;flex-direction:column;gap:.5rem;padding:1.1rem 1.2rem 1.3rem;flex:1}
.tip-kaartje__datum{font-family:"Poppins",sans-serif;font-size:.74rem;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.tip-kaartje h3{font-size:1.08rem;line-height:1.18}
.tip-kaartje h3 a{color:var(--ink);text-decoration:none}
.tip-kaartje h3 a::after{content:"";position:absolute;inset:0}
.tip-kaartje{position:relative}
.tip-kaartje:focus-within{outline:3px solid var(--orange);outline-offset:3px}
.tip-kaartje p{margin:0;font-size:.93rem;color:var(--muted)}
.tip-kaartje__meer{margin-top:auto;display:inline-flex;align-items:center;gap:.45rem;
  font-family:"Poppins",sans-serif;font-weight:700;font-size:.85rem;color:var(--orange-deep)}
.tip-kaartje__meer svg{width:16px;height:16px}

/* checklistblok onderaan de hub */
.tip-checklist{display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(1.2rem,2.5vw,2rem);align-items:center;
  background:var(--ink);color:#fff;border-radius:22px;overflow:hidden;padding:clamp(1.5rem,3vw,2.6rem);
  margin-top:clamp(1.5rem,3vw,2.4rem)}
.tip-checklist h2{font-size:clamp(1.4rem,2.4vw,2rem);margin:.4rem 0 .7rem}
.tip-checklist p{margin:0;color:rgba(255,255,255,.85);max-width:46ch}
.tip-checklist .eyebrow{color:#fff}
.tip-checklist__cta{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.3rem}
.tip-checklist__foto{width:100%;height:100%;max-height:300px;object-fit:cover;border-radius:var(--radius)}

@media(max-width:860px){
  .tip-checklist{grid-template-columns:1fr}
  .tip-checklist__foto{max-height:200px}
}
@media(max-width:560px){
  .tip-raster{grid-template-columns:1fr}
  .tip-springer__label{display:none}
}

/* staande bronfoto's: op 16/10 bijsnijden haalde het hoofd eraf, dus die krijgen hun eigen kader */
.tip-figuur--staand img{aspect-ratio:auto;max-height:560px;width:auto;max-width:100%;margin-inline:auto;object-fit:contain}
.tip-figuur--staand{background:var(--paper-2);display:flex;flex-direction:column}
@media(max-width:560px){.tip-figuur--staand img{aspect-ratio:auto;max-height:420px}}