/* Shared cards + hero — used by blog and media listing pages. */

.blog-hero {
    background:
        radial-gradient(700px 380px at 15% 20%, rgba(45,90,39,0.09), transparent 60%),
        radial-gradient(600px 320px at 85% 80%, rgba(188,240,174,0.32), transparent 60%),
        linear-gradient(180deg, #ffffff 0%, #f4f7ef 100%);
    border-bottom: 1px solid #eef0e9;
    padding: 38px 0 32px;
    margin-bottom: 18px;
}
.blog-hero__inner { max-width: 760px; }
.blog-hero__eyebrow {
    display:inline-flex; align-items:center; gap:6px;
    font-size:0.78rem; font-weight:700; letter-spacing:0.14em; text-transform:uppercase;
    color:#2d5a27; background:rgba(21,66,18,0.07); border:1px solid rgba(21,66,18,0.12);
    padding:0.34rem 0.85rem; border-radius:999px; margin-bottom:12px;
}
.blog-hero__title {
    font-family: var(--font-heading);
    font-size: clamp(1.7rem, 1.2rem + 1.8vw, 2.4rem);
    font-weight: 800; color: var(--color-ink); line-height:1.2; margin:0 0 10px;
}
.blog-hero__lede { color:#5a6b55; font-size:0.98rem; line-height:1.7; margin:0; }

.blog-filter {
    display:flex; flex-wrap:wrap; gap:8px; margin-bottom:20px;
    padding:10px; background:#f9faf7; border:1px solid #eef0e9; border-radius:16px;
}
.blog-filter__pill {
    padding:7px 14px; border-radius:999px; font-size:0.84rem; font-weight:600;
    text-decoration:none; border:1px solid #e0e6dc; background:#fff; color:#2d5a27;
    transition: all 0.2s ease;
}
.blog-filter__pill:hover { border-color:#2d5a27; background:#f0f6e8; }
.blog-filter__pill.is-active { background:#154212; color:#fff; border-color:#154212; }

.blog-grid {
    display:grid; grid-template-columns: repeat(3, 1fr); gap:16px;
}
@media (max-width: 1024px) { .blog-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .blog-grid { grid-template-columns: 1fr; gap:12px; } }

.blog-card {
    background:#fff; border:1px solid #eef0e9; border-radius:18px; overflow:hidden;
    transition: transform 0.28s var(--ease-out), border-color 0.28s ease;
}
.blog-card:hover { transform: translateY(-4px); border-color: rgba(21,66,18,0.14); }
.blog-card__link { text-decoration:none; color:inherit; display:flex; flex-direction:column; height:100%; }
.blog-card__media {
    position:relative; height:176px; overflow:hidden; background:#dcead3;
}
.blog-card__img { width:100%; height:100%; object-fit:cover; display:block; transition: transform 0.4s ease; }
.blog-card:hover .blog-card__img { transform: scale(1.04); }
.blog-card__placeholder {
    width:100%; height:100%; display:flex; align-items:center; justify-content:center;
    font-size:2.4rem; background: linear-gradient(145deg, #dcecd4, #b8d6ab); color:#2d5a27;
}
.blog-card__overlay {
    position:absolute; inset:0;
    background: linear-gradient(to top, rgba(21,66,18,0.18), transparent 55%);
    pointer-events:none;
}
.blog-card__cats {
    position:absolute; left:10px; top:10px; display:flex; flex-wrap:wrap; gap:6px; z-index:1;
}
.blog-card__cat {
    background: rgba(255,255,255,0.92); backdrop-filter: blur(6px);
    color:#154212; font-size:0.7rem; font-weight:700; padding:4px 8px; border-radius:999px;
    border:1px solid rgba(21,66,18,0.08);
}
.blog-card__cat--more { background:#154212; color:#fff; }
.blog-card__body { padding:14px 14px 12px; display:flex; flex-direction:column; flex:1; gap:8px; }
.blog-card__title {
    font-family: var(--font-heading); font-size:0.98rem; font-weight:700; line-height:1.45;
    color: var(--color-ink); margin:0;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.blog-card__excerpt { color:#6b7a65; font-size:0.84rem; line-height:1.6; margin:0; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.blog-card__meta {
    display:flex; flex-wrap:wrap; gap:10px; align-items:center;
    font-size:0.76rem; color:#7a8a74; margin-top:auto; padding-top:8px; border-top:1px solid #f0f2ec;
}
.blog-card__meta-item, .blog-card__meta-author {
    display:inline-flex; align-items:center; justify-content:center; gap:4px; line-height:1; vertical-align:middle;
}
.blog-card__meta-author { margin-left:auto; color:#2d5a27; font-weight:600; }
.blog-card__meta .icon, .blog-hero__eyebrow .icon, .blog-filter__pill .icon {
    display:inline-flex; align-items:center; justify-content:center;
    font-size:0.82em; width:0.9em; height:0.9em; line-height:1; vertical-align:middle;
}
.blog-card__meta .icon { font-size:0.72rem; }

.blog-pagination { margin-top:22px; }
.blog-pagination .pagination { justify-content:center; }

.blog-empty {
    text-align:center; padding:40px 20px; background:#f9faf7; border:1px dashed #d6e2d0; border-radius:16px; color:#5a6b55;
}
.blog-empty__link { display:inline-block; margin-top:10px; color:#154212; font-weight:700; text-decoration:none; }
.blog-empty__link:hover { text-decoration:underline; }

@media (max-width: 600px) {
    .blog-hero { padding: 24px 0 20px; }
    .blog-card__media { height: 152px; }
    .blog-card__body { padding: 12px 12px 10px; }
}