/* Unique World Holidays — Client Feedback page, Section 2 "Testimonials"
   flip-card carousel.

   Carousel shell + multi-card window (all cards rendered, JS positions/
   shows only as many as fit — 3 desktop / 2 tablet / 1 mobile, shortest-
   distance-with-wraparound) is FORKED from home-seasonal-favorites-
   section.css for consistency with Team Highlights/Seasonal Favorites —
   same absolute-position-on-.uwh-cft-card-then-GSAP-translateX pattern.
   Replaced an earlier single-item-crossfade version (see
   assets/js/client-feedback-testimonials-section.js's own header comment
   for why).

   Flip mechanics (perspective on the outer card, transform-style:
   preserve-3d + rotateY(180deg) on the inner wrapper, backface-visibility:
   hidden faces so front/back never show through each other mid-flip) are
   unchanged from the original — same fork source (about-team-highlights-
   section.css) as before, just combined with the multi-card shell above
   instead of a fixed single-card size. */

.uwh-cft {
  width: 100%;
  background-color: #ffffff;
  padding: 80px 0;
  overflow: hidden;
}

.uwh-cft-heading {
  text-align: center;
  margin: 0 0 48px;
  padding: 0 24px;
}

.uwh-cft-title {
  margin: 0;
  max-width: 780px;
  margin-inline: auto;
  font-family: Poppins, sans-serif;
  font-size: 34px;
  font-weight: 700;
  line-height: 1.3;
  color: #13294b;
}

/* ---- Carousel shell: arrows sit in a dedicated side gutter outside the
   card row, same idea as Seasonal Favorites. ---- */
.uwh-cft-carousel {
  position: relative;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 76px;
}

.uwh-cft-track {
  position: relative;
  height: 480px;
  overflow: hidden;
}

.uwh-cft-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 20;
  width: 48px;
  height: 48px;
  padding: 0;
  box-sizing: border-box;
  border-radius: 50%;
  background: #feae02;
  border: none;
  box-shadow: 0 4px 14px rgba(1, 34, 69, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  line-height: 1;
  color: #ffffff;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.uwh-cft-nav:hover,
.uwh-cft-nav:focus {
  background: #13294b;
  border-radius: 50%;
  box-shadow: 0 4px 14px rgba(1, 34, 69, 0.35);
  border: none;
  outline: none;
}
.uwh-cft-nav:hover span,
.uwh-cft-nav:focus span,
.uwh-cft-nav:active span {
  color: #ffffff;
}
.uwh-cft-nav:focus-visible {
  outline: 2px solid #13294b;
  outline-offset: 2px;
}
.uwh-cft-nav-prev {
  left: 0;
}
.uwh-cft-nav-next {
  right: 0;
}

/* ---- Cards: all rendered, JS positions/shows only as many as fit the
   current viewport (3/2/1), exactly like the Seasonal Favorites/Team
   carousels. `perspective` lives on the outer card (not the inner face
   wrapper) so the flip has real 3D depth instead of a flat squash. ---- */
.uwh-cft-card {
  position: absolute;
  top: 0;
  left: 50%;
  height: 100%;
  cursor: pointer;
  -webkit-perspective: 1600px;
  perspective: 1600px;
}

.uwh-cft-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  transition: transform 0.7s cubic-bezier(0.65, 0, 0.35, 1);
}
.uwh-cft-card.is-flipped .uwh-cft-card-inner {
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
}

/* Both faces stacked via position:absolute so the card's own size never
   changes between front/back. backface-visibility:hidden stops the
   "mirror text showing through" glitch mid-flip. */
.uwh-cft-card-face {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 14px;
  overflow: hidden;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}
/* Safari: backface-visibility:hidden on the face alone is NOT enough —
   WebKit does not flatten positioned descendants that sit inside a
   preserve-3d ancestor, so the front face's photo / scrim / name (and the
   back face's text) keep backface-visibility:visible and render MIRRORED
   through the card once it's flipped away from the viewer (Chrome hides
   them via the face's transform-style:flat, so the bug is Safari-only).
   Pushing the property onto every descendant fixes it; it's a no-op on
   anything not itself 3D-rotated, so it's safe to apply broadly. */
.uwh-cft-card-face * {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* ---- Front face: photo (large) + name only, bottom overlay strip —
   same visual language as Team Highlights/Seasonal Favorites' front
   face. ---- */
.uwh-cft-card-front {
  border: none;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: flex-end;
  background-color: #e9ecef;
}
.uwh-cft-card-front-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.uwh-cft-card-front-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(1, 34, 69, 0.88) 0%,
    rgba(1, 34, 69, 0.5) 32%,
    rgba(1, 34, 69, 0) 60%
  );
}
.uwh-cft-card-front-name {
  position: relative;
  z-index: 1;
  width: 100%;
  padding: 22px 26px;
  font-family: Poppins, sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: #ffffff;
  line-height: 1.3;
  text-align: left;
}

