/* ============================================================================
   CAROSELLO FOTOGRAFICO
   ============================================================================

   Lo scorrimento è tutto CSS: la pista è un contenitore che scorre in
   orizzontale e `scroll-snap` la fa fermare su una foto alla volta, invece di
   lasciarla a metà fra due. Questo funziona con il dito sul telefono e con la
   rotella sul computer senza una riga di JavaScript.

   Il JavaScript aggiunge solo le frecce, i pallini e l'annuncio della posizione
   corrente: se non parte, il carosello resta usabile.
   ========================================================================= */

.carosello {
  position: relative;
  margin-block: clamp(28px, 3.4vw, 44px);
}

.carosello-pista:focus-visible {
  outline: 2px solid var(--ultra-hi);
  outline-offset: 4px;
}

.carosello-pista {
  display: flex;
  gap: var(--grid-gap);
  margin: 0;
  padding: 0;

  overflow-x: auto;
  scroll-snap-type: x mandatory;

  /* Qui NON va `scroll-behavior: smooth`, e la ragione è concreta: su un
     contenitore con aggancio obbligatorio, uno scorrimento animato chiesto da
     JavaScript viene annullato dall'aggancio e la pista non si muove affatto.
     Verificato nel browser: con l'animazione le frecce non facevano niente,
     senza funzionano.

     Il cambio di foto premendo una freccia è quindi immediato. Lo scorrimento
     con il dito o con la rotella resta invece morbido, perché a occuparsene è
     l'aggancio del browser, non questa proprietà. Come effetto secondario, non
     c'è nessun movimento da spegnere per chi ha chiesto di ridurre le
     animazioni. */

  /* La barra di scorrimento del sistema spezzerebbe la fotografia in fondo.
     Resta comunque possibile scorrere con dito, rotella e tastiera. */
  scrollbar-width: none;

  &::-webkit-scrollbar {
    display: none;
  }
}

.carosello-diapositiva {
  /* Ogni foto occupa tutta la larghezza disponibile: se ne vede una alla
     volta, e i comandi sotto dicono che ce ne sono altre. */
  flex: 0 0 100%;
  scroll-snap-align: start;
}

.carosello-didascalia {
  margin: 12px 0 0;
  color: var(--ink-dim);
  font-size: var(--text-meta);
}

/* --- Comandi -----------------------------------------------------------------
   Restano nascosti finché carosello.js non li scopre: senza JavaScript non
   farebbero niente, e un comando inerte è peggio di un comando assente. */

.carosello-comandi {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-top: 22px;

  /* Senza JavaScript i comandi non servono e non occupano spazio. Con
     JavaScript lo spazio è già riservato (la riga è solo invisibile) e quando
     lo script la mostra niente si sposta: un comando che compare in ritardo
     spingeva giù tutto il testo della scheda (CLS 0,097 misurato). */
  &[hidden] {
    display: none;
  }
}

html.js .carosello-comandi[hidden] {
  display: flex;
  visibility: hidden;
}

.carosello-freccia {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: none;
  color: var(--ice);
  font-size: 18px;
  cursor: pointer;
  transition:
    background var(--motion),
    border-color var(--motion);

  &:hover,
  &:focus-visible {
    background: var(--ultra);
    border-color: var(--ultra);
  }

  &:focus-visible {
    outline: 2px solid var(--ultra-hi);
    outline-offset: 3px;
  }

  /* Alla prima o all'ultima foto la freccia corrispondente si disattiva: resta
     visibile per non far saltare il layout, ma smette di essere un comando. */
  &[disabled] {
    opacity: 0.35;
    cursor: default;
  }
}

.carosello-indicatori {
  display: flex;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;

  /* Il pulsante è 24x24 (area minima di tocco, WCAG 2.5.8); il pallino che si
     vede è un pseudo-elemento di 9px al centro. */
  & button {
    position: relative;
    display: block;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    cursor: pointer;

    &::before {
      content: "";
      position: absolute;
      top: 50%;
      left: 50%;
      width: 9px;
      height: 9px;
      translate: -50% -50%;
      border: 1px solid var(--border-strong);
      border-radius: 50%;
      transition: background var(--motion);
    }

    &:hover::before,
    &:focus-visible::before {
      background: var(--ultra-hi);
    }

    &:focus-visible {
      outline: 2px solid var(--ultra-hi);
      outline-offset: 0;
    }
  }

  /* La foto corrente. `aria-current` non è solo un'etichetta per gli screen
     reader: qui è anche ciò su cui si aggancia lo stile, così i due non
     possono divergere. */
  & button[aria-current="true"]::before {
    background: var(--ice);
    border-color: var(--ice);
  }
}

/* Il cambio di foto è già immediato per tutti (vedi la nota sulla pista qui
   sopra): resta da spegnere solo il colore che sfuma su frecce e pallini. */
@media (prefers-reduced-motion: reduce) {
  .carosello-freccia,
  .carosello-indicatori button {
    transition: none;
  }
}