/* -------------------------------------------------------------------------- */
/* Reusable mini-visualizations                                                */
/* -------------------------------------------------------------------------- */

/*
  The frame stays in CSS so every card keeps the same warm surface treatment.
  The diagrams themselves are SVG assets for sharper, more readable project cues.
*/
.mini-viz {
  --mini-viz-image: none;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: 100%;
  min-height: 7.1rem;
  margin: 0 0 var(--space-3);
  border: 1px solid rgba(35, 24, 21, 0.10);
  border-radius: var(--radius-md);
  background:
    radial-gradient(circle at 84% 12%, rgba(255, 231, 141, 0.30), transparent 7rem),
    radial-gradient(circle at 16% 82%, rgba(255, 79, 163, 0.08), transparent 7rem),
    linear-gradient(135deg, rgba(255, 253, 248, 0.74), rgba(255, 248, 234, 0.54));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.54), 0 10px 28px rgba(35, 24, 21, 0.06);
}

.mini-viz::before,
.mini-viz::after {
  content: "";
  position: absolute;
  inset: 0;
  display: block;
  pointer-events: none;
}

.mini-viz::before {
  z-index: 1;
  background-image: var(--mini-viz-image);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 86% auto;
}

.mini-viz::after {
  z-index: 2;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.24), transparent 34%),
    radial-gradient(circle at 50% 50%, transparent 0 58%, rgba(35, 24, 21, 0.025) 100%);
}

/* Legacy markup still includes spans; SVG assets now own the visible diagrams. */
.mini-viz span {
  display: none;
}

.mini-viz-compact {
  min-height: 5.4rem;
}

.mini-viz-ct {
  --mini-viz-image: url("/assets/img/mini-viz/ct-biomarkers.svg");
}

.mini-viz-body-composition {
  --mini-viz-image: url("/assets/img/mini-viz/body-composition.svg");
}

.mini-viz-harmonization {
  --mini-viz-image: url("/assets/img/mini-viz/harmonization.svg");
}

.mini-viz-survival {
  --mini-viz-image: url("/assets/img/mini-viz/survival.svg");
}

.mini-viz-map {
  --mini-viz-image: url("/assets/img/mini-viz/map.svg");
}

.mini-viz-network {
  --mini-viz-image: url("/assets/img/mini-viz/network.svg");
}

.mini-viz-learning {
  --mini-viz-image: url("/assets/img/mini-viz/learning.svg");
}

.mini-viz-cohort {
  --mini-viz-image: url("/assets/img/mini-viz/cohort.svg");
}

.mini-viz-qc {
  --mini-viz-image: url("/assets/img/mini-viz/qc.svg");
}

.mini-viz-calibration {
  --mini-viz-image: url("/assets/img/mini-viz/calibration.svg");
}

.mini-viz-nlp {
  --mini-viz-image: url("/assets/img/mini-viz/nlp-report.svg");
}

.mini-viz-claim {
  --mini-viz-image: url("/assets/img/mini-viz/claim-strength.svg");
}

.mini-viz-signal {
  --mini-viz-image: url("/assets/img/mini-viz/signal.svg");
}

/* Context-specific upgrades for cards that previously shared a generic class. */
.featured-card[href="/pages/science/#research-projects"] .mini-viz-harmonization {
  --mini-viz-image: url("/assets/img/mini-viz/survival.svg");
}

.featured-card[href="https://doi.org/10.2214/AJR.24.32216"] .mini-viz-ct,
article.project-card:nth-of-type(4) .mini-viz-ct {
  --mini-viz-image: url("/assets/img/mini-viz/body-composition.svg");
}

.card:hover .mini-viz,
.module-card:hover .mini-viz,
.featured-card:hover .mini-viz,
.home-identity-card:hover .mini-viz {
  border-color: rgba(255, 79, 163, 0.23);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65), 0 16px 36px rgba(35, 24, 21, 0.08);
}

.card:hover .mini-viz::before,
.module-card:hover .mini-viz::before,
.featured-card:hover .mini-viz::before,
.home-identity-card:hover .mini-viz::before {
  transform: translateY(-1px) scale(1.015);
}

@media (prefers-reduced-motion: no-preference) {
  .mini-viz::before {
    transition: transform var(--transition-base);
  }
}

@media (max-width: 760px) {
  .mini-viz {
    min-height: 5.8rem;
  }
}