/* ProductLab — blog index */
.blog-hero { padding: 60px 0 24px; }
.blog-hero h1 { font-size: clamp(38px, 5vw, 60px); line-height:1.02; margin-top:12px; }
.blog-hero p { font-size:18px; color:var(--ink-2); margin-top:16px; max-width:56ch; line-height:1.55; }

.blog-feature { display:grid; grid-template-columns: 1.1fr .9fr; gap:0; border:1px solid var(--line); border-radius: var(--r-xl); overflow:hidden; background:#fff; margin: 36px 0 56px; box-shadow: var(--shadow-md); transition: transform .2s var(--ease), box-shadow .2s; }
.blog-feature:hover { transform:translateY(-3px); box-shadow: var(--shadow-lg, var(--shadow-md)); }
.blog-feature .bf-media { background:linear-gradient(150deg, var(--brand-deep), var(--green-500)); min-height:300px; position:relative; overflow:hidden; }
.blog-feature .bf-media .grid { position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,.14) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.14) 1px,transparent 1px); background-size:34px 34px; mask-image:radial-gradient(70% 70% at 50% 40%,#000,transparent 75%); }
.blog-feature .bf-media .glyph { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }
.blog-feature .bf-body { padding: 38px; display:flex; flex-direction:column; justify-content:center; }
.blog-feature .bf-tag { font-family:var(--font-mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--brand-deep); font-weight:700; }
.blog-feature h2 { font-size: clamp(24px,2.6vw,32px); margin-top:14px; line-height:1.1; }
.blog-feature p { color:var(--ink-2); margin-top:14px; line-height:1.55; font-size:15.5px; }
.blog-feature .bf-meta { display:flex; align-items:center; gap:10px; margin-top:22px; font-size:13.5px; color:var(--ink-3); }
@media (max-width: 820px){ .blog-feature { grid-template-columns:1fr; } .blog-feature .bf-media { min-height:200px; } }

.blog-grid { display:grid; grid-template-columns: repeat(3,1fr); gap:22px; padding-bottom: 90px; }
.blog-card { background:#fff; border:1px solid var(--line); border-radius: var(--r-lg); overflow:hidden; display:flex; flex-direction:column; transition: transform .2s var(--ease), box-shadow .2s; }
.blog-card:hover { transform:translateY(-4px); box-shadow: var(--shadow-md); }
.blog-card .bc-media { height:150px; position:relative; overflow:hidden; }
.blog-card .bc-media .grid { position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,.16) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.16) 1px,transparent 1px); background-size:26px 26px; }
.blog-card .bc-media .glyph { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }
.blog-card .bc-body { padding: 22px; display:flex; flex-direction:column; flex:1; }
.blog-card .bc-tag { font-family:var(--font-mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--brand-deep); font-weight:700; }
.blog-card h3 { font-size:19px; margin-top:10px; line-height:1.15; }
.blog-card p { color:var(--ink-2); font-size:14px; margin-top:9px; line-height:1.5; }
.blog-card .bc-meta { margin-top:auto; padding-top:18px; font-size:13px; color:var(--ink-4); font-family:var(--font-mono); }
@media (max-width: 880px){ .blog-grid { grid-template-columns:1fr 1fr; } }
@media (max-width: 560px){ .blog-grid { grid-template-columns:1fr; } }

.blog-note { text-align:center; padding: 0 0 80px; color:var(--ink-3); font-size:14.5px; }
.blog-note a { color:var(--brand-deep); font-weight:700; }

/* ---- blog post pages + category chips (migrated blog) ---- */
.cat-chips { display:flex; flex-wrap:wrap; gap:10px; margin-top:26px; }
.cat-chip { font-family:var(--font-mono); font-size:12px; letter-spacing:.06em; text-transform:uppercase; font-weight:700; color:var(--brand-deep); background:var(--brand-soft); padding:8px 14px; border-radius:999px; }
.cat-chip:hover { background:var(--brand); color:#fff; }
.post-back { font-family:var(--font-mono); font-size:12.5px; font-weight:700; color:var(--ink-3); display:block; margin-bottom:22px; }
.post-back:hover { color:var(--brand-deep); }
.post-hero { padding:56px 0 10px; }
.post-hero h1 { font-size: clamp(30px, 4vw, 46px); line-height:1.06; margin-top:12px; max-width:22ch; }
.post-meta { margin-top:16px; color:var(--ink-3); font-size:14px; }
.post-wrap { max-width: 820px; }
.post-hero-img { width:100%; max-height:420px; object-fit:cover; border-radius: var(--r-xl); margin:26px 0 6px; border:1px solid var(--line); }
.post-body { padding: 26px 0 70px; font-size:16.5px; line-height:1.7; color:var(--ink-1, #1c2733); }
.post-body h2 { font-size:26px; margin:38px 0 12px; line-height:1.15; }
.post-body h3 { font-size:20px; margin:30px 0 10px; }
.post-body p { margin:14px 0; color:var(--ink-2); }
.post-body ul, .post-body ol { margin:14px 0 14px 24px; color:var(--ink-2); }
.post-body li { margin:7px 0; }
.post-body a { color:var(--brand-deep); font-weight:600; }
.post-body img { max-width:100%; height:auto; border-radius: var(--r-lg); margin:18px 0; border:1px solid var(--line); }
.post-body blockquote { border-left:3px solid var(--brand); margin:18px 0; padding:6px 0 6px 18px; color:var(--ink-2); font-style:italic; }
.post-body table { border-collapse:collapse; width:100%; margin:18px 0; font-size:14.5px; }
.post-body th, .post-body td { border:1px solid var(--line); padding:9px 12px; text-align:left; }
.post-related { padding-bottom: 40px; }
.post-related .pr-title { font-size:24px; margin-bottom:20px; }
.bc-media { background:linear-gradient(150deg, var(--brand-deep), var(--green-500)); }