/* Home testimonials — mobile-first; desktop hover cluster at 1080px. */

.home-testimonials-section {
  /* Full-bleed white so the page dark gradient does not show at the sides.
     Mobile matches Figma (pure white); desktop keeps the surface token. */
  width: 100%;
  align-self: stretch;
  background: #ffffff;
  padding: 72px 24px;
  /* Beat .home .page > section { min-height: 700px } — that tall empty
     block read as a grey slab behind the cards on mobile. */
  min-height: 0;
}

.home-testimonials-shell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
  width: 100%;
  max-width: var(--home-testimonials-content-max);
  margin: 0 auto;
  background: #ffffff;
}

.home-testimonials-title {
  margin: 0;
  max-width: 800px;
  width: 100%;
  text-align: center;
  color: var(--light-secondary);
  font-family: var(--display-display-medium-font-family);
  font-size: var(--display-display-medium-font-size);
  font-weight: var(--display-display-medium-font-weight);
  line-height: var(--display-display-medium-line-height);
  letter-spacing: -1px;
}

.home-testimonials-title-plain,
.home-testimonials-title-accent {
  vertical-align: middle;
}

.home-testimonials-title-accent {
  position: relative;
  top: 4px;
  font-family: 'Gentium Book Basic', serif;
  font-size: 52px;
  font-style: italic;
  font-weight: 400;
  line-height: 48px;
  letter-spacing: -1px;
  color: var(--light-secondary);
}

.home-testimonials-viewport {
  width: 100%;
  overflow: hidden;
  background: #ffffff;
  /* Room for a tight drop shadow without clipping into a grey band. */
  padding-block: 12px;
  margin-block: -4px;
}

.home-testimonials-track {
  display: flex;
  align-items: stretch;
  gap: var(--home-testimonials-card-gap);
  width: max-content;
  will-change: transform;
  transition: transform var(--home-testimonials-carousel-duration)
    var(--home-testimonials-carousel-easing);
  background: #ffffff;
}

/* Instant snap when looping from the cloned first card back to the real one.
   Also kill face/star transitions — otherwise the centered clone fades out of
   is-active after the slide, which reads as a post-animation blink. */
.home-testimonials-track.is-loop-reset {
  transition: none;
}

.home-testimonials-track.is-loop-reset .home-testimonial-card-face,
.home-testimonials-track.is-loop-reset .home-testimonial-card-face::before,
.home-testimonials-track.is-loop-reset .home-testimonial-star::before {
  transition: none;
}

/*
 * Outer card is the stable hit target (stagger only). Visual lift/scale lives
 * on .home-testimonial-card-face so hover at the bottom edge does not flicker
 * when the painted face moves away from the cursor.
 * Mobile track uses align-items: stretch — card + face fill that height so
 * every testimonial matches the tallest quote.
 */
.home-testimonial-card {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  width: var(--home-testimonials-card-width);
  background: transparent;
  border: none;
  padding: 0;
  color: inherit;
}

.home-testimonial-card-face {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  gap: 19.2px;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: var(--home-testimonials-card-padding);
  border-radius: var(--home-testimonials-card-radius);
  position: relative;
  /* Explicit RGB endpoints — Safari can route keyword/var color transitions
     through a transparent mid-frame (black → ghost → white). */
  background-color: #ffffff;
  /* Hardcoded fallback: vars.css cache can leave the mobile token empty.
     Negative spread avoids filling the 8px gutters with grey haze. */
  box-shadow: 0 6px 16px -6px rgba(12, 39, 71, 0.18);
  box-shadow: var(--home-testimonials-card-shadow-mobile);
  color: #312d5a;
  /*
   * Mobile: interpolate solid fill + text together (Chrome-smooth).
   * Do NOT fade a gradient ::before with opacity here — Safari composites
   * that opacity against sibling text and the copy looks transparent mid-fade.
   */
  transition:
    transform var(--home-testimonials-hover-duration)
      var(--home-testimonials-hover-easing),
    background-color var(--home-testimonials-carousel-duration)
      var(--home-testimonials-carousel-easing),
    color var(--home-testimonials-carousel-duration)
      var(--home-testimonials-carousel-easing),
    box-shadow var(--home-testimonials-carousel-duration)
      var(--home-testimonials-carousel-easing);
}

/* Gradient overlay is enabled only on desktop hover (see 1080px block). */
.home-testimonial-card-face::before {
  content: none;
}

.home-testimonial-card-face > * {
  position: relative;
  z-index: 1;
}

.home-testimonial-header {
  display: flex;
  flex-direction: column;
  gap: 9.6px;
  align-items: flex-start;
}

.home-testimonial-name {
  margin: 0;
  font-family: var(--title-title-small-font-family);
  font-size: var(--title-title-small-font-size);
  font-weight: var(--title-title-small-font-weight);
  line-height: 16px;
  color: inherit;
}

