/* Use body.kadence-enhancement on each rules for avoid conflicts */
body.kadence-enhancement .kb-row-layout-wrap.RowOverflow--Visible {
  overflow: visible;
}

body.kadence-enhancement .Overflow--Hidden .kt-inside-inner-col {
  overflow: hidden;
}

/* Animation */

@keyframes scrollImage {
  0% {
    transform: translateY(0vh);
  }

  100% {
    transform: translateY(-50vh);
  }
}

body.kadence-enhancement .Animation--ScrollMouse {
  animation: scrollImage 1s linear;
  animation-timeline: scroll(root);
}

@keyframes scrollText {
  0% {
    transform: translateX(-3vw);
  }

  40% {
    transform: translateX(20vw);
  }
}

body.kadence-enhancement .Animation--ScrollText {
  animation: scrollText 1s linear;
  animation-timeline: scroll(root);
}

body.kadence-enhancement
  .FullCardAnimation--Zoom
  .kb-advanced-slide-inner-wrap {
  transition: transform 0.5s;
}

body.kadence-enhancement
  .FullCardAnimation--Zoom
  .kb-advanced-slide-inner-wrap:hover {
  transition: transform 0.5s;
  transform: scale(1.05);
}

/* Image */

/* ImageHeight--100 Class for Column with Inner Image 100% */
body.kadence-enhancement .ImageHeight--100.wp-block-kadence-column,
.ImageHeight--100 .kt-inside-inner-col,
.ImageHeight--100 .wp-block-image,
.ImageHeight--100 .wp-block-image img {
  height: 100%;
}

body.kadence-enhancement .ImageHeight--100 .wp-block-image img {
  object-fit: cover;
}

body.kadence-enhancement .Image--BorderRadius img {
  border-radius: 12px;
}

/* Required Color */
body.kadence-enhancement label span.required,
body.kadence-enhancement label abbr.required {
  color: var(--global-palette1) !important;
}

body.kadence-enhancement
  .NumberPointTitle
  .wp-block-kadence-advancedheading:first-child {
  flex: 1 0 0;
}

body.kadence-enhancement
  .NumberPointTitle
  .wp-block-kadence-advancedheading:last-child {
  flex: 12 0 0;
}

body.kadence-enhancement .NumberPointTitle {
  align-items: flex-start;
}

.body.kadence-enhancement .Position--Relative {
  position: relative;
}

body.kadence-enhancement .Position--Unset {
  position: unset;
}

body.kadence-enhancement .CardLabel {
  position: absolute;
  top: 24px;
  left: 24px;
  width: fit-content;
  border-radius: 60px;
}

body.kadence-enhancement .Form--HideLabel .kb-adv-form-label {
  display: none;
}

/* Animation Buttons */
body.kadence-enhancement .Button {
  transition: all 0.5s;
}

body.kadence-enhancement .Button--Zoom:hover {
  transform: scale(1.05);
}

/* Translate to right */
body.kadence-enhancement .Button--TransRight:hover {
  transform: translateX(10px);
}

/* Sliders */
.splide__track {
  margin-bottom: 24px;
}

.kb-splide .splide__pagination__page {
  border: 1px solid #000;
}

body.kadence-enhancement .splide__pagination__page:not(.is-active) {
  background-color: transparent;
}
/* -------------------------------------------------------------------------- */
/* STILI GENERALI DELLE ANIMAZIONI (NON SPECIFICI PER BREAKPOINT) */
/* Questi stili si applicano sempre, a meno che non vengano sovrascritti */
/* -------------------------------------------------------------------------- */

/* Animazione Galleria */
.Animation--Gallery .GalleryItem__Wrapper {
  width: max-content;
  white-space: nowrap;
  display: flex;
  gap: 1vw;
  padding: 0 1vw 0 0;
}

/* Item singolo nella galleria (può avere dimensioni fisse o percentuali) */
.GalleryItem {
  /* Puoi definire qui le dimensioni base se non dipendono dal breakpoint */
  /* width: 400px; */
  /* height: 400px; */
  cursor: pointer;
}

/* Stili comuni per i contenitori dell'altezza (potrebbero avere dimensioni base qui) */
.AnimationText .AnimationText__Height > .wp-block-group__inner-container,
.AnimationScrollText
  .AnimationScrollText__Height
  > .wp-block-group__inner-container {
  display: flex;
  align-items: center;
  padding: 0 25px;
}

/* Stili per il paragrafo di AnimationText */
.AnimationText .AnimationText__Paragraph {
  font: 500 normal 3.9vw/1.2 "Inter", sans-serif;
  letter-spacing: -0.03em;
}

