/* [STATIC_CAROUSEL_PRIMITIVE 2026-09-22] CSS del motor únic de carrusels (iaLayer_collection.js), només per al
   contracte ESTÀTIC (`[data-ia-carousel]`, helper Twig iailayer_carousel_attrs). El de Collection porta el seu
   propi CSS (iaLayer_collection.css) i no es toca.

   Es carrega globalment des de principal.html i, als previews, amb iailayer_carousel_runtime_assets() (mateix
   fitxer als dos llocs: PREVIEW == RUNTIME). Tokens amb fallback: cap color escrit a pèl sense token. */

/* ESTAT PREVI A L'INIT (i sense JS). Fins que el motor embolcalla els fills en slides, un scroll horitzontal amb
   snap: usable, sense apilar tota la llista en vertical. Deixa de valdre quan Swiper afegeix .swiper-initialized. */
[data-ia-carousel]:not(.swiper-initialized) {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
[data-ia-carousel]:not(.swiper-initialized) > * {
  flex: 0 0 min(85%, 320px);
  scroll-snap-align: start;
}

.iaLayer-carousel { position: relative; }

/* Control Pause/Play. Només existeix si hi ha autoplay (el crea el motor). És un <button> natiu: Enter i Espai
   funcionen sols, i el focus ha de ser VISIBLE. */
.iaLayer-carousel__playpause {
  position: absolute;
  right: 8px;
  bottom: 8px;
  z-index: 10;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;              /* àrea tàctil suficient */
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--ia-color-dark, #141336);
  color: var(--ia-color-text-inverted, #ffffff);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
}
.iaLayer-carousel__playpause[hidden] { display: none; }   /* el `display` de dalt guanyaria a l'atribut hidden */
.iaLayer-carousel__playpause[data-state="playing"]::before { content: "\275A\275A"; }  /* ❚❚ */
.iaLayer-carousel__playpause[data-state="paused"]::before  { content: "\25B6"; }        /* ▶ */
.iaLayer-carousel__playpause:focus-visible {
  outline: 2px solid var(--ia-color-focus-ring, #1e88e5);
  outline-offset: 3px;
}

/* Qui demana menys moviment no ha de veure lliscar les slides. L'autoplay ja el desactiva el motor; això treu
   també l'animació del canvi de slide manual. */
@media (prefers-reduced-motion: reduce) {
  .iaLayer-carousel .swiper-wrapper { transition-duration: 0s !important; }
}