/**
 * Hularmonia Testimonials (brief 05).
 * Slider: slide in grid a cella singola (solo dopo l'init del JS, classe
 * .is-ready), controlli sovrapposti nella stessa cella al posto degli
 * `absolute` del modello, colori di stato come custom property, aree di
 * tocco di 44px. Senza JS le testimonianze restano impilate.
 */

.hularmonia-testimonials {
  --hts-arrow-bg: var(--hula-sand-dark);
  --hts-arrow-bg-hover: var(--hula-line);
  --hts-dot: var(--hula-line);
  --hts-dot-hover: rgb(184 149 106 / 0.5);
  --hts-dot-active: var(--hula-gold);
}

/* Margine del blockquote del browser azzerato con specificità bassa: il
   margine sotto arriva dalle utility (mb-8 / mb-10). */
:where(.hularmonia-testimonials) .hularmonia-testimonials__quote {
  margin: 0;
}

/* Senza JS: testimonianze una sotto l'altra. */
.hularmonia-testimonials__track {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2rem;
}

/* Viewport: track e controlli nella stessa cella. */
.hularmonia-testimonials__viewport {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

.hularmonia-testimonials__viewport > * {
  grid-area: 1 / 1;
}

/* Con il JS: slide sovrapposte; la cella è alta quanto la slide più alta,
   così il layout non salta al cambio. Dissolvenza di 600ms come nel
   modello; le slide nascoste escono anche dall'albero di accessibilità
   (visibility + inert dal JS). */
.hularmonia-testimonials__slider.is-ready .hularmonia-testimonials__track {
  gap: 0;
  touch-action: pan-y;
}

.hularmonia-testimonials__slider.is-ready .hularmonia-testimonials__item {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transition: opacity 600ms ease-in-out, visibility 0s linear 600ms;
}

.hularmonia-testimonials__slider.is-ready .hularmonia-testimonials__item.is-active {
  opacity: 1;
  visibility: visible;
  transition: opacity 600ms ease-in-out, visibility 0s;
}

/* Frecce: nel modello absolute left/right-0, top-1/2, -/+translate-x-2
   (lg: 6). Qui una riga flex sopra la slide, centrata in verticale. */
.hularmonia-testimonials__controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  pointer-events: none;
  z-index: 1;
}

.hularmonia-testimonials__controls[hidden] {
  display: none;
}

/* Cerchio visibile di 40px (lg 48) come nel modello, area di tocco 44px:
   bordo trasparente di 2px con background-clip, margine -2px. */
.hularmonia-testimonials .hularmonia-testimonials__prev,
.hularmonia-testimonials .hularmonia-testimonials__next {
  pointer-events: auto;
  width: 44px;
  height: 44px;
  border: 2px solid transparent;
  background-clip: padding-box;
  background-color: var(--hts-arrow-bg);
}

.hularmonia-testimonials .hularmonia-testimonials__prev {
  margin-left: -10px;
}

.hularmonia-testimonials .hularmonia-testimonials__next {
  margin-right: -10px;
}

@media (min-width: 1024px) {
  .hularmonia-testimonials .hularmonia-testimonials__prev,
  .hularmonia-testimonials .hularmonia-testimonials__next {
    width: 48px;
    height: 48px;
    border: 0;
  }

  .hularmonia-testimonials .hularmonia-testimonials__prev {
    margin-left: -24px;
  }

  .hularmonia-testimonials .hularmonia-testimonials__next {
    margin-right: -24px;
  }
}

.hularmonia-testimonials .hularmonia-testimonials__prev:hover,
.hularmonia-testimonials .hularmonia-testimonials__next:hover,
.hularmonia-testimonials .hularmonia-testimonials__prev:focus-visible,
.hularmonia-testimonials .hularmonia-testimonials__next:focus-visible {
  background-color: var(--hts-arrow-bg-hover);
}

/* Dot: pillola visibile come nel modello (8×8, attivo 24×8), area di
   tocco 44×44 (A-63: i dot sono più distanziati del modello). */
.hularmonia-testimonials__dots[hidden] {
  display: none;
}

.hularmonia-testimonials .hularmonia-testimonials__dot {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
}

.hularmonia-testimonials__dot-mark {
  display: block;
  width: 8px;
  height: 8px;
  background-color: var(--hts-dot);
}

.hularmonia-testimonials__dot:hover .hularmonia-testimonials__dot-mark {
  background-color: var(--hts-dot-hover);
}

.hularmonia-testimonials__dot[aria-current="true"] .hularmonia-testimonials__dot-mark {
  width: 24px;
  background-color: var(--hts-dot-active);
}

.hularmonia-testimonials__slider :focus-visible {
  outline: 2px solid var(--hula-gold);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .hularmonia-testimonials__slider.is-ready .hularmonia-testimonials__item,
  .hularmonia-testimonials__slider.is-ready .hularmonia-testimonials__item.is-active,
  .hularmonia-scope .hularmonia-testimonials__dot-mark,
  .hularmonia-scope .hularmonia-testimonials__prev,
  .hularmonia-scope .hularmonia-testimonials__next {
    transition: none;
  }
}