/* [FONDOS CON VÍDEO 2026-09-24] CSS del motor de fons amb vídeo (js/iaLayer_bg_video.js). Només maquetació
   del vídeo i del botó: el pòster, la capa de color i el color del text dels slots viuen a system.css
   (.background-videoN, .ia-bg-video[data-n]::after), generat des d'Estils. Tokens amb fallback. */

/* El host que té vídeo: context d'apilament propi perquè el vídeo (z-index -1) quedi per sobre del fons
   del host i per sota del contingut. position:relative només si el host era estàtic (el motor hi posa
   .ia-bg-video-static): un host sticky/absolute/fixed conserva el seu. */
.ia-has-bg-video { isolation: isolate; }
.ia-has-bg-video.ia-bg-video-static { position: relative; }

/* Especificitat (0,2,0) a propòsit: guanya a `.row > *` de Bootstrap i als `.background-videoN *`. */
.ia-has-bg-video > .ia-bg-video {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  margin: 0;
  padding: 0;
  width: auto;
  max-width: none;
  border-radius: inherit;
}
.ia-bg-video > video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;               /* es veu el pòster fins que el vídeo reprodueix de debò */
  transition: opacity .4s ease;
}
.ia-bg-video.is-playing > video { opacity: 1; }
/* Capa de color: mentre no reprodueix ja la pinta el fons del host (.background-videoN); aquí només quan
   el vídeo tapa el pòster, per no doblar-la. El color el posa system.css per slot. */
.ia-bg-video::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .4s ease;
}
.ia-bg-video.is-playing::after { opacity: 1; }

/* Control Pausa/Reprodueix (WCAG 2.2.2): <button> natiu, Enter i Espai funcionen sols, focus VISIBLE. */
.ia-has-bg-video > .ia-bg-video__toggle {
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  margin: 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;
  opacity: .85;
}
.ia-has-bg-video > .ia-bg-video__toggle:hover { opacity: 1; }
.ia-has-bg-video > .ia-bg-video__toggle[data-state="playing"]::before { content: "\275A\275A"; color: inherit; }
.ia-has-bg-video > .ia-bg-video__toggle[data-state="paused"]::before  { content: "\25B6"; color: inherit; }
.ia-has-bg-video > .ia-bg-video__toggle:focus-visible {
  opacity: 1;
  outline: 2px solid var(--ia-color-focus-ring, #1e88e5);
  outline-offset: 3px;
}

/* Si el moviment reduït arriba abans que el JS (o el JS falla), cap vídeo ni botó: només el pòster. */
@media (prefers-reduced-motion: reduce) {
  .ia-has-bg-video > .ia-bg-video,
  .ia-has-bg-video > .ia-bg-video__toggle { display: none; }
}