/* =====================================================
   BLOG — shares :root variables and nav/footer/btn rules
   from ../styles.css. This file only adds blog-specific
   layout: index grid, article typography, callout boxes.
===================================================== */

/* ---------- Blog hero (index + post header) ---------- */
.blog-hero{background:linear-gradient(140deg,var(--navy-deep) 0%,var(--navy) 55%,#1a6699 100%);padding:36px 0 32px;text-align:center}
@media(min-width:768px){.blog-hero{padding:64px 0 56px}}
.blog-hero .eyebrow{display:inline-flex;align-items:center;gap:8px;background:rgba(201,162,76,.15);border:1px solid rgba(201,162,76,.4);color:var(--gold);padding:5px 14px;border-radius:50px;font-size:12px;font-weight:700;margin-bottom:12px;letter-spacing:.5px}
@media(min-width:480px){.blog-hero .eyebrow{padding:6px 16px;font-size:12.5px;margin-bottom:16px}}
.blog-hero h1{color:#fff;font-size:24px;margin-bottom:10px}
@media(min-width:480px){.blog-hero h1{font-size:30px;margin-bottom:12px}}
@media(min-width:768px){.blog-hero h1{font-size:42px}}
.blog-hero p{color:rgba(255,255,255,.8);font-size:15px;max-width:640px;margin:0 auto}
@media(min-width:480px){.blog-hero p{font-size:16px}}
.blog-hero .breadcrumb{color:rgba(255,255,255,.55);font-size:13px;margin-bottom:18px}
.blog-hero .breadcrumb a{color:rgba(255,255,255,.75);text-decoration:underline}

/* ---------- Blog index grid ---------- */
.blog-index-sec{background:var(--light2);padding:36px 0 48px}
@media(min-width:768px){.blog-index-sec{padding:60px 0 90px}}
.blog-section-label{font-family:'Poppins',sans-serif;font-weight:800;font-size:12.5px;letter-spacing:1.5px;text-transform:uppercase;color:var(--navy);margin:0 0 14px}
@media(min-width:480px){.blog-section-label{font-size:13px;margin-bottom:20px}}
.blog-grid{display:grid;grid-template-columns:1fr;gap:16px;margin-bottom:32px}
@media(min-width:480px){.blog-grid{gap:24px;margin-bottom:56px}}
@media(min-width:640px){.blog-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.blog-grid{grid-template-columns:repeat(3,1fr)}}
.blog-card{background:#fff;border-radius:var(--radius);box-shadow:var(--sh);border-top:4px solid var(--gold);transition:var(--tr);display:flex;flex-direction:column;overflow:hidden}
.blog-card:hover{transform:translateY(-6px);box-shadow:var(--sh2)}
.blog-card-img-wrap{width:100%;height:150px;overflow:hidden;background:var(--light)}
@media(min-width:480px){.blog-card-img-wrap{height:170px}}
.blog-card-img-wrap img{width:100%;height:100%;object-fit:cover;display:block}
.blog-card-body{padding:16px 18px 20px;display:flex;flex-direction:column;flex-grow:1}
@media(min-width:480px){.blog-card-body{padding:22px 24px 26px}}
.blog-card-tag{display:inline-block;background:var(--light);color:var(--navy);font-size:11px;font-weight:700;padding:4px 12px;border-radius:50px;margin-bottom:14px;align-self:flex-start;letter-spacing:.3px}
.blog-card h3{font-size:19px;color:var(--navy);margin-bottom:10px;line-height:1.35}
.blog-card p{font-size:14.5px;color:var(--muted);line-height:1.7;margin-bottom:18px;flex-grow:1}
/* Darkened from --gold-dark for accessible contrast (was reading as washed-out/light) */
.blog-card-link{font-family:'Roboto',sans-serif;font-weight:800;font-size:14px;color:var(--navy);display:inline-flex;align-items:center;gap:6px}
.blog-card-link:hover{color:var(--gold-dark)}

/* ---------- Article layout ---------- */
.article-sec{background:#fff;padding:32px 0 48px}
@media(min-width:768px){.article-sec{padding:56px 0 80px}}
.article-wrap{max-width:760px;margin:0 auto;padding:0 20px}
.article-meta{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center;color:var(--muted);font-size:13px;margin-bottom:24px;padding-bottom:16px;border-bottom:1px solid #ece2dd}
@media(min-width:480px){.article-meta{font-size:13.5px;margin-bottom:36px;padding-bottom:20px}}
.article-meta .tag{background:var(--light);color:var(--navy);padding:4px 12px;border-radius:50px;font-weight:700;font-size:12px}
.article-content h2{font-size:20px;color:var(--navy);margin:28px 0 12px}
@media(min-width:480px){.article-content h2{font-size:23px;margin:40px 0 16px}}
@media(min-width:768px){.article-content h2{font-size:27px}}
.article-content h2:first-child{margin-top:0}
.article-content h3{font-size:17px;color:var(--navy);margin:22px 0 10px}
@media(min-width:480px){.article-content h3{font-size:18px;margin:28px 0 12px}}
.article-content p{font-size:15.5px;color:#3a2a22;line-height:1.75;margin-bottom:16px}
@media(min-width:480px){.article-content p{font-size:16px;line-height:1.85;margin-bottom:18px}}
.article-content ul,.article-content ol{margin:0 0 16px 20px}
@media(min-width:480px){.article-content ul,.article-content ol{margin:0 0 20px 22px}}
.article-content li{font-size:15.5px;color:#3a2a22;line-height:1.7;margin-bottom:8px}
@media(min-width:480px){.article-content li{font-size:16px;line-height:1.8;margin-bottom:10px}}
.article-content strong{color:var(--navy)}
.article-content a{color:var(--navy);font-weight:700;text-decoration:underline}
.article-content a:hover{color:var(--gold-dark)}
.article-lead{font-size:16px;color:var(--muted);line-height:1.65;margin-bottom:20px;font-style:italic}
@media(min-width:480px){.article-lead{font-size:18px;line-height:1.75;margin-bottom:28px}}
.article-hero-img{width:100%;height:190px;object-fit:cover;border-radius:var(--radius);box-shadow:var(--sh);margin-bottom:22px}
@media(min-width:480px){.article-hero-img{height:280px;margin-bottom:32px}}
@media(min-width:768px){.article-hero-img{height:360px}}

/* Fast-facts callout */
.fact-box{background:var(--light);border-left:4px solid var(--gold);border-radius:10px;padding:16px 18px;margin:20px 0}
@media(min-width:480px){.fact-box{padding:20px 24px;margin:28px 0}}
.fact-box h4{font-family:'Poppins',sans-serif;font-weight:800;font-size:13.5px;color:var(--navy);letter-spacing:.5px;text-transform:uppercase;margin-bottom:8px}
@media(min-width:480px){.fact-box h4{font-size:14px;margin-bottom:10px}}
.fact-box ul{margin:0 0 0 18px}
.fact-box li{font-size:14.5px;color:#3a2a22;margin-bottom:6px}
@media(min-width:480px){.fact-box li{font-size:15px}}

/* In-article product CTA card */
.cta-card{background:linear-gradient(140deg,var(--navy-deep) 0%,var(--navy) 100%);border-radius:16px;padding:22px 20px;text-align:center;margin:24px 0}
@media(min-width:480px){.cta-card{padding:30px 28px;margin:36px 0}}
.cta-card h4{color:#fff;font-size:18px;margin-bottom:8px}
@media(min-width:480px){.cta-card h4{font-size:20px;margin-bottom:10px}}
.cta-card p{color:rgba(255,255,255,.8);font-size:14px;margin-bottom:16px}
@media(min-width:480px){.cta-card p{font-size:14.5px;margin-bottom:18px}}

/* Evidence-quality note */
.evidence-note{font-size:12.5px;color:var(--muted);background:var(--light2);border:1px solid #ece2dd;border-radius:10px;padding:12px 16px;margin:20px 0}
@media(min-width:480px){.evidence-note{font-size:13px;padding:14px 18px;margin:24px 0}}

/* Related posts */
.related-sec{margin-top:36px;padding-top:24px;border-top:1px solid #ece2dd}
@media(min-width:480px){.related-sec{margin-top:56px;padding-top:36px}}
.related-sec h3{font-size:18px;color:var(--navy);margin-bottom:14px}
@media(min-width:480px){.related-sec h3{font-size:20px;margin-bottom:20px}}
.related-grid{display:grid;grid-template-columns:1fr;gap:12px}
@media(min-width:480px){.related-grid{gap:16px}}
@media(min-width:640px){.related-grid{grid-template-columns:repeat(3,1fr)}}
.related-card{background:var(--light2);border-radius:12px;padding:14px 16px;transition:var(--tr)}
@media(min-width:480px){.related-card{padding:18px 20px}}
.related-card:hover{background:var(--light);transform:translateY(-3px)}
.related-card-tag{font-size:11px;font-weight:800;color:var(--navy);letter-spacing:.3px;text-transform:uppercase;margin-bottom:6px;display:block}
.related-card-title{font-size:15px;color:var(--navy);font-weight:700;line-height:1.4}