/* ==========================================================================
   POST + INNER PAGE STYLES — extends main.css / variables.css
   ========================================================================== */

.breadcrumbs { display:flex; flex-wrap:wrap; gap:0.4rem; align-items:center; font-size:var(--fs-small); color:var(--c-text-faint); padding-block:var(--sp-3); }
.breadcrumbs a { color:var(--c-text-muted); }
.breadcrumbs a:hover { color:var(--c-gold-deep); }
.breadcrumbs .sep { opacity:0.5; }
.breadcrumbs .current { color:var(--c-charcoal); font-weight:600; }

/* ---- Post hero ---- */
.post-hero { padding-block: var(--sp-3) var(--sp-6); }
.post-hero-grid { display:grid; grid-template-columns: 1.05fr 0.95fr; gap: var(--sp-6); align-items:center; }
@media (max-width: 940px){ .post-hero-grid { grid-template-columns:1fr; gap:var(--sp-4); } }
.post-cat-pill { display:inline-flex; align-items:center; gap:0.4rem; background:var(--c-gold-tint-soft); color:var(--c-gold-deep); font-family:var(--f-mono); font-size:var(--fs-micro); letter-spacing:0.06em; text-transform:uppercase; padding:0.35rem 0.8rem; border-radius:var(--radius-pill); font-weight:700; }
.post-title { margin-block: var(--sp-3) var(--sp-3); }
.post-dek { font-size:var(--fs-body-lg); color:var(--c-text-muted); }
.post-meta-row { display:flex; flex-wrap:wrap; gap: var(--sp-4); align-items:center; margin-top: var(--sp-3); padding-top: var(--sp-3); border-top:1px solid var(--c-border); }
.post-meta-item { display:flex; align-items:center; gap:0.5rem; font-size:var(--fs-small); color:var(--c-text-muted); }
.post-meta-item i { color:var(--c-gold); }
.post-cover-frame { position:relative; border-radius:var(--radius-lg); overflow:hidden; box-shadow: var(--shadow-lg); aspect-ratio: 4/3; background: var(--c-paper-deep); }
.post-cover-frame img, .post-cover-frame svg { width:100%; height:100%; object-fit:cover; }
.rating-chip { position:absolute; right:1rem; bottom:1rem; background:rgba(21,24,28,0.88); backdrop-filter: blur(6px); color:#fff; padding:0.6rem 0.9rem; border-radius: var(--radius-md); display:flex; align-items:center; gap:0.5rem; font-family:var(--f-display); font-weight:700; }
.rating-chip i { color: var(--c-gold-bright); }

/* ---- Layout: content + sticky sidebar ---- */
.post-layout { display:grid; grid-template-columns: minmax(0,1fr) 300px; gap: var(--sp-6); align-items:start; }
@media (max-width: 1024px){ .post-layout { grid-template-columns:1fr; } }
.post-sidebar { position:sticky; top: 6.5rem; display:flex; flex-direction:column; gap:1.5rem; }
@media (max-width:1024px){ .post-sidebar{ position:static; } }

.toc-card, .sidebar-card { background:var(--c-card); border:1px solid var(--c-border); border-radius:var(--radius-md); padding: var(--sp-4); box-shadow: var(--shadow-sm); }
.toc-card h4, .sidebar-card h4 { font-size:var(--fs-small); text-transform:uppercase; letter-spacing:0.06em; color:var(--c-text-faint); margin-bottom:0.9rem; }
.toc-card ol { counter-reset:toc; display:flex; flex-direction:column; gap:0.55rem; }
.toc-card li { counter-increment:toc; font-size:var(--fs-small); }
.toc-card a { color:var(--c-text-muted); display:flex; gap:0.5rem; }
.toc-card a::before { content:counter(toc); color:var(--c-gold-deep); font-family:var(--f-mono); font-weight:700; min-width:1.1rem; }
.toc-card a:hover { color:var(--c-charcoal); }
.sidebar-card .btn { width:100%; }
.sidebar-mini-link { display:flex; gap:0.7rem; align-items:flex-start; padding-block:0.55rem; border-top:1px solid var(--c-border); font-size:var(--fs-small); }
.sidebar-mini-link:first-of-type{ border-top:none; }
.sidebar-mini-link img{ width:56px; height:56px; border-radius:10px; object-fit:cover; flex-shrink:0; }
.sidebar-mini-link a{ color:var(--c-text); font-weight:600; line-height:1.3; }

/* ---- Body typography ---- */
.post-body { font-size: var(--fs-body-lg); color:var(--c-text); max-width: 74ch; }
.post-body h2 { font-size:var(--fs-h2); margin-top: var(--sp-6); margin-bottom: var(--sp-3); scroll-margin-top:6rem; }
.post-body h3 { font-size:var(--fs-h3); margin-top: var(--sp-5); margin-bottom: var(--sp-2); scroll-margin-top:6rem; }
.post-body > p { margin-bottom: var(--sp-3); color:var(--c-text); }
.post-body ul.plain-list { display:flex; flex-direction:column; gap:0.5rem; margin: var(--sp-3) 0 var(--sp-4); }
.post-body ul.plain-list li { position:relative; padding-left:1.6rem; color:var(--c-text); }
.post-body ul.plain-list li::before { content:"\f00c"; font-family:"Font Awesome 6 Free"; font-weight:900; position:absolute; left:0; top:0.15em; color:var(--c-gold); font-size:0.8em; }

.callout { display:flex; gap:0.9rem; background: var(--c-gold-tint-soft); border:1px solid var(--c-gold-tint); border-left:4px solid var(--c-gold); border-radius: var(--radius-md); padding: var(--sp-3) var(--sp-4); margin: var(--sp-4) 0; }
.callout i { color:var(--c-gold-deep); font-size:1.2rem; margin-top:0.2rem; }
.callout p { margin:0; color:var(--c-charcoal-soft); }
[data-theme="dark"] .callout { background: rgba(200,152,60,0.1); }

table.post-table { width:100%; border-collapse:collapse; font-size:var(--fs-small); }
table.post-table caption { text-align:left; font-size:var(--fs-micro); color:var(--c-text-faint); margin-bottom:0.5rem; }
table.post-table th, table.post-table td { padding:0.75rem 1rem; border-bottom:1px solid var(--c-border); text-align:left; }
table.post-table thead th { background:var(--c-paper-deep); font-family:var(--f-display); color:var(--c-charcoal); font-size:var(--fs-micro); text-transform:uppercase; letter-spacing:0.05em; }
table.post-table tbody tr:hover { background:var(--c-paper); }
.post-body .table-wrap { margin: var(--sp-4) 0; border:1px solid var(--c-border); border-radius:var(--radius-md); overflow:hidden; }

.key-takeaways { list-style:none; padding:0; margin: var(--sp-3) 0 var(--sp-4); display:flex; flex-direction:column; gap:0.75rem; }
.key-takeaways li { display:flex; gap:0.8rem; background:var(--c-paper); border:1px solid var(--c-border); border-radius:var(--radius-md); padding:0.9rem 1.1rem; }
.key-takeaways i { color:var(--c-pro); margin-top:0.2rem; }
.key-takeaways p { margin:0; color:var(--c-text); }

/* ---- Author box ---- */
.author-box { display:flex; gap:1.1rem; background:var(--c-paper); border:1px solid var(--c-border); border-radius:var(--radius-md); padding: var(--sp-4); margin-top: var(--sp-6); align-items:flex-start; }
.author-box .avatar { width:64px; height:64px; border-radius:50%; background:linear-gradient(135deg,var(--c-gold),var(--c-gold-deep)); color:#fff; display:flex; align-items:center; justify-content:center; font-family:var(--f-display); font-weight:800; font-size:1.3rem; flex-shrink:0; }
.author-box h4 { margin-bottom:0.25rem; }
.author-box p { margin:0; font-size:var(--fs-small); }

/* ---- Share row ---- */
.share-row { display:flex; align-items:center; gap:0.6rem; margin-top: var(--sp-4); }
.share-row span { font-size:var(--fs-small); color:var(--c-text-faint); margin-right:0.3rem; }
.share-row a { width:38px; height:38px; border-radius:50%; border:1px solid var(--c-border-strong); display:flex; align-items:center; justify-content:center; color:var(--c-charcoal-soft); transition: all var(--dur-fast) var(--ease); }
.share-row a:hover { background:var(--c-charcoal); color:#fff; border-color:var(--c-charcoal); }

/* ---- External sources ---- */
.sources-list { display:flex; flex-wrap:wrap; gap:0.6rem; margin-top:0.75rem; }
.sources-list span { background:var(--c-paper); border:1px solid var(--c-border); border-radius:var(--radius-pill); padding:0.35rem 0.9rem; font-size:var(--fs-small); color:var(--c-text-muted); }

/* ---- Related posts ---- */
.related-section { margin-top: var(--sp-7); }

/* ---- Comments (design only) ---- */
.comment-form { display:flex; flex-direction:column; gap:0.8rem; background:var(--c-paper); border:1px solid var(--c-border); border-radius:var(--radius-md); padding:var(--sp-4); }
.comment-form textarea, .comment-form input { width:100%; padding:0.8rem 1rem; border:1px solid var(--c-border-strong); border-radius:var(--radius-sm); background:var(--c-card); font-family:var(--f-body); }
.comment-form textarea { min-height:110px; resize:vertical; }
.comment-list { display:flex; flex-direction:column; gap:1.25rem; margin-bottom:var(--sp-4); }
.comment { display:flex; gap:0.9rem; }
.comment .avatar { width:44px; height:44px; border-radius:50%; background:var(--c-charcoal-soft); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; flex-shrink:0; font-size:0.85rem; }
.comment .bubble { background:var(--c-paper); border:1px solid var(--c-border); border-radius:var(--radius-md); padding:0.9rem 1.1rem; flex:1; }
.comment .bubble strong { font-family:var(--f-display); }
.comment .bubble small { color:var(--c-text-faint); margin-left:0.5rem; }
.comment .bubble p { margin-top:0.35rem; margin-bottom:0; font-size:var(--fs-small); }

/* ---- Pros / Cons ---- */
.pros-cons { display:grid; grid-template-columns:1fr 1fr; gap:1.25rem; margin: var(--sp-4) 0; }
@media (max-width:640px){ .pros-cons{ grid-template-columns:1fr; } }
.pc-card { border-radius: var(--radius-md); padding: var(--sp-4); }
.pc-card.pro { background: var(--c-pro-tint); }
.pc-card.con { background: var(--c-con-tint); }
.pc-card h4 { display:flex; align-items:center; gap:0.5rem; margin-bottom:0.7rem; }
.pc-card.pro h4 { color:var(--c-pro); }
.pc-card.con h4 { color:var(--c-con); }
.pc-card ul { display:flex; flex-direction:column; gap:0.5rem; }
.pc-card li { padding-left:1.4rem; position:relative; font-size:var(--fs-small); color:var(--c-charcoal-soft); }
.pc-card.pro li::before { content:"\f00c"; font-family:"Font Awesome 6 Free"; font-weight:900; position:absolute; left:0; color:var(--c-pro); }
.pc-card.con li::before { content:"\f00d"; font-family:"Font Awesome 6 Free"; font-weight:900; position:absolute; left:0; color:var(--c-con); }

/* ---- Generic inner-page hero (about/contact/policy pages) ---- */
.page-hero { background: linear-gradient(180deg, var(--c-paper) 0%, var(--c-bg) 100%); padding-block: var(--sp-6) var(--sp-5); text-align:center; }
.page-hero .eyebrow { justify-content:center; }
.page-hero h1 { margin-block:0.6rem; }
.page-hero p { max-width:60ch; margin-inline:auto; }
.prose { max-width: 74ch; margin-inline:auto; font-size: var(--fs-body-lg); }
.prose h2 { margin-top: var(--sp-6); margin-bottom: var(--sp-3); }
.prose h3 { margin-top: var(--sp-4); margin-bottom: var(--sp-2); }
.prose p { margin-bottom: var(--sp-3); }
.prose ul { display:flex; flex-direction:column; gap:0.5rem; margin: var(--sp-3) 0 var(--sp-4) 1.2rem; list-style:disc; }
.prose li { color:var(--c-text); }
.prose a { color:var(--c-gold-deep); text-decoration:underline; text-underline-offset:2px; }

/* ---- Contact / forms ---- */
.contact-grid { display:grid; grid-template-columns: 1fr 1fr; gap: var(--sp-6); }
@media (max-width:900px){ .contact-grid{ grid-template-columns:1fr; } }
.contact-form { display:flex; flex-direction:column; gap:1rem; }
.form-row { display:flex; flex-direction:column; gap:0.4rem; }
.form-row label { font-size:var(--fs-small); font-weight:600; color:var(--c-charcoal-soft); }
.form-row input, .form-row select, .form-row textarea { padding:0.85rem 1rem; border:1px solid var(--c-border-strong); border-radius:var(--radius-sm); background:var(--c-card); font-family:var(--f-body); font-size:var(--fs-body); }
.form-row textarea { min-height:150px; resize:vertical; }
.contact-info-card { background:var(--c-charcoal); color:var(--c-text-on-dark); border-radius: var(--radius-lg); padding: var(--sp-5); }
.contact-info-card h3{ color:#fff; }
.contact-info-item { display:flex; gap:0.9rem; align-items:flex-start; padding-block:1rem; border-top:1px solid rgba(255,255,255,0.12); }
.contact-info-item:first-of-type{ border-top:none; padding-top:0; }
.contact-info-item i { color:var(--c-gold-bright); width:20px; margin-top:0.2rem; }
.contact-info-item strong{ display:block; color:#fff; }
.contact-info-item span, .contact-info-item p{ color:var(--c-text-on-dark-muted); font-size:var(--fs-small); margin:0; }

/* ---- Search page ---- */
.search-hero-box { max-width:640px; margin-inline:auto; }
.search-hero-box .hero-search { width:100%; }
.filter-chip-row { display:flex; gap:0.6rem; flex-wrap:wrap; justify-content:center; margin-top:1.2rem; }

/* ---- 404 ---- */
.error-page { text-align:center; padding-block: var(--sp-8) var(--sp-7); }
.error-code { font-family:var(--f-display); font-weight:800; font-size:clamp(4rem,14vw,9rem); color:var(--c-gold); line-height:1; letter-spacing:-0.03em; }
.error-page .gauge { margin-inline:auto; }

/* ---- Author page ---- */
.author-hero-avatar { width:120px; height:120px; border-radius:50%; margin-inline:auto; background:linear-gradient(135deg,var(--c-gold),var(--c-gold-deep)); display:flex; align-items:center; justify-content:center; color:#fff; font-family:var(--f-display); font-weight:800; font-size:2.2rem; }
.stat-strip { display:flex; justify-content:center; gap: var(--sp-6); margin-block: var(--sp-4); flex-wrap:wrap; }
.stat-strip .trust-item{ text-align:center; }

/* ---- Sitemap ---- */
.sitemap-grid { display:grid; grid-template-columns:repeat(3,1fr); gap: var(--sp-5); }
@media (max-width:820px){ .sitemap-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .sitemap-grid{ grid-template-columns:1fr; } }
.sitemap-col h4 { margin-bottom:0.9rem; }
.sitemap-col ul { display:flex; flex-direction:column; gap:0.55rem; }
.sitemap-col a { color:var(--c-text-muted); font-size:var(--fs-small); }
.sitemap-col a:hover { color:var(--c-gold-deep); }

/* ---- Category filter bar (listing pages) ---- */
.filter-bar { display:flex; flex-wrap:wrap; gap:0.6rem; margin-bottom: var(--sp-5); }
.filter-bar a.chip.is-active, .filter-bar a.chip:hover { background:var(--c-charcoal); color:#fff; }
.filter-bar a.chip { display:inline-flex; }

/* ---- Brand anchor cards ---- */
.brand-anchor-card { scroll-margin-top:6rem; background:var(--c-card); border:1px solid var(--c-border); border-radius:var(--radius-md); padding:var(--sp-5); margin-bottom:var(--sp-5); box-shadow:var(--shadow-sm); }
.brand-anchor-card h2 { display:flex; align-items:center; gap:0.7rem; }