/* ============================================================
   blog.css — Blog listing + article pages
   Shares the design language of catalog.css (brand green / orange)
   ============================================================ */
body { margin: 0; background: var(--bg, #f5f7f9); }

.blog-hero {
    background: linear-gradient(120deg, #0f3d26 0%, var(--brand) 55%, #1c7a4a 100%);
    color: #fff;
    padding: 34px 18px 30px;
}
.blog-hero .inner { max-width: 1200px; margin: 0 auto; }
.blog-hero .crumb { font-size: 12px; color: rgba(255,255,255,.68); margin-bottom: 8px; }
.blog-hero .crumb a:hover { color: #fff; }
.blog-hero h1 { margin: 0 0 7px; font-size: 27px; font-weight: 800; letter-spacing: -.4px; }
.blog-hero p { margin: 0; font-size: 13.5px; color: rgba(255,255,255,.82); max-width: 720px; }

.wrap { max-width: 1200px; margin: 0 auto; padding: 18px 18px 60px; }

/* ---------------- listing ---------------- */
.blog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 16px; }
.post {
    background: #fff; border: 1px solid var(--line); border-radius: 10px;
    overflow: hidden; display: flex; flex-direction: column;
    transition: transform .14s, box-shadow .14s;
}
.post:hover { transform: translateY(-3px); box-shadow: 0 12px 24px -10px rgba(15,23,42,.2); }
.post-img { aspect-ratio: 16 / 9; background: #f1f5f9; overflow: hidden; display: block; }
.post-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.post-body { padding: 14px 15px 15px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.post-meta { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--muted); flex-wrap: wrap; }
.post-cat {
    background: #e8f2ec; color: var(--brand); border-radius: 999px;
    padding: 2px 9px; font-weight: 800; font-size: 10.5px; letter-spacing: .4px;
    text-transform: uppercase;
}
.post h2 { margin: 0; font-size: 16px; line-height: 1.35; color: var(--ink); letter-spacing: -.2px; }
.post h2 a:hover { color: var(--brand); }
.post p { margin: 0; font-size: 13px; color: var(--muted); line-height: 1.55; }
.post-foot { margin-top: auto; padding-top: 9px; border-top: 1px solid var(--line-2);
    display: flex; align-items: center; justify-content: space-between; font-size: 12px; }
.post-foot .read { color: var(--brand); font-weight: 700; }

/* ---------------- article ---------------- */
.article { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 30px clamp(18px, 4vw, 46px); }
.article-head { margin-bottom: 20px; padding-bottom: 18px; border-bottom: 1px solid var(--line-2); }
.article-head .post-meta { margin-bottom: 10px; }
.article-head h1 { margin: 0 0 10px; font-size: clamp(22px, 3vw, 31px); line-height: 1.24;
    color: var(--ink); letter-spacing: -.5px; }
.article-head .dek { margin: 0; font-size: 14.5px; color: var(--muted); line-height: 1.6; max-width: 780px; }

.article-hero { margin: 20px 0 24px; border-radius: 10px; overflow: hidden; background: #f1f5f9; }
.article-hero img { width: 100%; display: block; aspect-ratio: 16 / 7; object-fit: cover; }

.article-body { max-width: 800px; }
.article-body h2 { font-size: 19px; margin: 30px 0 10px; color: var(--ink); letter-spacing: -.2px;
    padding-top: 4px; }
.article-body h3 { font-size: 15.5px; margin: 22px 0 8px; color: var(--ink); }
.article-body p { font-size: 14px; line-height: 1.75; color: var(--ink-2); margin: 0 0 13px; }
.article-body ul, .article-body ol { margin: 0 0 14px; padding-left: 21px; }
.article-body li { font-size: 14px; line-height: 1.7; color: var(--ink-2); margin-bottom: 7px; }
.article-body strong { color: var(--ink); }
.article-body a { color: var(--brand); font-weight: 600; }
.article-body a:hover { text-decoration: underline; }

.callout {
    background: #f2f8f4; border-left: 3px solid var(--brand);
    border-radius: 0 9px 9px 0; padding: 13px 16px; margin: 18px 0;
    font-size: 13.5px; line-height: 1.65; color: var(--ink-2);
}
.callout b { color: var(--ink); display: block; margin-bottom: 5px; font-size: 13px;
    text-transform: uppercase; letter-spacing: .5px; }

.spec-table { width: 100%; border-collapse: collapse; font-size: 13.5px; margin: 14px 0 18px; }
.spec-table th, .spec-table td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--line-2); }
.spec-table th { background: #fbfcfd; color: var(--muted); font-weight: 600; width: 210px; vertical-align: top; }
.spec-table td { color: var(--ink); font-weight: 600; }
.spec-table tr:last-child th, .spec-table tr:last-child td { border-bottom: 1px solid var(--line); }

.cta-box {
    background: linear-gradient(120deg, #0f3d26, var(--brand));
    color: #fff; border-radius: 10px; padding: 22px 24px; margin: 30px 0 6px;
}
.cta-box h3 { margin: 0 0 7px; font-size: 17px; }
.cta-box p { color: rgba(255,255,255,.84) !important; font-size: 13.5px !important; margin: 0 0 13px !important; }
.cta-box a {
    display: inline-block; background: var(--accent); color: #fff; border-radius: 8px;
    padding: 9px 17px; font-weight: 700; font-size: 13px; text-decoration: none;
}

.more-grid { margin-top: 18px; }

/* tags cloud in article footer */
.tagrow { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 26px; padding-top: 16px;
    border-top: 1px solid var(--line-2); }
.tagrow span {
    background: var(--line-2); color: var(--ink-2); border-radius: 999px;
    padding: 3px 11px; font-size: 11.5px; font-weight: 600;
}
.tagrow span b { color: var(--brand); }

@media (max-width: 640px) {
    .blog-hero h1 { font-size: 22px; }
    .article { padding: 20px 15px; }
    .article-hero img { aspect-ratio: 16 / 10; }
}