/* ================================================================
   Student testimonies — layered desktop photography + mobile gallery
   ================================================================ */
#reviews.student-testimonials {
  position: relative;
  isolation: isolate;
  overflow: clip;
  min-height: clamp(900px, 100svh, 1120px);
}

#reviews .testimonial-content-layer {
  position: relative;
  z-index: 4;
}

#reviews .testimonial-photo-field {
  position: absolute;
  inset: 0;
  overflow: visible;
  pointer-events: none;
  user-select: none;
}

/*
  The field deliberately has no z-index. Each photo can therefore sit
  behind the content normally, then rise above the complete Reviews
  section when hovered.
*/
#reviews .testimonial-photo {
  --photo-opacity: .29;
  position: absolute;
  z-index: 1;
  margin: 0;
  opacity: 0;
  filter: saturate(.80) contrast(.95);
  transform: translate3d(0, 24px, 0) scale(.94);
  transition:
    opacity 720ms ease,
    transform 900ms cubic-bezier(.16, 1, .3, 1),
    filter 320ms ease;
  will-change: opacity, transform, filter;
}

#reviews .testimonial-photo.is-visible {
  opacity: var(--photo-opacity);
  transform: translate3d(0, 0, 0) scale(1);
}

#reviews .testimonial-photo__frame {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border: 1px solid rgba(10, 10, 10, .15);
  border-radius: clamp(18px, 1.8vw, 28px);
  background: #eceae4;
  box-shadow:
    0 30px 78px rgba(10, 10, 10, .17),
    0 9px 26px rgba(10, 10, 10, .09);
  backface-visibility: hidden;
  transform-origin: center;
  will-change: transform;
}

#reviews .testimonial-photo__frame::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid rgba(255, 255, 255, .48);
  border-radius: inherit;
  pointer-events: none;
}

#reviews .testimonial-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Tighter central cluster behind the complete Reviews composition. */
#reviews .testimonial-photo--awards {
  --photo-opacity: .34;
  left: calc(50% - 455px);
  top: clamp(205px, 23%, 270px);
  width: clamp(185px, 15vw, 235px);
  aspect-ratio: 3 / 4;
}

#reviews .testimonial-photo--awards img {
  object-position: 50% 45%;
}

#reviews .testimonial-photo--class-fun {
  --photo-opacity: .27;
  left: calc(50% + 95px);
  top: clamp(150px, 17%, 205px);
  width: clamp(340px, 29vw, 430px);
  aspect-ratio: 4 / 3;
}

#reviews .testimonial-photo--class-fun img {
  object-position: 50% 47%;
}

#reviews .testimonial-photo--class-group {
  --photo-opacity: .25;
  left: calc(50% - 505px);
  bottom: clamp(190px, 20%, 245px);
  width: clamp(325px, 26vw, 390px);
  aspect-ratio: 4 / 3;
}

#reviews .testimonial-photo--class-group img {
  object-position: 50% 50%;
}

#reviews .testimonial-photo--interview {
  --photo-opacity: .28;
  left: calc(50% + 205px);
  bottom: clamp(180px, 19%, 235px);
  width: clamp(315px, 27vw, 405px);
  aspect-ratio: 3 / 2;
}

#reviews .testimonial-photo--interview img {
  object-position: 50% 46%;
}

/* Reviews remain over the background photographs by default. */
#reviews .section-head,
#reviews .testimonial-carousel,
#reviews .testimonial-stage,
#reviews .testimonial-controls,
#reviews .testimonial-progress {
  position: relative;
  z-index: 4;
}

#reviews .testimonial-card {
  background: rgba(252, 252, 250, .96);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/*
  Pointer tracking happens on the complete Reviews section, not on the
  photographs themselves. This means a photograph can react even when
  a heading or testimony card is covering it.
*/
@media (hover: hover) and (pointer: fine) {
  #reviews .testimonial-photo {
    pointer-events: none;
  }

  #reviews .testimonial-photo.is-photo-hovered {
    z-index: 20 !important;
    opacity: 1 !important;
    filter: saturate(1) contrast(1) !important;
    transform: translate3d(0, -8px, 0) scale(1.03) !important;
    transition:
      opacity 220ms ease,
      transform 420ms cubic-bezier(.16, 1, .3, 1),
      filter 220ms ease !important;
  }

  #reviews .testimonial-photo.is-photo-hovered
  .testimonial-photo__frame {
    box-shadow:
      0 46px 118px rgba(10, 10, 10, .30),
      0 18px 42px rgba(10, 10, 10, .16);
  }
}

/* Offline fallback mirrors the larger Anime.js movement. */
html:not(.testimonial-anime-ready)
#reviews .testimonial-photo--awards .testimonial-photo__frame {
  animation: testimonialFloatA 7.2s ease-in-out infinite alternate;
}

