/*
|--------------------------------------------------------------------------
| Blog — built on the site design tokens from front.css (navy / teal / blue,
| Manrope headings, Inter body) and the homepage patterns: centered hero with
| a pill tag, grey section bands, bordered cards with a teal hover, navy CTA band.
| Loaded only by the blog templates.
|--------------------------------------------------------------------------
*/

/* ---------- Shared ---------- */
.breadcrumbs{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px; font-size:13.5px; color:var(--muted); }
.breadcrumbs a:hover{ color:var(--teal-dark); }
.breadcrumbs .sep{ color:var(--subtle); }
.hero-tag a:hover{ text-decoration:underline; text-underline-offset:3px; }

/* ---------- Archive hero ---------- */
.blog-hero{ padding:64px 0 0; text-align:center; }
.blog-hero .hero-tag{ margin:18px 0 22px; }
.blog-hero h1{ font-size:clamp(2.1rem,4.6vw,3.2rem); line-height:1.12; max-width:820px; margin:0 auto; }
.blog-hero h1 em{ font-style:normal; background:linear-gradient(90deg, var(--teal), var(--blue)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.blog-hero .lede{ margin:18px auto 0; max-width:600px; color:var(--body); font-size:17.5px; }

.blog-search{ position:relative; max-width:520px; margin:30px auto 0; }
.blog-search svg{ position:absolute; left:18px; top:50%; width:18px; height:18px; transform:translateY(-50%); stroke:var(--subtle); pointer-events:none; }
.blog-search input{ width:100%; border:1px solid var(--border); background:var(--card); border-radius:100px; padding:15px 120px 15px 46px; font:inherit; font-size:15px; color:var(--heading); box-shadow:0 16px 34px -24px rgba(11,18,32,.25); }
.blog-search input:focus{ outline:2px solid var(--teal); outline-offset:1px; border-color:transparent; }
.blog-search button{ position:absolute; right:6px; top:6px; bottom:6px; border:0; background:var(--navy); color:var(--white); border-radius:100px; padding:0 20px; font:inherit; font-size:14px; font-weight:600; cursor:pointer; }
.blog-search button:hover{ background:#172033; }

/* Topic band (mirrors the homepage "ranked" strip) */
.topic-band{ margin-top:52px; padding:18px 0; border-top:1px solid var(--border); border-bottom:1px solid var(--border); background:var(--section); }
.chip-row{ display:flex; gap:8px; justify-content:center; flex-wrap:wrap; }
@media (max-width:700px){ .chip-row{ flex-wrap:nowrap; justify-content:flex-start; overflow-x:auto; scrollbar-width:none; padding-bottom:2px; } .chip-row::-webkit-scrollbar{ display:none; } }
.chip{ flex:none; display:inline-flex; align-items:center; gap:6px; padding:8px 16px; border-radius:100px; border:1px solid var(--border); background:var(--card); font-size:13.5px; font-weight:500; color:var(--heading-2); transition:border-color .15s, color .15s, background .15s; }
.chip:hover{ border-color:var(--teal); color:var(--teal-dark); }
.chip.active{ background:var(--navy); border-color:var(--navy); color:var(--white); }
.chip .count{ font-size:12px; color:var(--subtle); }
.chip.active .count{ color:#94A3B8; }

/* Author archive header */
.author-head{ display:flex; flex-direction:column; align-items:center; gap:14px; }
.author-head img{ width:96px; height:96px; border-radius:50%; object-fit:cover; border:4px solid var(--card); box-shadow:var(--shadow); }
.author-head .role{ font-size:15px; font-weight:600; color:var(--teal-dark); margin-top:8px; }
.author-head .bio{ color:var(--body); max-width:620px; margin:10px auto 0; }
.author-head .links{ display:flex; gap:14px; justify-content:center; margin-top:12px; font-size:14px; font-weight:600; color:var(--teal-dark); }

/* ---------- Listing sections ---------- */
.blog-section{ padding:64px 0 100px; }
.list-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:26px; }
.list-head h2{ font-size:clamp(1.4rem,2.4vw,1.75rem); }
.list-head span{ font-size:14px; color:var(--muted); }

/* ---------- Cards ---------- */
.post-grid{ display:grid; gap:22px; grid-template-columns:repeat(3, 1fr); }
@media (max-width:980px){ .post-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:620px){ .post-grid{ grid-template-columns:1fr; } }

.post-card{ position:relative; display:flex; flex-direction:column; background:var(--card); border:1px solid var(--border); border-radius:var(--radius-md); overflow:hidden; transition:border-color .2s ease, box-shadow .2s ease; }
.post-card:hover{ border-color:var(--teal); box-shadow:var(--shadow); }
.post-card .thumb{ display:block; aspect-ratio:16/9; background:var(--section); overflow:hidden; }
.post-card .thumb img{ width:100%; height:100%; object-fit:cover; object-position:center; transition:transform .4s ease; }
.post-card:hover .thumb img{ transform:scale(1.05); }
.thumb.placeholder{ display:flex; align-items:flex-end; background:radial-gradient(120% 120% at 100% 0%, #12324a 0%, var(--navy) 55%); color:var(--white); font-family:'Manrope',sans-serif; font-weight:800; font-size:20px; line-height:1.25; padding:22px; }
.thumb.placeholder span{ border-left:3px solid var(--teal); padding-left:12px; }
.post-card .body{ display:flex; flex-direction:column; gap:10px; padding:20px 22px 22px; flex:1; }
.post-card .cat{ position:relative; z-index:1; width:max-content; font-size:12px; font-weight:700; color:var(--teal-dark); text-transform:uppercase; letter-spacing:.05em; }
.post-card .cat:hover{ color:var(--navy); }
.post-card h2, .post-card h3{ font-size:18.5px; line-height:1.32; }
.post-card .title-link::after{ content:""; position:absolute; inset:0; } /* whole card is clickable */
.post-card:hover .title-link{ color:var(--teal-dark); }
.post-card .excerpt{ color:var(--body); font-size:14.5px; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.post-meta{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; font-size:13px; color:var(--muted); margin-top:auto; padding-top:6px; }
.post-meta .dot{ width:3px; height:3px; border-radius:50%; background:var(--subtle); }

/* Featured: lead story + side stories */
.featured-grid{ display:grid; gap:22px; grid-template-columns:1.5fr 1fr; margin-bottom:64px; }
.featured-grid .post-card.lead{ grid-row:span 2; }
.featured-grid .post-card.lead h2{ font-size:clamp(1.4rem,2.4vw,1.8rem); }
.featured-grid .post-card.lead .excerpt{ font-size:15.5px; -webkit-line-clamp:4; }
.featured-grid .post-card.lead .thumb{ aspect-ratio:16/9; }
.featured-grid .post-card:not(.lead){ flex-direction:row; }
.featured-grid .post-card:not(.lead) .thumb{ flex:0 0 44%; aspect-ratio:auto; }
.featured-grid .post-card:not(.lead) .body{ padding:18px 20px; justify-content:center; }
.featured-grid .post-card:not(.lead) .excerpt{ -webkit-line-clamp:2; }
@media (max-width:900px){
  .featured-grid{ grid-template-columns:1fr; }
  .featured-grid .post-card.lead{ grid-row:auto; }
  .featured-grid .post-card:not(.lead){ flex-direction:column; }
  .featured-grid .post-card:not(.lead) .thumb{ flex:none; aspect-ratio:16/9; } /* the 40% row basis would clip the card text */
}
.featured-label{ position:relative; z-index:1; display:inline-flex; gap:6px; align-items:center; font-size:12px; font-weight:700; color:#047857; background:#ECFDF5; border:1px solid #A7F3D0; border-radius:100px; padding:3px 10px; width:max-content; }

.empty-state{ background:var(--card); border:1px dashed var(--border); border-radius:var(--radius-md); padding:64px 24px; text-align:center; color:var(--body); }
.empty-state h2{ font-size:22px; margin-bottom:8px; }

/* ---------- Pagination ---------- */
.blog-pagination{ display:flex; flex-wrap:wrap; justify-content:center; gap:6px; margin-top:52px; }
.blog-pagination a, .blog-pagination span{ min-width:42px; height:42px; display:inline-flex; align-items:center; justify-content:center; padding:0 14px; border-radius:100px; border:1px solid var(--border); background:var(--card); font-size:14px; font-weight:500; }
.blog-pagination a:hover{ border-color:var(--teal); color:var(--teal-dark); }
.blog-pagination .current{ background:var(--navy); border-color:var(--navy); color:var(--white); }
.blog-pagination .disabled{ color:var(--subtle); }

/* ---------- Newsletter CTA (homepage .cta-band) ---------- */
.blog-cta{ padding:0 0 100px; }
.cta-band form{ display:flex; flex-wrap:wrap; gap:10px; width:min(100%, 440px); }
.cta-band input[type=email]{ flex:1; min-width:200px; border:1px solid var(--border-dark); background:var(--navy-soft); color:var(--white); border-radius:100px; padding:13px 20px; font:inherit; font-size:15px; }
.cta-band input[type=email]::placeholder{ color:var(--subtle); }
.cta-band input[type=email]:focus{ outline:2px solid var(--teal); border-color:transparent; }
.cta-band .notice{ width:100%; color:var(--teal-bright); font-size:14px; margin-top:4px; }

/* ---------- Article ---------- */
.read-progress{ position:fixed; top:0; left:0; z-index:200; height:3px; width:100%; background:linear-gradient(90deg, var(--teal), var(--blue)); transform-origin:0 50%; transform:scaleX(0); }
.preview-banner{ background:#FEF3C7; color:#92400E; text-align:center; font-size:14px; font-weight:600; padding:10px 16px; }

.article-hero{ padding:56px 0 150px; text-align:center; background:var(--section); border-bottom:1px solid var(--border); }
.article-hero .hero-tag{ margin:18px 0 20px; }
.article-hero h1{ font-size:clamp(2rem,4.4vw,3.15rem); line-height:1.13; max-width:860px; margin:0 auto; }
.article-hero .lede{ margin:18px auto 0; max-width:680px; font-size:18px; color:var(--body); }
.article-hero .post-meta{ justify-content:center; margin-top:24px; font-size:14px; }
.byline{ display:inline-flex; align-items:center; gap:10px; color:var(--heading-2); font-weight:600; }
.byline img{ width:36px; height:36px; border-radius:50%; object-fit:cover; border:2px solid var(--card); }
a.byline:hover{ color:var(--teal-dark); }

.article-cover{ max-width:1000px; margin:-110px auto 0; border-radius:var(--radius-lg); overflow:hidden; background:var(--card); border:1px solid var(--border); box-shadow:var(--shadow); }
.article-cover img{ width:100%; height:auto; }
.article-cover.placeholder{ aspect-ratio:21/9; display:flex; align-items:center; justify-content:center; background:radial-gradient(120% 120% at 100% 0%, #12324a 0%, var(--navy) 55%); }
.article-cover.placeholder span{ font-family:'Manrope',sans-serif; font-weight:800; font-size:clamp(1.2rem,3vw,2rem); color:var(--teal-bright); }

.article-layout{ display:grid; grid-template-columns:minmax(0, 720px) 260px; justify-content:center; gap:64px; align-items:start; padding:56px 0 24px; }
@media (max-width:1040px){ .article-layout{ grid-template-columns:minmax(0, 720px); } .article-aside{ order:-1; } }
.article-aside{ position:sticky; top:110px; display:flex; flex-direction:column; gap:22px; }
@media (max-width:1040px){ .article-aside{ position:static; } }

.toc{ background:var(--card); border:1px solid var(--border); border-radius:var(--radius-md); padding:18px 20px; }
.toc h4{ font-size:12.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); margin-bottom:12px; }
.toc ol{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px; font-size:14px; max-height:calc(100vh - 320px); overflow:auto; }
.toc a{ display:block; color:var(--body); padding:5px 0 5px 12px; border-left:2px solid var(--border); line-height:1.4; }
.toc a:hover{ color:var(--teal-dark); }
.toc a.active{ color:var(--teal-dark); border-left-color:var(--teal); font-weight:600; }
.toc .lvl-3 a{ padding-left:24px; font-size:13.5px; }
@media (max-width:1040px){ .toc ol{ max-height:none; } }

.aside-card{ background:var(--card); border:1px solid var(--border); border-radius:var(--radius-md); padding:18px 20px; }
.aside-card h4{ font-size:12.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); margin-bottom:12px; }
.share{ display:flex; flex-wrap:wrap; gap:8px; }
.share a, .share button{ display:inline-flex; align-items:center; border:1px solid var(--border); background:var(--card); border-radius:100px; padding:7px 13px; font:inherit; font-size:13px; font-weight:500; color:var(--heading-2); cursor:pointer; }
.share a:hover, .share button:hover{ border-color:var(--teal); color:var(--teal-dark); }
.aside-cta{ background:var(--navy); color:#CBD5E1; border-radius:var(--radius-md); padding:20px; font-size:14px; }
.aside-cta h4{ color:var(--white); font-size:16px; margin-bottom:6px; }
.aside-cta .btn{ margin-top:14px; width:100%; padding:11px 16px; font-size:14px; }

/* Prose */
.prose-article{ font-size:17.5px; line-height:1.8; color:#334155; }
.prose-article > :first-child{ margin-top:0; }
.prose-article > * + *{ margin-top:1.15em; }
.prose-article p{ text-align:justify; text-justify:inter-word; }
.prose-article h2{ font-size:1.6em; line-height:1.25; margin-top:1.9em; scroll-margin-top:110px; text-align:left; }
.prose-article h3{ font-size:1.25em; line-height:1.3; margin-top:1.6em; scroll-margin-top:110px; text-align:left; }
.prose-article strong{ color:var(--heading); }
.prose-article a{ color:var(--teal-dark); text-decoration:underline; text-decoration-color:rgba(15,118,110,.35); text-underline-offset:3px; }
.prose-article a:hover{ text-decoration-color:currentColor; }
.prose-article ul, .prose-article ol{ padding-left:1.3em; }
.prose-article ul{ list-style:disc; } .prose-article ol{ list-style:decimal; } /* Tailwind's reset (app.css) removes markers */
.prose-article li + li{ margin-top:.45em; }
.prose-article li::marker{ color:var(--teal); }
.prose-article blockquote{ margin:1.6em 0; padding:18px 22px; border-left:3px solid var(--teal); background:var(--card); border-radius:0 var(--radius-md) var(--radius-md) 0; color:var(--heading-2); font-family:'Manrope',sans-serif; font-weight:600; font-size:1.05em; }
.prose-article img{ border-radius:var(--radius-md); height:auto; }
.prose-article figure{ margin:1.8em 0; }
.prose-article figcaption{ font-size:14px; color:var(--muted); text-align:center; margin-top:8px; }
.prose-article code{ background:var(--section); padding:2px 6px; border-radius:6px; font-size:.88em; }
.prose-article pre{ background:var(--navy); color:#E2E8F0; padding:18px 20px; border-radius:var(--radius-md); overflow-x:auto; font-size:14px; }
.prose-article pre code{ background:none; padding:0; }
.prose-article table{ width:100%; border-collapse:collapse; font-size:15px; background:var(--card); border-radius:var(--radius-md); overflow:hidden; }
/* Wide tables scroll sideways on phones instead of pushing the page wider. */
@media (max-width:640px){ .prose-article table{ display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; } }
.prose-article th, .prose-article td{ border:1px solid var(--border); padding:10px 14px; text-align:left; }
.prose-article th{ background:var(--section); font-weight:600; color:var(--heading); }
.prose-article h4{ font-size:1.1em; margin-top:1.4em; scroll-margin-top:110px; text-align:left; }
.prose-article hr{ border:0; border-top:1px solid var(--border); margin:2.4em 0; }
.prose-article sub, .prose-article sup{ font-size:.75em; }
.prose-article::after{ content:""; display:table; clear:both; } /* contain wrapped images */

.tag-row{ display:flex; flex-wrap:wrap; gap:8px; margin-top:40px; padding-top:28px; border-top:1px solid var(--border); }
.tag-row a{ font-size:13.5px; color:var(--heading-2); background:var(--card); border:1px solid var(--border); border-radius:100px; padding:6px 13px; }
.tag-row a:hover{ border-color:var(--teal); color:var(--teal-dark); }

.author-box{ display:flex; gap:18px; align-items:flex-start; margin-top:32px; padding:26px; background:var(--card); border:1px solid var(--border); border-radius:var(--radius-md); }
.author-box img{ width:68px; height:68px; border-radius:50%; object-fit:cover; flex-shrink:0; }
.author-box .label{ font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); }
.author-box .name{ font-family:'Manrope',sans-serif; font-weight:800; font-size:18px; color:var(--heading); margin-top:2px; }
.author-box .role{ font-size:14px; color:var(--teal-dark); font-weight:600; }
.author-box .bio{ margin-top:10px; color:var(--body); font-size:15px; }
.author-box .links{ display:flex; flex-wrap:wrap; gap:14px; margin-top:12px; font-size:14px; font-weight:600; color:var(--teal-dark); }
@media (max-width:560px){ .author-box{ flex-direction:column; } }

/* Comments */
.comments{ margin-top:56px; }
.comments h2{ font-size:24px; }
.comment-list{ list-style:none; margin:22px 0 0; padding:0; display:flex; flex-direction:column; gap:16px; }
.comment{ background:var(--card); border:1px solid var(--border); border-radius:var(--radius-md); padding:18px 20px; }
.comment .who{ display:flex; align-items:center; gap:10px; font-size:14px; }
.comment .who img{ width:32px; height:32px; border-radius:50%; }
.comment .who b{ color:var(--heading); }
.comment .who time{ color:var(--muted); }
.comment .text{ margin-top:10px; color:#334155; white-space:pre-line; }
.comment .reply-btn{ margin-top:10px; background:none; border:0; padding:0; color:var(--teal-dark); font:inherit; font-size:13.5px; font-weight:600; cursor:pointer; }
.comment .replies{ list-style:none; margin:14px 0 0; padding:0 0 0 20px; border-left:2px solid var(--border); display:flex; flex-direction:column; gap:12px; }
.comment-form{ margin-top:26px; background:var(--card); border:1px solid var(--border); border-radius:var(--radius-md); padding:24px; display:grid; gap:14px; grid-template-columns:1fr 1fr; }
.comment-form .full{ grid-column:1 / -1; }
.comment-form label{ display:block; font-size:13.5px; font-weight:600; color:var(--heading-2); margin-bottom:6px; }
.comment-form input, .comment-form textarea{ width:100%; border:1px solid var(--border); border-radius:10px; padding:11px 13px; font:inherit; font-size:15px; color:var(--heading); background:var(--bg); }
.comment-form input:focus, .comment-form textarea:focus{ outline:2px solid var(--teal); border-color:transparent; }
.comment-form .hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.comment-form .replying{ font-size:13.5px; color:var(--body); }
.comment-form .error{ color:#B91C1C; font-size:13px; margin-top:4px; }
.comment-form .notice{ color:var(--teal-dark); font-weight:600; }
@media (max-width:640px){ .comment-form{ grid-template-columns:1fr; } }

/* Related */
.related{ margin-top:72px; padding:80px 0; background:var(--section); border-top:1px solid var(--border); }
.related + .blog-cta{ padding-top:0; background:var(--section); }