/* Blog page additions — inherits variables from my.css */

.blog-wrap{ padding: clamp(24px, 3vw, 36px) 0 80px }

/* Breadcrumbs */
.crumbs{ display:flex; gap:8px; align-items:center; font-size:14px; color:#6b7280; margin-top:6px }
.crumbs a{ color:#4b5563; text-decoration:none }
.crumbs a:hover{ color:#111827 }
.crumbs .current{ color:#111827; font-weight:600 }

/* Page head */
.blog-head{ text-align:center; margin: clamp(28px, 5vw, 44px) 0 }
.blog-head .chip{
  display:inline-block; background:#111; color:#fff; font-weight:700; font-size:12px;
  padding:6px 12px; border-radius:999px; margin-bottom:10px;
}
.blog-head h1{ font-size: clamp(28px, 5vw, 48px); line-height:1.1; margin:0 0 8px }
.blog-head .muted{ color:var(--muted); margin:0 }

/* Featured */
.featured{ margin: 0 0 clamp(24px, 5vw, 40px) }
.feat-card{
  display:grid; grid-template-columns: 1.25fr 1fr; gap: clamp(14px, 2.5vw, 22px);
  background:#fff; border:1px solid var(--ring); border-radius:24px;
  box-shadow:var(--shadow); text-decoration:none; color:inherit; overflow:hidden;
}
.feat-media img{ width:100%; height:100%; max-height:540px; object-fit:cover; display:block }
.feat-body{ padding: clamp(14px, 2vw, 20px) }
.feat-body .meta{ display:flex; flex-wrap:wrap; gap:10px; color:#9aa0a6; font-size:13px; margin:2px 0 6px }
.feat-body .tag{ display:inline-block; background:#f3f4f6; border:1px solid #eceef3; border-radius:999px; padding:4px 8px; font-weight:700; color:#111 }
.feat-body h2{ margin:6px 0 8px; font-size: clamp(20px, 2.6vw, 28px) }
.feat-body p{ margin:0 0 10px; color:#6b7280 }
.feat-body .readmore{ display:inline-block; font-weight:700; color:#111; border-bottom:1px solid #111; }
.feat-card:hover{ transform: translateY(-2px); box-shadow:0 24px 60px rgba(0,0,0,.10) }
@media (max-width: 992px){ .feat-card{ grid-template-columns:1fr } }

/* Toolbar */
.tools{ display:flex; flex-wrap:wrap; gap:12px; align-items:center; justify-content:space-between; margin: 10px 0 24px }
.search{ display:flex; align-items:center; gap:10px; background:#fff; border:1px solid var(--ring); border-radius:999px; padding:8px 12px; min-width:min(520px, 100%) }
.search input{ border:0; outline:none; width:100%; background:transparent; font-size:14px }
.filters{ display:flex; gap:8px; flex-wrap:wrap }
.pill{ border:1px solid #eceef3; background:#f7f7f8; color:#111; border-radius:999px; padding:8px 12px; font-weight:700; cursor:pointer }
.pill.is-active{ background:#111; color:#fff }

/* Layout grid */
.grid{ display:grid; grid-template-columns: 2fr 1fr; gap: clamp(18px, 3vw, 28px) }
.col-main{ min-width:0 } 
.col-side{ min-width:0; position:sticky; top: calc(var(--nav-h) + 16px); align-self:start }

/* Cards */
.card{
  display:grid; grid-template-columns: minmax(220px, 320px) 1fr; align-items:center; gap:22px;
  background:#fff; border:1px solid var(--ring); border-radius:18px; box-shadow:var(--shadow);
  padding: clamp(12px, 2vw, 16px); margin-bottom:16px;
}
.card .media img{ width:100%; height: clamp(160px, 24vw, 200px); object-fit:cover; border-radius:12px; display:block }
.card .body .meta{ display:flex; align-items:center; gap:10px; color:#9aa0a6; font-size:13px; margin:2px 0 6px }
.card .body .tag{ display:inline-block; background:#f3f4f6; border:1px solid #eceef3; border-radius:999px; padding:4px 8px; font-weight:700; color:#111 }
.card h3{ margin:6px 0 8px; font-size: clamp(18px, 2.2vw, 22px) }
.card h3 a{ text-decoration:none; color:#111 }
.card p{ margin:0; color:#6b7280 }
.card:hover{ transform: translateY(-3px); box-shadow:0 18px 50px rgba(0,0,0,.10) }
@media (max-width: 860px){ .card{ grid-template-columns:1fr } }

/* Empty state */
.empty{ background:#fff; border:1px dashed var(--ring); border-radius:14px; padding:18px; color:#6b7280; text-align:center; margin: 10px 0 }

/* Pager */
.pager{ display:flex; align-items:center; justify-content:flex-end; gap:12px; margin-top:12px }
.pg{ display:inline-flex; align-items:center; gap:8px; background:#fff; border:1px solid var(--ring); border-radius:999px; padding:8px 12px; font-weight:700 }
.pg[disabled]{ opacity:.45; cursor:not-allowed }
.pg-info{ color:#6b7280; font-size:13px }

/* Sidebar */
.side-card{ background:#fff; border:1px solid var(--ring); border-radius:18px; box-shadow:var(--shadow); padding:16px; margin-bottom:16px }
.side-card h4{ margin:0 0 10px }
.cats{ list-style:none; padding:0; margin:0; display:grid; gap:6px }
.link.cat{ border:0; background:transparent; color:#111; text-align:left; font-weight:600; cursor:pointer; padding:6px 4px; border-radius:10px }
.link.cat.is-active, .link.cat:hover{ background:#f6f7f9 }
.mini{ list-style:none; padding:0; margin:0; display:grid; gap:6px }
.mini a{ text-decoration:none; color:#4b5563 }
.mini a:hover{ color:#111827 }
.signup form{ display:grid; grid-template-columns:1fr auto; gap:8px }
.signup input{ border:1px solid var(--ring); border-radius:12px; padding:10px 12px; background:#fff; outline:none }

/* ===== Single Post styles ===== */
.post{ margin-top: clamp(32px, 6vw, 64px); background:#fff; border:1px solid var(--ring); border-radius:24px; box-shadow:var(--shadow); padding: clamp(18px, 3vw, 28px) }
.post-head .post-eyebrow{ display:flex; gap:10px; flex-wrap:wrap; color:#9aa0a6; font-size:13px; margin-bottom:6px }
.post-head .tag{ display:inline-block; background:#f3f4f6; border:1px solid #eceef3; border-radius:999px; padding:4px 8px; font-weight:700; color:#111 }
.post h1{ margin:6px 0 8px; font-size: clamp(24px, 4.6vw, 38px); line-height:1.15 }
.post .lead{ color:#4b5563; margin: 8px 0 14px }
.post-toc{ background:#f7f7f8; border:1px solid var(--ring); border-radius:16px; padding:12px 14px; margin-top:10px }
.post-toc strong{ font-size:13px; color:#6b7280 }
.post-toc ol{ margin:8px 0 0 18px; padding:0; display:grid; gap:6px }
.post-toc a{ text-decoration:none; color:#111 }
.post-toc a:hover{ text-decoration:underline }

.post-body{ margin-top:18px; color:#111827 }
.post-body h2{ margin: 22px 0 10px; font-size: clamp(20px, 3.6vw, 28px) }
.post-body h3{ margin: 16px 0 6px; font-size: clamp(18px, 3vw, 22px) }
.post-body p{ margin: 8px 0; color:#374151 }
.post-body ul, .post-body ol{ margin: 8px 0 8px 18px }
.post-body a{ color:#111; text-decoration: underline; text-underline-offset: 2px }
.post-foot{ margin-top: 18px; display:flex; align-items:center; justify-content:space-between; gap:14px; border-top:1px solid var(--ring); padding-top:14px }
.post-prev, .post-next{ display:inline-flex; gap:8px; align-items:center; text-decoration:none; font-weight:700; color:#111 }
.post-prev.disabled{ opacity:.5; pointer-events:none }

/* Stack on mobile */
@media (max-width: 992px){
  .grid{ grid-template-columns:1fr }
  .col-side{ position:static }
  .search{ min-width:100% }
}