/* blog.css — Blog page */

.page-hero { height:360px; }
.hero-bg {
  background:
    linear-gradient(to bottom, rgba(13,27,42,.4) 0%, rgba(13,27,42,.92) 100%),
    url('images/towersfog.jpg') center/cover no-repeat;
}

/* ── CATEGORY TABS ── */
.cat-bar { position:sticky; top:68px; z-index:100; background:var(--white); border-bottom:1px solid var(--border); padding:.875rem 5vw; display:flex; align-items:center; gap:.625rem; flex-wrap:wrap; }
.cat-btn { padding:.375rem .9rem; border-radius:100px; border:1.5px solid var(--border); font-family:inherit; font-size:.8125rem; font-weight:600; color:var(--gray); cursor:pointer; background:var(--white); transition:border-color .18s,background .18s,color .18s; white-space:nowrap; }
.cat-btn:hover { border-color:var(--mist); color:var(--navy); }
.cat-btn.active { background:var(--navy); border-color:var(--navy); color:var(--white); }

/* ── LAYOUT ── */
.blog-wrap { max-width:1200px; margin:0 auto; padding:3.5rem 5vw 5rem; display:grid; grid-template-columns:1fr 320px; gap:3.5rem; align-items:start; }

/* ── FEATURED POST ── */
.featured-post { border-radius:18px; overflow:hidden; border:1px solid var(--border); margin-bottom:2.5rem; display:grid; grid-template-columns:1fr 1fr; transition:box-shadow .2s; }
.featured-post:hover { box-shadow:0 12px 40px rgba(13,27,42,.1); }
.featured-img { position:relative; overflow:hidden; min-height:320px; }
.featured-img img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .4s; }
.featured-post:hover .featured-img img { transform:scale(1.04); }
.featured-badge { position:absolute; top:16px; left:16px; background:var(--teal); color:var(--white); font-size:.7rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; padding:4px 12px; border-radius:100px; }
.featured-body { padding:2.25rem; display:flex; flex-direction:column; justify-content:center; }
.post-meta { display:flex; align-items:center; gap:.75rem; font-size:.75rem; color:var(--gray); margin-bottom:1rem; flex-wrap:wrap; }
.post-cat { font-weight:700; color:var(--teal); text-transform:uppercase; letter-spacing:.08em; }
.post-dot { width:3px; height:3px; border-radius:50%; background:var(--border); }
.featured-body h2 { font-family:'Playfair Display',serif; font-size:clamp(1.375rem,2.5vw,1.875rem); color:var(--navy); line-height:1.25; margin-bottom:.875rem; }
.featured-body p { font-size:.9375rem; color:var(--gray); line-height:1.7; margin-bottom:1.5rem; }
.read-more { display:inline-flex; align-items:center; gap:6px; font-size:.875rem; font-weight:700; color:var(--teal); text-decoration:none; transition:gap .2s; }
.read-more:hover { gap:10px; }
.read-more svg { width:14px; height:14px; }

/* ── POST GRID ── */
.post-grid { display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; }
.post-card { border:1px solid var(--border); border-radius:14px; overflow:hidden; transition:box-shadow .2s,transform .2s; display:flex; flex-direction:column; }
.post-card:hover { box-shadow:0 8px 28px rgba(13,27,42,.09); transform:translateY(-2px); }
.post-card.hidden { display:none; }
.card-img { height:190px; overflow:hidden; position:relative; }
.card-img img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .4s; }
.post-card:hover .card-img img { transform:scale(1.05); }
.card-img-placeholder { width:100%; height:100%; display:flex; align-items:center; justify-content:center; font-size:3rem; }
.card-body { padding:1.375rem 1.5rem; flex:1; display:flex; flex-direction:column; }
.card-body h3 { font-family:'Playfair Display',serif; font-size:1.125rem; color:var(--navy); line-height:1.3; margin-bottom:.5rem; }
.card-body p { font-size:.875rem; color:var(--gray); line-height:1.6; margin-bottom:1.125rem; flex:1; }
.card-footer { display:flex; justify-content:space-between; align-items:center; border-top:1px solid var(--border); padding-top:.875rem; margin-top:auto; }
.card-author { display:flex; align-items:center; gap:.5rem; font-size:.75rem; color:var(--gray); }
.author-avatar { width:26px; height:26px; border-radius:50%; background:linear-gradient(135deg,var(--teal),var(--mist)); display:flex; align-items:center; justify-content:center; color:var(--white); font-size:.65rem; font-weight:700; }