html:not(.testimonial-anime-ready)
#reviews .testimonial-photo--class-fun .testimonial-photo__frame {
  animation: testimonialFloatB 8.5s ease-in-out infinite alternate;
}

html:not(.testimonial-anime-ready)
#reviews .testimonial-photo--class-group .testimonial-photo__frame {
  animation: testimonialFloatC 7.8s ease-in-out infinite alternate;
}

html:not(.testimonial-anime-ready)
#reviews .testimonial-photo--interview .testimonial-photo__frame {
  animation: testimonialFloatD 8.2s ease-in-out infinite alternate;
}

@keyframes testimonialFloatA {
  from {
    transform:
      translate3d(-24px, -20px, 0)
      rotate(-9deg)
      scale(.98);
  }
  to {
    transform:
      translate3d(23px, 28px, 0)
      rotate(-1deg)
      scale(1.06);
  }
}

@keyframes testimonialFloatB {
  from {
    transform:
      translate3d(27px, -19px, 0)
      rotate(8deg)
      scale(1);
  }
  to {
    transform:
      translate3d(-29px, 29px, 0)
      rotate(-3deg)
      scale(1.07);
  }
}

@keyframes testimonialFloatC {
  from {
    transform:
      translate3d(-23px, 22px, 0)
      rotate(-7deg)
      scale(.99);
  }
  to {
    transform:
      translate3d(31px, -25px, 0)
      rotate(3deg)
      scale(1.06);
  }
}

@keyframes testimonialFloatD {
  from {
    transform:
      translate3d(26px, 18px, 0)
      rotate(5deg)
      scale(.98);
  }
  to {
    transform:
      translate3d(-30px, -27px, 0)
      rotate(-4deg)
      scale(1.065);
  }
}

/* Hidden on desktop; becomes a swipe gallery on mobile. */
#reviews .testimonial-mobile-gallery {
  display: none;
}

@media (max-width: 1120px) and (min-width: 821px) {
  #reviews .testimonial-photo--awards {
    left: calc(50% - 390px);
    width: 190px;
  }

  #reviews .testimonial-photo--class-fun {
    left: calc(50% + 52px);
    width: 350px;
  }

  #reviews .testimonial-photo--class-group {
    left: calc(50% - 395px);
    bottom: 185px;
    width: 330px;
  }

  #reviews .testimonial-photo--interview {
    left: calc(50% + 80px);
    bottom: 170px;
    width: 330px;
  }
}

@media (max-width: 820px) {
  #reviews.student-testimonials {
    min-height: auto;
    overflow: hidden;
  }

  /* No floating layer on phones. */
  #reviews .testimonial-photo-field {
    display: none !important;
  }

  #reviews .testimonial-content-layer {
    z-index: 1;
  }

  #reviews .testimonial-mobile-gallery {
    display: flex;
    gap: 14px;
    width: calc(100% + 40px);
    margin: 8px -20px 30px;
    padding: 6px 20px 18px;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 20px;
    touch-action: pan-x pan-y;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  #reviews .testimonial-mobile-gallery::-webkit-scrollbar {
    display: none;
  }

  #reviews .testimonial-mobile-gallery__item {
    flex: 0 0 min(82vw, 350px);
    margin: 0;
    scroll-snap-align: center;
    scroll-snap-stop: always;
  }

  #reviews .testimonial-mobile-gallery__frame {
    display: grid;
    place-items: center;
    width: 100%;
    height: clamp(235px, 65vw, 310px);
    overflow: hidden;
    border: 1px solid rgba(10, 10, 10, .14);
    border-radius: 22px;
    background: #eceae4;
    box-shadow:
      0 20px 54px rgba(10, 10, 10, .14),
      0 7px 20px rgba(10, 10, 10, .08);
  }

  #reviews .testimonial-mobile-gallery__frame img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  #reviews .testimonial-mobile-gallery__frame--portrait img {
    padding: 8px;
  }

  #reviews .testimonial-card {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

@media (max-width: 520px) {
  #reviews .testimonial-mobile-gallery {
    width: calc(100% + 28px);
    margin-inline: -14px;
    padding-inline: 14px;
    scroll-padding-inline: 14px;
  }

  #reviews .testimonial-mobile-gallery__item {
    flex-basis: 84vw;
  }
}

@media (prefers-reduced-motion: reduce) {
  #reviews .testimonial-photo,
  #reviews .testimonial-photo__frame {
    animation: none !important;
    transition: none !important;
  }

  #reviews .testimonial-photo {
    opacity: var(--photo-opacity);
    transform: none;
  }
}