/* ── Card 1: Standard vertical ── */
.card-1 { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 8px; overflow: hidden; display: flex; flex-direction: column; }
.card-1__thumb img { width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.card-1__body { padding: 24px; flex: 1; display: flex; flex-direction: column; }
.card-1__date { font-size: .8rem; color: var(--color-muted); margin-bottom: 8px; }
.card-1__title { font-size: 1.1rem; font-weight: 700; margin-bottom: 10px; }
.card-1__title a { color: var(--color-text); }
.card-1__title a:hover { color: var(--color-primary); text-decoration: none; }
.card-1__excerpt { font-size: .9rem; color: var(--color-muted); flex: 1; margin-bottom: 16px; }
.card-1__link { font-size: .875rem; font-weight: 600; color: var(--color-primary); margin-top: auto; }

/* ── Card 2: Horizontal ── */
.card-2 { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 8px; overflow: hidden; display: flex; gap: 0; }
.card-2__thumb { flex-shrink: 0; width: 160px; }
.card-2__thumb img { width: 100%; height: 100%; object-fit: cover; }
.card-2__body { padding: 20px; flex: 1; }
.card-2__date { font-size: .8rem; color: var(--color-muted); margin-bottom: 6px; }
.card-2__title { font-size: 1rem; font-weight: 700; margin-bottom: 8px; }
.card-2__title a { color: var(--color-text); }
.card-2__title a:hover { color: var(--color-primary); text-decoration: none; }
.card-2__excerpt { font-size: .875rem; color: var(--color-muted); }
@media (max-width: 480px) { .card-2 { flex-direction: column; } .card-2__thumb { width: 100%; height: 180px; } }