/* ==========================================================
   EKM Wellness — results page (results/index.html)
   ========================================================== */

/* ---------- before/after cards (official graphics + built split) ---------- */
.results-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.result-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;transition:border-color .3s,transform .3s}
.result-card:hover{transform:translateY(-4px);border-color:var(--gold-lo)}

/* every client's image area — before/after graphic, built split, or
   multi-photo strip — shares one fixed height so every card on the
   page reads as the same size, however many photos it holds. */
.result-card .shot,
.result-split,
.training-photos{height:440px;overflow:hidden}

.result-card .shot{position:relative}
.result-card .shot img{width:100%;height:100%;object-fit:contain;background:#000;display:block}

/* two-photo (or more) split — client's own before/after sequence */
.result-split,
.training-photos{display:flex}
.result-split .pane{position:relative;flex:1 1 0;min-width:0;height:100%;overflow:hidden}
.result-split .pane img,
.training-photos img{width:100%;height:100%;flex:1 1 0;min-width:0;object-fit:cover;object-position:center 22%;display:block}

.result-tag{position:absolute;top:14px;padding:6px 14px;border-radius:999px;font-family:var(--display);font-size:.92rem;letter-spacing:.14em;text-transform:uppercase;background:rgba(7,7,7,.8);border:1px solid var(--gold-lo);color:var(--gold-hi);pointer-events:none}
.result-tag.l{left:14px}
.result-tag.r{right:14px}

.result-meta{padding:24px 26px}
.result-meta h3{font-family:var(--display);font-size:1.65rem;text-transform:uppercase;letter-spacing:.02em;color:var(--text)}
.result-span{display:inline-flex;align-items:center;gap:8px;margin-top:8px;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-hi)}
.result-span::before{content:"";width:16px;height:2px;background:var(--grad)}
.result-meta p{margin-top:12px;color:var(--muted);font-size:.94rem}

/* ---------- training gallery (progress shots, no before/after claim) ---------- */
.training-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.training-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;transition:border-color .3s,transform .3s}
.training-card:hover{transform:translateY(-4px);border-color:var(--gold-lo)}
.training-card .result-meta{padding:20px 22px}
.training-card .result-meta h3{font-size:1.35rem}

/* ---------- clickable / hoverable client photos ---------- */
.gallery-item{cursor:pointer;transition:transform .45s ease}
.gallery-item:hover,
.gallery-item:focus-visible{transform:scale(1.07)}

/* ---------- lightbox ---------- */
.lightbox{position:fixed;inset:0;z-index:400;display:flex;align-items:center;justify-content:center;padding:24px;background:rgba(4,4,4,.95);opacity:0;visibility:hidden;transition:opacity .32s ease,visibility .32s ease,backdrop-filter .32s ease;backdrop-filter:blur(0);-webkit-backdrop-filter:blur(0)}
.lightbox.is-open{opacity:1;visibility:visible;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}

/* stage pops in with a slight rise + scale, offset from the backdrop
   fade so it reads as one deliberate motion rather than an instant swap */
.lightbox-stage{display:flex;flex-direction:column;align-items:center;gap:18px;max-width:min(880px,92vw);
  transform:translateY(18px) scale(.94);opacity:0;transition:transform .38s cubic-bezier(.2,.8,.2,1) .05s,opacity .32s ease .05s}
.lightbox.is-open .lightbox-stage{transform:translateY(0) scale(1);opacity:1}

.lightbox-stage img{max-width:100%;max-height:70vh;display:block;border-radius:var(--radius);border:1px solid var(--line);object-fit:contain;background:#000;transition:opacity .18s ease,transform .18s ease}
.lightbox-stage img.is-switching{opacity:0;transform:scale(.97)}

.lightbox-caption{text-align:center;transition:opacity .18s ease}
.lightbox-caption.is-switching{opacity:0}
.lightbox-caption h3{font-family:var(--display);font-size:1.5rem;text-transform:uppercase;letter-spacing:.04em;color:var(--gold-hi)}
.lightbox-caption span{display:block;margin-top:6px;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}

.lightbox-close,
.lightbox-nav{opacity:0;transition:opacity .28s ease .12s,border-color .2s,background .2s,transform .2s}
.lightbox.is-open .lightbox-close,
.lightbox.is-open .lightbox-nav{opacity:1}

.lightbox-close{position:fixed;top:20px;right:20px;width:44px;height:44px;border-radius:50%;background:var(--card);border:1px solid var(--gold-lo);color:var(--gold-hi);cursor:pointer;display:grid;place-items:center}
.lightbox-close:hover{background:rgba(201,151,79,.14);border-color:var(--gold)}
.lightbox-close:active{transform:scale(.9)}
.lightbox-close svg{width:18px;height:18px}
.lightbox-nav{position:fixed;top:50%;transform:translateY(-50%);width:52px;height:52px;border-radius:50%;background:var(--card);border:1px solid var(--gold-lo);color:var(--gold-hi);cursor:pointer;display:grid;place-items:center}
.lightbox-nav:hover{background:rgba(201,151,79,.14);border-color:var(--gold)}
.lightbox-nav:active{transform:translateY(-50%) scale(.9)}
.lightbox-nav svg{width:22px;height:22px}
.lightbox-nav.prev{left:24px}
.lightbox-nav.next{right:24px}
.lightbox-nav[hidden]{display:none}

@media (max-width:980px){
  .results-grid{grid-template-columns:1fr}
}
@media (max-width:640px){
  .result-card .shot,
  .result-split,
  .training-photos{height:280px}
  .training-grid{grid-template-columns:1fr}
  .result-meta{padding:20px}
  .lightbox-nav{width:42px;height:42px}
  .lightbox-nav.prev{left:8px}
  .lightbox-nav.next{right:8px}
  .lightbox-close{top:12px;right:12px}
  .lightbox-stage img{max-height:58vh}
}
@media (prefers-reduced-motion:reduce){
  .gallery-item{transition:none}
  .gallery-item:hover,.gallery-item:focus-visible{transform:none}
  .lightbox,.lightbox-stage,.lightbox-stage img,.lightbox-caption,.lightbox-close,.lightbox-nav{transition:none!important}
  .lightbox-stage{transform:none!important}
}