/* =========================================================
   BLOG — magazine layout, sidebar widgets, article meta
   Extends the site's existing light theme (style.css tokens);
   scoped under .blog-* / .magazine-* / .widget-* so it never
   touches other sections.
   ========================================================= */

/* ---------- Magazine hero (featured article) ---------- */
.magazine-hero{
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 32px;
  align-items: stretch;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: var(--card);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  margin-bottom: 64px;
}
@media (max-width: 860px){ .magazine-hero{ grid-template-columns: 1fr; } }

.magazine-hero .hero-media{
  position: relative;
  min-height: 260px;
  overflow: hidden;
}
.magazine-hero .hero-media img{ width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.magazine-hero .hero-media .blog-tag{ position: absolute; top: 18px; left: 18px; }

.magazine-hero .hero-body{
  padding: 36px 36px 36px 8px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
@media (max-width: 860px){ .magazine-hero .hero-body{ padding: 28px; } }

.magazine-hero .hero-body .featured-label{
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 14px;
}
.magazine-hero h1, .magazine-hero h2{ font-size: clamp(1.4rem, 3vw, 2rem); margin-bottom: 14px; }
.magazine-hero p.excerpt{ color: var(--text-dim); margin-bottom: 20px; }

/* ---------- Category cards ---------- */
.category-cards{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-bottom: 64px;
}
@media (max-width: 780px){ .category-cards{ grid-template-columns: 1fr; } }

.category-card-link{
  display: block;
  padding: 30px 26px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: var(--card);
  box-shadow: var(--shadow-card);
  transition: transform .25s ease, border-color .25s ease;
}
.category-card-link:hover{ transform: translateY(-6px); border-color: var(--border-strong); }

.category-card-link .cat-icon{
  width: 52px; height: 52px; border-radius: 14px; margin-bottom: 18px;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent-soft); border: 1px solid rgba(21,96,224,.22);
}
.category-card-link .cat-icon svg{ width: 24px; height: 24px; color: var(--accent); }
.category-card-link h3{ font-size: 1.1rem; margin-bottom: 8px; }
.category-card-link p{ color: var(--text-dim); font-size: .9rem; margin-bottom: 14px; }
.category-card-link .cat-count{ font-size: .78rem; font-weight: 700; color: var(--text-dimmer); text-transform: uppercase; letter-spacing: .04em; }

/* ---------- Layout: main content + sidebar ---------- */
.blog-layout{
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 40px;
  align-items: start;
}
@media (max-width: 980px){ .blog-layout{ grid-template-columns: 1fr; } }

.blog-main section + section{ margin-top: 64px; }
.blog-layout + section{ margin-top: 64px; }

.blog-section-title{
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; margin-bottom: 28px;
}
.blog-section-title h2{ font-size: 1.4rem; }
.blog-section-title a{ font-size: .86rem; font-weight: 600; color: var(--accent); white-space: nowrap; }

/* ---------- Sidebar ---------- */
.blog-sidebar{ display: flex; flex-direction: column; gap: 28px; position: sticky; top: 100px; }

.widget{
  padding: 26px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: var(--card);
  box-shadow: var(--shadow-card);
}
.widget h3{ font-size: 1rem; margin-bottom: 18px; }

.widget-search form{ display: flex; gap: 8px; }
.widget-search input{
  flex: 1; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 11px 14px; font-size: .9rem; color: var(--ice);
}
.widget-search input:focus{ outline: none; border-color: var(--border-strong); background: var(--accent-soft); }
.widget-search button{
  width: 44px; flex-shrink: 0; border-radius: var(--radius-sm); border: none;
  background: linear-gradient(135deg, var(--blue-400), var(--blue-600)); color: #fff;
  display: flex; align-items: center; justify-content: center;
}
.widget-search button svg{ width: 18px; height: 18px; }
.search-no-results{ margin-top: 12px; font-size: .85rem; color: var(--text-dimmer); display: none; }
.search-no-results.show{ display: block; }

.widget-categories ul, .widget-recent ul{ display: flex; flex-direction: column; gap: 12px; }
.widget-categories li{ display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.widget-categories a{ font-size: .92rem; color: var(--ice); font-weight: 500; }
.widget-categories a:hover{ color: var(--accent); }
.widget-categories .count{
  font-size: .74rem; font-weight: 700; color: var(--text-dimmer);
  background: var(--accent-soft); border-radius: 999px; padding: 2px 9px;
}

.widget-recent li{ display: flex; gap: 12px; align-items: center; }
.widget-recent .thumb{ width: 56px; height: 56px; border-radius: 10px; overflow: hidden; flex-shrink: 0; background: var(--accent-soft); }
.widget-recent .thumb img{ width: 100%; height: 100%; object-fit: cover; }
.widget-recent .info a{ font-size: .86rem; font-weight: 600; color: var(--ice); line-height: 1.35; }
.widget-recent .info a:hover{ color: var(--accent); }
.widget-recent .info .date{ font-size: .74rem; color: var(--text-dimmer); margin-top: 3px; }

.widget-tags .tag-cloud{ display: flex; flex-wrap: wrap; gap: 8px; }

/* ---------- Tags ---------- */
.tag-chip{
  display: inline-flex; align-items: center; font-size: .78rem; font-weight: 600;
  color: var(--accent); background: var(--accent-soft); border: 1px solid rgba(21,96,224,.2);
  padding: 6px 13px; border-radius: 999px; transition: background .2s ease, border-color .2s ease;
}
.tag-chip:hover{ background: rgba(21,96,224,.14); border-color: var(--border-strong); }

/* ---------- Post meta row (author / date / reading time) ---------- */
.post-meta-row{
  display: flex; flex-wrap: wrap; align-items: center; gap: 18px;
  color: var(--text-dimmer); font-size: .85rem; margin-bottom: 8px;
}
.post-meta-row .meta-item{ display: inline-flex; align-items: center; gap: 6px; }
.post-meta-row svg{ width: 15px; height: 15px; }

/* ---------- Social share ---------- */
.share-buttons{ display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.share-buttons .share-label{ font-size: .82rem; font-weight: 600; color: var(--text-dim); margin-right: 4px; }
.share-btn{
  width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--border);
  background: var(--card); display: flex; align-items: center; justify-content: center;
  transition: transform .2s ease, border-color .2s ease, background .2s ease;
  position: relative;
}
.share-btn:hover{ transform: translateY(-3px); border-color: var(--border-strong); background: var(--accent-soft); }
.share-btn svg{ width: 17px; height: 17px; color: var(--accent); }
.share-btn .copied-tip{
  position: absolute; bottom: 48px; left: 50%; transform: translateX(-50%);
  background: var(--ice); color: #fff; font-size: .72rem; font-weight: 600;
  padding: 5px 10px; border-radius: 6px; white-space: nowrap;
  opacity: 0; pointer-events: none; transition: opacity .2s ease;
}
.share-btn .copied-tip.show{ opacity: 1; }

/* ---------- Pagination ---------- */
.pagination{ display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 48px; }
.page-btn{
  min-width: 40px; height: 40px; padding: 0 12px; border-radius: var(--radius-sm);
  border: 1px solid var(--border); background: var(--card); color: var(--ice);
  display: flex; align-items: center; justify-content: center; font-size: .88rem; font-weight: 600;
}
.page-btn.active{ background: linear-gradient(135deg, var(--blue-400), var(--blue-600)); color: #fff; border-color: transparent; }
.page-btn[aria-disabled="true"]{ opacity: .4; pointer-events: none; }

/* ---------- Empty state / topic roadmap (categories with no posts yet) ---------- */
.empty-state{
  text-align: center; padding: 50px 24px; border-radius: var(--radius-lg);
  border: 1px dashed var(--border-strong); background: var(--accent-soft); margin-bottom: 48px;
}
.empty-state .empty-icon{
  width: 60px; height: 60px; margin: 0 auto 18px; border-radius: 16px;
  background: #fff; border: 1px solid var(--border); display: flex; align-items: center; justify-content: center;
}
.empty-state .empty-icon svg{ width: 28px; height: 28px; color: var(--accent); }
.empty-state h3{ font-size: 1.15rem; margin-bottom: 10px; }
.empty-state p{ color: var(--text-dim); max-width: 480px; margin: 0 auto; }

.topic-roadmap{
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
}
@media (max-width: 780px){ .topic-roadmap{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px){ .topic-roadmap{ grid-template-columns: 1fr; } }

.topic-roadmap li{
  display: flex; align-items: center; gap: 10px;
  padding: 14px 16px; border-radius: var(--radius-sm);
  border: 1px solid var(--border); background: var(--card); font-size: .88rem; font-weight: 500; color: var(--text-dim);
}
.topic-roadmap li svg{ width: 16px; height: 16px; color: var(--text-dimmer); flex-shrink: 0; }
.topic-roadmap-head{ display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; flex-wrap: wrap; gap: 10px; }
.topic-roadmap-head h3{ font-size: 1.1rem; }
.topic-roadmap-head span{ font-size: .78rem; font-weight: 700; color: var(--text-dimmer); text-transform: uppercase; letter-spacing: .04em; }

/* ---------- Category intro (archive pages) ---------- */
.category-intro{ max-width: 720px; margin: 0 auto 48px; text-align: center; }
.category-intro h1{ font-size: clamp(1.8rem, 4vw, 2.6rem); margin-bottom: 16px; }
.category-intro p{ color: var(--text-dim); font-size: 1.02rem; }

/* ---------- Browse-by-topic chip cloud (category pages) ---------- */
/* Signals, right under the category title, that this section actually
   spans many distinct sub-topics — not just one grid of posts. */
.topic-browse{ margin: 0 0 56px; }
.topic-browse-head{ display:flex; align-items:baseline; justify-content:space-between; gap:14px; margin-bottom:20px; flex-wrap:wrap; }
.topic-browse-head h2{ font-size: 1.25rem; }
.topic-browse-head span{ font-size:.78rem; font-weight:700; color: var(--text-dimmer); text-transform:uppercase; letter-spacing:.04em; }

.topic-chips{ display:flex; flex-wrap:wrap; gap:10px; }

.topic-chip{
  display:inline-flex; align-items:center; gap:7px;
  padding:10px 18px; border-radius:999px; font-size:.88rem; font-weight:600;
  border:1px solid var(--border); background: var(--card); color: var(--ice);
  transition: transform .2s ease, border-color .2s ease, background .2s ease, color .2s ease;
}
a.topic-chip:hover{ transform: translateY(-3px); border-color: var(--border-strong); background: var(--accent-soft); color: var(--accent); }

.topic-chip.soon{ color: var(--text-dimmer); cursor: default; background: transparent; }
.topic-chip .soon-tag{
  font-size:.64rem; font-weight:700; letter-spacing:.03em; text-transform:uppercase;
  color: var(--accent); background: var(--accent-soft); border:1px solid rgba(21,96,224,.2);
  padding:2px 8px; border-radius:999px;
}

/* ---------- No-results (search) ---------- */
.blog-grid.filtering .blog-card{ display: none; }
.blog-grid.filtering .blog-card.match{ display: flex; }