/* =====================================================================
   Qlimatix · Adviescentrum styles
   Lifted from the static prototype. Tokens moved to :root so the .adv-*
   component classes also render correctly inside the block-editor canvas
   (where there is no .adv wrapper). Loads only on advies pages + the editor.
   ===================================================================== */

/* ===== Self-hosted Onest (drop woff2 into assets/fonts/ — see README) ===== */
@font-face{font-family:'Onest';font-style:normal;font-weight:400;font-display:swap;src:local('Onest'),url('fonts/Onest-Regular.woff2') format('woff2');}
@font-face{font-family:'Onest';font-style:normal;font-weight:500;font-display:swap;src:local('Onest Medium'),url('fonts/Onest-Medium.woff2') format('woff2');}
@font-face{font-family:'Onest';font-style:normal;font-weight:600;font-display:swap;src:local('Onest SemiBold'),url('fonts/Onest-SemiBold.woff2') format('woff2');}
@font-face{font-family:'Onest';font-style:normal;font-weight:700;font-display:swap;src:local('Onest Bold'),url('fonts/Onest-Bold.woff2') format('woff2');}

/* ===== Design tokens ===== */
:root{
  --navy:#10293d; --navy-soft:#1c4a6b; --ink:#16242f; --muted:#6f7a83;
  --blue:#1c9bd7; --blue-tint:#eaf6fb;
  --orange:#e77935; --orange-deep:#d2641f; --orange-tint:#fdf1e8;
  --green:#1f8a4d; --green-tint:#eaf6ef;
  --amber:#c98a1e; --amber-tint:#fbf3e3;
  --red:#cf4436; --red-tint:#fbeae8;
  --line:#e7e3dd; --gray:#eeece7; --gray-soft:#f5f3ef;
  --wrap:1180px;
}

/* ===== Scope resets ===== */
[class*="adv-"],[class*="adv-"] *{box-sizing:border-box;}
.adv{font-family:'Onest',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;color:var(--ink);-webkit-font-smoothing:antialiased;}
.adv a{color:inherit;text-decoration:none;}
.adv img,[class*="adv-"] img{max-width:100%;display:block;object-fit:cover;}
.adv-wrap{max-width:var(--wrap);margin:0 auto;padding:0 40px;}