.home-testimonial-stars {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 14px;
  overflow: visible;
}

/*
 * Solid star on ::after (masked). Glow is a radial-gradient halo on ::before
 * with NO filter — Safari turns filter:blur / drop-shadow into rectangular
 * “smudge” boxes (worse when five filled stars sit in a row).
 */
.home-testimonial-star {
  display: inline-block;
  position: relative;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  overflow: visible;
}

.home-testimonial-star.is-filled::before {
  content: '';
  position: absolute;
  inset: -6px;
  background: radial-gradient(
    circle closest-side,
    rgba(221, 255, 87, 0.7) 0%,
    rgba(221, 255, 87, 0) 100%
  );
  opacity: 0;
  pointer-events: none;
  z-index: 0;
  transition: opacity var(--home-testimonials-carousel-duration)
    var(--home-testimonials-carousel-easing);
}

.home-testimonial-star::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--home-testimonials-star-empty);
  -webkit-mask: url('../images/testimonial-star.svg') center / contain no-repeat;
  mask: url('../images/testimonial-star.svg') center / contain no-repeat;
}

.home-testimonial-star.is-filled::after {
  background: var(--home-testimonials-star-filled);
}

.home-testimonial-quote {
  margin: 0;
  font-family: var(--body-body-large-font-family);
  font-size: 12.8px;
  font-weight: var(--body-body-large-font-weight);
  line-height: 14.4px;
  color: inherit;
}

.home-testimonial-card.is-active .home-testimonial-card-face {
  background-color: var(--home-testimonials-active-fill);
  color: #ffffff;
}

.home-testimonial-card.is-active {
  z-index: 2;
}

/* Only filled stars glow; empty count stays the same on active. */
.home-testimonial-card.is-active .home-testimonial-star.is-filled::before {
  opacity: 0.9;
}

.home-testimonials-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  width: 100%;
}

.home-testimonials-cta-prompt {
  margin: 0;
  width: 100%;
  text-align: center;
  color: var(--light-onSurfaceVariant);
  font-family: var(--title-title-large-font-family);
  font-size: var(--title-title-large-font-size);
  font-weight: var(--title-title-large-font-weight);
  line-height: var(--title-title-large-line-height);
}

/* Beat .btn { align-self: flex-start } from buttons.css (loaded later). */
.home-testimonials-cta .home-testimonials-cta-button.btn {
  max-width: 240px;
  border-radius: 35px;
  align-self: center;
  margin-inline: auto;
}

.home-testimonials-cta-button img {
  width: 24px;
  height: 24px;
}

@media (prefers-reduced-motion: reduce) {
  .home-testimonials-track,
  .home-testimonial-card,
  .home-testimonial-card-face,
  .home-testimonial-star.is-filled::before {
    transition: none;
  }
}

