/* ============================================================
   NexaMind — Carousel funzionalita' della landing Offerta Autunnale
   Stili scoped: solo la sezione ".offer-carousel" della pagina
   iurismind/offerta-autunnale. Riusa i design token del sito
   (palette, font, raggi, spaziature) senza toccare style.css.

   Progressive enhancement: senza JavaScript il track resta
   scorrevole (scroll orizzontale nativo + scroll snap) e i
   controlli non vengono mostrati, cosi' non restano inerti.
   ============================================================ */

/* Nome commerciale della promozione: grafia naturale del brand, accanto al
   prezzo. L'etichetta di sezione (.eyebrow) rende lo stesso nome in
   maiuscolo; questa riga lo riporta con la capitalizzazione corretta. */
.offer-promo-name {
  margin-bottom: var(--s-3);
  padding-bottom: var(--s-2);
  color: var(--c-ink);
  font-family: var(--ff-display);
  font-size: 0.95rem;
  font-weight: 600;
  border-bottom: 1px solid var(--c-border);
}

.offer-carousel {
  position: relative;
  max-width: 1000px;
  margin: 0 auto;
}

.offer-carousel__track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  padding-bottom: var(--s-3);
}

.offer-carousel__track:focus-visible {
  outline: 2px solid var(--c-primary);
  outline-offset: var(--s-1);
  border-radius: var(--r-lg);
}

.offer-carousel__slide {
  display: flex;
  flex: 0 0 100%;
  flex-direction: column;
  gap: var(--s-4);
  min-width: 0;
  padding: 0 var(--s-2);
  scroll-snap-align: start;
}

/* Cornice a proporzione fissa: nessuno spostamento di layout quando
   l'immagine viene caricata (CLS 0) e nessun taglio dell'interfaccia. */
.offer-carousel__frame {
  margin: 0;
  overflow: hidden;
  aspect-ratio: 884 / 508;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
}

.offer-carousel__frame img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

.offer-carousel__caption h3 {
  margin-bottom: var(--s-2);
  font-size: 1.15rem;
}

.offer-carousel__caption p {
  max-width: 68ch;
  font-size: 0.98rem;
}

/* Controlli: resi visibili solo quando lo script ha preso in carico
   il carousel (classe .is-ready sul contenitore). */
.offer-carousel__controls {
  display: none;
  flex-wrap: wrap;
  gap: var(--s-3);
  align-items: center;
  justify-content: center;
  margin-top: var(--s-4);
}

.offer-carousel.is-ready .offer-carousel__controls {
  display: flex;
}

.offer-carousel__button {
  display: inline-flex;
  gap: var(--s-2);
  align-items: center;
  justify-content: center;
  min-width: 40px;
  min-height: 40px;
  padding: 0 var(--s-3);
  color: var(--c-ink);
  font-size: 0.85rem;
  font-weight: 500;
  background: var(--c-bg);
  border: 1px solid var(--c-border-strong);
  border-radius: var(--r-md);
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}

.offer-carousel__button:hover {
  background: var(--c-surface);
  border-color: var(--c-ink);
}

.offer-carousel__button:focus-visible {
  outline: 2px solid var(--c-primary);
  outline-offset: 2px;
}

.offer-carousel__button svg {
  width: 16px;
  height: 16px;
}

/* Il reset globale del sito imposta `svg { display: block }`, che ha la
   precedenza sull'attributo [hidden]: serve una regola esplicita. */
.offer-carousel__button svg[hidden] {
  display: none;
}

.offer-carousel__dots {
  display: flex;
  gap: var(--s-1);
  align-items: center;
}

/* Area di tocco 32x32 con punto visibile da 10px. */
.offer-carousel__dot {
  position: relative;
  width: 32px;
  height: 32px;
  border-radius: 50%;
}

.offer-carousel__dot::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  margin: -5px 0 0 -5px;
  background: var(--c-border-strong);
  border-radius: 50%;
  transition: background-color var(--dur) var(--ease);
}

.offer-carousel__dot:hover::before {
  background: var(--c-muted-soft);
}

.offer-carousel__dot[aria-current="true"]::before {
  background: var(--c-primary);
}

.offer-carousel__dot:focus-visible {
  outline: 2px solid var(--c-primary);
  outline-offset: 2px;
}

/* Con i controlli attivi la barra di scorrimento nativa non serve piu'. */
.offer-carousel.is-ready .offer-carousel__track {
  scrollbar-width: none;
}

.offer-carousel.is-ready .offer-carousel__track::-webkit-scrollbar {
  height: 0;
}

/* Stato annunciato ai lettori di schermo. */
.offer-carousel__status {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  white-space: nowrap;
  border: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
}

@media (max-width: 768px) {
  .offer-carousel__slide {
    padding: 0;
  }

  .offer-carousel__caption h3 {
    font-size: 1.05rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .offer-carousel__track {
    scroll-behavior: auto;
  }

  .offer-carousel__button,
  .offer-carousel__dot::before {
    transition: none;
  }
}