/* assets/cards.css — Modern Cards Grid */
:root{
  --card-border:#e5e7eb;
  --card-shadow: 0 14px 40px -24px rgba(2,6,23,.22);
  --ink:#0f172a; --muted:#475569;
}

.cards{ display:grid; gap:1rem; margin-top:.8rem }
@media(min-width:640px){ .cards{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media(min-width:1040px){ .cards{ grid-template-columns: repeat(3, minmax(0,1fr)); } }

.card{
  background:#fff; border:1px solid var(--card-border); border-radius:1rem;
  overflow:hidden; display:flex; flex-direction:column; transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  box-shadow: var(--card-shadow);
}
.card:hover{ transform: translateY(-3px); box-shadow:0 22px 64px -32px rgba(2,6,23,.26); border-color:#d1d5db; }

.card .thumb{
  display:block; aspect-ratio:16/9; background:#eef2f7; background-size:cover; background-position:center;
}
.card .body{ padding:1rem }
.card h3{ margin:.2rem 0 .4rem; font-size:1.05rem; line-height:1.25; color:var(--ink)}
.card p{ color:var(--muted); font-size:.95rem; line-height:1.45; }
.card .meta{ color:#94a3b8; font-size:.8rem; margin-top:.45rem }
.card .actions{ margin-top:auto; padding:0 1rem 1rem }
.card .btn{ display:inline-block; text-decoration:none; background:#10b981; color:#fff; padding:.55rem .85rem; border-radius:.7rem; font-weight:700 }
.card .btn:hover{ filter:brightness(.98) }