/* ---- Back face: City, Related Tour, Review Text, Rating stars, Date.

   Review text: clamped to a few lines by default (line-clamp — see
   .uwh-cft-card-back-review below), NOT scrolling by default any more —
   scrolling only ever showed the browser's own default chunky scrollbar,
   which is the actual complaint this fixes. A "Read More" button (always
   rendered in the markup; client-feedback-testimonials-section.js shows
   it only when the text truly overflows the clamp) expands the text in
   place on click, via .is-expanded below — .uwh-custom-scrollbar
   (assets/css/uwh-utilities.css) supplies the themed slim scrollbar for
   THAT state's internal scroll area, so a real scrollbar only ever
   appears once the visitor has explicitly asked to see the full text. */
.uwh-cft-card-back {
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
  background-color: #012245;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 32px;
  text-align: center;
}
.uwh-cft-card-back-city {
  display: inline-block;
  font-family: Roboto, sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: #feae02;
}
.uwh-cft-card-back-tour {
  margin: 0;
  font-family: Poppins, sans-serif;
  font-size: 20px;
  font-weight: 700;
  color: #ffffff;
  line-height: 1.35;
}
/* Default (collapsed) state: clamped to 4 lines, no scrollbar at all —
   short reviews (most of them) never show a "Read More" button and just
   render in full, indistinguishable from a plain paragraph. */
.uwh-cft-card-back-review {
  margin: 2px 0 0;
  width: 100%;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  line-clamp: 4; /* standard property alongside the -webkit- one above */
  overflow: hidden;
  font-family: Roboto, sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.9);
}
/* Expanded state (.is-expanded, toggled by the Read More/Read Less
   button in JS): un-clamp and flex-grow to fill whatever vertical space
   is actually left in the fixed-height card (flex-grow, not a hand-
   picked max-height per breakpoint — this way it's automatically
   correct at every breakpoint's own .uwh-cft-track height without a
   separate number to keep in sync with each one). min-height:0 is
   required for a flex item to be allowed to scroll instead of just
   growing the (fixed-height) flex container itself. left-aligned since
   a multi-line ragged-both-edges centered paragraph is hard to read —
   the short clamped snippet above stays centered, matching its
   siblings, since it's rarely more than 1-2 visual lines anyway. */
.uwh-cft-card-back-review.is-expanded {
  display: block;
  -webkit-line-clamp: unset;
  line-clamp: unset;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  text-align: center;
}
/* "Read More" / "Read Less" toggle. Always in the DOM (see the PHP
   partial) but hidden until JS confirms the text actually overflows the
   clamp above — .is-visible is what JS toggles. */
.uwh-cft-card-back-readmore {
  display: none;
  margin: 0;
  padding: 0;
  background: none;
  border: none;
  font-family: Roboto, sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.2px;
  color: #feae02;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.uwh-cft-card-back-readmore.is-visible {
  display: inline-block;
}
.uwh-cft-card-back-readmore:hover,
.uwh-cft-card-back-readmore:focus {
  color: #ffffff;
  background-color: inherit;
}
.uwh-cft-card-back-readmore:focus-visible {
  outline: 2px solid #feae02;
  outline-offset: 2px;
}
.uwh-cft-card-back-rating {
  display: flex;
  gap: 3px;
}
.uwh-cft-star {
  font-size: 16px;
  line-height: 1;
  color: rgba(255, 255, 255, 0.3);
}
.uwh-cft-star.is-filled {
  color: #feae02;
}
.uwh-cft-card-back-date {
  display: block;
  font-family: Roboto, sans-serif;
  font-size: 13px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.65);
}

/* ---- Responsive ---- */
@media (max-width: 1024px) {
  .uwh-cft-title {
    font-size: 28px;
  }
  .uwh-cft-track {
    height: 460px;
  }
  .uwh-cft-carousel {
    padding: 0 60px;
  }
}

@media (max-width: 782px) {
  .uwh-cft {
    padding: 56px 0;
  }
  .uwh-cft-heading {
    margin-bottom: 32px;
  }
  .uwh-cft-title {
    font-size: 24px;
  }
  .uwh-cft-track {
    height: 440px;
  }
  .uwh-cft-carousel {
    padding: 0 52px;
  }
  .uwh-cft-nav {
    width: 40px;
    height: 40px;
  }
  .uwh-cft-card-front-name {
    font-size: 19px;
    padding: 18px 20px;
  }
  .uwh-cft-card-back {
    padding: 24px;
  }
}