/* #####################################################################
   WEBDEV FRAMEWORK v0.6
   MODULE: Cards
   PURPOSE: Reusable content containers and featured variants.
   DEPENDENCIES: colors.php, layout.css
   ##################################################################### */

.card { overflow:hidden; border:3px solid var(--color-border-light); border-radius:var(--radius-lg); background:var(--surface-soft); box-shadow:var(--shadow-sm); }
.card-media { display:block; width:100%; aspect-ratio:16/9; object-fit:cover; }
.card-body { padding:var(--space-lg); }
.card-title { margin-bottom:var(--space-sm); text-align:left; }
.card-featured { border-color:var(--site-color-accent); box-shadow:var(--shadow-md); }
.card-outline { background:transparent; box-shadow:none; }
.card-footer { padding:var(--space-md) var(--space-lg); border-top:1px solid var(--color-border-light); }