/* ============================================================
   Voice Bonsai — Blog Index & Category Page Styles
   Requires: brand.css (base, nav, footer, buttons, container)
   ============================================================ */

/* ── Reveal animation ── */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; }
.reveal.visible { opacity: 1; transform: none; }
.d1 { transition-delay: .1s; } .d2 { transition-delay: .2s; } .d3 { transition-delay: .3s; }

/* ── Blog Hero ── */
.blog-hero { padding: 6rem 0 4rem; text-align: center; background: radial-gradient(ellipse 90% 70% at 50% 0%, rgba(0,212,232,.08) 0%, transparent 65%); }
.blog-eyebrow { display: inline-flex; align-items: center; gap: .5rem; font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--teal); margin-bottom: 1.25rem; background: rgba(0,212,232,.08); border: 1px solid rgba(0,212,232,.2); border-radius: 30px; padding: .35rem 1rem; }
.blog-hero h1 { font-size: clamp(2.2rem, 4vw, 3.2rem); font-weight: 900; line-height: 1.1; letter-spacing: -.03em; margin-bottom: 1rem; }
.blog-hero-sub { font-size: 1.1rem; color: var(--text-secondary); max-width: 580px; margin: 0 auto; line-height: 1.75; }

/* ── Category Filter Bar ── */
.cat-filter { display: flex; gap: .5rem; flex-wrap: wrap; justify-content: center; margin: 2rem 0 0; }
.cat-pill { font-size: .78rem; font-weight: 600; padding: .4rem 1rem; border-radius: 20px; background: var(--navy-card); border: 1px solid var(--border-soft); color: var(--text-secondary); transition: all .15s; text-decoration: none; }
.cat-pill:hover { border-color: var(--teal); color: var(--teal); text-decoration: none; }
.cat-pill.active { background: rgba(0,212,232,.12); border-color: rgba(0,212,232,.3); color: var(--teal); }

/* ── Blog Layout (main + sidebar) ── */
.blog-layout { display: grid; grid-template-columns: 1fr 320px; gap: 3.5rem; align-items: start; padding: 5rem 0 6rem; }
@media (max-width: 960px) { .blog-layout { grid-template-columns: 1fr; } .blog-sidebar { display: none; } }

