/* =============================================================================
   COMPONENTE: pf-slider — CSS autonomo (nessuna dipendenza da Tailwind o dal tema)
   =============================================================================
   Copia questo file su un altro sito, caricalo come stylesheet e usa il partial
   pf-slider.twig + pf-slider.js. L'unico accento colore è `--pf-accent`
   (fallback #FFB400): impostalo dove vuoi, o lascia il default.

   Stati:
   - BASELINE (senza JS/Swiper): item impilati, nav e frecce nascoste → indicizzabile.
   - .is-enhanced (aggiunta dal JS): slider a slida singola.
       · Desktop >=1025px : immagine+testo a sinistra, miniature VERTICALI a destra.
       · Mobile  <1025px  : immagine → miniature (strip orizzontale) → testo → frecce,
                            il tutto dentro il viewport.
   ============================================================================= */

.pf-slider {
  --pf-accent: var(--color-primary, #FFB400);
  padding: 10vw 5%; /* baseline; sovrascritto in .is-enhanced */
}

/* ---- BASELINE: item impilati, controlli/nav nascosti (fallback no-JS) ---- */
.pf-slider__nav { display: none; }
.pf-slider__controls { display: none; }

.pf-slider__item {
  margin-bottom: clamp(3rem, 8vw, 6rem);
  display: grid;
  gap: 1.5rem;
}
.pf-slider__img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}
.pf-slider__title {
  margin: 0 0 1rem;
  line-height: 1;
  font-size: clamp(1.8rem, 4vw, 3rem);
  color: var(--pf-accent);
  text-transform: uppercase;
}

/* Immagine e titolo sono cliccabili come la CTA (link avvolgenti nel Twig, con
   `tabindex="-1"` perché il Tab si fermi solo sulla CTA).
   Nessun effetto in hover, per scelta: il cursore a manina — che l'<a> porta da
   sé — è già il segnale, e l'hero della homepage è pieno di movimento. */

/* ⚠️ `display: block` + 100%: senza, l'<a> resterebbe INLINE con altezza
   automatica, e nelle varianti potenziate l'immagine prende `height: 100%` —
   cioè una percentuale che non avrebbe più un box da cui ricavarsi. Le regole
   sull'immagine sono per discendenza (`.pf-slider__media img`, `.pf-slider__img`),
   quindi attraversano il link senza modifiche. */
.pf-slider__media-link {
  display: block;
  width: 100%;
  height: 100%;
}

/* Il titolo NON è una CTA: colore, misura e maiuscolo restano quelli dell'<h2>
   che lo contiene, al link si toglie solo la veste da link del browser. */
.pf-slider__title-link {
  color: inherit;
  text-decoration: none;
}
.pf-slider__excerpt {
  margin: 0 0 1.5rem;
  max-width: 50ch;
  color: var(--pf-accent);
}
/* CTA — stessa veste di tutte le CTA del sito (`.cta-link` in tailwind.css):
   DM Sans 500, 15px, maiuscolo con tracking 0.08em, nessuna sottolineatura,
   hover a opacità 0.6 in 0.2s.
   ⚠️ Qui i valori si RIPETONO invece di usare la classe condivisa: questo file
   è dichiaratamente autonomo (vedi la testata — «copialo su un altro sito e
   caricalo»), quindi non può dipendere da una classe che vive nel tema. Come
   per `--pf-accent`, si legge il token del tema con un fallback esplicito: sul
   sito Perazza i due valori coincidono al pixel, altrove il componente resta
   presentabile da solo. Se cambia la veste in tailwind.css, aggiorna anche qui. */
.pf-slider__cta {
  display: inline-block;
  min-height: 1.5rem; /* area di click ≥24px (WCAG 2.5.8) */
  color: var(--pf-accent);
  font-family: var(--font-body, "DM Sans", sans-serif);
  font-size: var(--text-cta, 0.9375rem);
  font-weight: var(--text-cta--font-weight, 500);
  line-height: 1.2;
  letter-spacing: var(--tracking-cta, 0.08em);
  text-transform: uppercase;
  text-decoration: none;
  transition: opacity 0.2s ease;
}
/* Hover: la stessa opacità delle altre CTA del sito (0.6 con 0.2s).
   ⚠️ Qui prima c'era una regola su `.cta-arrow` — un'icona freccia che il markup
   NON ha: sembrava un hover e non ne faceva nessuno. Se la freccia tornerà,
   tornerà anche il suo `transform`. */
.pf-slider__cta:hover { opacity: 0.6; }

.pf-slider__thumb-link img {
  display: block;
  width: 100%;
  object-fit: cover;
}

/* Freccia prev/next: reset del <button>, colore accento (SVG usa currentColor). */
.pf-slider__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: none;
  color: var(--pf-accent);
  cursor: pointer;
  line-height: 0;
}

.pf-slider__empty {
  padding: 10vw 5%;
  color: var(--pf-accent);
}

