/* Blog + Article styles, layered on styles.css */

/* ---------- Blog index ---------- */
.blog-hero { padding: 64px 0 28px; text-align:center; }
.blog-hero h1 { font-size: clamp(34px,5vw,56px); }
.blog-hero p { color: var(--ink-soft); font-size:19px; max-width:600px; margin:14px auto 0; }

.post-grid { display:grid; grid-template-columns: repeat(3,1fr); gap:26px; padding-bottom:90px; }
.post-card { background:var(--card); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-sm); transition:transform .2s ease, box-shadow .2s ease; display:flex; flex-direction:column; }
.post-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-md); }
.post-thumb { aspect-ratio:16/10; background:linear-gradient(150deg,var(--plum-tint),var(--rose-soft)); display:grid; place-items:center; font-family:var(--serif); font-size:40px; color:var(--plum); }
.post-thumb.t2 { background:linear-gradient(150deg,var(--sage-soft),var(--cream-deep)); color:var(--sage); }
.post-thumb.t3 { background:linear-gradient(150deg,var(--blush),var(--plum-tint)); color:var(--rose); }
.post-body { padding:22px 22px 26px; display:flex; flex-direction:column; flex:1; }
.post-body .cat { font-size:12px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--plum); }
.post-body h3 { font-size:21px; margin:8px 0 8px; line-height:1.2; }
.post-body p { color:var(--ink-soft); font-size:15px; margin:0 0 16px; flex:1; }
.post-body .meta { font-size:13px; color:var(--ink-faint); }
.featured { grid-column: 1 / -1; display:grid; grid-template-columns:1.1fr 1fr; }
.featured .post-thumb { aspect-ratio:auto; min-height:320px; font-size:64px; }
.featured .post-body { padding:44px; }
.featured h3 { font-size:32px; }

