/* ─── BLOG GRID ──────────────────────────────────────────── */
.blogs {
    background: var(--surface)
}

.blogs-hd {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: var(--sp-5);
    margin-bottom: var(--sp-7)
}

@media(max-width:760px) {
    .blogs-hd {
        flex-direction: column;
        align-items: flex-start
    }
}

.blogs-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: var(--sp-4)
}

@media(max-width:960px) {
    .blogs-grid {
        grid-template-columns: 1fr 1fr
    }
}

@media(max-width:600px) {
    .blogs-grid {
        grid-template-columns: 1fr
    }
}

.bc {
    background: var(--surface-raised);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    overflow: hidden;
    transition: transform .35s var(--ease-out), box-shadow .35s;
    display: flex;
    flex-direction: column
}

.bc:hover {
    transform: translateY(-4px);
    box-shadow: 0 24px 60px -20px rgba(10, 23, 38, .16)
}

.bc__img {
    width: 100%;
    object-fit: cover;
    display: block;
    flex-shrink: 0
}

.bc--feat .bc__img {
    height: 260px
}

.bc:not(.bc--feat) .bc__img {
    height: 160px
}

.bc__body {
    padding: var(--sp-4);
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    flex: 1
}

.bc__cat {
    font-family: var(--font-mono);
    font-size: .68rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--blue-500);
    font-weight: 500
}

.bc__title {
    font-family: var(--font-display);
    font-size: clamp(1rem, .9rem+.3vw, 1.2rem);
    font-weight: 500;
    line-height: 1.3;
    color: var(--text-primary)
}

.bc__meta {
    font-size: .76rem;
    color: var(--grey-500);
    font-family: var(--font-mono);
    margin-top: auto
}