.AnimationText .AnimationText__Paragraph .word {
  display: inline-block;
  transform: translate(
    calc(60vw - 25px),
    0
  ); /* Questo è animato, il CSS è lo stato iniziale */
}

/* Stili per il paragrafo di AnimationScrollText */
.AnimationScrollText .AnimationScrollText__Paragraph {
  width: 70%;
  margin: 0 0 0 2vw;
  font: 500 normal 5vw/0.9 "Inter", sans-serif;
  letter-spacing: -0.06em;
}

.AnimationScrollText .AnimationScrollText__Paragraph span {
  display: inline-block;
}

.AnimationScrollText .AnimationScrollText__Paragraph .letter {
  clip-path: polygon(
    -5% 5%,
    -5% 114%,
    105% 114%,
    105% 5%
  ); /* Questo è lo stato iniziale per l'animazione */
}

/* -------------------------------------------------------------------------- */
/* MEDIA QUERY: DEFAULT DESKTOP (per schermi >= 1080px) */
/* Questi stili si applicano a schermi grandi, comprese le animazioni Hero */
/* -------------------------------------------------------------------------- */

@media screen and (min-width: 1080px) {
  /* Hero Animation */
  #smooth-content {
    overflow: visible;
    width: 100%;
    height: 4000px; /* Altezza di scroll totale, gestita da JS/GSAP */
  }

  .smooth-wrapper {
    height: 170vh; /* Altezza del wrapper di scroll, sarà sovrascritta */
  }

  .box {
    position: absolute;
    z-index: 100;
    will-change: transform;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .box-a {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Posizionamento iniziale centrato */
    max-width: 100vw;
    width: 60%; /* Larghezza base per box-a */
    max-height: 90vh;
    z-index: 0;
  }

  .box-a img{
    max-width: 1000px;
    max-height: 60vh;
  }

  .box-b {
    will-change: transform;
    height: auto;
    top: 100px;
    width: 40%; /* Larghezza base per box-b */
    z-index: 100;
  }

  .box-b img {
    width: 70%; /* Larghezza immagine interna a box-b */
  }

  /* Altezze dei contenitori di testo, se specifiche per desktop */
  .AnimationText .AnimationText__Height {
    height: 500vh;
  }

  .AnimationScrollText .AnimationScrollText__Height {
    height: 55vh;
  }

  .AnimationText .AnimationText__Height > .wp-block-group__inner-container {
    height: 100vh;
  }

  .AnimationScrollText
    .AnimationScrollText__Height
    > .wp-block-group__inner-container {
    height: 20vh;
  }
}

@media screen and (min-width: 1200px){
  .box-a img{
    max-height: 75vh;
    aspect-ratio: auto !important;
  }
}


/* -------------------------------------------------------------------------- */
/* MEDIA QUERY: Schermi fino a 1600px (desktop più piccoli) */
/* Applica a schermi con larghezza <= 1600px (e >= 1080px a causa dell'ordine) */
/* -------------------------------------------------------------------------- */
@media screen and (max-width: 1600px) {
  .smooth-wrapper {
    height: 190vh; /* Sovrascrive l'altezza del wrapper per schermi fino a 1600px */
  }
}

/* -------------------------------------------------------------------------- */
/* MEDIA QUERY: Tablet orizzontali e schermi intermedi (da 1080px a 1200px) */
/* Applica a schermi con larghezza <= 1200px E >= 1080px */
/* -------------------------------------------------------------------------- */
@media screen and (max-width: 1200px) and (min-width: 1080px) {
  .box-b {
    width: 50%; /* box-b diventa più largo in questo intervallo */
  }
  .smooth-wrapper {
    height: 150vh; /* Altezza del wrapper specifica per questo intervallo */
  }
  /* Puoi aggiungere altre modifiche qui se necessario per questo specifico range */
}

