/* ============================================================
   Component Library
   :root tokens. Theme-ready.
   ============================================================ */

/* --- C13: CARD --- */
.card{background:rgb(255 255 255 / 3%);border:1px solid var(--color-bg-secondary);border-radius:var(--border-radius);overflow:hidden;transition:box-shadow .25s,transform .25s}
.card--hoverable:hover{box-shadow:var(--box-shadow);transform:translateY(-2px)}
.card__image{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;background:var(--color-bg-secondary)}
.card__body{padding:20px}
.card__title{font-size:.95rem;font-weight:700;color:var(--color-text);margin:0 0 6px;line-height:1.35}
.card__text{font-size:.82rem;color:var(--color-text-secondary);line-height:1.65;margin:0 !important;width:auto !important}
.card__footer{padding:14px 20px;border-top:1px solid var(--color-bg-secondary);display:flex;align-items:center;gap:12px}

/* Horizontal card */
.card--horizontal{display:flex}
.card--horizontal .card__image{width:180px;aspect-ratio:auto;flex-shrink:0}
.card--horizontal .card__body{flex:1}

@media(max-width:480px){
  .card--horizontal{flex-direction:column}
  .card--horizontal .card__image{width:100%;aspect-ratio:16/9}
}