/* ==========================================================================
   Denty — Showcase ("Услуги Denty" cards row)
   Six large cards staged in a shallow 3D fan, pinned to the viewport while
   the section's own scroll budget drives which one is in focus — see
   js/showcase.js (GSAP + ScrollTrigger) for the mechanics. This file only
   owns layout/appearance; every transform the cards carry while scrolling
   (x/y/z/rotate/scale/opacity) is written by JS each frame, so the only
   "position" this stylesheet sets is the shared centering anchor
   (top/left 50%) both the desktop mechanic and the reduced-motion /
   mobile fallback below rely on.
   ========================================================================== */

.showcase {
  --showcase-card-w: clamp(280px, 26vw, 400px);
  position: relative;
  width: 100%;
  /* Gap from the "Почему пациенты выбирают Denty" header above to the top
     edge of the cards: ~5.5cm (208px). The pinned frame centres the cards
     vertically, so the frame's own margin is that gap minus however far
     down inside the frame the cards start (may go slightly negative —
     the frame is transparent, so overlapping the header block is
     invisible). */
  margin-top: calc(
    236px - var(--header-height) - max(0px, (100vh - var(--header-height) - var(--showcase-card-w) * 1.25) / 2)
  );
  margin-bottom: 120px;
  /* Scroll budget: one full viewport to arrive, plus five more "steps"
     (one per card-to-card handoff) for the fan to play out at a pace
     that reads as considered rather than rushed. */
  height: 460vh;
}

.showcase-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  /* The fixed header sits at z-index:100 above everything, but this is
     the one section that actually stays pinned under it for the whole
     scroll duration (most sections only ever pass behind it for a
     flicker) — without this, the title/cards would render hidden
     behind the header for the entire pin instead of just starting
     below it. */
  padding-top: var(--header-height);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* ------------------------------------------------------------- Track -- */

.showcase-track {
  position: relative;
  flex: 1;
  min-height: 0;
}

.showcase-card {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--showcase-card-w);
  aspect-ratio: 4 / 5;
  display: flex;
  flex-direction: column;
  border-radius: 28px;
  padding: clamp(20px, 2vw, 28px);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  box-shadow: 0 24px 60px rgba(15, 26, 45, 0.08);
  will-change: transform, opacity;
  /* JS (gsap.set) owns xPercent/yPercent/x/y/z/rotate/scale/opacity from
     here on — this is only the pre-JS/no-JS resting position so nothing
     jumps if ScrollTrigger takes a frame to attach. */
  transform: translate(-50%, -50%);
}

.showcase-card-eyebrow {
  flex-shrink: 0;
  font-family: var(--font-hero);
  text-align: center;
  font-size: 29px;
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--color-primary);
}

.showcase-card-photo {
  flex: 1 1 auto;
  min-height: 0;
  margin-top: clamp(10px, 1.4vw, 16px);
  border-radius: 18px;
  overflow: hidden;
  background: transparent;
}

.showcase-card-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform: scale(1);
  transition: transform 500ms var(--ease-standard);
}

.showcase-card-body {
  flex-shrink: 0;
  margin-top: clamp(14px, 1.8vw, 20px);
}

.showcase-card-title {
  font-family: var(--font-hero);
  font-weight: 500;
  font-size: clamp(22px, 2vw, 28px);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--color-dark);
}

.showcase-card-text {
  margin-top: 8px;
  max-width: 34ch;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--color-secondary);
}

/* Desktop hover on the focused card only — subtle, doesn't touch the
   scroll-driven transform (that's a separate translate/scale JS keeps
   applying every frame; this just nudges the photo inside it). */
@media (hover: hover) {
  .showcase-card.is-active:hover .showcase-card-photo img {
    transform: scale(1.045);
  }
}

@media (prefers-reduced-motion: reduce) {
  .showcase-card-photo img {
    transition: none;
  }
}

/* ================================================================== */
/* Reduced motion — same six cards, no pin/scrub. A plain, calm row.    */
/* ================================================================== */

@media (prefers-reduced-motion: reduce) {
  .showcase {
    height: auto;
    margin-top: 150px;
  }

  .showcase-sticky {
    position: static;
    height: auto;
    overflow: visible;
  }

  .showcase-track {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    padding: 8px var(--container-padding) 24px;
    perspective: none;
  }

  .showcase-card {
    position: static;
    flex: 0 0 auto;
    width: min(340px, 82vw);
    transform: none;
    opacity: 1;
  }
}

/* ================================================================== */
/* Responsive                                                          */
/* ================================================================== */

/* Below this width the pinned 3D fan hands off to a native, swipeable
   row — trying to keep the pin mechanic on touch screens is where this
   kind of section usually turns janky; a plain scroll-snap list is the
   "adapted for touch" version the same six cards, not a lesser one. */
@media (max-width: 900px), (pointer: coarse) {
  .showcase {
    height: auto;
    margin-top: 150px;
  }

  .showcase-sticky {
    position: static;
    height: auto;
    overflow: visible;
  }

  .showcase-track {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding: 8px var(--container-padding) 24px;
    perspective: none;
  }

  .showcase-card {
    position: static;
    flex: 0 0 auto;
    width: min(360px, 86vw);
    scroll-snap-align: center;
    transform: none;
    opacity: 1;
  }
}

@media (max-width: 640px) {
  .showcase {
    margin-top: 120px;
  }
}