/* ── Featured Post ── */
.post-featured { background: var(--navy-card); border: 1px solid rgba(0,212,232,.2); border-radius: var(--radius-xl); overflow: hidden; margin-bottom: 2rem; transition: border-color .2s; display: block; text-decoration: none; }
.post-featured:hover { border-color: rgba(0,212,232,.35); text-decoration: none; }
.post-featured-img { height: 280px; background: linear-gradient(135deg, rgba(0,212,232,.15), rgba(107,79,232,.2)); display: flex; align-items: center; justify-content: center; font-size: 4rem; }
.post-featured-body { padding: 2rem; }
.post-featured-body .cat { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; color: var(--teal); margin-bottom: .6rem; display: block; }
.post-featured-body h2 { font-size: 1.5rem; font-weight: 800; color: #fff; line-height: 1.25; margin-bottom: .75rem; }
.post-featured-body p { font-size: .9rem; color: var(--text-secondary); line-height: 1.7; margin-bottom: 1.25rem; }
.post-meta { font-size: .78rem; color: var(--text-muted); }

/* ── Post Grid ── */
.posts-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }
@media (max-width: 640px) { .posts-grid { grid-template-columns: 1fr; } }
.post-card { background: var(--navy-card); border: 1px solid var(--border-soft); border-radius: var(--radius-lg); overflow: hidden; transition: border-color .2s, transform .2s; display: block; text-decoration: none; }
.post-card:hover { border-color: rgba(0,212,232,.25); transform: translateY(-3px); text-decoration: none; }
.post-card-img { height: 140px; background: linear-gradient(135deg, rgba(0,212,232,.1), rgba(107,79,232,.1)); display: flex; align-items: center; justify-content: center; font-size: 2.5rem; }
.post-card-body { padding: 1.5rem; }
.post-card-body .cat { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; color: var(--teal); margin-bottom: .5rem; display: block; }
.post-card-body h3 { font-size: .95rem; font-weight: 700; color: #fff; line-height: 1.4; margin-bottom: .5rem; }
.post-card-body p { font-size: .8rem; color: var(--text-muted); line-height: 1.6; margin-bottom: 1rem; }
.post-card-body .post-meta { font-size: .72rem; color: var(--text-muted); }

/* ── Pagination ── */
.pagination { padding: 3rem 0 5rem; text-align: center; border-top: 1px solid var(--border-soft); }
.pagination-inner { display: inline-flex; align-items: center; gap: .5rem; }
.page-num { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 8px; font-size: .875rem; font-weight: 700; color: var(--text-secondary); border: 1px solid var(--border-soft); transition: all .15s; text-decoration: none; }
.page-num:hover { border-color: var(--teal); color: var(--teal); text-decoration: none; }
.page-num.active { background: linear-gradient(135deg, var(--teal), var(--teal-dark)); color: #fff; border-color: transparent; }
.pagination-count { margin-top: 1rem; font-size: .8rem; color: var(--text-muted); }

/* ── Blog Sidebar ── */
.blog-sidebar { position: sticky; top: 160px; }
.sidebar-widget { background: var(--navy-card); border: 1px solid var(--border-soft); border-radius: var(--radius-lg); padding: 1.75rem; margin-bottom: 1.5rem; }
.sidebar-widget h3 { font-size: .82rem; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; color: var(--text-secondary); margin-bottom: 1.25rem; }
.sidebar-widget ul { list-style: none; display: flex; flex-direction: column; gap: .75rem; }
.sidebar-widget ul li a { font-size: .875rem; color: var(--text-secondary); transition: color .15s; }
.sidebar-widget ul li a:hover { color: var(--teal); text-decoration: none; }
.sidebar-cta { background: linear-gradient(135deg, rgba(0,212,232,.12), rgba(107,79,232,.1)); border: 1px solid rgba(0,212,232,.2); border-radius: var(--radius-lg); padding: 1.75rem; text-align: center; margin-bottom: 1.5rem; }
.sidebar-cta h3 { font-size: 1rem; font-weight: 800; color: #fff; margin-bottom: .5rem; }
.sidebar-cta p { font-size: .82rem; color: var(--text-secondary); margin-bottom: 1.25rem; line-height: 1.6; }
.sidebar-cta .btn { width: 100%; justify-content: center; }
.sidebar-topics { display: flex; flex-wrap: wrap; gap: .5rem; }
.topic-pill { font-size: .75rem; font-weight: 600; padding: .3rem .8rem; border-radius: 20px; background: var(--navy); border: 1px solid var(--border-soft); color: var(--text-secondary); transition: all .15s; cursor: pointer; text-decoration: none; }
.topic-pill:hover { border-color: var(--teal); color: var(--teal); text-decoration: none; }

/* ── Footer ── */
footer.site-footer { background: var(--navy-mid); border-top: 1px solid var(--border-soft); padding: 4rem 0 2rem; }
.footer-grid { display: grid; grid-template-columns: 2.5fr 1fr 1fr 1fr; gap: 3rem; margin-bottom: 3.5rem; }
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .footer-grid { grid-template-columns: 1fr; } }
.footer-logo { height: 160px; width: auto; max-width: 340px; margin-bottom: 1rem; object-fit: contain; }
.footer-brand p { font-size: .875rem; color: var(--text-muted); line-height: 1.7; margin-bottom: 1rem; }
.footer-col h4 { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--text-secondary); margin-bottom: 1rem; }
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: .6rem; }
.footer-col ul a { font-size: .875rem; color: var(--text-muted); transition: color .15s; }
.footer-col ul a:hover { color: #fff; text-decoration: none; }
.footer-bottom { border-top: 1px solid var(--border-soft); padding-top: 1.5rem; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; font-size: .8rem; color: var(--text-muted); }