/* ── SIDEBAR ── */
.sidebar { position:sticky; top:120px; display:flex; flex-direction:column; gap:1.5rem; }
.sidebar-card { background:#f8fafc; border:1px solid var(--border); border-radius:14px; padding:1.5rem; }
.sidebar-card h4 { font-size:.75rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--gray); margin-bottom:1.125rem; }

.newsletter-card { background:var(--navy); border-radius:14px; padding:1.5rem; }
.newsletter-card h4 { font-size:.75rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.45); margin-bottom:.75rem; }
.newsletter-card h3 { font-family:'Playfair Display',serif; font-size:1.125rem; color:var(--white); margin-bottom:.5rem; }
.newsletter-card p { font-size:.8125rem; color:rgba(255,255,255,.55); margin-bottom:1.125rem; }
.newsletter-card input { width:100%; padding:.625rem .875rem; border:none; border-radius:8px; font-family:inherit; font-size:.875rem; background:rgba(255,255,255,.1); color:var(--white); outline:none; margin-bottom:.75rem; }
.newsletter-card input::placeholder { color:rgba(255,255,255,.35); }
.newsletter-card input:focus { background:rgba(255,255,255,.15); }
.btn-nl { width:100%; padding:.625rem; border:none; border-radius:8px; background:var(--teal); color:var(--white); font-family:inherit; font-size:.875rem; font-weight:700; cursor:pointer; transition:background .2s; }
.btn-nl:hover { background:#00a896; }

.recent-list { display:flex; flex-direction:column; gap:1rem; }
.recent-item { display:flex; gap:.75rem; align-items:flex-start; cursor:pointer; }
.recent-thumb { width:56px; height:56px; border-radius:8px; overflow:hidden; flex-shrink:0; background:var(--border); }
.recent-thumb img { width:100%; height:100%; object-fit:cover; }
.recent-thumb-placeholder { width:100%; height:100%; display:flex; align-items:center; justify-content:center; font-size:1.25rem; }
.recent-info h5 { font-size:.8125rem; font-weight:700; color:var(--navy); line-height:1.3; margin-bottom:2px; }
.recent-info span { font-size:.7rem; color:var(--gray); }

.tag-cloud { display:flex; flex-wrap:wrap; gap:.5rem; }
.tag-pill { font-size:.75rem; font-weight:600; color:var(--gray); background:var(--white); border:1px solid var(--border); padding:4px 12px; border-radius:100px; cursor:pointer; transition:border-color .18s,color .18s; }
.tag-pill:hover { border-color:var(--teal); color:var(--teal); }

.quick-links { display:flex; flex-direction:column; gap:.5rem; }
.quick-link { display:flex; align-items:center; gap:.5rem; font-size:.875rem; color:var(--navy); text-decoration:none; font-weight:500; padding:.375rem 0; border-bottom:1px solid var(--border); transition:color .2s; }
.quick-link:last-child { border-bottom:none; }
.quick-link:hover { color:var(--teal); }
.quick-link svg { width:14px; height:14px; flex-shrink:0; color:var(--teal); }

/* ── CTA ── */
.blog-cta { background:var(--navy); padding:4.5rem 5vw; text-align:center; }
.blog-cta h2 { font-family:'Playfair Display',serif; font-size:clamp(1.75rem,4vw,2.5rem); color:var(--white); margin-bottom:.75rem; }
.blog-cta p { font-size:1rem; color:rgba(255,255,255,.6); max-width:480px; margin:0 auto 2rem; }
.cta-row { display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; }
.btn-teal-lg { display:inline-flex; align-items:center; gap:8px; background:var(--teal); color:var(--white); text-decoration:none; font-weight:700; font-size:1rem; padding:.875rem 2rem; border-radius:8px; transition:background .2s,transform .15s; }
.btn-teal-lg:hover { background:#00a896; transform:translateY(-1px); }
.btn-ghost-lg { display:inline-flex; align-items:center; gap:8px; border:1.5px solid rgba(255,255,255,.3); color:var(--white); text-decoration:none; font-weight:500; font-size:1rem; padding:.875rem 2rem; border-radius:8px; transition:border-color .2s,background .2s; }
.btn-ghost-lg:hover { border-color:var(--mist); background:rgba(79,195,247,.08); }

/* ── RESPONSIVE ── */
@media (max-width:1000px) {
  .blog-wrap { grid-template-columns:1fr; }
  .sidebar { position:static; }
  .featured-post { grid-template-columns:1fr; }
  .featured-img { min-height:240px; }
}
@media (max-width:640px) {
  .post-grid { grid-template-columns:1fr; }
}