/* ============================================================
   PARALLAX  stili visuali per elementi con [data-parallax]
   Il movimento è gestito da Jarallax (jarallax.min.js).

   UTILIZZO:
     data-parallax             abilita parallax sull'elemento
     data-parallax-strength    intensità 0.050.4 (default 0.2)
     data-img-src="url"        immagine di sfondo per Jarallax
   ============================================================ */

/*  Wrapper  */
[data-parallax] {
  position: relative;
}

/*  Hero: altezza personalizzabile tramite variabile CSS  */
[data-parallax].parallax-hero {
  height: var(--parallax-hero-height, 70vh);
}

/*  Overlay scuro opzionale  */
[data-parallax].parallax-overlay::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--parallax-overlay-color, rgba(0, 0, 0, 0.35));
  z-index: 1;
  pointer-events: none;
}

/*  Contenuto testuale sopra l'immagine  */
/* Richiede .parallax-hero sul wrapper (altezza esplicita).   */
.parallax-content {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.parallax-content a,
.parallax-content button,
.parallax-content input {
  pointer-events: auto;
}

/*  Contenuto nel flusso (senza parallax-hero)  */
/* Usare position-relative + z-index direttamente sul figlio. */
[data-parallax] > .container,
[data-parallax] > .container-fluid {
  position: relative;
  z-index: 2;
}

/* ============================================================
   PARALLAX-CONTENT-BG
   Pannello colorato con bordo inclinato sovrapposto all'immagine.
   Richiede .parallax-hero sul wrapper.

   Struttura HTML:
     <div data-parallax data-img-src="" class="parallax-hero">
       <div class="parallax-content-bg parallax-content-bg--left"></div>
     </div>

   Variabili CSS:
     --parallax-content-bg-color   (default rgba(0,88,244,.75))
     --parallax-content-bg-width   (default 50%)
     --parallax-content-bg-skew    (default 5vw)
   ============================================================ */

.parallax-content-bg {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 2;
  width: var(--parallax-content-bg-width, 50%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 3rem;
  background: var(--parallax-content-bg-color, rgba(0, 88, 244, 0.75));
  color: inherit;
  pointer-events: auto;
}

.parallax-content-bg--left {
  left: 0;
  right: auto;
  clip-path: polygon(
    0 0,
    100% 0,
    calc(100% - var(--parallax-content-bg-skew, 5vw)) 100%,
    0 100%
  );
  padding-right: calc(3rem + var(--parallax-content-bg-skew, 5vw));
}

.parallax-content-bg--right {
  right: 0;
  left: auto;
  clip-path: polygon(
    var(--parallax-content-bg-skew, 5vw) 0,
    100% 0,
    100% 100%,
    0 100%
  );
  padding-left: calc(3rem + var(--parallax-content-bg-skew, 5vw));
}

/*  Accessibilità  */
@media (prefers-reduced-motion: reduce) {
  [data-parallax] { background-attachment: scroll !important; }
}

/* Mobile: Jarallax disabilita il parallax automaticamente.
   - Parallax senza pannello (es. footer): il bg Jarallax resta visibile, layout invariato.
   - Parallax con .parallax-content-bg: figura visibile sopra, pannello sotto in colonna,
     bg Jarallax nascosto (la figura lo sostituisce). */
@media (max-width: 767.98px) {

  /* Solo i wrapper CON pannello diventano colonna */
  [data-parallax]:has(.parallax-content-bg) {
    display: flex;
    flex-direction: column;
    overflow: visible;
  }

  /* Nasconde il bg Jarallax solo quando c'è già la figura nel DOM */
  [data-parallax]:has(.parallax-content-bg) .jarallax-container {
    display: none !important;
  }

  /* La figura torna visibile e occupa tutta la larghezza */
  [data-parallax]:has(.parallax-content-bg) figure.parallax-img {
    width: 100%;
    margin: 0;
    order: 0;
  }

  [data-parallax]:has(.parallax-content-bg) figure.parallax-img img {
    /* width: 100%;
    height: auto;
    display: block; */
    min-height: 300px;
    object-fit: cover;
  }

  /* Pannello: esce dall'absolute, va sotto l'immagine */
  [data-parallax] .parallax-content-bg,
  [data-parallax] .parallax-content-bg--left,
  [data-parallax] .parallax-content-bg--right {
    position: relative;
    width: 100%;
    top: auto;
    bottom: auto;
    left: auto;
    right: auto;
    clip-path: none;
    padding: 1.5rem;
    order: 1;
  }

  /* Hero con pannello su mobile: height auto (il contenuto detta l'altezza) */
  [data-parallax].parallax-hero:has(.parallax-content-bg) {
    height: auto;
  }
}