/* Carosello: una fila che scorre a pagine, con due frecce. Senza script resta una fila scorrevole col dito.
   <div class="carousel" style?> <ul class="carousel-track">…</ul> </div>; le frecce stanno dove serve
   (di solito nella testata della sezione) e puntano al carosello con data-carousel-prev / data-carousel-next="id". */

@layer components {
  .carousel-track {
    --per: 3; /* elementi visibili */

    display: flex;
    gap: var(--gap);
    margin: 0;
    padding: 0 0 8px;
    list-style: none;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;

    &::-webkit-scrollbar { display: none; }
    & > * { flex: 0 0 calc((100% - (var(--per) - 1) * var(--gap)) / var(--per)); min-width: 0; scroll-snap-align: start; }
    & > [hidden] { display: none; }

    &.per-4 { --per: 4; }
  }

  @media (max-width: 1080px) {
    .carousel-track, .carousel-track.per-4 { --per: 2; }
  }
  @media (max-width: 640px) {
    .carousel-track > * { flex-basis: 84%; }
  }
  @media (prefers-reduced-motion: reduce) {
    .carousel-track { scroll-behavior: auto; }
  }

  /* Frecce e contatore */
  .carousel-ctrl {
    display: flex;
    align-items: center;
    gap: 8px;

    & .count { min-width: 5ch; font-size: var(--step-small); color: var(--ink-soft); text-align: right; font-variant-numeric: tabular-nums; }
  }

  /* Messaggio quando i filtri non lasciano nulla */
  .carousel-empty {
    display: grid;
    justify-items: start;
    gap: 12px;
    padding: 40px 28px;
    border-radius: var(--r-lg);
    background: var(--tint);

    & h3 { font-size: var(--step-lead); }
  }
}

/* Indicatore di pagina: la pillola scorre sotto il carosello come quella dello switch e segue il dito.
   <div class="carousel-pager" data-carousel-pager="id-fila" data-label="Pagina"></div>: i punti li crea v2.js */
@layer components {
  .carousel-pager {
    --n: 1;
    --i: 0;

    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: repeat(var(--n), minmax(0, 28px));
    width: fit-content;
    max-width: 100%;
    margin: 16px auto 0;
    padding: 4px;
    border-radius: var(--r-pill);
    background: var(--tint);

    &[hidden] { display: none; }

    & button {
      display: grid;
      place-items: center;
      height: 24px;
      padding: 0;
      border: 0;
      border-radius: var(--r-pill);
      background: none;
      cursor: pointer;
    }
    & button::before {
      content: "";
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--ink-soft);
      opacity: .45;
      transition: opacity var(--dur-fast) var(--ease), scale var(--dur-fast) var(--ease);
    }
    & button:hover::before { opacity: 1; scale: 1.3; }
    & button[aria-current="true"]::before { background: var(--on-ink); opacity: 1; }
    & button:focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; }

    & .thumb {
      position: absolute;
      z-index: -1;
      top: 4px;
      bottom: 4px;
      left: 4px;
      width: calc((100% - 8px) / var(--n));
      border-radius: var(--r-pill);
      background: var(--accent);
      translate: calc(var(--i) * 100%) 0;
      transition: translate .2s var(--ease);
    }
  }
  /* Al posto del conteggio, accanto alle frecce: con molte pagine (telefono) i punti si stringono */
  @media (pointer: coarse) { .carousel-pager button { height: 32px; } } /* punti piu' alti: tocco sicuro */
  .carousel-ctrl { max-width: 100%; }
  .carousel-ctrl .carousel-pager { flex: 0 1 auto; min-width: 0; margin: 0 4px 0 0; }
  .carousel-ctrl .round { flex: none; }
  @media (prefers-reduced-motion: reduce) {
    .carousel-pager .thumb { transition: none; }
  }
}