/* ---------- Article ---------- */
.article-head { padding: 14px 0 8px; }
.crumbs { font-size:14px; color:var(--ink-faint); margin-bottom:16px; }
.crumbs a { color:var(--ink-soft); }
.article-head .cat { font-size:13px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--plum); }
.article-head h1 { font-size: clamp(34px,5vw,56px); line-height:1.08; margin:14px 0 18px; max-width:880px; }
.article-head .dek { font-size:21px; color:var(--ink-soft); max-width:760px; line-height:1.5; }
.byline { display:flex; align-items:center; gap:14px; margin-top:28px; padding-top:24px; border-top:1px solid var(--line); }
.byline .av { width:46px;height:46px;border-radius:50%;background:linear-gradient(145deg,var(--plum),var(--rose));display:grid;place-items:center;color:#fff;font-family:var(--serif);font-size:18px; }
.byline b { font-size:15px; }
.byline span { font-size:13px; color:var(--ink-faint); display:block; }

.article-hero-img { margin:36px 0 8px; }
figure { margin:40px 0; }
figure img { width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; display:block; border-radius:var(--radius); box-shadow:var(--shadow-md); }
figcaption { font-size:13px; color:var(--ink-faint); text-align:center; margin-top:12px; font-style:italic; }

/* placeholder while Higgsfield images load in */
.img-slot { width:100%; aspect-ratio:16/9; border-radius:var(--radius); display:grid; place-items:center; text-align:center; color:var(--plum); background:linear-gradient(150deg,var(--plum-tint),var(--rose-soft)); border:1px dashed rgba(108,74,115,.35); box-shadow:var(--shadow-sm); }
.img-slot.s2 { background:linear-gradient(150deg,var(--sage-soft),var(--cream-deep)); color:var(--sage); }
.img-slot.s3 { background:linear-gradient(150deg,var(--blush),var(--plum-tint)); color:var(--rose); }
.img-slot.s4 { background:linear-gradient(150deg,var(--cream-deep),var(--plum-tint)); color:var(--plum); }
.img-slot .ph-label { font-family:var(--sans); font-size:13px; font-weight:600; letter-spacing:.04em; opacity:.85; padding:0 24px; }
.img-slot .ph-icon { font-size:40px; margin-bottom:8px; }

.article-body { max-width:760px; margin:0 auto; }
.article-body h2 { font-size: clamp(26px,3.4vw,36px); margin:52px 0 18px; }
.article-body h3 { font-size: 24px; margin:40px 0 14px; }
.article-body p { font-size:18.5px; line-height:1.72; color:#37303D; margin:0 0 22px; }
.article-body ul, .article-body ol { font-size:18.5px; line-height:1.7; color:#37303D; padding-left:24px; margin:0 0 24px; }
.article-body li { margin-bottom:10px; }
.article-body strong { color:var(--ink); }
.article-body a { text-decoration:underline; text-underline-offset:3px; }
.article-body blockquote { margin:34px 0; padding:22px 28px; background:var(--cream-soft); border-left:4px solid var(--plum); border-radius:0 14px 14px 0; font-family:var(--serif); font-size:22px; line-height:1.5; color:var(--plum-deep); }
.article-body blockquote p { margin:0; font-size:22px; color:var(--plum-deep); }

.lead { font-size:21px !important; color:var(--ink-soft) !important; line-height:1.6 !important; }

/* TOC */
.toc { background:var(--cream-soft); border:1px solid var(--line); border-radius:var(--radius); padding:26px 30px; margin:40px 0; }
.toc h4 { font-family:var(--sans); font-size:13px; letter-spacing:.1em; text-transform:uppercase; color:var(--plum); margin:0 0 14px; }
.toc ol { margin:0; padding-left:20px; columns:2; column-gap:30px; }
.toc li { font-size:15px; margin-bottom:9px; }
.toc a { color:var(--ink-soft); text-decoration:none; }
.toc a:hover { color:var(--plum); }

/* Comparison table */
.table-wrap { overflow-x:auto; margin:34px 0; border:1px solid var(--line); border-radius:var(--radius); }
table.cmp { width:100%; border-collapse:collapse; font-size:15px; min-width:620px; }
table.cmp th, table.cmp td { padding:14px 16px; text-align:left; border-bottom:1px solid var(--line); }
table.cmp thead th { background:var(--plum); color:#fff; font-family:var(--sans); font-weight:600; font-size:14px; }
table.cmp thead th:first-child { background:var(--plum-deep); }
table.cmp tbody tr:nth-child(even) { background:var(--cream-soft); }
table.cmp td.yes { color:var(--sage); font-weight:600; }
table.cmp td.no { color:var(--rose); font-weight:600; }
table.cmp td:first-child { font-weight:600; color:var(--ink); }
table.cmp .vyve-col { background:var(--plum-tint); }

/* key takeaway box */
.takeaway { background:linear-gradient(160deg,var(--plum-tint),var(--cream-soft)); border:1px solid var(--line); border-radius:var(--radius); padding:26px 30px; margin:34px 0; }
.takeaway h4 { font-family:var(--sans); font-size:13px; letter-spacing:.1em; text-transform:uppercase; color:var(--plum); margin:0 0 10px; }
.takeaway p { margin:0 !important; font-size:17px !important; }

/* author bio */
.author-box { display:flex; gap:18px; align-items:flex-start; background:var(--cream-soft); border:1px solid var(--line); border-radius:var(--radius); padding:26px 28px; margin:50px 0; }
.author-box .av { width:60px;height:60px;border-radius:50%;background:linear-gradient(145deg,var(--plum),var(--rose));display:grid;place-items:center;color:#fff;font-family:var(--serif);font-size:24px;flex-shrink:0; }
.author-box b { font-size:16px; }
.author-box p { font-size:15px !important; color:var(--ink-soft) !important; margin:6px 0 0 !important; }

/* CTA inside article */
.inline-cta { background:linear-gradient(160deg,var(--plum-deep),var(--plum)); color:#fff; border-radius:var(--radius-lg); padding:40px; margin:50px 0; text-align:center; }
.inline-cta h3 { color:#fff; font-size:28px; }
.inline-cta p { color:rgba(255,255,255,.85) !important; font-size:17px !important; margin:10px 0 22px !important; }

@media (max-width:920px){
  .post-grid{grid-template-columns:1fr;}
  .featured{grid-template-columns:1fr;}
  .featured .post-body{padding:30px;}
  .toc ol{columns:1;}
}

/* ============================================================
   Flo-style reading layout: sticky TOC rail, progress bar,
   trust badges, related posts. Added v3.
   ============================================================ */

/* reading progress bar under the sticky nav */
.read-progress{position:fixed;top:0;left:0;height:3px;width:0;z-index:60;
  background:linear-gradient(90deg,var(--plum),var(--rose));box-shadow:0 0 8px rgba(108,74,115,.4);transition:width .08s linear;}

/* trust badge row (injected under byline) */
.trust-row{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0 0;}
.trust-row .tb{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;
  color:var(--plum-deep);background:var(--plum-tint);border:1px solid var(--line);
  padding:6px 12px;border-radius:999px;}
.trust-row .tb.sage{color:#5f7a5c;background:var(--sage-soft);}
.trust-row .tb.rose{color:#b5524c;background:var(--rose-soft);}

/* sticky table-of-contents rail (desktop only) */
.toc-rail{position:fixed;top:108px;width:212px;max-height:calc(100vh - 150px);overflow-y:auto;
  display:none;padding-right:8px;z-index:20;}
.toc-rail h4{font-family:var(--sans);font-size:11px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--plum);margin:0 0 14px;}
.toc-rail ul{list-style:none;margin:0;padding:0;}
.toc-rail li{margin:0;}
.toc-rail a{display:block;font-size:13px;line-height:1.35;color:var(--ink-faint);text-decoration:none;
  padding:7px 0 7px 15px;border-left:2px solid var(--line);transition:color .15s ease,border-color .15s ease;}
.toc-rail a:hover{color:var(--plum);}
.toc-rail a.active{color:var(--plum-deep);border-left-color:var(--plum);font-weight:600;}
.toc-rail::-webkit-scrollbar{width:5px;}
.toc-rail::-webkit-scrollbar-thumb{background:var(--line);border-radius:9px;}

@media(min-width:1200px){
  .toc-rail{display:block;left:calc(50% - 600px);}
  .article-body > .toc{display:none;} /* rail replaces the inline TOC on desktop */
}

/* related / keep reading */
.related{background:var(--cream-soft);border-top:1px solid var(--line);padding:64px 0;}
.related h2{font-size:clamp(24px,3vw,32px);text-align:center;margin:0 0 36px;}
.related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.related-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;box-shadow:var(--shadow-sm);transition:transform .2s ease,box-shadow .2s ease;
  display:flex;flex-direction:column;text-decoration:none;}
.related-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);}
.related-card .rc-top{aspect-ratio:16/9;display:grid;place-items:center;font-size:34px;
  background:linear-gradient(150deg,var(--plum-tint),var(--rose-soft));}
.related-card .rc-top.t2{background:linear-gradient(150deg,var(--sage-soft),var(--cream-deep));}
.related-card .rc-top.t3{background:linear-gradient(150deg,var(--blush),var(--plum-tint));}
.related-card .rc-body{padding:18px 20px 22px;}
.related-card .rc-cat{font-size:11px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--plum);}
.related-card h3{font-size:17px;line-height:1.25;margin:8px 0 0;color:var(--ink);}
@media(max-width:820px){.related-grid{grid-template-columns:1fr;}}

/* blog card featured images (v6) */
.post-thumb{position:relative;}
.post-thumb > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;}