@media (min-width: 1080px) {
  .home-testimonials-section {
    /* Horizontal padding lets the 1080 shell shrink before the mobile
       breakpoint, so cards overlap more as the viewport narrows. */
    padding: 72px;
    background: var(--light-surface, #fdfdff);
  }

  .home-testimonials-shell,
  .home-testimonials-viewport,
  .home-testimonials-track {
    background: transparent;
  }

  .home-testimonial-card-face {
    isolation: isolate;
    background-color: var(--light-surface, #fdfdff);
    color: var(--home-testimonials-on-secondary-container);
    box-shadow: var(--home-testimonials-card-shadow);
    transition:
      transform var(--home-testimonials-hover-duration)
        var(--home-testimonials-hover-easing),
      color var(--home-testimonials-hover-duration)
        var(--home-testimonials-hover-easing),
      box-shadow var(--home-testimonials-hover-duration)
        var(--home-testimonials-hover-easing);
  }

  /* Desktop hover uses opacity-faded gradient (no carousel mid-fade issue). */
  .home-testimonial-card-face::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: var(--home-testimonials-active-bg);
    opacity: 0;
    pointer-events: none;
    z-index: 0;
    transition: opacity var(--home-testimonials-hover-duration)
      var(--home-testimonials-hover-easing);
  }

  .home-testimonial-star.is-filled::before {
    transition: opacity var(--home-testimonials-hover-duration)
      var(--home-testimonials-hover-easing);
  }

  .home-testimonials-shell {
    width: 100%;
    max-width: var(--home-testimonials-content-max);
    padding-left: 0;
    padding-right: 0;
  }

  .home-testimonials-viewport {
    overflow: visible;
    width: 100%;
    height: var(--home-testimonials-desktop-height);
  }

  /*
   * Six equal columns; cards stay 240px wide so they overflow their cell and
   * overlap more as the shell shrinks below ~1520px.
   */
  .home-testimonials-track {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    align-items: center;
    gap: 0;
    width: 100%;
    height: 100%;
    transform: none !important;
    transition: none;
  }

  .home-testimonial-card {
    width: var(--home-testimonials-card-width);
    max-width: none;
    justify-self: center;
    position: relative;
    /* Default stagger slot: center */
    transform: translateY(0);
  }

  /* centro → arriba → abajo → centro → arriba → abajo */
  .home-testimonial-card:nth-child(1),
  .home-testimonial-card:nth-child(4) {
    z-index: 1;
    transform: translateY(0);
  }

  .home-testimonial-card:nth-child(2),
  .home-testimonial-card:nth-child(5) {
    z-index: 2;
    transform: translateY(var(--home-testimonials-stagger-up));
  }

  .home-testimonial-card:nth-child(3),
  .home-testimonial-card:nth-child(6) {
    z-index: 1;
    transform: translateY(var(--home-testimonials-stagger-down));
  }

  .home-testimonial-quote {
    font-size: var(--body-body-large-font-size);
    line-height: var(--body-body-large-line-height);
  }

  /* Desktop uses hover/focus for the active treatment; clear mobile active. */
  .home-testimonials-section.is-desktop
    .home-testimonial-card.is-active
    .home-testimonial-card-face {
    background-color: var(--light-surface, #fdfdff);
    color: var(--home-testimonials-on-secondary-container);
    transition:
      transform var(--home-testimonials-hover-duration)
        var(--home-testimonials-hover-easing),
      color var(--home-testimonials-hover-duration)
        var(--home-testimonials-hover-easing),
      box-shadow var(--home-testimonials-hover-duration)
        var(--home-testimonials-hover-easing);
  }

  .home-testimonials-section.is-desktop
    .home-testimonial-card.is-active
    .home-testimonial-card-face::before {
    opacity: 0;
  }

  .home-testimonials-section.is-desktop
    .home-testimonial-card.is-active
    .home-testimonial-star.is-filled::before {
    opacity: 0;
  }
}

@media (hover: hover) and (pointer: fine) and (min-width: 1080px) {
  .home-testimonial-card:hover,
  .home-testimonial-card:focus-visible {
    z-index: 4;
  }

  .home-testimonial-card:hover .home-testimonial-card-face,
  .home-testimonial-card:focus-visible .home-testimonial-card-face {
    color: var(--light-onPrimary);
    transform: translateY(var(--home-testimonials-hover-lift))
      scale(var(--home-testimonials-hover-scale));
  }

  .home-testimonials-section.is-desktop
    .home-testimonial-card:hover
    .home-testimonial-card-face::before,
  .home-testimonials-section.is-desktop
    .home-testimonial-card:focus-visible
    .home-testimonial-card-face::before {
    opacity: 1;
  }

  /* Only filled stars glow; a 4-star card stays 4 on hover. */
  .home-testimonial-card:hover .home-testimonial-star.is-filled::before,
  .home-testimonial-card:focus-visible
    .home-testimonial-star.is-filled::before {
    opacity: 0.9;
  }
}

/*
 * Entrance uses opacity only so resting stagger transforms
 * (centro/arriba/abajo) stay owned by the nth-child rules above.
 */
@media (min-width: 1080px) {
  .home-testimonials-section.is-desktop:not(.is-entered)
    .home-testimonial-card {
    opacity: 0;
  }

  .home-testimonials-section.is-desktop.is-entering
    .home-testimonial-card {
    animation: home-testimonial-fade-in 700ms ease-out both;
  }

  .home-testimonials-section.is-desktop.is-entered .home-testimonial-card {
    opacity: 1;
  }

  .home-testimonials-section.is-desktop.is-entering
    .home-testimonial-card:nth-child(1) {
    animation-delay: 0ms;
  }

  .home-testimonials-section.is-desktop.is-entering
    .home-testimonial-card:nth-child(2) {
    animation-delay: 80ms;
  }

  .home-testimonials-section.is-desktop.is-entering
    .home-testimonial-card:nth-child(3) {
    animation-delay: 160ms;
  }

  .home-testimonials-section.is-desktop.is-entering
    .home-testimonial-card:nth-child(4) {
    animation-delay: 240ms;
  }

  .home-testimonials-section.is-desktop.is-entering
    .home-testimonial-card:nth-child(5) {
    animation-delay: 320ms;
  }

  .home-testimonials-section.is-desktop.is-entering
    .home-testimonial-card:nth-child(6) {
    animation-delay: 400ms;
  }
}

@keyframes home-testimonial-fade-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-testimonials-section.is-desktop:not(.is-entered)
    .home-testimonial-card,
  .home-testimonials-section.is-desktop.is-entering .home-testimonial-card {
    opacity: 1;
    animation: none;
  }
}