/* ==========================================================================
   06 · CARDS
   Design, collection, occasion and post cards share one skeleton.
   ========================================================================== */

.card { position: relative; background: transparent; }

.card__link { display: block; height: 100%; }

.card__media {
  position: relative;
  overflow: hidden;
  margin-bottom: var(--s-4);
  background: var(--linen);
}

.card__media img {
  width: 100%;
  transition: transform 0.7s var(--ease);
}

.card__link:hover .card__media img { transform: scale(1.035); }

.card__body {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
}

.card__meta {
  color: var(--gilt);
  font-size: var(--fs-100);
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
}

.card__title {
  font-size: var(--fs-600);
  line-height: var(--lh-snug);
}

.card__text {
  color: var(--ink-2);
  font-size: var(--fs-300);
}

.card__price {
  margin-top: var(--s-1);
  color: var(--ink-2);
  font-family: var(--font-mono);
  font-size: var(--fs-200);
  font-variant-numeric: tabular-nums;
}


/* --- Occasion tile --------------------------------------------------------
   Wayfinding, not a product: the label sits on the artwork so the tile reads
   as one object rather than a captioned image. */

.card--occasion .card__media { margin-bottom: 0; }

.card--occasion .card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(34, 31, 28, 0.62) 0%,
    rgba(34, 31, 28, 0.12) 45%,
    transparent 70%
  );
}

.card__body--overlay {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  padding: var(--s-5);
  color: #fff;
}

.card--occasion .card__meta { color: rgba(255, 255, 255, 0.75); }


/* --- Collections ---------------------------------------------------------- */

.collections--feature {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  gap: var(--s-5);
}

.collections--feature .card--wide .card__media img,
.collections--feature .card--wide .placeholder--portrait {
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

@media (max-width: 980px) {
  .collections--feature { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 600px) {
  .collections--feature { grid-template-columns: 1fr; }
}