/**
 * blocks.css — Gutenberg block-style variations used by the theme's
 * patterns (patterns/*.php) AND the bespoke scorecard/rankings templates
 * (page-review.php, page-rankings.php reuse the same classes so the
 * editorial "scored comparison table" look is identical everywhere it
 * appears). Loaded on both the front end and the block editor
 * (add_editor_style in functions.php) so authoring matches output.
 */

/* ── Eyebrow / lead / cite paragraph styles ──────────────────────────── */
.bpr-eyebrow{font-family:var(--ff-mono);font-size:var(--fs-xs);font-weight:var(--fw-semibold);text-transform:uppercase;letter-spacing:0.1em;color:var(--clr-accent)}
.bpr-lead{font-size:var(--fs-lg);color:var(--clr-muted)}
.bpr-cite{font-family:var(--ff-mono);font-size:var(--fs-xs);color:var(--clr-dim)}

/* ── Buttons (block editor variants, mirror .btn--accent/.btn--ghost) ── */
.wp-block-button.bpr-btn-accent .wp-block-button__link{background:var(--clr-accent);color:var(--clr-bg)}
.wp-block-button.bpr-btn-accent .wp-block-button__link:hover{background:var(--clr-accent-bright)}
.wp-block-button.bpr-btn-ghost .wp-block-button__link{background:transparent;color:var(--clr-ink);border:1.5px solid var(--clr-border-strong)}
.wp-block-button.bpr-btn-ghost .wp-block-button__link:hover{border-color:var(--clr-accent);color:var(--clr-accent)}

/* ── Callout / verdict box (verdict-box pattern) ─────────────────────── */
.bpr-callout{background:var(--clr-surface-alt);border:1px solid var(--clr-border);border-radius:var(--r-md);padding:var(--sp-6);margin:var(--sp-8) 0}
.bpr-verdict{background:var(--clr-bg);border:1px solid var(--clr-border);border-left:4px solid var(--clr-accent);border-radius:var(--r-md);padding:var(--sp-6) var(--sp-8);margin:var(--sp-8) 0}
.bpr-verdict .bpr-eyebrow{display:block;margin-bottom:var(--sp-2)}
.bpr-verdict > *:last-child{margin-bottom:0}

/* ── Hero CTA band (hero-cta pattern) ─────────────────────────────────── */
.bpr-hero-cta{background:var(--clr-ink);color:var(--clr-paper);border-radius:var(--r-lg);padding:var(--sp-10) var(--sp-8);text-align:center}
.bpr-hero-cta h2{color:var(--clr-bg)}
.bpr-hero-cta p{color:#D9CBE0}
.bpr-hero-cta .bpr-eyebrow{color:var(--clr-accent-bright)}

/* ── Scorecard — six-dimension rubric block (scorecard pattern) ──────── */
.bpr-scorecard{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--sp-6);margin:var(--sp-8) 0}
.bpr-scorecard .wp-block-column,.bpr-scorecard-item{background:var(--clr-bg);border:1px solid var(--clr-border);border-radius:var(--r-md);padding:var(--sp-5) var(--sp-6);position:relative}
.bpr-scorecard-num{font-family:var(--ff-mono);font-size:var(--fs-xs);color:var(--clr-dim);letter-spacing:0.08em}
.bpr-scorecard-weight{font-family:var(--ff-mono);font-size:var(--fs-xs);color:var(--clr-accent);font-weight:var(--fw-semibold);float:right}
.bpr-scorecard-title{font-family:var(--ff-heading);font-size:var(--fs-lg);font-weight:var(--fw-semibold);color:var(--clr-ink);margin:var(--sp-2) 0}
.bpr-scorecard-desc{font-size:var(--fs-sm);color:var(--clr-muted)}
.bpr-scorecard-score{font-family:var(--ff-mono);font-size:var(--fs-2xl);font-weight:var(--fw-bold);color:var(--clr-accent);margin-top:var(--sp-3)}
.bpr-scorecard-score .max{font-size:var(--fs-sm);color:var(--clr-dim);font-weight:var(--fw-regular)}

/* ── Rubric weights — compact weighted-bar list (rubric-weights pattern,
   also used on how-we-test / methodology pages) ──────────────────────── */
.bpr-rubric-weights{margin:var(--sp-8) 0}
.bpr-rubric-row{display:grid;grid-template-columns:220px 1fr 56px;align-items:center;gap:var(--sp-4);padding:var(--sp-3) 0;border-bottom:1px solid var(--clr-border)}
.bpr-rubric-row:last-child{border-bottom:0}
.bpr-rubric-label{font-weight:var(--fw-medium);color:var(--clr-ink);font-size:var(--fs-sm)}
.bpr-rubric-bar{height:8px;background:var(--clr-surface-alt);border:1px solid var(--clr-border);border-radius:var(--r-full);overflow:hidden}
.bpr-rubric-bar__fill{height:100%;background:var(--clr-accent);border-radius:var(--r-full)}
.bpr-rubric-pct{font-family:var(--ff-mono);font-size:var(--fs-xs);color:var(--clr-dim);text-align:right}

