/**
 * Testimonials ("Chia sẻ trải nghiệm") — homepage section styles.
 *
 * Loaded as an external file via TESTIMONIALS_ASSETS in server.js. The <link> tag is
 * injected together with the script tag under a single id guard, so both must be in place
 * from the first deploy: once the editor bakes the tags into the saved index.html, the
 * guard stops re-injecting and only these file contents can still change.
 *
 * The page's own <style> block still owns the popup and section chrome; this file adds the
 * slider layout and the per-media-type card, and fixes the popup close button.
 */

/* ── Video popup close button ─────────────────────────────────────
 * The close button is a child of .video-popup-inner and sits at top:-44px, i.e.
 * deliberately outside that box — but .video-popup-inner is overflow:hidden (to clip the
 * iframe to its rounded corners), so the button was clipped away and unhittable:
 * elementFromPoint over it returned the overlay. Nothing caught this because until now no
 * code opened the popup at all. Clip the iframe directly instead of the whole box, which
 * keeps the rounded video corners while letting the button escape.
 */
.video-popup-inner {
  overflow: visible;
}

.video-popup-inner iframe {
  border-radius: 12px;
}

/* ── Slider ───────────────────────────────────────────────────────
 * Same CSS scroll-snap approach the Founders section on this page already uses: native
 * horizontal scrolling, no JS needed for the swipe itself. Applied on mobile AND desktop
 * so the section is a fixed-height band instead of a column of stacked cards that a phone
 * user has to scroll past.
 */
.testimonials-slider {
  position: relative;
}

.testimonials-wrapper {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -ms-overflow-style: none;
  scroll-padding-inline: 12px;
}

.testimonials-wrapper::-webkit-scrollbar {
  display: none;
}

.testimonials-track {
  display: flex;
  align-items: stretch;
}

.testimonial-slide {
  box-sizing: border-box;
  flex: 0 0 100%;
  width: 100%;
  padding-left: 12px;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  /* Stretch so every card is the same height regardless of which media it holds. */
  display: flex;
}

@media (min-width: 768px) {
  .testimonials-wrapper {
    scroll-padding-inline: 16px;
  }

  .testimonial-slide {
    flex-basis: calc(33.333% - 10.67px);
    width: calc(33.333% - 10.67px);
    padding-left: 16px;
  }
}

/* ── Card ─────────────────────────────────────────────────────────
 * Equal width comes from the slide, equal height from stretching the card to fill it and
 * giving the media box a fixed aspect ratio for every media type. The person block sits
 * below and is pushed to the bottom so the cards line up across the row.
 */
.testimonials-section .testimonial-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}

.testimonial-media {
  position: relative;
  width: 100%;
  aspect-ratio: 2 / 3;
  max-height: 520px;
  border-radius: 12px;
  overflow: hidden;
}

.testimonial-media img.testimonial-media-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Video thumbnails keep the existing play-button treatment, so `.testimonial-video` rules
   in the page's own stylesheet still apply — this only makes it fill the media box. */
.testimonial-media .testimonial-video {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  max-height: none;
  border-radius: 0;
}

/* Text cards fill the same box rather than sizing to their content, which is what keeps a
   short quote and a long one the same height. */
.testimonial-media--text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 28px 24px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.25);
}

.testimonial-quote {
  /* The editor stores the quote verbatim, so authored line breaks must survive to the
     visitor rather than collapsing into one paragraph. */
  white-space: pre-wrap;
  color: var(--white, #ffffff);
  font-size: 16px;
  line-height: 1.65;
  margin: 0;
  overflow: hidden;
}

/* Long quotes fade out instead of overflowing, and the read-more button reveals the rest
   in the popup that already exists on the page. */
.testimonial-media--text.is-clamped .testimonial-quote {
  -webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 72%, transparent 100%);
}

/* Sits below the media box, the way the original design had it — over the thumbnail it
   covered the caption burnt into the video still. The row always occupies its space even
   when the card has nothing more to read, so cards with and without a quote stay the same
   height; the button is hidden with visibility rather than removed from the layout. */
.testimonial-actions {
  display: flex;
  min-height: 44px;
}

.testimonial-readmore {
  width: 100%;
  padding: 10px 16px;
  border: 1.5px solid var(--white, #ffffff);
  border-radius: 999px;
  background: transparent;
  color: var(--white, #ffffff);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.testimonial-readmore[hidden] {
  /* [hidden] would collapse the row and unbalance the card heights. */
  display: block;
  visibility: hidden;
}

.testimonial-readmore:hover {
  background: var(--white, #ffffff);
  color: #0da3a9;
}

/* The popup is where a long quote is actually read in full, so it has to honour the
   authored line breaks too — the card preview alone preserving them is not enough. */
.testimonial-popup-text {
  white-space: pre-wrap;
}

/* ── Person ───────────────────────────────────────────────────────*/
.testimonial-person {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: auto;
  /* Holds the row steady when one card has a course line and its neighbour does not, so the
     fixed-ratio media boxes stay aligned across the slider. */
  min-height: 64px;
  color: var(--white, #ffffff);
}

.testimonial-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.2);
}

.testimonial-person-meta {
  min-width: 0;
}

.testimonial-name {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
}

.testimonial-title,
.testimonial-course {
  font-size: 13px;
  line-height: 1.4;
  opacity: 0.85;
}

.testimonial-course {
  margin-top: 2px;
  opacity: 0.7;
}

/* Empty optional fields must not leave a gap where text would be. */
.testimonial-title:empty,
.testimonial-course:empty,
.testimonial-name:empty {
  display: none;
}

/* ── Navigation ───────────────────────────────────────────────────
 * The customer asked for a visible affordance so visitors know the row moves — arrows on
 * pointer devices, dots everywhere.
 */
.testimonials-nav {
  position: absolute;
  top: calc(50% - 40px);
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: var(--white, #ffffff);
  color: #0da3a9;
  /* Shown on touch screens too, not just desktop: the request was explicitly for a control
     that tells the visitor the row moves, and dots alone read as a position indicator. */
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 2;
}

.testimonials-nav svg {
  width: 22px;
  height: 22px;
}

.testimonials-nav:hover {
  transform: translateY(-50%) scale(1.06);
}

.testimonials-nav[disabled] {
  opacity: 0.35;
  cursor: default;
  transform: translateY(-50%);
}

.testimonials-nav--prev {
  left: -8px;
}

.testimonials-nav--next {
  right: -8px;
}

/* The container has no side padding to spare on a phone, so tuck the arrows inside the
   track edge rather than letting them hang off-screen. */
@media (max-width: 767px) {
  .testimonials-nav {
    width: 38px;
    height: 38px;
  }

  .testimonials-nav--prev {
    left: 2px;
  }

  .testimonials-nav--next {
    right: 2px;
  }
}

.testimonials-dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 28px;
}

.testimonials-dot {
  width: 20px;
  height: 8px;
  padding: 0;
  border: none;
  border-radius: 999px;
  background-color: rgba(255, 255, 255, 0.45);
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.testimonials-dot.is-active {
  background-color: var(--white, #ffffff);
}

/* A single card has nothing to page through. */
.testimonials-slider[data-tm-single="true"] .testimonials-nav,
.testimonials-slider[data-tm-single="true"] .testimonials-dots {
  display: none;
}