/* Keelan River — image fit tokens (Jarvis)
   Dark-luxury slots: crop/fit so photo backgrounds never busy the page.
   Local prototype. Coming Soon root unchanged. */

:root {
  --img-bg: #08080a;
  --img-panel: #12141a;
  --img-gold-dim: rgba(201, 169, 98, 0.28);
  --img-safe: 8%;           /* subject inset */
  --img-vignette: 0.55;     /* 0–1 strength hint for overlays */
  --img-radius: 8px;
}

/* Generic media slot — black stage */
.media {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--img-bg);
  border-radius: var(--img-radius);
  isolation: isolate;
}
.media > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

/* Soft edge fade into page black (photography) */
.media--fade::after,
.media--gallery::after,
.media--band::after,
.media--card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse at center, transparent 42%, rgba(8, 8, 10, 0.55) 100%),
    linear-gradient(to top, rgba(8, 8, 10, 0.5) 0%, transparent 28%),
    linear-gradient(to bottom, rgba(8, 8, 10, 0.25) 0%, transparent 22%);
  z-index: 1;
}

/* Stronger museum stage for curated gallery */
.media--gallery {
  aspect-ratio: 4 / 5;
  max-height: min(78vh, 920px);
  margin-inline: auto;
  border: 1px solid var(--img-gold-dim);
}
.media--gallery::after {
  background:
    radial-gradient(ellipse at center, transparent 38%, rgba(8, 8, 10, 0.72) 100%);
}

/* Full-width section band */
.media--band {
  aspect-ratio: 21 / 9;
  width: 100%;
  border-radius: 0;
}
@media (max-width: 720px) {
  .media--band { aspect-ratio: 16 / 9; }
}

/* Showcase / home cards */
.media--card {
  aspect-ratio: 1 / 1;
}
.media--card-portrait {
  aspect-ratio: 4 / 5;
}

/* Strip tiles */
.media--strip {
  aspect-ratio: 1 / 1;
}

/* Product / logo / coin — whole asset on black, no crop loss */
.media--contain,
.media--coin,
.media--mark {
  background: var(--img-bg);
  aspect-ratio: 1 / 1;
}
.media--contain > img,
.media--coin > img,
.media--mark > img {
  object-fit: contain;
  object-position: center center;
  padding: 12%;
  box-sizing: border-box;
  height: 100%;
  width: 100%;
}
.media--contain::after,
.media--coin::after,
.media--mark::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 55%, rgba(8, 8, 10, 0.35) 100%);
  z-index: 1;
}

/* Label flat art */
.media--label {
  aspect-ratio: 3 / 4;
  background: var(--img-bg);
}
.media--label > img {
  object-fit: contain;
  padding: 10%;
  box-sizing: border-box;
}

/* NFC/QR card proof — card in a wide stage */
.media--card-proof {
  aspect-ratio: 16 / 9;
  background: var(--img-panel);
}
.media--card-proof > img {
  object-fit: contain;
  padding: 8% 14%;
  box-sizing: border-box;
}

/* Optional face bias */
.media--face > img {
  object-position: center 42%;
}

/* Captions sit outside the slot */
.media-caption {
  margin-top: 0.75rem;
  color: rgba(250, 246, 240, 0.72);
  font-size: 0.95rem;
  letter-spacing: 0.02em;
}
.media-caption strong {
  color: #c9a962;
  font-weight: 600;
}