@media (min-width: 768px) {
  .pf-slider__item {
    grid-template-columns: minmax(0, 42%) 1fr;
    align-items: center;
    gap: clamp(2rem, 4vw, 4rem);
  }
}

/* =========== DESKTOP >=1025px : slider con miniature VERTICALI a destra =========== */
@media (min-width: 1025px) {
  [data-pf-slider].is-enhanced {
    /* Miniature: 5 visibili = 3 piene (centro + sopra + sotto) + prima/ultima al ~10%.
       3.2 = 3 piene + 2×0.1 peek. 64px = 4 gap da 16px (spaceBetween). Dimensioniamo per
       ALTEZZA (5 in 100vh) e ricaviamo la larghezza dal 4:5. */
    --pf-thumb-h: calc((100vh - 64px) / 3.2);
    --pf-thumb-w: calc(var(--pf-thumb-h) * 4 / 5);
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--pf-thumb-w);
    gap: 4vw;
    align-items: center;
    height: 100svh;
    padding: 0 4vw; /* miniature a filo del bordo destro (bleed) */
  }
  /* Stage = contesto di posizionamento: item IMPILATI (absolute) → crossfade immagini. */
  [data-pf-slider].is-enhanced .pf-slider__stage {
    position: relative;
    align-self: stretch;
    min-width: 0;
    height: 100%;
  }
  [data-pf-slider].is-enhanced .pf-slider__item {
    position: absolute;
    inset: 0;
    display: grid;
    margin: 0;
    grid-template-columns: minmax(0, 46%) 1fr;
    align-items: center;
    gap: 3vw;
    pointer-events: none;
  }
  [data-pf-slider].is-enhanced .pf-slider__item.is-active {
    pointer-events: auto;
    z-index: 2;
  }
  /* IMMAGINE grande: CROSSFADE via transizione CSS (item stacked). Base: solo attiva visibile. */
  [data-pf-slider].is-enhanced .pf-slider__media {
    aspect-ratio: 4 / 5;
    max-height: 80vh;
    width: 100%;
    overflow: hidden;
    opacity: 0;
    transition: opacity 0.5s ease;
  }
  [data-pf-slider].is-enhanced .pf-slider__item.is-active .pf-slider__media { opacity: 1; }
  /* TESTO: cambio ISTANTANEO → visibile solo nell'item attivo. */
  [data-pf-slider].is-enhanced .pf-slider__body { visibility: hidden; }
  [data-pf-slider].is-enhanced .pf-slider__item.is-active .pf-slider__body { visibility: visible; }
  [data-pf-slider].is-enhanced .pf-slider__img {
    aspect-ratio: auto;
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  /* Frecce sotto la CTA. */
  [data-pf-slider].is-enhanced .pf-slider__item.is-active .pf-slider__controls {
    display: flex;
    gap: 1rem;
    margin-top: clamp(1.25rem, 2.5vw, 2rem);
  }
  [data-pf-slider].is-enhanced .pf-slider__arrow svg {
    width: 1.25rem;
    height: 1.25rem;
  }

  /* Colonna miniature verticale, full-height. */
  [data-pf-slider].is-enhanced .pf-slider__nav {
    display: block;
    position: relative;
    align-self: stretch;
    width: 100%;
    height: 100%;
    min-height: 0;
  }
  [data-pf-slider].is-enhanced .pf-slider__thumbs {
    width: 100%;
    height: 100%;
    cursor: grab;
  }
  [data-pf-slider].is-enhanced .pf-slider__thumbs-wrapper {
    margin: 0;
    padding: 0;
    list-style: none;
    flex-direction: column;
  }
  [data-pf-slider].is-enhanced .pf-slider__thumb {
    height: var(--pf-thumb-h);
    opacity: 0.45;
    filter: blur(3px);
    transition: opacity 0.45s ease, filter 0.45s ease;
  }
  [data-pf-slider].is-enhanced .pf-slider__thumb.swiper-slide-active {
    opacity: 1;
    filter: none;
  }
  [data-pf-slider].is-enhanced .pf-slider__thumbs.swiper-grabbing { cursor: grabbing; }
  [data-pf-slider].is-enhanced .pf-slider__thumb-link {
    display: block;
    width: 100%;
    height: 100%;
  }
  [data-pf-slider].is-enhanced .pf-slider__thumb-link img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
  }
}

