/*
 * Review pages: single template and the evidence blocks (hb/verdict, hb/test-summary,
 * hb/spec-vs-measured, hb/measurement-table, hb/fit, hb/limits, hb/tester-card, hb/changelog,
 * hb/faq, hb/buy-box, hb/decision-factors, hb/rivals, hb/previous-model, hb/sources, hb/how-made).
 * Ported from the review prototypes (review-technical.html, review-mixer.html).
 * Shared components (.badge, .byline, .page-head, .split, .side, .prose, tables, .delta) live in site.css.
 */

/* ---------- Template: head, byline, hero ---------- */
.review-page .page-head .post-cat{font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase}
.review-page .page-head .post-cat a{color:var(--accent)}
.review-page .page-head > *{margin-block:0}
.byline .by::before{content:"By ";font-weight:300;color:var(--muted)}
:root[data-proof="method"] .byline .by::before{content:"Von "}
.byline .updated::before{content:"Updated ";color:var(--muted)}
:root[data-proof="method"] .byline .updated::before{content:"Aktualisiert "}
.byline .wp-block-post-author-name a{color:var(--ink);font-weight:500}
.wp-block-post-featured-image.hero-img{margin:0 0 8px;overflow:hidden}
.hero-img img{display:block;width:100%;height:100%;object-fit:cover;border-radius:var(--radius)}
.review-body > .hb-badge-wrap{margin-top:0}
.award{font-family:var(--f-display);font-style:italic;font-size:16px;color:var(--accent)}

/* ---------- Split: main column plus sticky sidebar ---------- */
/* Groups use flow layout; their children get block-gap margins from WordPress. The grids below set the gaps instead. */
.wp-block-group.split > *,.wp-block-group.main > *,.wp-block-group.side > *,.wp-block-group.evidence > *,.wp-block-group.blk-head > *,.wp-block-group.notebook > *{margin-block:0}
.split > .main{display:grid;gap:44px;min-width:0}
.split .prose{margin-block:0}
.split .prose > *{margin-block:0}

/* ---------- Shared block chrome ---------- */
.blk{min-width:0}
.blk-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px 16px;margin-bottom:14px}
.blk-head h2{font-size:28px}
.evidence .blk-head h2{font-size:24px}
.blk-note{font-size:13px;color:var(--muted)}
.rule{border-top:2px solid var(--ink);padding-top:16px}

