/* =====================================================================
   adviescentrum-blocks.css
   Shared stylesheet for the Adviescentrum ACF block library.

   Single source of truth for every content block + page part used by the
   Adviescentrum article template. Each ACF block render template only has
   to output the markup shown in the Blokkenbibliotheek — all styling lives
   here. Enqueue this once (theme or block enqueue); every block wrapper is
   scoped under `.adv`, so nest block output inside a `.adv` container.

   Blocks:
     .adv-tldr        In het kort (samenvatting)
     .adv-callout     Callout (tip / let op / waarschuwing)
     .adv-compare     Vergelijkingstabel
     .adv-datatable   Datatabel (meerkoloms)
     .adv-specs       Specificaties (sleutel:waarde)
     .adv-steps       Stappenplan
     .adv-pc          Voor- & nadelen
     .adv-stats       Kerncijfers
     .adv-quote       Citaat / expertadvies
     .adv-imgblock    Afbeelding + bijschrift
     .adv-check       Checklist
     .adv-faq         Veelgestelde vragen
     .adv-product     Productaanrader
     .adv-download    Resource-/downloadkaart
     .adv-sec         Sectie (kop + inhoud)
   Page parts:
     .adv-hero        Artikel-header
     .adv-toc         Inhoudsopgave (sticky)
     .adv-author      Auteurwidget
     .adv-related     Gerelateerde artikelen
   ===================================================================== */

/* ===== Tokens ===== */
.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;
  --amber:#c98a1e; --amber-tint:#fbf3e3;
  --red:#cf4436; --red-tint:#fbeae8;
  --line:#e7e3dd; --gray:#eeece7; --gray-soft:#f5f3ef;
  --wrap:1180px;
}
.adv{font-family:'Onest',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;color:var(--ink);}
.adv *{box-sizing:border-box;}
.adv a{color:inherit;text-decoration:none;}
.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 0;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 image-slot,.adv-hero-img .ph,.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 ===== */
.adv-lead{font-size:20px;line-height:1.7;color:var(--ink);font-weight:400;margin:0 0 14px;}
.adv-sec{scroll-margin-top:26px;padding-top:18px;}
.adv-sec h2{
  font-size:30px;font-weight:600;color:var(--navy);letter-spacing:-.02em;margin:30px 0 18px;
  display:flex;align-items:baseline;gap:14px;
}
.adv-sec 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{font-size:20px;font-weight:600;color:var(--navy);letter-spacing:-.015em;margin:34px 0 12px;}
.adv-article p{font-size:17px;line-height:1.78;color:#3f4a52;margin:0 0 18px;}
.adv-article 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{border-color:var(--orange-deep);}
.adv-article strong{color:var(--navy);font-weight:600;}

/* ===== 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 · 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 · 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 image-slot,.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 image-slot,.adv-imgblock .ph,.adv-imgblock 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 ===== */
.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;}

/* ===== 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 image-slot,.adv-product .pimg .ph,.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 s{font-size:15px;color:var(--muted);font-weight:400;margin-left:6px;}
.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);}

/* ===== 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);}

/* ===== 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;}
.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;background:var(--gray-soft);
  border:1px solid var(--line);border-radius:20px;padding:26px 30px;margin:18px 0 0;
}
.adv-author .photo{width:84px;height:84px;border-radius:50%;overflow:hidden;flex:none;background:var(--navy);}
.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:var(--muted);}
.adv-author .info h3{margin:4px 0 2px;font-size:19px;font-weight:600;color:var(--navy);letter-spacing:-.01em;}
.adv-author .role{font-size:13.5px;color:var(--orange-deep);font-weight:600;margin:0 0 10px;}
.adv-author .bio{font-size:14.5px;line-height:1.6;color:#5a656d;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 image-slot,.adv-rel-card .thumb .ph,.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;}

/* ===== Placeholder visuals ===== */
.ph{background:
    repeating-linear-gradient(135deg,#e9e5de 0 12px,#efece6 12px 24px);
  display:flex;align-items:center;justify-content:center;color:#9aa1a6;font:500 12px/1.4 ui-monospace,Menlo,monospace;text-align:center;padding:14px;}

/* ===== Responsive ===== */
@media (max-width:1000px){
  .adv-body{grid-template-columns:1fr;gap:0;}
  .adv-aside{position:static;order:-1;margin-bottom:8px;}
  .adv-toc{background:var(--gray-soft);}
  .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 image-slot,.adv-hero-img .ph,.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-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;}
  .adv-author{flex-direction:column;}
  .adv-compare{overflow-x:auto;}
  .adv-meta{gap:14px;}
  .adv-meta .dot{display:none;}
}