/* ==========================================================================
   Card Component — Border + Hard Shadow
   - .card            base
   - .card--accent    lime fill
   - .card--pink/blue/yellow/coral  variants
   - .card--rotate-l/-r  subtle sticker rotation
   - .card--link      whole-card clickable lift
   ========================================================================== */

.card {
  --card-bg:      var(--surface);
  --card-color:   var(--ink-soft);
  --card-border:  var(--stroke);
  --card-shadow:  var(--sh-md);

  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);

  background-color: var(--card-bg);
  color: var(--card-color);
  border: 3px solid var(--card-border);
  border-radius: var(--r-0);
  box-shadow: var(--card-shadow);
  padding: var(--sp-6);

  transition:
    transform   var(--dur) var(--ease),
    box-shadow  var(--dur) var(--ease);
}

/* Subtle hover lift only on real hover devices */
@media (hover: hover) and (pointer: fine) {
  .card--link:hover,
  a.card:hover {
    transform: translate(-2px, -2px);
    box-shadow: var(--sh-lg);
  }
}

.card--link:active,
a.card:active {
  transform: translate(2px, 2px);
  box-shadow: var(--sh-sm);
}

a.card,
.card--link {
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* ---- Color variants ---------------------------------------------------- */

.card--accent { --card-bg: var(--accent);       --card-color: var(--ink-on-accent); }
.card--ink    { --card-bg: var(--ink);          --card-color: var(--bg); }
.card--pink   { --card-bg: var(--c-pink-soft);  --card-color: var(--ink); }
.card--blue   { --card-bg: var(--c-blue-soft);  --card-color: var(--ink); }
.card--yellow { --card-bg: var(--c-yellow-soft);--card-color: var(--ink); }
.card--coral  { --card-bg: var(--c-coral);      --card-color: var(--ink); }
.card--soft   { --card-bg: var(--surface-2); }

/* ---- Sticker rotations (only on devices with hover, to avoid clipping on phones) */

@media (min-width: 769px) {
  .card--rotate-l { transform: rotate(-1.5deg); }
  .card--rotate-r { transform: rotate( 1.5deg); }

  /* On hover, straighten + lift */
  .card--rotate-l:hover,
  .card--rotate-r:hover {
    transform: rotate(0) translate(-2px, -2px);
  }
}

/* ---- Card composition helpers ----------------------------------------- */

.card__media {
  margin: calc(-1 * var(--sp-6));
  margin-bottom: var(--sp-4);
  border-bottom: 3px solid var(--card-border);
  overflow: hidden;
  background-color: var(--ink);          /* visible while image loads */
}

.card__media img,
.card__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  aspect-ratio: 16 / 10;
}

.card__title {
  font-family: var(--ff-display);
  font-size: var(--fs-h3);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--ink);
  margin: 0;
}

.card__text {
  font-size: var(--fs-body-sm);
  line-height: var(--lh-base);
  color: inherit;
  opacity: 0.85;
  margin: 0;
}

.card__footer {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding-top: var(--sp-4);
  border-top: 2px solid var(--card-border);
}

/* ---- Stat / metric card ----------------------------------------------- */

.card--stat {
  align-items: flex-start;
  gap: var(--sp-2);
}

.card--stat .card__title {
  font-size: clamp(2rem, 5vw, 3.5rem);
}