/* ---------- Verdict ---------- */
.verdict{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:28px;display:grid;gap:22px}
@media (max-width:600px){.verdict{padding:20px}}
.v-top{display:grid;grid-template-columns:auto minmax(0,1fr);gap:24px;align-items:center}
.verdict .score{width:110px;height:110px}
.verdict .score::before{inset:8px}
.verdict .score span{font-size:38px}
@media (max-width:520px){.v-top{grid-template-columns:1fr}.verdict .score{width:88px;height:88px}.verdict .score span{font-size:30px}}
.v-top h2{font-size:30px;margin:6px 0 8px}
.v-top p{font-size:17px;max-width:56ch}
.crit{display:grid;gap:10px}
.crit-row{display:grid;grid-template-columns:minmax(0,170px) minmax(0,1fr) 36px;gap:14px;align-items:center;font-size:15px}
.bar{height:6px;border-radius:3px;background:var(--line);overflow:hidden}
.bar i{display:block;height:100%;background:var(--accent);border-radius:3px}
.crit-row b{font-family:var(--f-display);font-weight:400;font-size:18px;text-align:right}
.pc{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
@media (max-width:600px){.pc{grid-template-columns:1fr}.crit-row{grid-template-columns:minmax(0,120px) minmax(0,1fr) 32px}}
.pc h3{font-family:var(--f-body);font-size:14px;font-weight:500;margin-bottom:8px}
.pc ul{margin:0;padding-left:18px;display:grid;gap:6px;font-size:15px}
.own{border-top:1px solid var(--line);padding-top:16px;font-size:15px}
.own .hand{font-size:20px;margin-right:6px}

/* ---------- Evidence band: test summary, spec versus measured, measurement table ---------- */
.evidence{display:grid;gap:44px;padding:32px;border-radius:var(--radius);background:var(--pop-soft)}
@media (max-width:600px){.evidence{padding:20px}}
.ev-intro{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 16px;margin-bottom:20px}
.ev-intro h2{font-size:30px}
.facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
@media (max-width:760px){.facts{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* site.css .fact is the homepage proof strip; the review fact is a card */
.facts .fact{background:var(--surface);border-radius:var(--radius);border-left:0;padding:16px;display:grid;gap:4px;align-content:start}
.facts .fact span{font-size:13px;color:var(--muted)}
.facts .fact b{font-family:var(--f-display);font-weight:400;font-size:30px;line-height:1.1;font-variant-numeric:lining-nums}
.facts .fact small{font-size:13px;color:var(--muted)}
.instr{font-size:14px;color:var(--muted);margin-top:12px}
.instr b{color:var(--ink)}
.instr b:not(:first-child){margin-left:6px}
.evidence .tablewrap{border:0}
.evidence table{min-width:560px}
td.num{font-variant-numeric:tabular-nums lining-nums;white-space:nowrap}
.delta{white-space:nowrap}
.delta.same{color:var(--muted)}

/* ---------- Specifications (core table with class "specs") ---------- */
.wp-block-table.specs{margin:0;overflow-x:auto;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius)}
.wp-block-table.specs table{min-width:0;border:0}
.wp-block-table.specs td{border:0;border-bottom:1px solid var(--line)}
.wp-block-table.specs tr:last-child td{border-bottom:0}
.specs td:first-child{color:var(--muted);width:40%}

/* ---------- Fit, limits, tester, changelog, FAQ ---------- */
.fit{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
@media (max-width:600px){.fit{grid-template-columns:1fr}}
.fit h3{font-family:var(--f-body);font-size:15px;font-weight:500;margin-bottom:8px}
.fit ul,.limits ul{margin:0;padding-left:18px;display:grid;gap:8px;font-size:16px}
.limits{border-left:3px solid var(--star);padding-left:20px}
.tester{display:grid;grid-template-columns:88px minmax(0,1fr);gap:20px;align-items:start;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:20px}
@media (max-width:420px){.tester{grid-template-columns:64px minmax(0,1fr);gap:14px}.tester .img{width:64px;height:64px}}
.tester .img{display:block;width:88px;height:88px;border-radius:50%;background:var(--line);object-fit:cover}
.tester h3{font-size:22px}
.tester p{font-size:15px;color:var(--muted);margin-top:4px}
.tester-facts{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:2px;font-size:14px;color:var(--muted)}
.tester-facts b{color:var(--ink);font-weight:500}
.tester .links{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:14px;margin-top:8px}
.tester .links a{color:var(--accent);font-weight:500}
.log{list-style:none;margin:0;padding:0;display:grid}
.log li{display:grid;grid-template-columns:110px minmax(0,1fr);gap:16px;padding-block:12px;border-top:1px solid var(--line);font-size:15px}
.log time{color:var(--muted);font-variant-numeric:tabular-nums}
.faq details{border-top:1px solid var(--line);padding-block:14px}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;font-weight:500;font-size:17px}
.faq details p{margin-top:8px;color:var(--muted);font-size:16px}

/* ---------- Decision factors, rivals, previous model, sources, how we made this (Google review guidance) ---------- */
/* Ported from review-mixer.html. .bar comes from the verdict section above. */
.factors{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
@media (max-width:640px){.factors{grid-template-columns:1fr}}
.factor{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;display:grid;gap:6px;align-content:start}
.factor-top{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.factor h3{font-family:var(--f-body);font-size:16px;font-weight:500}
.factor .res{font-family:var(--f-display);font-size:20px;white-space:nowrap}
.factor p{font-size:15px;color:var(--muted)}
.compare tr.me td{background:var(--pop-soft)}
.compare tr.me td:first-child{font-weight:500}
.compare td a{color:var(--accent);font-weight:500}
.prev-intro{font-size:16px;margin:0 0 14px;max-width:65ch}
.prev{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
@media (max-width:640px){.prev{grid-template-columns:1fr}}
.prev div{border-top:2px solid var(--line);padding-top:10px;display:grid;gap:4px}
.prev b{font-size:15px}
.prev span{font-size:15px;color:var(--muted)}
.sources{margin:0;padding-left:18px;display:grid;gap:8px;font-size:15px}
.sources a{color:var(--accent);font-weight:500}
.howmade{border:1px solid var(--line);border-left:3px solid var(--pop);background:var(--surface);border-radius:var(--radius);padding:14px 18px;display:grid;gap:6px;font-size:15px;line-height:1.55}
.howmade > *{margin-block:0}
.howmade h3{font-family:var(--f-body);font-size:14px;font-weight:600;letter-spacing:.02em}
.howmade a{color:var(--accent);font-weight:500}

/* ---------- Sidebar: buy box and notebook ---------- */
.buy{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:18px;display:grid;gap:10px}
.buy h3{font-family:var(--f-body);font-size:14px;font-weight:500}
.retailer{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 12px;align-items:center;padding-block:8px;border-top:1px solid var(--line);font-size:15px}
.retailer .price{font-family:var(--f-display);font-size:20px}
.retailer a{grid-column:1/-1;justify-self:start;color:var(--accent);font-size:12px;font-weight:500;letter-spacing:.1em;text-transform:uppercase}
.buy .screen-reader-text{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.notebook{background-color:var(--surface);border:1px solid var(--line);padding:16px 20px 4px;transform:rotate(-.6deg);background-image:repeating-linear-gradient(transparent 0 29px,var(--line) 29px 30px);background-position:0 42px}
.notebook .nb-title{font-family:var(--f-body);font-size:13px;font-weight:500;line-height:1.4;color:var(--muted);display:block;margin-bottom:8px}
.notebook p{font-family:var(--f-hand);font-weight:300;font-size:16px;line-height:30px;color:var(--ink)}
@media (max-width:960px){.notebook{transform:none}}

/* ---------- Post body: one spacing scale, full-width images, one table style ---------- */
/* Articles (no .split layout) read in a 720px column with even spacing, so writers never need Spacer blocks.
   Reviews built on the split layout keep the full width; the split grid sets their gaps. */
.review-page .review-body:not(:has(> .alignwide, > .alignfull, > .split)){max-width:720px}
.review-page .review-body > *{margin-block:0}
.review-page .review-body > * + *{margin-top:1.25rem}
.review-page .review-body > h2{margin-top:2.75rem}
.review-page .review-body > h3{margin-top:2rem}
.review-page .review-body > h2 + *,.review-page .review-body > h3 + *{margin-top:.75rem}
.review-page .review-body > :is(figure,.wp-block-image,.wp-block-gallery,.wp-block-table){margin-top:2rem;margin-bottom:.75rem}
.review-page .review-body > .wp-block-spacer{display:none}
/* Images: full column width at their natural height, so product shots, charts and screenshots are never cropped.
   Ignores the editor's size, resize handles and left/right/wide alignment. Image-with-buy-button frames keep their own styles. */
.review-page .review-body .wp-block-image:not(.has-buy){width:100%!important;max-width:100%!important;float:none!important;margin-left:0!important;margin-right:0!important}
.review-page .review-body .wp-block-image:not(.has-buy) img{display:block;width:100%!important;max-width:100%!important;height:auto!important;border-radius:var(--radius)}
.review-page .review-body .wp-block-image figcaption{margin-top:.5rem;font-size:14px;color:var(--muted);text-align:left}
/* Tables (core Table block, not the .specs table): full width, quiet rules, scroll sideways on phones */
.review-page .review-body .wp-block-table:not(.specs){overflow-x:auto;width:100%;margin-left:0;margin-right:0}
.review-page .review-body .wp-block-table:not(.specs) table{width:100%;border-collapse:collapse;font-size:15px;line-height:1.45;font-variant-numeric:tabular-nums}
.review-page .review-body .wp-block-table:not(.specs) thead{border-bottom:0}
.review-page .review-body .wp-block-table:not(.specs) :is(th,td){border:0;border-bottom:1px solid var(--line);padding:10px 12px;text-align:left;vertical-align:top}
.review-page .review-body .wp-block-table:not(.specs) thead th{border-bottom:2px solid var(--ink);font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.review-page .review-body .wp-block-table figcaption{margin-top:.5rem;font-size:14px;color:var(--muted);text-align:left}

/* ---------- Editor only ---------- */
.hb-editor-block .verdict,.hb-editor-block .buy{margin:0}

/* ---------- Post and page patterns (patterns/post-*.php, page-how-we-test.php) ---------- */
/* Best of: "If you only buy three" and the list picks */
.review-body .top-three{gap:20px;align-items:stretch}
.review-body .top-pick{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;display:grid;gap:8px;align-content:start}
.review-body .top-pick h3{font-size:20px;margin:0}
.review-body .top-pick p{font-size:15px;margin:0}
.review-body .top-pick .wp-block-image{margin:0}
.review-body .section-intro{color:var(--muted);margin-top:.25rem}
.review-body .list-pick{border-top:1px solid var(--line);padding-top:1.25rem;display:grid;gap:.75rem}
.review-body .list-pick h3{margin:0}
.review-body .list-pick .hb-badge,.review-body .list-pick .badge{justify-self:start}
/* Pull quote, used in best-of lists, articles and long reads */
.review-body .wp-block-quote.pull{border:0;border-left:3px solid var(--pop);padding:4px 0 4px 22px;margin-block:2rem}
.review-body .wp-block-quote.pull p{font-family:var(--f-display);font-size:clamp(22px,2.6vw,28px);line-height:1.3;color:var(--ink)}
/* Article: "In short" box and an optional pick */
.review-body .in-short,.review-body .article-pick{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:16px 20px;display:grid;gap:8px}
.review-body .in-short h3{font-family:var(--f-body);font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:0}
.review-body .in-short ul{margin:0;padding-left:1.1em;display:grid;gap:4px}
.review-body .article-pick{border-left:3px solid var(--pop)}
.review-body .article-pick .wp-block-image{max-width:220px;margin:0}

/* The long read: one wide column, larger type, drop cap (body.kind-long-read is set from the Content type) */
.kind-long-read .review-body{max-width:740px;margin-inline:auto;font-size:20px;line-height:1.8}
.kind-long-read .review-body > p.lede{font-size:23px;line-height:1.5}
.kind-long-read .review-body > h2{font-size:34px}
.kind-long-read .review-body > p.lede ~ p:not(.lede):not(p.lede ~ p ~ p)::first-letter{font-family:var(--f-display);float:left;font-size:84px;line-height:.85;padding:8px 12px 0 0;color:var(--accent)}
.kind-long-read .review-body > .alignwide{max-width:none;margin-inline:-120px}
@media (max-width:1000px){.kind-long-read .review-body > .alignwide{margin-inline:0}}
.kind-long-read .review-body .wp-block-quote.pull p{font-size:clamp(26px,3vw,32px)}
.kind-long-read .review-body .lr-end{border-top:1px solid var(--line);padding-top:24px;margin-top:2rem}

/* How we test page */
.rule-q{font-family:var(--f-display);font-size:clamp(24px,3vw,36px);line-height:1.25;max-width:28ch;border-left:3px solid var(--pop);padding-left:24px}
.badges3{gap:20px}
.badges3 > .wp-block-column{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px;display:grid;gap:8px;align-content:start}
.badges3 p{font-size:15px;margin:0}
ol.process{list-style:none;padding:0;counter-reset:s;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
@media (max-width:860px){ol.process{grid-template-columns:1fr}}
ol.process li{counter-increment:s;display:grid;gap:6px;border-top:1px solid var(--line);padding-top:14px;font-size:15px;color:var(--muted)}
ol.process li::before{content:counter(s);font-family:var(--f-display);font-size:34px;line-height:1;color:var(--accent)}
ol.process li strong{display:block;font-size:17px;color:var(--ink)}
.ethics{gap:24px 40px}
.ethics h3{font-family:var(--f-body);font-size:16px;font-weight:600;margin:0 0 6px}
.ethics p{font-size:16px}