/* -------------------------------------------------------------------------- */
/* MEDIA QUERY: Mobile e Tablet verticali (schermi <= 1079px) */
/* Questi stili sono cruciali per il layout quando le animazioni sono disabilitate */
/* o per dispositivi mobili dove l'animazione Hero non si attiva (come da JS) */
/* -------------------------------------------------------------------------- */
@media screen and (max-width: 1079px) {
  /* Reimposta gli elementi per un layout normale quando l'animazione Hero è disabilitata */
  .box-b,
  .box-a {
    width: 100%; /* Occupano tutta la larghezza disponibile */
    position: static !important; /* Molto importante: rimuove il posizionamento assoluto */
    transform: none !important; /* Rimuove qualsiasi trasformazione (scale, translate) */
    top: auto !important;
    left: auto !important;
    height: auto !important; /* Assicura che l'altezza sia fluida */
    margin: 0 !important; /* Rimuove margini extra se presenti */
  }

  .box {
    position: relative !important; /* Cambia il contenitore da absolute a relative */
    display: block !important; /* Rimuove flexbox se non necessario per il layout statico */
    height: auto !important;
    width: 100% !important;
    padding: 20px; /* Aggiungi un po' di padding se necessario */
  }

  /* Rimuovi altezze eccessive per lo scroll che non sono più gestite da JS/GSAP */
  #smooth-content,
  .smooth-wrapper,
  .AnimationText .AnimationText__Height,
  .AnimationScrollText .AnimationScrollText__Height {
    height: auto !important; /* Rimuove altezze fisse o eccessive */
    overflow: visible !important; /* Assicura la visibilità */
  }

  .box-b img {
    width: 100%; /* L'immagine occupa tutta la larghezza del suo contenitore */
  }

  /* Per gli elementi di testo animati, assicurati che siano visibili e ben posizionati */
  .AnimationText .AnimationText__Paragraph .word,
  .AnimationScrollText .AnimationScrollText__Paragraph .letter span {
    transform: none !important;
    opacity: 1 !important;
    display: inline-block !important; /* Mantieni inline-block per il flusso del testo */
    /* Assicurati che non ci siano clip-path che li nascondono */
    clip-path: none !important;
  }
}

/* -------------------------------------------------------------------------- */
/* ACCESSIBILITY: PREFERS REDUCED MOTION */
/* Queste regole disabilitano le animazioni per gli utenti con preferenza ridotta */
/* Vanno poste alla fine del CSS per garantire la sovrascrittura */
/* -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  /* Ferma TUTTE le animazioni e transizioni CSS */
  * {
    animation: none !important;
    transition: none !important;
    /* Rimuovi scroll-behavior smooth se presente */
    scroll-behavior: auto !important;
  }

  /* Forza gli elementi animati GSAP ai loro stati finali/visibili */
  /* Questo serve come ulteriore garanzia oltre a quanto fatto in JS con gsap.set() */

  /* Per gli elementi dell'Hero Animation */
  .box-a {
    transform: none !important; /* Annulla qualsiasi scala o posizionamento GSAP iniziale */
    opacity: 1 !important; /* Assicura che sia visibile */
    /* Posizioni statiche, se non gestite dal media query specifico (< 1080px) */
    position: static !important; /* Ritorna al flusso normale */
    top: auto !important;
    left: auto !important;
    width: 50% !important;
    max-width: 100% !important;
  }

  .box-b {
    opacity: 1 !important; /* Assicura che box-b sia immediatamente visibile */
    transform: none !important; /* Rimuove qualsiasi trasformazione iniziale GSAP */
    position: static !important; /* Ritorna al flusso normale */
    top: auto !important;
    left: auto !important;
    width: 50% !important;
    max-width: 100% !important;
  }

  .box {
    position: static !important;
    display: block !important;
    flex-direction: column !important; /* Se il display era flex */
    justify-content: flex-start !important;
    align-items: flex-start !important;
    height: auto !important;
    width: 50% !important;
    padding: 0 !important; /* Rimuovi padding extra se aggiunto per allineamento animato */
  }

  /* Per le animazioni di testo */
  .AnimationText .AnimationText__Paragraph .word,
  .AnimationScrollText .AnimationScrollText__Paragraph .letter span {
    transform: none !important; /* Rimuove le trasformazioni iniziali/animate */
    opacity: 1 !important; /* Rende il testo immediatamente visibile */
    clip-path: none !important; /* Rimuove clip-path che potrebbe nascondere */
  }

  /* Rimuovi altezze eccessive o overflow impostate per le animazioni a scorrimento */
  #smooth-content,
  .smooth-wrapper,
  .AnimationText .AnimationText__Height,
  .AnimationScrollText .AnimationScrollText__Height {
    height: auto !important;
    overflow: visible !important;
  }

  /* Animazione Galleria */
  .Animation--Gallery .GalleryItem__Wrapper {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    gap: 1vw;
    padding: 0 1vw 0 0;
    width: 100%;
    max-width: max-content;
  }

  .Animation--Gallery .GalleryItem__Wrapper > .kt-inside-inner-col{
    flex-wrap: nowrap;
  }

  .Animation--Gallery .GalleryItem {
    flex: 0 0 auto;
  }
}