/* ═══════ Cards + Grids — 编辑风极简 ═══════ */
.grid { display: grid; gap: 18px; }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1100px) { .grid--4 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 768px) { .grid--4, .grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 500px) { .grid--4, .grid--3 { grid-template-columns: 1fr; gap: 12px; } }
.card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; transition: all 0.3s var(--ease); }
.card:hover { border-color: var(--border-strong); }
.card__img-wrap { overflow: hidden; }
.card__img { width: 100%; aspect-ratio: 1; object-fit: cover; background: var(--bg-soft); display: block; transition: transform 0.5s var(--ease); }
.card:hover .card__img { transform: scale(1.03); }
.card__body { padding: 14px 16px; }
.card__title { font-weight: 500; font-size: 0.9rem; margin-bottom: 3px; }
.card__meta { font-size: 0.76rem; color: var(--fg-muted); display: flex; gap: 10px; align-items: center; }