/* ===== Hero (gray band, signature rounded bottom) ===== */
.adv-hero{background:var(--gray);border-bottom-left-radius:42px;border-bottom-right-radius:42px;padding:30px 0 40px;}
.adv-crumb{display:flex;align-items:center;gap:9px;font-size:14.5px;color:var(--muted);flex-wrap:wrap;margin-bottom:30px;}
.adv-crumb a{color:var(--muted);transition:color .15s;}
.adv-crumb a:hover{color:var(--navy);}
.adv-crumb .sep{color:#b6bcc0;}
.adv-crumb .cur{color:var(--navy);font-weight:500;}
.adv-hero-inner{text-align:center;max-width:880px;margin:0 auto;}
.adv-eyebrow{
  display:inline-flex;align-items:center;gap:9px;font-size:12.5px;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;color:var(--orange-deep);
  background:#fff;border:1px solid #ecd9c8;padding:7px 15px 7px 12px;border-radius:999px;margin-bottom:22px;
}
.adv-eyebrow::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--orange);box-shadow:0 0 0 4px rgba(231,121,53,.18);}
.adv-title{font-size:58px;line-height:1.04;font-weight:600;color:var(--navy);letter-spacing:-.028em;margin:0 0 22px;text-wrap:balance;}
.adv-meta{display:flex;align-items:center;justify-content:center;gap:26px;flex-wrap:wrap;color:var(--muted);font-size:15px;}
.adv-meta .m{display:inline-flex;align-items:center;gap:8px;}
.adv-meta .m svg{color:var(--orange);flex:none;}
.adv-meta .m b{color:var(--navy);font-weight:600;}
.adv-meta .dot{width:4px;height:4px;border-radius:50%;background:#c4c0b8;}

/* ===== Featured image — overlaps the band ===== */
.adv-figure{max-width:var(--wrap);margin:0 auto;padding:0 40px;}
.adv-hero-img{
  margin-top:34px;border-radius:24px;overflow:hidden;border:1px solid var(--line);
  box-shadow:0 24px 60px -34px rgba(16,41,61,.4);
}
.adv-hero-img img{display:block;width:100%;height:460px;}

/* ===== Body layout: article + sticky TOC ===== */
.adv-body{display:grid;grid-template-columns:240px minmax(0,1fr);gap:52px;padding:56px 0 30px;align-items:start;}
.adv-article{min-width:0;max-width:none;}

/* ===== Article typography (front-end .adv-article + editor-preview .adv-prose) ===== */
.adv-lead{font-size:20px;line-height:1.7;color:var(--ink);font-weight:400;margin:0 0 14px;}
.adv-h2{
  scroll-margin-top:26px;font-size:30px;font-weight:600;color:var(--navy);letter-spacing:-.02em;margin:30px 0 18px;
  display:flex;align-items:baseline;gap:14px;
}
.adv-h2 .num{
  flex:none;font-size:16px;font-weight:700;color:var(--orange);background:var(--orange-tint);
  width:34px;height:34px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;
  transform:translateY(-2px);
}
.adv-article h3,.adv-prose h3{font-size:20px;font-weight:600;color:var(--navy);letter-spacing:-.015em;margin:34px 0 12px;}
.adv-article p,.adv-prose p{font-size:17px;line-height:1.78;color:#3f4a52;margin:0 0 18px;}
.adv-article a.inline,.adv-prose a.inline{color:var(--orange-deep);font-weight:600;border-bottom:1px solid rgba(210,100,31,.3);transition:border-color .15s;}
.adv-article a.inline:hover,.adv-prose a.inline:hover{border-color:var(--orange-deep);}
.adv-article strong,.adv-prose strong{color:var(--navy);font-weight:600;}
.adv-prose ul,.adv-prose ol{font-size:17px;line-height:1.78;color:#3f4a52;margin:0 0 18px;padding-left:22px;}
.adv-prose li{margin:0 0 6px;}

/* ===== BLOCK · Key takeaways / In het kort ===== */
.adv-tldr{
  background:linear-gradient(180deg,#fbfcfd,#f3f8fb);border:1px solid #dceaf2;border-radius:20px;
  padding:26px 30px 28px;margin:26px 0 30px;
}
.adv-tldr-head{display:flex;align-items:center;gap:11px;margin-bottom:16px;}
.adv-tldr-head .ic{width:34px;height:34px;border-radius:10px;background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:center;flex:none;}
.adv-tldr-head h4{margin:0;font-size:18px;font-weight:600;color:var(--navy);letter-spacing:-.01em;}
.adv-tldr ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px;}
.adv-tldr li{position:relative;padding-left:30px;font-size:16px;line-height:1.55;color:#3f4a52;}
.adv-tldr li::before{
  content:"";position:absolute;left:0;top:3px;width:19px;height:19px;border-radius:50%;
  background:var(--blue);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M9 16.2l-3.5-3.5L4 14.2l5 5 11-11-1.4-1.4z'/%3E%3C/svg%3E") center/14px no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M9 16.2l-3.5-3.5L4 14.2l5 5 11-11-1.4-1.4z'/%3E%3C/svg%3E") center/14px no-repeat;
}

/* ===== BLOCK · Callout (tip / note / warn) ===== */
.adv-callout{display:flex;gap:16px;padding:20px 24px;border-radius:16px;margin:24px 0;border:1px solid;}
.adv-callout .ic{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex:none;color:#fff;}
.adv-callout .body{min-width:0;}
.adv-callout .lbl{font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;margin:0 0 4px;}
.adv-callout p{margin:0;font-size:16px;line-height:1.65;color:#3f4a52;}
.adv-callout.tip{background:var(--blue-tint);border-color:#cfe9f4;}
.adv-callout.tip .ic{background:var(--blue);} .adv-callout.tip .lbl{color:#147aaa;}
.adv-callout.note{background:var(--amber-tint);border-color:#f0e2c2;}
.adv-callout.note .ic{background:var(--amber);} .adv-callout.note .lbl{color:#a4711a;}
.adv-callout.warn{background:var(--red-tint);border-color:#f2d3cf;}
.adv-callout.warn .ic{background:var(--red);} .adv-callout.warn .lbl{color:#b23a2d;}

/* ===== BLOCK · Comparison table ===== */
.adv-compare{border:1px solid var(--line);border-radius:18px;overflow:hidden;margin:26px 0;}
.adv-compare table{width:100%;border-collapse:collapse;font-size:15.5px;}
.adv-compare thead th{background:var(--navy);color:#fff;font-weight:600;text-align:left;padding:16px 20px;font-size:15px;}
.adv-compare thead th:first-child{background:#0a1f30;font-weight:500;color:#aebecb;font-size:13px;text-transform:uppercase;letter-spacing:.05em;}
.adv-compare tbody th{text-align:left;font-weight:600;color:var(--navy);background:var(--gray-soft);padding:15px 20px;width:30%;vertical-align:top;border-top:1px solid var(--line);}
.adv-compare tbody td{padding:15px 20px;color:#3f4a52;line-height:1.55;border-top:1px solid var(--line);border-left:1px solid var(--line);vertical-align:top;}

/* ===== BLOCK · Steps ===== */
.adv-steps{list-style:none;counter-reset:s;margin:26px 0;padding:0;display:flex;flex-direction:column;gap:0;}
.adv-steps li{counter-increment:s;position:relative;padding:0 0 26px 64px;}
.adv-steps li::before{
  content:counter(s);position:absolute;left:0;top:0;width:42px;height:42px;border-radius:12px;
  background:var(--orange);color:#fff;font-weight:700;font-size:18px;display:flex;align-items:center;justify-content:center;
}
.adv-steps li::after{content:"";position:absolute;left:21px;top:46px;bottom:6px;width:2px;background:var(--line);}
.adv-steps li:last-child{padding-bottom:0;}
.adv-steps li:last-child::after{display:none;}
.adv-steps li h4{margin:6px 0 6px;font-size:17.5px;font-weight:600;color:var(--navy);}
.adv-steps li p{margin:0;font-size:16px;line-height:1.65;color:#3f4a52;}

/* ===== BLOCK · Pros & cons ===== */
.adv-pc{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:26px 0;}
.adv-pc .col{border:1px solid var(--line);border-radius:16px;padding:22px 24px;}
.adv-pc .col.pro{background:var(--green-tint);border-color:#cde7d7;}
.adv-pc .col.con{background:var(--red-tint);border-color:#f2d3cf;}
.adv-pc .col h4{margin:0 0 14px;font-size:16px;font-weight:600;display:flex;align-items:center;gap:9px;}
.adv-pc .col.pro h4{color:#157a42;} .adv-pc .col.con h4{color:#b23a2d;}
.adv-pc ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;}
.adv-pc li{position:relative;padding-left:26px;font-size:15.5px;line-height:1.5;color:#3f4a52;}
.adv-pc li::before{position:absolute;left:0;top:0;font-weight:700;}
.adv-pc .pro li::before{content:"\2713";color:var(--green);}
.adv-pc .con li::before{content:"\2715";color:var(--red);}

/* ===== BLOCK · Stat highlights ===== */
.adv-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:26px 0;}
.adv-stat{border:1px solid var(--line);border-radius:16px;padding:22px 20px;text-align:center;position:relative;overflow:hidden;}
.adv-stat::before{content:"";position:absolute;left:0;right:0;top:0;height:5px;}
.adv-stat.lo::before{background:var(--blue);} .adv-stat.ok::before{background:var(--green);} .adv-stat.hi::before{background:var(--red);}
.adv-stat .v{font-size:30px;font-weight:700;color:var(--navy);letter-spacing:-.02em;font-variant-numeric:tabular-nums;}
.adv-stat .t{font-size:13.5px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;margin-top:6px;}
.adv-stat.lo .t{color:#147aaa;} .adv-stat.ok .t{color:#157a42;} .adv-stat.hi .t{color:#b23a2d;}
.adv-stat .d{font-size:13.5px;color:var(--muted);margin-top:6px;line-height:1.45;}

/* ===== BLOCK · Pull quote ===== */
.adv-quote{margin:30px 0;padding:30px 34px;background:var(--navy);border-radius:22px;color:#fff;position:relative;}
.adv-quote .mark{font-size:64px;line-height:.4;color:var(--orange);font-weight:700;display:block;height:30px;}
.adv-quote blockquote{margin:0;font-size:21px;line-height:1.5;font-weight:500;letter-spacing:-.01em;}
.adv-quote .by{display:flex;align-items:center;gap:12px;margin-top:20px;}
.adv-quote .by .av{width:42px;height:42px;border-radius:50%;overflow:hidden;flex:none;background:#1c4a6b;}
.adv-quote .by .av img{width:100%;height:100%;display:block;}
.adv-quote .by .nm{font-size:14.5px;}
.adv-quote .by .nm b{display:block;font-weight:600;}
.adv-quote .by .nm span{color:#9fb2c0;font-size:13px;}

/* ===== BLOCK · Image + caption ===== */
.adv-imgblock{margin:28px 0;}
.adv-imgblock .frame{border-radius:18px;overflow:hidden;border:1px solid var(--line);}
.adv-imgblock .frame img{display:block;width:100%;height:360px;}
.adv-imgblock figcaption{font-size:13.5px;color:var(--muted);margin-top:10px;padding-left:2px;}

/* ===== BLOCK · Checklist (signalen) ===== */
.adv-check{list-style:none;margin:22px 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:12px 26px;}
.adv-check li{position:relative;padding-left:30px;font-size:16px;line-height:1.5;color:#3f4a52;}
.adv-check li::before{
  content:"";position:absolute;left:0;top:2px;width:20px;height:20px;border-radius:6px;background:var(--orange-tint);
  border:1px solid #f0d4bd;
}
.adv-check li::after{
  content:"";position:absolute;left:5px;top:7px;width:10px;height:6px;border-left:2px solid var(--orange);border-bottom:2px solid var(--orange);transform:rotate(-45deg);
}

/* ===== BLOCK · FAQ accordion ===== */
/* Extra breathing room above the whole FAQ section (heading + accordion). */
.adv-h2--faq{margin-top:62px;}
.adv-faq{margin:24px 0 6px;border-top:1px solid var(--line);}
.adv-faq details{border-bottom:1px solid var(--line);}
.adv-faq summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;gap:16px;padding:20px 4px;
  font-size:18px;font-weight:600;color:var(--navy);
}
.adv-faq summary::-webkit-details-marker{display:none;}
.adv-faq summary .chev{margin-left:auto;flex:none;transition:transform .2s ease;color:var(--orange);}
.adv-faq details[open] summary .chev{transform:rotate(45deg);}
.adv-faq .ans{padding:0 4px 22px;font-size:16px;line-height:1.7;color:#3f4a52;}
.adv-faq .ans p{margin:0 0 10px;}
.adv-faq .ans a{color:var(--orange-deep);font-weight:600;}

/* ===== BLOCK · Product recommendation ===== */
.adv-product{
  display:flex;gap:24px;align-items:center;border:1px solid var(--line);border-radius:20px;
  padding:22px;margin:28px 0;background:#fff;box-shadow:0 1px 2px rgba(16,41,61,.04);
}
.adv-product .pimg{width:150px;height:150px;flex:none;border-radius:14px;overflow:hidden;background:var(--gray-soft);}
.adv-product .pimg img{width:100%;height:100%;display:block;}
.adv-product .pbody{min-width:0;flex:1;}
.adv-product .ptag{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--orange-deep);}
.adv-product h4{margin:6px 0 8px;font-size:21px;font-weight:600;color:var(--navy);letter-spacing:-.01em;}
.adv-product .chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px;}
.adv-product .chips span{font-size:12.5px;color:var(--muted);background:var(--gray-soft);border:1px solid var(--line);padding:4px 11px;border-radius:999px;}
.adv-product .prow{display:flex;align-items:center;gap:18px;flex-wrap:wrap;}
.adv-product .price{font-size:24px;font-weight:700;color:var(--navy);}
.adv-product .price del,.adv-product .price s{font-size:15px;color:var(--muted);font-weight:400;margin-left:6px;}
.adv-product .price ins{text-decoration:none;}
.adv-product .btn{
  display:inline-flex;align-items:center;gap:10px;background:linear-gradient(90deg,#f0974a,#e87f1e);
  color:#fff;font-weight:600;font-size:15.5px;padding:13px 24px;border-radius:999px;transition:filter .15s;
}
.adv-product .btn:hover{filter:brightness(1.05);}

/* ===== Sticky TOC sidebar ===== */
.adv-aside{position:sticky;top:24px;}
.adv-toc{border:1px solid var(--line);border-radius:16px;padding:18px 16px 19px;background:var(--gray-soft);}
.adv-toc h4{margin:0 0 11px;font-size:11.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);}
.adv-toc ol{list-style:none;margin:0;padding:0;counter-reset:t;display:flex;flex-direction:column;gap:2px;}
.adv-toc li{counter-increment:t;}
.adv-toc a{
  display:flex;gap:9px;align-items:flex-start;padding:7px 9px;border-radius:9px;font-size:13px;line-height:1.38;
  color:var(--muted);transition:background .15s,color .15s;
}
.adv-toc a::before{content:counter(t);font-weight:700;color:#b9bdb6;font-size:12px;flex:none;transition:color .15s;}
.adv-toc a:hover{background:#fff;color:var(--navy);}
.adv-toc a.active{background:#fff;color:var(--navy);font-weight:600;box-shadow:0 1px 2px rgba(16,41,61,.06);}
.adv-toc a.active::before{color:var(--orange);}

.adv-share{margin-top:18px;display:flex;align-items:center;gap:10px;padding:0 4px;}
.adv-share span{font-size:13px;color:var(--muted);}
.adv-share a{width:34px;height:34px;border-radius:50%;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--muted);transition:border-color .15s,color .15s;cursor:pointer;}
.adv-share a:hover{border-color:var(--orange);color:var(--orange);}

/* ===== Author widget ===== */
.adv-author{
  max-width:none;display:flex;gap:24px;align-items:center;color:#fff;
  background:linear-gradient(135deg,#13344c 0%,#10293d 60%,#0d2334 100%);
  border:1px solid rgba(255,255,255,.08);border-radius:20px;padding:26px 30px;margin:18px 0 0;
  box-shadow:0 24px 60px -42px rgba(13,42,71,.7);
}
.adv-author .photo{width:84px;height:84px;border-radius:50%;overflow:hidden;flex:none;background:var(--navy-soft);box-shadow:0 0 0 2px rgba(255,255,255,.14);}
.adv-author .photo img{width:100%;height:100%;display:block;}
.adv-author .info{min-width:0;}
.adv-author .tag{font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.6);}
.adv-author .info h3{margin:4px 0 2px;font-size:19px;font-weight:600;color:#fff;letter-spacing:-.01em;}
.adv-author .role{font-size:13.5px;color:var(--orange);font-weight:600;margin:0 0 10px;}
.adv-author .bio{font-size:14.5px;line-height:1.6;color:rgba(255,255,255,.82);margin:0;}

/* ===== Related articles ===== */
.adv-related{padding:60px 0 70px;}
.adv-related h3{font-size:30px;font-weight:600;color:var(--navy);letter-spacing:-.02em;margin:0 0 8px;}
.adv-related .sub{color:var(--muted);font-size:16px;margin:0 0 30px;}
.adv-rel-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;}
.adv-rel-card{border:1px solid var(--line);border-radius:20px;overflow:hidden;background:#fff;transition:transform .15s,box-shadow .15s,border-color .15s;}
.adv-rel-card:hover{transform:translateY(-3px);box-shadow:0 16px 40px -24px rgba(16,41,61,.4);border-color:#d8d3cb;}
.adv-rel-card .thumb{height:172px;background:var(--gray-soft);overflow:hidden;}
.adv-rel-card .thumb img{width:100%;height:100%;display:block;}
.adv-rel-card .c{padding:22px 24px 26px;}
.adv-rel-card .cat{font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--orange-deep);}
.adv-rel-card h4{margin:8px 0 8px;font-size:20px;font-weight:600;color:var(--navy);letter-spacing:-.015em;}
.adv-rel-card p{margin:0 0 16px;font-size:14.5px;line-height:1.6;color:var(--muted);}
.adv-rel-card .more{display:inline-flex;align-items:center;gap:8px;font-size:14.5px;font-weight:600;color:var(--orange-deep);}
.adv-rel-card:hover .more svg{transform:translateX(3px);}
.adv-rel-card .more svg{transition:transform .15s;}

/* ===== Minimal chrome placeholders (global header/footer = later phase) ===== */
.qx-topbar{display:flex;align-items:center;justify-content:space-between;gap:24px;max-width:var(--wrap);margin:0 auto;padding:16px 40px;font-family:'Onest',sans-serif;}
.qx-topbar__logo{font-weight:700;color:var(--navy);font-size:20px;text-decoration:none;}
.qx-topbar__nav{display:flex;gap:20px;list-style:none;margin:0;padding:0;}
.qx-topbar__nav a{color:var(--ink);text-decoration:none;font-size:15px;}
.qx-footer{border-top:1px solid var(--line);margin-top:40px;}
.qx-footer__inner{max-width:var(--wrap);margin:0 auto;padding:24px 40px;color:var(--muted);font-size:14px;font-family:'Onest',sans-serif;}

/* ===== Responsive ===== */
@media (max-width:1000px){
  .adv-body{grid-template-columns:1fr;gap:0;}
  .adv-aside{position:static;order:-1;margin-bottom:8px;}
  .adv-article{max-width:none;}
  .adv-title{font-size:44px;}
}
@media (max-width:760px){
  .adv-wrap,.adv-figure{padding:0 20px;}
  .adv-title{font-size:34px;}
  .adv-hero-img img{height:260px;}
  .adv-pc,.adv-stats,.adv-rel-grid{grid-template-columns:1fr;}
  .adv-check{grid-template-columns:1fr;}
  .adv-product{flex-direction:column;align-items:flex-start;}
  .adv-product .pimg{width:100%;height:200px;}
  .adv-author{flex-direction:column;}
  .adv-compare{overflow-x:auto;}
  .adv-meta{gap:14px;}
  .adv-meta .dot{display:none;}
  .qx-topbar{padding:14px 20px;}
}

/* =====================================================================
   Sectie (kop + inhoud) — merged Lead + Tekst + Sectiekop block.
   The H2 reuses .adv-h2 styling; .adv-prose styles the body typography.
   ===================================================================== */
.adv-sec { scroll-margin-top: 26px; padding-top: 18px; }
.adv-sec:first-child { padding-top: 0; }

/* Related ("Lees ook") uses the homepage blog grid — separate it from the author block. */
.adv .blog { margin-top: 54px; }

/* =====================================================================
   blog-grid.css — Shared "Kennisbank" blog / article grid styling.

   Single source of truth for every blog & article card widget on the
   site. It mirrors the Homepage blog grid exactly and re-skins the
   divergent widgets so they all read as one family:

     .blog-card      (Homepage — reference)
     .article-card   (PDP — "Gerelateerde artikelen")
     .advh-card      (Adviescentrum — article grid)
     .adv-rel-card   (Adviescentrum artikel — "Lees ook")

   Colours are hardcoded (not page CSS tokens) so the look is identical
   no matter which page loads it. Load this AFTER a page's own <style>
   block so the aliases win on equal specificity.
   ===================================================================== */

:root {
  --bg-navy:        #01273f;
  --bg-text:        #0e2a3f;
  --bg-muted:       #5e6f7c;
  --bg-muted-2:     #6f7e8c;
  --bg-border:      #e7eaee;
  --bg-border-soft: #eef1f4;
  --bg-lightblue:   #cfdae6;
  --bg-orange:      #e77935;
}

/* ---------------------------------------------------------------------
   Grid container — 3 columns, consistent gutter
   ------------------------------------------------------------------- */
.blog__grid,
.articles__grid,
.advh-grid,
.adv-rel-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}

/* ---------------------------------------------------------------------
   Card shell
   ------------------------------------------------------------------- */
.blog-card,
.article-card,
.advh-card,
.adv-rel-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--bg-border-soft);
  border-radius: 20px;
  overflow: hidden;
  text-decoration: none;
  transition: transform .18s, box-shadow .18s, border-color .18s;
}
.blog-card:hover,
.article-card:hover,
.advh-card:hover,
.adv-rel-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 26px 50px -30px rgba(8, 38, 65, 0.4);
  border-color: var(--bg-border);
}

/* ---------------------------------------------------------------------
   Media — 16:10, image covers and zooms gently on hover
   ------------------------------------------------------------------- */
.blog-card__media,
.article-card__media,
.advh-card .thumb,
.adv-rel-card .thumb {
  position: relative;
  aspect-ratio: 16 / 10;
  height: auto;                 /* override the old fixed pixel heights */
  overflow: hidden;
  background: var(--bg-lightblue);
}
.blog-card__media img,
.article-card__img,
.advh-card .thumb img,
.adv-rel-card .thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s ease;
}
.blog-card:hover .blog-card__media img,
.article-card:hover .article-card__img,
.advh-card:hover .thumb img,
.adv-rel-card:hover .thumb img {
  transform: scale(1.04);
}

/* ---------------------------------------------------------------------
   Image tag pill (Homepage + PDP have one on the image)
   ------------------------------------------------------------------- */
.blog-card__tag,
.article-card__tag {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--bg-navy);
  background: rgba(255, 255, 255, 0.94);
  padding: 6px 13px;
  border-radius: 999px;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

/* ---------------------------------------------------------------------
   Body
   ------------------------------------------------------------------- */
.blog-card__body,
.article-card__body,
.advh-card .c,
.adv-rel-card .c {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 22px 24px 24px;
}

/* Category eyebrow (Adviescentrum cards) */
.advh-card .cat,
.adv-rel-card .cat {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--bg-orange);
  margin: 0 0 9px;
}

/* Top meta line (Homepage) */
.blog-card__meta {
  font-size: 12.5px;
  color: var(--bg-muted);
  margin-bottom: 11px;
  display: flex;
  align-items: center;
  gap: 9px;
}
.blog-card__meta span {
  width: 3px;
  height: 3px;
  border-radius: 999px;
  background: var(--bg-muted-2);
}

/* Title */
.blog-card__title,
.article-card__title,
.advh-card h4,
.adv-rel-card h4 {
  font-size: 18.5px;
  font-weight: 600;
  color: var(--bg-text);
  line-height: 1.28;
  letter-spacing: -0.015em;
  margin: 0 0 11px;
  text-wrap: pretty;
}

/* Excerpt */
.blog-card__excerpt,
.article-card__excerpt,
.advh-card p,
.adv-rel-card p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--bg-muted);
  margin: 0 0 20px;
}

/* ---------------------------------------------------------------------
   Footer / "Lees meer" affordance with circular arrow
   ------------------------------------------------------------------- */
.advh-card .foot {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.blog-card__more,
.advh-card .more,
.adv-rel-card .more {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 14px;
  font-weight: 600;
  color: var(--bg-navy);
}
.adv-rel-card .more,
.advh-card .more {
  margin-top: 0;                /* sits in its own footer row */
}

/* Read-time meta (PDP + Adviescentrum) */
.article-card__meta,
.advh-card .read {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--bg-muted);
}
.advh-card .read { margin-top: 0; }
.article-card__meta svg,
.advh-card .read svg {
  display: block;
  color: var(--bg-muted-2);
}

/* Circular arrow — homepage wraps it in a span, the advice cards use a
   bare <svg>; style both into the same pill that flips to orange on hover */
.blog-card__more .blog-card__arrow,
.advh-card .more svg,
.adv-rel-card .more svg {
  width: 30px;
  height: 30px;
  flex: none;
  box-sizing: border-box;
  border-radius: 999px;
  background: var(--bg-lightblue);
  color: var(--bg-navy);
  padding: 7px;
  display: grid;
  place-items: center;
  transition: background .15s, color .15s, transform .15s;
}
.blog-card:hover .blog-card__arrow,
.advh-card:hover .more svg,
.adv-rel-card:hover .more svg {
  background: var(--bg-orange);
  color: #fff;
  transform: translate(2px, -2px);
}

/* ---------------------------------------------------------------------
   Responsive
   ------------------------------------------------------------------- */
@media (max-width: 980px) {
  .blog__grid,
  .articles__grid,
  .advh-grid,
  .adv-rel-grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 620px) {
  .blog__grid,
  .articles__grid,
  .advh-grid,
  .adv-rel-grid {
    grid-template-columns: 1fr;
  }
}

/* ---------------------------------------------------------------------
   Kennisbank widget header — eyebrow + title + "alle artikelen" link.
   Mirrors the Homepage section header so the COMPLETE blog widget
   (header + card grid) is reusable from this one stylesheet — e.g. the
   Adviescentrum "Lees ook" / Gerelateerde-artikelen block. Colours are
   hardcoded to match the rest of this file (no page-token dependency).
   ------------------------------------------------------------------- */
.blog__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  margin-bottom: 42px;
}
.blog__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  font-weight: 600;
  color: var(--bg-orange);
  letter-spacing: 0.02em;
  margin-bottom: 16px;
}
.blog__eyebrow::before {
  content: "";
  width: 22px;
  height: 2px;
  background: var(--bg-orange);
  border-radius: 2px;
}
.blog__title {
  font-size: 40px;
  line-height: 1.08;
  letter-spacing: -0.03em;
  font-weight: 600;
  color: var(--bg-text);
  margin: 0;
  max-width: 620px;
}
.blog__all {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--bg-navy);
  text-decoration: none;
  padding-bottom: 6px;
  transition: gap .15s;
}
.blog__all:hover { gap: 16px; }
.blog__all .blog__allarrow {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: var(--bg-navy);
  color: #fff;
  display: grid;
  place-items: center;
  transition: background .15s;
}
.blog__all:hover .blog__allarrow { background: var(--bg-orange); }

@media (max-width: 620px) {
  .blog__head { flex-direction: column; align-items: flex-start; gap: 18px; margin-bottom: 26px; }
  .blog__title { font-size: 30px; }
}


/* ===== 3 nieuwe blokken (datatable / download / specs) — design handoff, verbatim ===== */
/* =====================================================================
   new-blocks.css
   Three new Adviescentrum block scopes — APPEND these to your existing
   adviescentrum-blocks.css (they reuse its .adv design tokens; see
   ../css/tokens-reference.css). Nothing here is global: every rule is
   scoped under .adv-datatable / .adv-download / .adv-specs.

     .adv-datatable   Datatabel (meerkoloms)
     .adv-download    Resource-/downloadkaart
     .adv-specs       Specificaties (sleutel:waarde)
   ===================================================================== */

/* ===== BLOCK · Data table (multi-column) ===== */
.adv-datatable{margin:28px 0;}
.adv-datatable .dt-caption{font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:0 0 11px;padding-left:2px;}
.adv-datatable .dt-scroll{border:1px solid var(--line);border-radius:18px;overflow:auto;-webkit-overflow-scrolling:touch;}
.adv-datatable table{width:100%;border-collapse:separate;border-spacing:0;font-size:15px;min-width:560px;}
/* header row — sticky on vertical scroll */
.adv-datatable thead th{position:sticky;top:0;z-index:2;background:var(--navy);color:#fff;font-weight:600;text-align:left;padding:14px 18px;white-space:nowrap;font-size:14.5px;}
.adv-datatable thead th.num{text-align:right;}
.adv-datatable thead th:first-child{left:0;z-index:3;background:#0a1f30;border-right:1px solid #0a1f30;}
/* body cells + zebra */
.adv-datatable tbody th,.adv-datatable tbody td{padding:13px 18px;line-height:1.5;color:#3f4a52;vertical-align:middle;border-top:1px solid var(--line);background:#fff;}
.adv-datatable tbody tr:nth-child(even) th,.adv-datatable tbody tr:nth-child(even) td{background:var(--gray-soft);}
/* first column — sticky, emphasised row label */
.adv-datatable tbody th{position:sticky;left:0;z-index:1;text-align:left;font-weight:600;color:var(--navy);border-right:1px solid var(--line);}
/* highlighted "aanrader" row — callout-tip accent */
.adv-datatable tbody tr.aanrader th,.adv-datatable tbody tr.aanrader td{background:var(--blue-tint);}
.adv-datatable tbody tr.aanrader th{box-shadow:inset 3px 0 0 var(--blue);}
/* cell types */
.adv-datatable .num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;}
.adv-datatable td a,.adv-datatable th a{color:var(--orange-deep);font-weight:600;border-bottom:1px solid rgba(210,100,31,.3);transition:border-color .15s;}
.adv-datatable td a:hover,.adv-datatable th a:hover{border-color:var(--orange-deep);}
.adv-datatable .rating{display:inline-flex;gap:2px;white-space:nowrap;vertical-align:middle;}
.adv-datatable .rating i{width:15px;height:15px;flex:none;background:var(--green);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M12 17.3l-6.2 3.7 1.6-7.1L2 9.2l7.2-.6L12 2l2.8 6.6 7.2.6-5.4 4.7 1.6 7.1z'/%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%3Cpath fill='white' d='M12 17.3l-6.2 3.7 1.6-7.1L2 9.2l7.2-.6L12 2l2.8 6.6 7.2.6-5.4 4.7 1.6 7.1z'/%3E%3C/svg%3E") center/contain no-repeat;}
.adv-datatable .rating i.off{background:#d8d3cb;}
.adv-datatable .dt-foot{font-size:13px;line-height:1.55;color:var(--muted);margin:11px 0 0;padding-left:2px;}

/* ===== BLOCK · Specs (key:value credential card) ===== */
.adv-specs{border:1px solid var(--line);border-radius:18px;background:#fff;box-shadow:0 1px 2px rgba(16,41,61,.04);overflow:hidden;margin:26px 0;}
.adv-specs-head{display:flex;align-items:center;gap:13px;padding:16px 24px;background:var(--gray-soft);border-bottom:1px solid var(--line);}
.adv-specs-head .ic{width:38px;height:38px;border-radius:11px;background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:center;flex:none;}
.adv-specs-head h4{margin:0;font-size:17px;font-weight:600;color:var(--navy);letter-spacing:-.01em;}
.adv-specs dl{margin:0;padding:4px 24px;}
.adv-specs .row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,auto);gap:14px 24px;align-items:baseline;padding:13px 0;border-top:1px solid var(--line);}
.adv-specs .row:first-of-type{border-top:none;}
.adv-specs dt{margin:0;font-size:15px;line-height:1.5;color:var(--muted);display:flex;align-items:baseline;gap:10px;}
.adv-specs dt::before{content:"";width:6px;height:6px;border-radius:2px;background:var(--orange);flex:none;transform:translateY(-1px);}
.adv-specs dd{margin:0;font-size:15.5px;line-height:1.5;font-weight:600;color:var(--navy);text-align:right;font-variant-numeric:tabular-nums;}
.adv-specs-foot{display:flex;align-items:center;gap:9px;padding:13px 24px;background:var(--gray-soft);border-top:1px solid var(--line);font-size:13px;line-height:1.4;color:var(--muted);}
.adv-specs-foot .v{width:18px;height:18px;border-radius:50%;background:var(--green);color:#fff;display:flex;align-items:center;justify-content:center;flex:none;}

/* ===== BLOCK · Download / resource card ===== */
.adv-download{border:1px solid var(--line);border-radius:18px;overflow:hidden;margin:26px 0;background:#fff;box-shadow:0 1px 2px rgba(16,41,61,.04);}
.adv-download .dl-item{display:flex;align-items:center;gap:18px;padding:20px 22px;border-top:1px solid var(--line);}
.adv-download .dl-item:first-child{border-top:none;}
.adv-download .ic{width:52px;height:52px;border-radius:13px;flex:none;display:flex;align-items:center;justify-content:center;font-size:12.5px;font-weight:700;letter-spacing:.02em;border:1px solid;}
.adv-download .ic.pdf{background:var(--red-tint);color:#b23a2d;border-color:#f2d3cf;}
.adv-download .ic.xlsx{background:var(--green-tint);color:#157a42;border-color:#cde7d7;}
.adv-download .ic.docx{background:var(--blue-tint);color:#147aaa;border-color:#cfe9f4;}
.adv-download .dl-text{flex:1;min-width:0;}
.adv-download .dl-text h4{margin:0 0 4px;font-size:17.5px;font-weight:600;color:var(--navy);letter-spacing:-.01em;}
.adv-download .dl-text p{margin:0 0 9px;font-size:15px;line-height:1.55;color:#3f4a52;}
.adv-download .dl-meta{display:flex;align-items:center;gap:9px;font-size:12.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);}
.adv-download .dl-meta .dot{width:4px;height:4px;border-radius:50%;background:#c4c0b8;flex:none;}
.adv-download .dl-btn{flex:none;display:inline-flex;align-items:center;gap:9px;background:linear-gradient(90deg,#f0974a,#e87f1e);color:#fff;font-weight:600;font-size:15px;padding:12px 22px;border-radius:999px;transition:filter .15s;}
.adv-download .dl-btn:hover{filter:brightness(1.05);}

/* ===== Responsive (append into your existing @media (max-width:760px) block) ===== */
@media (max-width:760px){
  .adv-download .dl-item{flex-direction:column;align-items:flex-start;gap:14px;}
  .adv-download .dl-btn{width:100%;justify-content:center;}
  .adv-specs .row{grid-template-columns:1fr;gap:2px;}
  .adv-specs dd{text-align:left;}

  /* Block polish that was missing on phones (match the prototype's ≤640 layer). */
  .adv-steps li{padding-left:54px;}
  .adv-steps li::before{width:38px;height:38px;font-size:16px;}
  .adv-steps li::after{left:19px;}
  .adv-imgblock .frame img{height:220px;}
  .adv-quote{padding:26px 22px;}
  .adv-quote blockquote{font-size:19px;}
  .adv-callout{padding:18px 20px;}
}

/* Datatable on phones: a narrow (≤3-col) comparison table fits the screen
   without a horizontal scroll — same idea as the homepage .faq-table (shrink to
   width + smaller type) instead of the min-width:560 scroll container. */
@media (max-width:560px){
  .adv-datatable table{min-width:0;font-size:13px;}
  .adv-datatable thead th,.adv-datatable tbody th,.adv-datatable tbody td{padding:10px 11px;}
  .adv-datatable thead th{white-space:normal;}
  .adv-datatable thead th:first-child,.adv-datatable tbody th{position:static;}
}

/* Author box → linked team-member profile (parts/author.php) */
.adv-author h3 a { color: inherit; text-decoration: none; }
.adv-author h3 a:hover { color: var(--orange); }
.adv-author__more { margin: 8px 0 0; font-size: 14px; }
.adv-author__more a { color: var(--orange); font-weight: 600; text-decoration: none; }
.adv-author__more a:hover { text-decoration: underline; }

/* =====================================================================
   Footer newsletter band — cancel the upward overlap pull on article
   singles. The advies/blog article ends on the white "Lees ook" related
   grid (parts/related.php), or the author box, with no gray receiver
   block before the footer. The global footer band ships as
   .lof-news-band--top (translateY(-150px) + margin-bottom:-150px), which
   expects 150px of reserved space above it — so here it crashes up into
   the "Meer uit het Adviescentrum" cards. Neutralise the pull and add
   breathing room above the dark band.

   Scoped to the article singles (advies CPT + native post) because
   adv.css is shared — it also loads on category, team and PDP layouts,
   which handle the band their own way and must not be touched. Mirrors
   the same cancel already used in team.css and adviescentrum.css. */
body.single-advies #lofoot-root .lof-news-band--top,
body.single-post   #lofoot-root .lof-news-band--top {
  transform: none !important;
  margin: 90px 0 0 !important;
}


/* =====================================================================
   adv-blocks.css — vier nieuwe Adviescentrum-blokken (samengevoegd)
   APPEND deze vier scopes aan je bestaande adviescentrum-blocks.css.
   Scopes: .adv-video  .adv-benefits  .adv-cta  .adv-products
   Het videoblok gebruikt ook adv-video.js (click-to-load).
   ===================================================================== */

/* Tokens (REFERENTIE — staan al in je adviescentrum-blocks.css; niet dupliceren):
   .adv{ --navy:#10293d; --navy-soft:#1c4a6b; --ink:#16242f; --muted:#6f7a83;
         --blue:#1c9bd7; --blue-tint:#eaf6fb; --orange:#e77935; --orange-deep:#d2641f;
         --orange-tint:#fdf1e8; --green:#1f8a4d; --green-tint:#eaf6ef;
         --line:#e7e3dd; --gray:#eeece7; --gray-soft:#f5f3ef; }
   Font: 'Onest' (Google Fonts, 400/500/600/700). */

/* =====================================================================
   adv-video.css
   New Adviescentrum block scope — APPEND to your existing
   adviescentrum-blocks.css (reuses its .adv design tokens; see
   ../../design_handoff_acf_blocks/css/tokens-reference.css). Nothing here
   is global: every rule is scoped under .adv-video.

     .adv-video   Videoblok (YouTube/Vimeo lite-embed, click-to-load)

   Recreated from the PDP prototype's .pvideo (Luchtontvochtiger Badkamer),
   remapped onto .adv tokens:
     soft panel        -> the .adv-tldr feature-panel surface
                          (linear-gradient(#fbfcfd,#f3f8fb), 1px #dceaf2 seam)
     orange / hover    -> var(--orange) / var(--orange-deep)
     card border/radius/shadow -> var(--line) / 18px / the shared 1px shadow
   ===================================================================== */

/* ===== BLOCK · Video (YouTube/Vimeo lite-embed, click-to-load) ===== */
.adv-video{display:grid;grid-template-columns:1fr 1.12fr;margin:26px 0;width:100%;background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden;box-shadow:0 1px 2px rgba(16,41,61,.04);}

/* left — text panel (soft near-white, same surface as the .adv-tldr block) */
.adv-video__text{background:linear-gradient(180deg,#fbfcfd,#f3f8fb);padding:32px 30px;display:flex;flex-direction:column;justify-content:center;}
.adv-video__eyebrow{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;font-size:12px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--orange);margin:0 0 1px;transition:color .15s;}
.adv-video__eyebrow svg{flex:none;}
.adv-video__eyebrow:hover{color:var(--navy);text-decoration:underline;text-underline-offset:3px;}
.adv-video__title{font-size:23px;font-weight:700;color:var(--navy);letter-spacing:-.015em;line-height:1.15;margin:6px 0 10px;}
.adv-video__sub{font-size:15.5px;line-height:1.55;color:var(--muted);margin:0 0 20px;}
.adv-video__time{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:var(--navy);}
.adv-video__time svg{color:var(--muted);flex:none;}

/* right — video frame (poster facade; the real player loads on click) */
.adv-video__frame{position:relative;display:block;overflow:hidden;background:#0a0f14;cursor:pointer;min-height:230px;}
.adv-video__poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;}
.adv-video__scrim{position:absolute;inset:0;background:radial-gradient(120% 90% at 50% 42%,rgba(1,39,63,0) 40%,rgba(1,39,63,.34) 100%),linear-gradient(180deg,rgba(4,12,20,.10) 0%,rgba(4,12,20,.34) 100%);transition:background .2s;}
.adv-video__frame:hover .adv-video__scrim{background:radial-gradient(120% 90% at 50% 42%,rgba(1,39,63,.05) 38%,rgba(1,39,63,.44) 100%),linear-gradient(180deg,rgba(4,12,20,.18) 0%,rgba(4,12,20,.44) 100%);}
.adv-video__play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:62px;height:62px;border-radius:999px;background:var(--orange);color:#fff;display:grid;place-items:center;box-shadow:0 10px 28px -8px rgba(231,121,53,.7);transition:transform .18s ease;}
.adv-video__frame:hover .adv-video__play{transform:translate(-50%,-50%) scale(1.06);}
.adv-video__play svg{margin-left:3px;}
.adv-video__badge{position:absolute;right:12px;bottom:12px;background:rgba(8,16,24,.82);color:#fff;font-size:13px;font-weight:600;padding:5px 11px;border-radius:7px;letter-spacing:.02em;}
.adv-video__frame:focus-visible{outline:3px solid var(--blue);outline-offset:-3px;}

/* injected player (added by adv-video.js after a click) */
.adv-video__iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;}
.adv-video__frame.is-playing{cursor:default;}
.adv-video__frame.is-playing .adv-video__scrim,
.adv-video__frame.is-playing .adv-video__play,
.adv-video__frame.is-playing .adv-video__badge{display:none;}

/* ===== Responsive (append into your existing @media (max-width:760px) block) =====
   Below ~720–760px the card stacks: text panel on top, video frame below. */
@media (max-width:760px){
  .adv-video{grid-template-columns:1fr;}
  .adv-video__text{padding:26px 22px;}
  .adv-video__frame{min-height:0;aspect-ratio:16/9;}
}


/* =====================================================================
   adv-benefits.css
   New Adviescentrum block scope — APPEND to your existing
   adviescentrum-blocks.css (reuses its .adv design tokens; see
   ../../design_handoff_acf_blocks/css/tokens-reference.css). Nothing here
   is global: every rule is scoped under .adv-benefits.

     .adv-benefits   Voordelen in één oogopslag (icon + kop + tekst)

   Recreated from the PDP prototype's .seo__benefits / .benefit
   (Luchtontvochtiger Badkamer, CSS ±535–540, markup ±1112–1116),
   remapped onto .adv tokens:
     card           -> #fff + var(--line) + the shared 1px shadow
     icon tile      -> dark-blue homepage-hero gradient (#1a527c→#042036) + white glyph
     kop / tekst    -> var(--navy) / var(--muted)
   Static block — no JS. Icons are inline in the render template.
   ===================================================================== */

/* ===== BLOCK · Benefits (voordelen in één oogopslag) ===== */
.adv-benefits{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin:26px 0;}
.adv-benefits .bn{display:flex;gap:15px;align-items:flex-start;background:#fff;border:1px solid var(--line);border-radius:16px;padding:18px 20px;box-shadow:0 1px 2px rgba(16,41,61,.04);}
.adv-benefits .ic{width:42px;height:42px;flex:none;border-radius:11px;background:radial-gradient(135% 135% at 50% 22%,#1a527c 0%,#0c3a5e 48%,#042036 100%);color:#fff;display:grid;place-items:center;box-shadow:0 6px 14px -9px rgba(4,32,54,.55),inset 0 1px 0 rgba(255,255,255,.10);}
.adv-benefits .ic svg{display:block;}
.adv-benefits .bn-text{min-width:0;}
.adv-benefits h4{margin:2px 0 4px;font-size:16px;font-weight:600;color:var(--navy);letter-spacing:-.01em;}
.adv-benefits p{margin:0;font-size:14.5px;line-height:1.55;color:var(--muted);}

/* ===== Responsive (append into your existing @media (max-width:760px) block) =====
   2-koloms desktop -> 1-koloms mobiel. */
@media (max-width:760px){
  .adv-benefits{grid-template-columns:1fr;}
}


/* =====================================================================
   adv-cta.css
   New Adviescentrum block scope — APPEND to your existing
   adviescentrum-blocks.css (reuses its .adv design tokens; see
   ../../design_handoff_acf_blocks/css/tokens-reference.css). Nothing here
   is global: every rule is scoped under .adv-cta.

     .adv-cta   In-body call-to-action banner (tag + titel + tekst +
                optionele USP-lijst + oranje pill-knop). Twee varianten:
                .navy (donker) en .light.

   Visual language from the prototype's .guide-card + .cat-hero__aside
   (Luchtontvochtiger Badkamer). Mapped onto .adv tokens:
     navy variant   -> homepage-hero gradient (#1a5680→#04203a) + white text
     light variant  -> soft near-white panel (same surface as .adv-tldr)
     button         -> the shared orange pill (linear-gradient #f0974a→#e87f1e)
   Static block — no JS.
   ===================================================================== */

/* ===== BLOCK · CTA banner ===== */
.adv-cta{display:flex;align-items:center;justify-content:space-between;gap:28px;border-radius:18px;padding:22px 32px;margin:28px 0;}
.adv-cta__main{min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:10px;}
.adv-cta__tag{font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:5px 12px;border-radius:999px;}
.adv-cta__title{margin:0;font-size:24px;font-weight:600;line-height:1.15;letter-spacing:-.01em;}
.adv-cta__text{margin:0;font-size:15px;line-height:1.5;max-width:62ch;}
.adv-cta__points{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:7px 22px;}
/* The block lives inside .adv-article, whose generic h3/p/ul margins
   (e.g. .adv-article h3 { margin:34px 0 12px }) out-specify the rules above and
   reintroduce uneven spacing — pin the component's rhythm so the flex gap wins. */
.adv-cta .adv-cta__title, .adv-cta .adv-cta__text, .adv-cta .adv-cta__points{margin:0;}
.adv-cta__points li{display:flex;align-items:center;gap:9px;font-size:14px;line-height:1.3;}
.adv-cta__points svg{color:var(--orange);flex:none;}
.adv-cta__action{flex:none;}

/* the shared orange pill (matches .adv-download .dl-btn) */
.adv-cta__btn{display:inline-flex;align-items:center;gap:9px;background:linear-gradient(90deg,#f0974a,#e87f1e);color:#fff;font-weight:600;font-size:15.5px;padding:14px 26px;border-radius:999px;white-space:nowrap;box-shadow:0 10px 24px -12px rgba(231,121,53,.7);transition:filter .15s;}
.adv-cta__btn:hover{filter:brightness(1.05);}

/* variant — navy (dark, homepage-hero gradient) */
.adv-cta.navy{background:radial-gradient(130% 150% at 88% 8%,#1a5680 0%,#0b3a5e 42%,#04203a 100%);color:#fff;}
.adv-cta.navy .adv-cta__tag{background:rgba(255,255,255,.14);color:#fff;}
.adv-cta.navy .adv-cta__title{color:#fff;}
.adv-cta.navy .adv-cta__text{color:rgba(255,255,255,.74);}
.adv-cta.navy .adv-cta__points li{color:rgba(255,255,255,.92);}

/* variant — light (soft near-white panel) */
.adv-cta.light{background:linear-gradient(180deg,#fbfcfd,#f3f8fb);border:1px solid var(--line);}
.adv-cta.light .adv-cta__tag{background:var(--orange-tint);color:var(--orange-deep);}
.adv-cta.light .adv-cta__title{color:var(--navy);}
.adv-cta.light .adv-cta__text{color:#3f4a52;}
.adv-cta.light .adv-cta__points li{color:#3f4a52;}

/* ===== Responsive (append into your existing @media (max-width:760px) block) =====
   Stack: content above, full-width button below. */
@media (max-width:760px){
  .adv-cta{flex-direction:column;align-items:flex-start;gap:20px;padding:26px 22px;}
  .adv-cta__action{width:100%;}
  .adv-cta__btn{width:100%;justify-content:center;}
}


/* =====================================================================
   adv-products.css
   New Adviescentrum block scope — APPEND to your existing
   adviescentrum-blocks.css (reuses its .adv design tokens; see
   ../../design_handoff_acf_blocks/css/tokens-reference.css). Nothing here
   is global: every rule is scoped under .adv-products.

     .adv-products   Genummerde top-N / multi-product lijst met live PDP-links.
                     Eén kolom, of twee (.adv-products zonder/met tweede kolom).

   Recreated from the prototype's .seo__bestpanel / .bestlist
   (Luchtontvochtiger Badkamer, CSS ±632–641, markup ±1185–1204),
   remapped onto .adv tokens. The prototype's light-blue panel is swapped
   for the calm --gray-soft surface so the white rows still pop without a
   saturated blue slab. Static block — no JS (numbering is server-side).
   ===================================================================== */

/* ===== BLOCK · Products (numbered top-N) ===== */
.adv-products{display:grid;grid-template-columns:1fr 1fr;gap:26px 30px;background:var(--gray-soft);border:1px solid var(--line);border-radius:18px;padding:26px 28px;margin:28px 0;}
.adv-products.single{grid-template-columns:1fr;}
.adv-products__head{margin:0 0 13px;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--orange-deep);}
.adv-products__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;}
.adv-products__list li{padding:0;}
.adv-products__list a{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid transparent;border-radius:10px;padding:11px 14px;font-size:14.5px;line-height:1.3;color:var(--ink);box-shadow:0 1px 2px rgba(16,41,61,.04);transition:border-color .15s,color .15s;}
.adv-products__list a:hover{border-color:var(--navy);color:var(--navy);}
.adv-products__n{width:23px;height:23px;flex:none;border-radius:999px;background:var(--navy);color:#fff;font-size:12px;font-weight:600;display:grid;place-items:center;font-variant-numeric:tabular-nums;}
.adv-products__name{flex:1;min-width:0;}
.adv-products__list a svg{color:#b6c2cd;flex:none;transition:transform .15s,color .15s;}
.adv-products__list a:hover svg{color:var(--orange);transform:translate(2px,-2px);}

/* ===== Responsive (append into your existing @media (max-width:760px) block) =====
   Two columns collapse to one. */
@media (max-width:760px){
  .adv-products{grid-template-columns:1fr;gap:22px;padding:22px 20px;}
}


/* =====================================================================
   Article feedback pass (2026-06-30)
   1. "Lees ook" related → horizontal slider (hub carousel)
   2. Mobile: centred breadcrumbs + tighter H1 padding
   3. Collapsible TOC (closed on mobile, forced-open on desktop)
   4. Share buttons → share bar at the foot of the article
   5. Even spacing between blocks on mobile
   ===================================================================== */

/* ---- 1 · "Lees ook" slider (ported from hub.css .au-slider, scoped to .adv
        so the article only ships adv.css — no hub.css dependency) ---- */
.adv .au-section{margin:0;}
.adv .au-slider{display:flex;gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding:6px 2px 12px;margin:0;scrollbar-width:none;-webkit-overflow-scrolling:touch;}
.adv .au-slider::-webkit-scrollbar{display:none;}
.adv .au-slider > *{flex:0 0 auto;width:360px;scroll-snap-align:start;}
.adv .au-slider-foot{display:flex;align-items:center;gap:26px;margin-top:22px;}
.adv .au-slider-bar{position:relative;flex:1;height:4px;border-radius:999px;background:var(--line);overflow:hidden;}
.adv .au-slider-bar__thumb{position:absolute;top:0;left:0;height:100%;min-width:14%;width:30%;border-radius:999px;background:var(--navy);transition:left .18s ease,width .18s ease;}
.adv .au-slider-nav{display:flex;gap:10px;flex-shrink:0;}
.adv .au-slider-nav button{width:46px;height:46px;border-radius:999px;border:1px solid var(--line);background:#fff;color:var(--ink);display:grid;place-items:center;cursor:pointer;transition:background .15s,border-color .15s,color .15s,box-shadow .15s,transform .12s;}
.adv .au-slider-nav button:hover{background:var(--navy);border-color:var(--navy);color:#fff;box-shadow:0 14px 24px -14px rgba(8,38,65,.45);}
.adv .au-slider-nav button:active{transform:scale(.94);}

/* ---- 3 · Collapsible TOC ---- */
.adv-toc__toggle{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;background:none;border:0;padding:0;margin:0;cursor:pointer;color:inherit;font:inherit;text-align:left;-webkit-appearance:none;appearance:none;}
.adv-toc__toggle h4{margin:0;}
.adv-toc__chev{flex:none;color:var(--muted);transition:transform .2s ease;}
.adv-toc:not(.is-collapsed) .adv-toc__chev{transform:rotate(180deg);}
.adv-toc .adv-toc__list{margin-top:12px;}
.adv-toc.is-collapsed .adv-toc__list{display:none;}
@media (min-width:1001px){
  /* Desktop sidebar: always open, header inert. */
  .adv-toc .adv-toc__list{display:block !important;}
  .adv-toc__toggle{cursor:default;pointer-events:none;}
  .adv-toc__chev{display:none;}
}

/* ---- 4 · Share bar at the foot of the article ---- */
.adv-sharebar{display:flex;align-items:center;justify-content:center;gap:14px;margin:6px 0 0;padding-top:30px;border-top:1px solid var(--line);}
.adv-sharebar span{font-size:14px;font-weight:600;color:var(--navy);}
.adv-sharebar a{width:40px;height:40px;border-radius:50%;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--muted);transition:border-color .15s,color .15s;cursor:pointer;}
.adv-sharebar a:hover{border-color:var(--orange);color:var(--orange);}
.adv-sharebar a.copied{border-color:var(--green);color:var(--green);}

/* ---- 2 + 5 · Mobile refinements ---- */
@media (max-width:760px){
  /* 2 · centred breadcrumbs + tighter horizontal padding around the H1 */
  .adv-hero .adv-wrap{padding-left:14px;padding-right:14px;}
  .adv-crumb{justify-content:center;margin-bottom:22px;}

  /* 1 · slider cards become a touch narrower than the viewport so the next
     card peeks, inviting the swipe */
  .adv .au-slider > *{width:min(86vw,320px);}

  /* 5 · even vertical rhythm between every top-level article block. The base
     blocks carry their own 22–30px margins (and .adv-sec uses padding, which
     does not collapse) → gaps read unevenly on a narrow screen. Normalise to a
     single owl gap. */
  .adv-article > *{margin-top:0;margin-bottom:0;}
  .adv-article > * + *{margin-top:28px;}
  .adv-sec{padding-top:0;}
  .adv-sec > :first-child{margin-top:0;}
  /* the FAQ heading is a sibling of its accordion — keep them coupled */
  .adv-article > .adv-h2--faq + .adv-faq{margin-top:12px;}

  /* share bar reads fine full-width and centred on mobile too */
  .adv-sharebar{margin-top:4px;padding-top:26px;}
}