/* ============================================================
   Cognicept™ — Blog Section Stylesheet
   Loaded ONLY on /blog/ pages (in addition to /css/style.css)
   Palette inherits the cognitive blue tokens from style.css
   ============================================================ */

/* === BLOG SHELL === */
.blog-shell{background:var(--white);padding:3rem 0 1rem}
.blog-wrap{max-width:1120px;margin:0 auto;padding:0 1.4rem}

/* === BLOG HERO === */
.blog-hero{background:var(--grad-dark);color:#fff;padding:3.2rem 0 2.6rem}
.blog-hero .eyebrow{color:var(--blue-soft)}
.blog-hero h1{color:#fff;font-size:clamp(1.9rem,3.8vw,2.6rem);margin:.5rem 0 .7rem;max-width:900px}
.blog-hero p{color:rgba(255,255,255,.75);max-width:760px;font-size:1rem}
.blog-hero .bh-stats{display:flex;gap:2.2rem;flex-wrap:wrap;margin-top:1.4rem}
.blog-hero .bh-stats div{display:flex;flex-direction:column}
.blog-hero .bh-stats b{font-family:var(--font-display);font-size:1.45rem;color:#fff;line-height:1}
.blog-hero .bh-stats span{font-size:.78rem;color:rgba(255,255,255,.6);margin-top:.25rem}

/* === CATEGORY FILTER PILLS === */
.blog-filter{display:flex;flex-wrap:wrap;gap:.55rem;justify-content:center;max-width:1000px;margin:0 auto 2.4rem;padding:0 1.4rem}
.blog-filter a{background:#fff;border:1px solid var(--powder);border-radius:var(--radius-pill);padding:.45rem 1.1rem;font-size:.84rem;font-weight:600;color:var(--body);transition:var(--transition)}
.blog-filter a:hover,.blog-filter a.active{background:var(--grad);color:#fff;border-color:transparent;box-shadow:0 6px 16px rgba(30,99,196,.28)}

/* === POST CARD GRID (blog index) === */
.post-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem;max-width:1120px;margin:0 auto;padding:0 1.4rem}
.post-card{background:#fff;border:1px solid var(--powder);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;transition:var(--transition)}
.post-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);border-color:transparent}
.post-thumb{height:132px;background:var(--grad);display:flex;align-items:center;justify-content:center;padding:1.1rem;text-align:center;color:#fff;font-family:var(--font-display);font-weight:600;font-size:1rem;line-height:1.32}
.post-thumb.t-review{background:var(--grad-dark)}
.post-thumb.t-science{background:linear-gradient(135deg,#0E3D82 0%,#1E63C4 100%)}
.post-thumb.t-wellness{background:linear-gradient(135deg,#0B3A7A 0%,#7FB3F0 100%)}
.post-body{padding:1.3rem 1.4rem;display:flex;flex-direction:column;flex:1}
.post-tag{font-family:var(--font-body);font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.11em;color:var(--blue);margin-bottom:.45rem}
.post-card h3{font-size:1.04rem;line-height:1.38;margin-bottom:.55rem}
.post-card h3 a{color:var(--text)}
.post-card h3 a:hover{color:var(--blue-deep)}
.post-excerpt{font-size:.87rem;color:var(--muted);margin-bottom:1rem;flex:1;line-height:1.6}
.post-link{font-family:var(--font-body);font-size:.85rem;font-weight:700;color:var(--blue);margin-top:auto}
.post-link::after{content:" \2192"}

/* === SECTION HEADINGS INSIDE BLOG INDEX === */
.blog-h2{max-width:1120px;margin:3rem auto 1.5rem;padding:0 1.4rem;font-size:1.5rem;color:var(--text);border-bottom:2px solid var(--powder);padding-bottom:.7rem}
.blog-h2 small{display:block;font-family:var(--font-body);font-size:.85rem;font-weight:400;color:var(--muted);margin-top:.35rem}

/* === SINGLE POST LAYOUT === */
.post-hero{background:var(--grad-dark);color:#fff;padding:3rem 0 2.4rem}
.post-hero .breadcrumb{font-size:.82rem;color:rgba(255,255,255,.7);margin-bottom:.7rem}
.post-hero .breadcrumb a{color:var(--blue-soft)}
.post-hero .breadcrumb a:hover{text-decoration:underline}
.post-hero h1{color:#fff;font-size:clamp(1.6rem,3.4vw,2.3rem);line-height:1.28;margin:.4rem 0 .9rem;max-width:880px}
.post-meta{display:flex;flex-wrap:wrap;gap:.4rem 1.2rem;font-size:.84rem;color:rgba(255,255,255,.72)}
.post-meta strong{color:#fff;font-weight:600}
.post-meta .rt::before{content:"\23F1  "}

.post-article{max-width:780px;margin:2.6rem auto 0;padding:0 1.4rem}
.post-article h2{font-size:1.55rem;margin:2.2rem 0 .9rem;color:var(--text);scroll-margin-top:90px}
.post-article h3{font-size:1.2rem;margin:1.7rem 0 .7rem;color:var(--blue-deep)}
.post-article p{margin-bottom:1.15rem;color:var(--body);line-height:1.78}
.post-article ul,.post-article ol{margin:0 0 1.2rem 1.4rem}
.post-article li{margin-bottom:.55rem;color:var(--body);line-height:1.7}
.post-article ul li{list-style:disc}
.post-article ol li{list-style:decimal}
.post-article a{color:var(--blue-deep);text-decoration:underline;font-weight:600}
.post-article a:hover{color:var(--blue)}
.post-article blockquote{border-left:4px solid var(--blue);background:var(--ice);padding:1rem 1.3rem;margin:1.5rem 0;border-radius:0 var(--radius-sm) var(--radius-sm) 0;font-style:italic;color:var(--text)}
.post-article strong{color:var(--text)}
.post-article figure{margin:1.8rem 0;text-align:center}
.post-article figure img{border-radius:var(--radius);box-shadow:var(--shadow);margin:0 auto}
.post-article figcaption{font-size:.83rem;color:var(--muted);margin-top:.75rem}

/* === IN-POST CTA === */
.post-cta{background:var(--ice);border:1px solid var(--powder);border-radius:var(--radius);padding:1.9rem 2rem;text-align:center;margin:2.4rem 0}
.post-cta h3{font-size:1.32rem;margin-bottom:.7rem;color:var(--text)}
.post-cta p{font-size:.95rem;color:var(--body);margin-bottom:1.3rem}
.post-cta .price-line{display:block;font-size:.85rem;color:var(--muted);margin-top:.9rem}
.post-cta-inline{background:var(--grad-deep);border-radius:var(--radius);padding:1.5rem 1.8rem;color:#fff;margin:2rem 0;display:flex;align-items:center;justify-content:space-between;gap:1.2rem;flex-wrap:wrap}
.post-cta-inline p{color:rgba(255,255,255,.9)!important;margin:0!important;font-weight:600;font-size:.98rem}
.post-cta-inline .btn{background:#fff;color:var(--blue-deep);flex-shrink:0}
.post-cta-inline .btn:hover{transform:translateY(-2px)}

/* === RELATED READS === */
.related-reads{background:#fff;border:1px solid var(--powder);border-radius:var(--radius);padding:1.6rem 1.8rem;margin:2.4rem 0}
.related-reads h4{font-size:1.08rem;margin-bottom:.9rem;color:var(--blue-deep)}
.related-reads ul{margin:0!important}
.related-reads li{list-style:none!important;margin-bottom:.55rem;padding-left:1.2rem;position:relative;font-size:.92rem}
.related-reads li::before{content:"\203A";position:absolute;left:0;color:var(--blue);font-weight:700}
.related-reads a{color:var(--body);text-decoration:none!important;font-weight:500}
.related-reads a:hover{color:var(--blue-deep);text-decoration:underline!important}

/* === TAG CLOUD === */
.post-tags{display:flex;flex-wrap:wrap;gap:.5rem;margin:2rem 0}
.post-tags span{background:var(--ice);border:1px solid var(--powder);border-radius:var(--radius-pill);padding:.3rem .85rem;font-size:.76rem;color:var(--muted);font-weight:600}

/* === RESPONSIVE === */
@media(max-width:992px){
  .post-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:640px){
  .post-grid{grid-template-columns:1fr}
  .blog-hero .bh-stats{gap:1.3rem}
  .post-cta-inline{flex-direction:column;text-align:center}
  .post-cta-inline .btn{width:100%}
  .post-article h2{font-size:1.35rem}
}