/* =========== MOBILE / TABLET <1025px : slider a slida singola nel viewport =========== */
@media (max-width: 1024px) {
  [data-pf-slider].is-enhanced {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(0.5rem, 2svh, 1.1rem);
    width: 100%;
    min-height: 100svh;
    height: 100svh;
    padding: clamp(0.75rem, 3svh, 1.5rem) 6vw;
    overflow: hidden;
  }

  /* Appiattisce stage + item attivo → media/nav/body ordinabili (item non attivi = none). */
  [data-pf-slider].is-enhanced .pf-slider__stage { display: contents; }
  [data-pf-slider].is-enhanced .pf-slider__item { display: none; }
  [data-pf-slider].is-enhanced .pf-slider__item.is-active { display: contents; }

  /* 1) Immagine — altezza cappata per stare nel viewport, resta 4:5. */
  [data-pf-slider].is-enhanced .pf-slider__media {
    order: 1;
    flex: 0 0 auto;
    height: clamp(160px, 38svh, 440px);
    aspect-ratio: 4 / 5;
    width: auto;
    max-width: 86vw;
    margin: 0;
    overflow: hidden;
    opacity: 1;
  }
  [data-pf-slider].is-enhanced .pf-slider__media img,
  [data-pf-slider].is-enhanced .pf-slider__img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    aspect-ratio: auto;
  }

  /* 2) Miniature — strip ORIZZONTALE piccola, 5 INTERE con la centrale attiva.
        Nessun peek ai bordi: la larghezza della miniatura la calcola Swiper
        (`slidesPerView: 5` nel JS) dividendo QUESTA strip, quindi le 5 ci
        stanno per costruzione a ogni larghezza di schermo. Prima erano
        dimensionate in CSS e la strip tornava ~2px corta: le due esterne
        finivano tagliate di un pelo (era il peek che si vedeva).
        ⚠️ Il tetto di 360px serve ai tablet: senza, a 1024px di larghezza un
        quinto della strip farebbe miniature da 180px. 360 = 5 × 64 + 4 × 10 di
        gap → miniatura 64×80, il massimo che avevano prima. Il 10 è lo
        `spaceBetween` di pf-slider.js: se cambia là, cambia qui. */
  [data-pf-slider].is-enhanced .pf-slider__nav {
    order: 2;
    display: block;
    width: 100%;
    max-width: min(92vw, 360px);
    flex: 0 0 auto;
  }
  [data-pf-slider].is-enhanced .pf-slider__thumbs {
    width: 100%;
    height: auto;
  }
  [data-pf-slider].is-enhanced .pf-slider__thumbs-wrapper {
    margin: 0;
    padding: 0;
    list-style: none;
    flex-direction: row;
  }
  [data-pf-slider].is-enhanced .pf-slider__thumb {
    /* La larghezza la scrive Swiper inline (una su cinque della strip). Qui NON
       va messa un'altezza: vincerebbe sull'aspect-ratio e le miniature si
       schiaccerebbero. L'altezza esce dal 4:5, quindi segue la strip. */
    height: auto;
    aspect-ratio: 4 / 5;
    opacity: 0.5;
    filter: blur(2px);
    transition: opacity 0.3s ease, filter 0.3s ease;
  }
  [data-pf-slider].is-enhanced .pf-slider__thumb.swiper-slide-active {
    opacity: 1;
    filter: none;
  }
  [data-pf-slider].is-enhanced .pf-slider__thumbs.swiper-grabbing { cursor: grabbing; }
  [data-pf-slider].is-enhanced .pf-slider__thumb-link {
    display: block;
    width: 100%;
    height: 100%;
  }
  [data-pf-slider].is-enhanced .pf-slider__thumb-link img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
  }

  /* 3-4-5) Testo (titolo, riassunto, CTA) + frecce — centrati. */
  [data-pf-slider].is-enhanced .pf-slider__body {
    order: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: clamp(0.35rem, 1.4svh, 0.85rem);
    width: 100%;
    max-width: 92vw;
    min-height: 0;
    visibility: visible;
  }

  [data-pf-slider].is-enhanced .pf-slider__title {
    margin: 0;
    line-height: 1.05;
    font-size: clamp(1.25rem, 7.5vw, 3rem);
  }

  [data-pf-slider].is-enhanced .pf-slider__excerpt {
    margin: 0;
    max-width: 60ch;
    color: var(--pf-accent);
    /* Pavimento del testo corrente del sito: 16px da mobile, 20px da desktop
       (era clamp(0.82rem, 3.4vw, 1rem) = 13.1→16px). Il massimo combacia con la
       misura che l'estratto ha già sopra i 1025px, quindi il passaggio fra i due
       rami non si vede. */
    font-size: clamp(1rem, 3.4vw, 1.25rem);
    /* Tronca a 3 righe per non sforare il viewport (dato integro nel DOM). */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  [data-pf-slider].is-enhanced .pf-slider__controls {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-top: clamp(0.25rem, 1svh, 0.75rem);
  }
  [data-pf-slider].is-enhanced .pf-slider__arrow {
    width: clamp(40px, 11vw, 52px);
    height: clamp(40px, 11vw, 52px);
  }
  [data-pf-slider].is-enhanced .pf-slider__arrow svg {
    width: 1.1rem;
    height: 1.1rem;
  }
}

/* Rispetta prefers-reduced-motion: niente transizioni (crossfade/blur istantanei). */
@media (prefers-reduced-motion: reduce) {
  .pf-slider__media,
  .pf-slider__thumb,
  .pf-slider__cta {
    transition: none !important;
  }
}