/* Two faces of the same stationary phone; reserve the full conversation height. */
#sect-testimonials .kakao-pair,
#sect-testimonials .kakao-pair__stage { min-width: 0; }
#sect-testimonials .kakao-pair__stage { display: grid; gap: 28px; height: 100%; }
#sect-testimonials .kakao-phone { width: 100%; }
#sect-testimonials .kakao-msg__wrap { max-width: calc(100% - 35px); }
#sect-testimonials .kakao-date,
#sect-testimonials .kakao-msg__time { color: #999; }
#sect-testimonials .kakao-phone--after .kakao-date { color: var(--brand-light); }
#sect-testimonials .kakao-phone--after .kakao-msg__bubble strong { color: var(--brand-deep); }

#sect-testimonials.has-message-journey { overflow: clip; }
.has-message-journey .kakao-pair__stage { gap: 0 !important; perspective: 1600px; }
.has-message-journey .kakao-phone {
  grid-area: 1 / 1;
  transition: none;
  transform-origin: 50% 50%;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  will-change: transform;
}
#sect-testimonials.has-message-journey .kakao-phone:hover {
  box-shadow: 0 20px 60px rgba(0, 0, 0, .5), inset 0 0 0 1px rgba(255, 255, 255, .04);
}

@media (min-width: 993px) and (prefers-reduced-motion: no-preference) {
  #sect-testimonials.has-message-journey { padding-bottom: calc(100px + var(--journey-distance, 170vh)); }
  #sect-testimonials.has-message-journey > .container { position: relative; }
}

@media (max-width: 992px) and (prefers-reduced-motion: no-preference) {
  #sect-testimonials.has-message-journey .kakao-pair { padding-bottom: var(--journey-distance, 125vh); }
  #sect-testimonials.has-message-journey .kakao-grid { grid-template-columns: 1fr; gap: 40px; }
  #sect-testimonials.has-message-journey .kakao-pair__stage {
    position: relative; height: auto; max-width: 340px; margin: 0 auto;
  }
}

/* Illustrated profiles share one small image; original avatar dimensions stay fixed. */
#sect-testimonials [class*="kakao-profile--"] {
  background-image: url("./profiles.png");
  background-size: 300% 200%;
  background-repeat: no-repeat;
}
#sect-testimonials .kakao-profile--doctor { background-position: 0 0; }
#sect-testimonials .kakao-profile--lawyer { background-position: 50% 0; }
#sect-testimonials .kakao-profile--owner { background-position: 100% 0; }
#sect-testimonials .kakao-profile--patient { background-position: 0 100%; }
#sect-testimonials .kakao-profile--client { background-position: 50% 100%; }
#sect-testimonials .kakao-profile--customer { background-position: 100% 100%; }