/* ── Pros / cons (pros-cons pattern + page-review.php) ───────────────── */
.bpr-pros-cons{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-6);margin:var(--sp-8) 0}
.bpr-pros-cons .wp-block-column,.bpr-pc-col{background:var(--clr-bg);border:1px solid var(--clr-border);border-top:3px solid var(--clr-success);border-radius:var(--r-md);padding:var(--sp-5) var(--sp-6)}
.bpr-pc-col--con{border-top-color:var(--clr-danger)}
.bpr-pc-col h3,.bpr-pc-col h4{margin-top:0;margin-bottom:var(--sp-3);font-size:var(--fs-lg)}
.bpr-pc-col ul{list-style:none;padding:0;margin:0}
.bpr-pc-col li{display:flex;align-items:flex-start;gap:var(--sp-2);padding:var(--sp-1) 0;font-size:var(--fs-sm);margin-bottom:0}
.bpr-pc-check{color:var(--clr-success);font-weight:var(--fw-bold);flex-shrink:0}
.bpr-pc-cross{color:var(--clr-danger);font-weight:var(--fw-bold);flex-shrink:0}

/* ── Comparison table (comparison-table pattern, page-rankings.php) ──── */
.bpr-table table,.ranking-table{width:100%;border-collapse:collapse;font-size:var(--fs-sm)}
.bpr-table thead th,.ranking-table thead th{background:var(--clr-ink);color:var(--clr-bg);text-align:left;padding:var(--sp-3) var(--sp-4);font-family:var(--ff-mono);font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:0.06em;font-weight:var(--fw-semibold);white-space:nowrap}
.bpr-table tbody td,.ranking-table tbody td{padding:var(--sp-3) var(--sp-4);border-bottom:1px solid var(--clr-border);vertical-align:middle}
.bpr-table tbody tr:last-child td,.ranking-table tbody tr:last-child td{border-bottom:0}
.bpr-table tbody tr:nth-child(odd),.ranking-table tbody tr:nth-child(odd){background:var(--clr-surface-alt)}
.ranking-table .rank-num{font-family:var(--ff-heading);font-weight:var(--fw-semibold);color:var(--clr-dim)}
.ranking-table .platform-name{font-weight:var(--fw-semibold);color:var(--clr-ink)}
.ranking-table .platform-name a{color:inherit;text-decoration:none}
.ranking-table .platform-name a:hover{color:var(--clr-accent)}
.score-badge{display:inline-flex;align-items:baseline;gap:2px;font-family:var(--ff-mono);font-weight:var(--fw-bold);color:var(--clr-accent);background:var(--clr-accent-tint);border-radius:var(--r-sm);padding:2px 8px}
.score-badge .max{font-size:var(--fs-xs);color:var(--clr-dim);font-weight:var(--fw-regular)}
.score-dash{color:var(--clr-dim);font-family:var(--ff-mono)}

/* ── Sourced quote — quote requiring source URL + retrieval date
   (sourced-quote pattern). Every platform claim on this site is quoted
   and attributed — this is the editorial contract, not decoration. ──── */
.bpr-sourced-quote{border-left:3px solid var(--clr-accent);padding-left:var(--sp-5);margin:var(--sp-8) 0;font-style:italic;font-size:var(--fs-lg);color:var(--clr-text)}
.bpr-sourced-quote cite,.bpr-quote-source{display:block;margin-top:var(--sp-3);font-style:normal;font-family:var(--ff-mono);font-size:var(--fs-xs);color:var(--clr-dim)}
.bpr-quote-source a{color:var(--clr-dim);text-decoration:underline}

/* ── Checklist (checklist block style) ───────────────────────────────── */
.bpr-checklist{list-style:none;padding:0;margin:var(--sp-6) 0}
.bpr-checklist li{display:flex;align-items:flex-start;gap:var(--sp-2);padding:var(--sp-2) 0;border-bottom:1px dashed var(--clr-border)}
.bpr-checklist li::before{content:"\2713";color:var(--clr-success);font-weight:var(--fw-bold);flex-shrink:0}

/* ── Step list (step-list pattern — numbered process steps) ──────────── */
.bpr-step-list{counter-reset:bpr-step;list-style:none;padding:0;margin:var(--sp-8) 0;display:flex;flex-direction:column;gap:var(--sp-5)}
.bpr-step-list li{counter-increment:bpr-step;display:grid;grid-template-columns:48px 1fr;gap:var(--sp-4);align-items:start}
.bpr-step-list li::before{content:counter(bpr-step,decimal-leading-zero);font-family:var(--ff-mono);font-size:var(--fs-sm);font-weight:var(--fw-bold);color:var(--clr-bg);background:var(--clr-accent);width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center}
.bpr-step-list li p{margin-bottom:0}
.bpr-step-list li strong{display:block;color:var(--clr-ink);margin-bottom:var(--sp-1)}

