/* Image-based card styling derived from the MDA print deck (≈62x93mm). */
@font-face {
  font-family: "Silka";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local("Silka"), local("Silka-Regular"), url("fonts/Silka-Regular.woff2") format("woff2");
}

@font-face {
  font-family: "Silka";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: local("Silka Bold"), local("Silka-Bold"), url("fonts/Silka-Bold.woff2") format("woff2");
}

:root {
  --card-width: 54mm;
  --card-height: calc(var(--card-width) * 1.5); /* Matches original ratio */
  --card-radius: 8px;
  --card-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  --deck-gap: 18px;

  --card-font: "Silka", "Inter", "Helvetica Neue", Arial, sans-serif;

  --mda-ocean: #30405c;
  --mda-clay: #681c00;
  --mda-stone: #6c6054;
  --mda-sand: #d8c4a0;
}

.mda-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--card-width), 1fr));
  gap: var(--deck-gap);
  justify-items: center;
}

.mda-card {
  width: var(--card-width);
  aspect-ratio: 62 / 93;
  background: #f5f6fa;
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
  overflow: hidden;
  position: relative;
  display: block;
  transition: transform 140ms ease, box-shadow 140ms ease;
}

.mda-card img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  border-radius: inherit;
  background: #ffffff;
}

.mda-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.16);
}

.mda-card--ocean {
  background: var(--mda-ocean);
}

.mda-card--clay {
  background: var(--mda-clay);
}

.mda-card--stone {
  background: var(--mda-stone);
}

.mda-card--sand {
  background: var(--mda-sand);
}

@media (max-width: 640px) {
  .mda-card {
    width: min(100%, var(--card-width));
  }
}