/* ===== BLOG LISTING ===== */
.blog-hero{padding:160px 0 80px;background:linear-gradient(180deg,var(--dark) 0%,var(--navy) 100%);text-align:center}
.blog-hero h1{margin-bottom:16px}
.blog-hero p{color:var(--gray);font-size:1.1rem;max-width:600px;margin:0 auto}

.blog-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(350px,1fr));gap:32px;padding:80px 0 120px}
.blog-card{background:linear-gradient(180deg,var(--navy) 0%,var(--navy-light) 100%);border:1px solid rgba(46,134,193,.1);border-radius:12px;overflow:hidden;transition:all .4s cubic-bezier(.22,1,.36,1);position:relative}
.blog-card::before{content:'';position:absolute;top:0;left:0;width:100%;height:3px;background:linear-gradient(90deg,var(--blue-accent),var(--gold));transform:scaleX(0);transform-origin:left;transition:transform .4s ease}
.blog-card:hover::before{transform:scaleX(1)}
.blog-card:hover{transform:translateY(-8px);border-color:rgba(46,134,193,.3);box-shadow:0 20px 60px rgba(0,0,0,.4)}
.blog-card-image{height:200px;background:linear-gradient(135deg,var(--blue) 0%,var(--navy-light) 100%);position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center}
.blog-card-image .placeholder-icon{font-size:3rem;opacity:.2}
.blog-card-body{padding:28px 28px 32px}
.blog-card-meta{display:flex;gap:16px;font-size:.8rem;color:var(--gray);text-transform:uppercase;letter-spacing:1px;margin-bottom:12px}
.blog-card-body h3{font-size:1.25rem;line-height:1.35;margin-bottom:12px;transition:color .3s ease}
.blog-card:hover h3{color:var(--blue-accent)}
.blog-card-body p{color:var(--gray);font-size:.95rem;line-height:1.7;margin-bottom:20px}
.blog-card-link{color:var(--blue-accent);font-size:.85rem;font-weight:600;text-transform:uppercase;letter-spacing:2px;display:inline-flex;align-items:center;gap:8px;transition:gap .3s ease}
.blog-card:hover .blog-card-link{gap:14px}

/* ===== ARTICLE PAGE ===== */
.article-hero{padding:180px 0 60px;background:linear-gradient(180deg,var(--dark) 0%,var(--navy) 100%);text-align:center}
.article-hero h1{max-width:800px;margin:0 auto 20px;font-size:clamp(2rem,5vw,3.2rem)}
.article-meta{display:flex;justify-content:center;gap:24px;color:var(--gray);font-size:.9rem;flex-wrap:wrap}
.article-meta span{display:flex;align-items:center;gap:6px}

.article-content{max-width:720px;margin:0 auto;padding:60px 24px 80px}
.article-content p{color:var(--gray);font-size:1.05rem;line-height:1.85;margin-bottom:24px}
.article-content h2{font-size:1.8rem;margin:48px 0 20px;color:var(--white)}
.article-content h3{font-size:1.35rem;margin:36px 0 16px;color:var(--white)}
.article-content ul,.article-content ol{color:var(--gray);margin:0 0 24px 24px;font-size:1.05rem;line-height:1.85}
.article-content li{margin-bottom:8px}
.article-content strong{color:var(--white)}

.callout{background:rgba(46,134,193,.08);border-left:4px solid var(--blue-accent);padding:24px 28px;margin:32px 0;border-radius:0 8px 8px 0}
.callout p{margin-bottom:0!important;font-size:1.1rem!important;color:var(--white)!important;font-weight:500}
.callout.gold{border-left-color:var(--gold);background:rgba(232,185,49,.06)}
.callout.gold p{color:var(--gold)!important}

.stat-box{background:linear-gradient(135deg,var(--blue) 0%,var(--navy) 100%);border-radius:12px;padding:36px;margin:36px 0;text-align:center}
.stat-box .stat-number{font-family:var(--font-display);font-size:3rem;color:var(--blue-accent);line-height:1}
.stat-box .stat-label{color:var(--gray);font-size:.95rem;margin-top:8px}

.article-cta{background:linear-gradient(135deg,var(--blue) 0%,var(--navy-light) 100%);border:1px solid rgba(46,134,193,.2);border-radius:12px;padding:48px;text-align:center;margin:60px 0 0}
.article-cta h2{font-size:1.8rem;margin-bottom:12px}
.article-cta p{color:var(--gray);margin-bottom:24px;font-size:1.05rem}

@media(max-width:768px){
  .blog-grid{grid-template-columns:1fr;padding:60px 0 80px}
  .article-hero{padding:140px 0 40px}
  .article-content{padding:40px 20px 60px}
  .article-cta{padding:32px 24px}
}

/* ===== TTS AUDIO PLAYER ===== */
.tts-player{max-width:720px;margin:0 auto;padding:0 24px}
.tts-widget{background:linear-gradient(135deg,var(--navy) 0%,var(--navy-light) 100%);border:1px solid rgba(46,134,193,.2);border-radius:12px;padding:20px 24px;margin-bottom:8px}
.tts-header{font-size:.95rem;color:var(--gray);margin-bottom:16px;text-align:center}
.tts-controls{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.tts-btn{background:none;border:1px solid rgba(46,134,193,.3);color:var(--white);width:40px;height:40px;border-radius:50%;cursor:pointer;font-size:1.1rem;display:inline-flex;align-items:center;justify-content:center;transition:all .3s ease}
.tts-btn:hover{background:rgba(46,134,193,.15);border-color:var(--blue-accent)}
#tts-pause{display:none}
.tts-progress{flex:1;min-width:120px;height:6px;background:rgba(255,255,255,.08);border-radius:3px;overflow:hidden}
.tts-progress-fill{height:100%;width:0%;background:linear-gradient(90deg,var(--blue-accent),var(--gold,#d4a843));border-radius:3px;transition:width .3s ease}
.tts-time{font-size:.8rem;color:var(--gray);white-space:nowrap;min-width:80px;text-align:right}
.tts-speed{background:var(--navy);color:var(--white);border:1px solid rgba(46,134,193,.3);border-radius:6px;padding:4px 8px;font-size:.8rem;cursor:pointer}
.tts-speed:focus{outline:1px solid var(--blue-accent)}
@media(max-width:600px){.tts-controls{gap:8px}.tts-widget{padding:16px}.tts-time{min-width:auto;font-size:.75rem}}

/* Blog card thumbnail images */
.blog-card-image img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s cubic-bezier(.22,1,.36,1)}
.blog-card:hover .blog-card-image img{transform:scale(1.05)}