/* ==========================================================================
   TRANSFORMATION SPOTLIGHT — Evolve Up Fitness (Phase 3)
   ==========================================================================
   Isolated, additive replacement of the .transform-grid only — the
   section header and the metrics-row above it are untouched and keep
   working exactly as before. To roll back: restore the previous
   .transform-grid markup in index.html and remove this file's <link>
   tag plus the new <script> tag — the original renderTransformations()
   function in cms-render.js is left intact and unused for exactly this
   reason, same pattern as the Membership Ring and Hero rollback paths.

   Reuses the site's existing --accent, --accent-glow, --ease, --radius,
   --glass-fill, --glass-border tokens from main.css — same brand
   language as Hero and Membership, not a new one.
   ========================================================================== */

.spotlight-wrap {
  margin-top: 56px;
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 40px;
  align-items: start;
}

/* ------------------------------------------------------------ SPOTLIGHT */
.spotlight {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg-charcoal);
  border: 1px solid var(--glass-border);
  opacity: 0;
  transform: translateY(16px);
}
/* Phase D: was `animation: spotlight-in 0.8s var(--ease) forwards`
   directly on this rule, meaning it fired the instant the JS rendered
   the card — right after the data fetch resolves, typically within
   the first second of page load, regardless of whether the user had
   scrolled anywhere near this section yet. By the time a real visitor
   actually reached Transformations, the animation had already long
   finished; the card just appeared instantly, with no felt reveal —
   unlike Why/Programs/FAQ/Contact, which correctly wait for scroll-
   arrival via the site's existing .reveal system. Fixed by gating the
   same animation behind a class added by an IntersectionObserver on
   the wrapper (see js/transformations-spotlight.js) — same visual
   motion and duration, triggered when it's actually seen instead of
   when it happens to finish loading. */
#spotlightWrap.is-revealed .spotlight {
  animation: spotlight-in 0.8s var(--ease) forwards;
}
@keyframes spotlight-in {
  to { opacity: 1; transform: translateY(0); }
}

.spotlight__media {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
}
.spotlight__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top; /* respectful framing — never aggressively cropped for a "reveal" effect */
  display: block;
}
/* A quiet gradient at the base, grounding the data panel below without
   darkening the photo itself — dignity for the subject, not a heavy
   overlay treatment. */
.spotlight__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(10, 10, 10, 0.75) 0%, transparent 35%);
  pointer-events: none;
}

/* Soft frame-glow — quiet, concentrated on the one image that matters,
   not scattered across the filmstrip. */
.spotlight::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  box-shadow: 0 0 60px -10px var(--accent-glow);
  pointer-events: none;
  z-index: 1;
}

/* ------------------------------------------------------- ACHIEVEMENT PANEL
   Visual hierarchy deliberately puts the measurable result first — the
   achievement is the headline, the photo is the respectful context
   around it, not the reverse. */
.spotlight__panel {
  position: relative;
  z-index: 2;
  padding: 28px 28px 24px;
  margin-top: -80px; /* overlaps the gradient base of the photo — panel and photo read as one composition, not two stacked blocks */
}

.spotlight__eyebrow {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent);
  margin-bottom: 8px;
}

/* The achievement arc — the largest, most confident number in the
   section. This is the headline; everything else here is supporting. */
.spotlight__arc {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1;
  margin-bottom: 10px;
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
.spotlight__arc-arrow {
  color: var(--accent);
  flex-shrink: 0;
}

.spotlight__meta-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
/* "Progress" replaces the previous Fat Loss / Muscle Gain categorical
   tag entirely — the same real delta, reframed around achievement
   rather than a body-composition label. Duration (a real discipline/
   consistency signal — showing up for months, not a single before/
   after moment) keeps equal visual weight, deliberately not
   subordinated to the weight figure. */
.spotlight__tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--glass-fill);
  border: 1px solid var(--glass-border);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-secondary);
}
.spotlight__tag--progress {
  background: var(--accent-soft);
  border-color: rgba(42, 167, 155, 0.35);
  color: var(--accent);
}
.spotlight__tag svg { flex-shrink: 0; }

/* Fallback for the entries with no parseable weight data — the photo
   itself carries the moment, presented with the same care, never a
   fabricated stat standing in for the missing one. */
.spotlight__caption-only {
  font-size: 1.1rem;
  color: var(--text-secondary);
  margin-bottom: 14px;
}

/* everydayWin — only renders when the gym owner has entered the
   member's real words, same rule already established elsewhere. */
.spotlight__win {
  display: flex;
  gap: 10px;
  font-size: 0.92rem;
  color: var(--text-secondary);
  line-height: 1.6;
  padding-top: 14px;
  border-top: 1px solid var(--glass-border);
}
.spotlight__win svg { flex-shrink: 0; color: var(--accent); margin-top: 3px; }

/* ------------------------------------------------------------- FILMSTRIP */
.filmstrip {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.filmstrip__label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-tertiary);
  margin-bottom: 4px;
}
.filmstrip__item {
  position: relative;
  border-radius: var(--radius-sm);
  overflow: hidden;
  aspect-ratio: 16 / 10;
  border: 1px solid var(--glass-border);
  cursor: pointer;
  background: none;
  padding: 0;
  opacity: 0;
  transform: translateY(10px);
  transition: border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
#spotlightWrap.is-revealed .filmstrip__item {
  animation: filmstrip-in 0.5s var(--ease) forwards;
}
@keyframes filmstrip-in {
  to { opacity: 1; transform: translateY(0); }
}
.filmstrip__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  filter: brightness(0.7);
  transition: filter var(--dur-fast) var(--ease);
}
.filmstrip__item:hover,
.filmstrip__item:focus-visible {
  border-color: var(--accent);
  transform: translateY(-2px);
}
.filmstrip__item:hover img,
.filmstrip__item:focus-visible img {
  filter: brightness(0.9);
}
.filmstrip__item.is-active {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}
.filmstrip__item.is-active img { filter: brightness(1); }

/* --------------------------------------------------------------- MOBILE */
@media (max-width: 900px) {
  .spotlight-wrap { grid-template-columns: 1fr; }
  .filmstrip {
    flex-direction: row;
    overflow-x: auto;
    /* min-width:0 is REQUIRED, not cosmetic. Flex items default to
       min-width:auto, which refuses to shrink below content size — so this
       container reported a min-content width of 1044px inside a 360px
       viewport and forced the whole document wide instead of scrolling.
       overflow-x:auto cannot take effect until the box is allowed to shrink. */
    min-width: 0;
    padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
  }
  .filmstrip__item { flex: 0 0 auto; }
  .filmstrip__label { display: none; }
  .filmstrip__item { flex: 0 0 120px; aspect-ratio: 4 / 3; }
}

@media (max-width: 640px) {
  .spotlight__panel { padding: 22px 20px 20px; margin-top: -60px; }
  .spotlight__arc { font-size: clamp(1.6rem, 8vw, 2.2rem); }
}

/* --------------------------------------------------- REDUCED MOTION */
@media (prefers-reduced-motion: reduce) {
  .spotlight, .filmstrip__item { animation: none !important; opacity: 1; transform: none; }
  .filmstrip__item, .filmstrip__item img { transition: none !important; }
}

/* Member's first name — only rendered when the owner has entered one, so
   this rule is inert on anonymous entries. */
.spotlight__member {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--platinum);
  margin: 2px 0 8px;
  letter-spacing: 0.01em;
}