/* ── Reviewer card (reviewer-card pattern — Our Reviewers page) ──────── */
.bpr-reviewer-card{display:flex;gap:var(--sp-5);align-items:flex-start;background:var(--clr-bg);border:1px solid var(--clr-border);border-radius:var(--r-md);padding:var(--sp-6);margin-bottom:var(--sp-5)}
.bpr-reviewer-card__avatar{width:88px;height:88px;border-radius:50%;overflow:hidden;flex-shrink:0;border:2px solid var(--clr-accent);background:var(--clr-surface-alt)}
.bpr-reviewer-card__avatar img{width:100%;height:100%;object-fit:cover}
.bpr-reviewer-card__name{font-size:var(--fs-lg);margin-bottom:2px}
.bpr-reviewer-card__role{font-family:var(--ff-mono);font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:0.06em;color:var(--clr-accent);font-weight:var(--fw-semibold);margin-bottom:var(--sp-2)}
.bpr-reviewer-card__specialties{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin:var(--sp-2) 0}
.bpr-reviewer-card__specialties span{font-size:var(--fs-xs);background:var(--clr-surface-alt);border:1px solid var(--clr-border);border-radius:var(--r-full);padding:2px 10px;color:var(--clr-muted)}
.bpr-reviewer-card__bio{font-size:var(--fs-sm);color:var(--clr-muted);margin:0}

/* ── FAQ accordion (details/summary, no JS) ──────────────────────────── */
.wp-block-details.bpr-faq-item{background:var(--clr-bg);border:1px solid var(--clr-border);border-radius:var(--r-md);padding:var(--sp-4) var(--sp-5);margin-bottom:var(--sp-3)}
.wp-block-details.bpr-faq-item summary{cursor:pointer;font-weight:var(--fw-semibold);color:var(--clr-ink);list-style:none;display:flex;justify-content:space-between;align-items:center;gap:var(--sp-3)}
.wp-block-details.bpr-faq-item summary::-webkit-details-marker{display:none}
.wp-block-details.bpr-faq-item summary::after{content:"+";font-size:1.3em;color:var(--clr-accent);flex-shrink:0}
.wp-block-details.bpr-faq-item[open] summary::after{content:"\2212"}
.wp-block-details.bpr-faq-item p:last-child{margin-bottom:0}

/* ── Platform review template (page-review.php) ──────────────────────── */
.review-hero{padding:var(--sp-12) 0 var(--sp-8);border-bottom:1px solid var(--clr-border)}
.review-hero__top{display:flex;flex-wrap:wrap;gap:var(--sp-6);align-items:flex-start;justify-content:space-between}
.review-hero__score{background:var(--clr-ink);color:var(--clr-bg);border-radius:var(--r-md);padding:var(--sp-5) var(--sp-6);text-align:center;min-width:150px}
.review-hero__score .score-big{font-family:var(--ff-heading);font-size:var(--fs-4xl);font-weight:var(--fw-bold);color:var(--clr-accent-bright);display:block;line-height:1}
.review-hero__score .score-max{font-family:var(--ff-mono);font-size:var(--fs-xs);color:#D9CBE0;text-transform:uppercase;letter-spacing:0.08em}
.review-hero__score--empty .score-big{color:var(--clr-dim);font-size:var(--fs-xl)}
.review-meta{display:flex;flex-wrap:wrap;gap:var(--sp-2) var(--sp-5);font-size:var(--fs-xs);color:var(--clr-dim);font-family:var(--ff-mono);margin-top:var(--sp-4)}
.review-dims{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--sp-4);margin:var(--sp-8) 0}
.review-dim{background:var(--clr-surface-alt);border:1px solid var(--clr-border);border-radius:var(--r-md);padding:var(--sp-4)}
.review-dim__label{display:flex;justify-content:space-between;font-size:var(--fs-xs);font-weight:var(--fw-semibold);color:var(--clr-ink);margin-bottom:var(--sp-2)}
.review-dim__label span:last-child{font-family:var(--ff-mono);color:var(--clr-accent)}
.review-dim .bpr-rubric-bar{height:6px}
.review-cta{display:flex;gap:var(--sp-3);flex-wrap:wrap;margin-top:var(--sp-6)}
.review-source-note{background:var(--clr-surface-alt);border:1px solid var(--clr-border);border-radius:var(--r-md);padding:var(--sp-5);margin:var(--sp-8) 0;font-size:var(--fs-sm);color:var(--clr-muted)}
.review-source-note a{color:var(--clr-muted)}

@media (max-width:720px){
    .bpr-pros-cons{grid-template-columns:1fr}
    .bpr-rubric-row{grid-template-columns:1fr;gap:var(--sp-1)}
    .bpr-rubric-pct{text-align:left}
    .bpr-reviewer-card{flex-direction:column;align-items:center;text-align:center}
    .review-hero__top{flex-direction:column}
}