/* *** CSS SLIDER — START *** */

/* Overlay per layering (le frecce vivono sopra lo slider) */
.section-hero-left .hero-arrows-overlay{
  position:absolute; inset:0; z-index:100;
  pointer-events:none; /* i click passano solo ai bottoni */
}

/* SOLO FRECCE: nessun background, centrate verticalmente via top:50% */
.section-hero-left .hero-img .hero-arrow{
  position:absolute; top:50%; transform:translateY(-50%);
  pointer-events:auto;
  display:inline-flex; align-items:center; justify-content:center;
  background:transparent; border:none; box-shadow:none;
  padding:12px; margin:0; cursor:pointer; outline:none;
  color:#fff; /* frecce bianche */
}
.section-hero-left .hero-img .hero-arrow.prev{ left:12px; }
.section-hero-left .hero-img .hero-arrow.next{ right:12px; }
.section-hero-left .hero-img .hero-arrow svg{ width:22px; height:22px; display:block; }
.section-hero-left .hero-img .hero-arrow svg path{ stroke:currentColor; fill:none; stroke-width:3; }
/* Focus tastiera (facoltativo) */
.section-hero-left .hero-img .hero-arrow:focus-visible{ outline:2px solid #1e88e5; outline-offset:2px; }

/* Altezza di riferimento della sezione */
.section-hero-left{
  position:relative;
  min-height:clamp(480px, 60vh, 720px);
}

/* La colonna immagine riempie la sezione (desktop) */
@media (min-width:768px){
  .section-hero-left .hero-img{
    position:absolute;
    top:0; right:0; bottom:0; left:50%; /* adegua 'left' se la colonna testo non è 6 */
    overflow:hidden;
  }
}

/* La catena di Slick eredita l’altezza del contenitore */
.section-hero-left .hero-img .slick-slider,
.section-hero-left .hero-img .slick-list,
.section-hero-left .hero-img .slick-track,
.section-hero-left .hero-img .slick-slide,
.section-hero-left .hero-img .slick-slide > div{
  height:100% !important;
}
.section-hero-left .hero-img,
.section-hero-left .hero-img .slick-list{ overflow:hidden !important; }

/* Track flessibile per evitare collassi verticali */
.section-hero-left .hero-img .slick-track{ display:flex !important; align-items:stretch !important; }
.section-hero-left .hero-img .slick-slide{ float:none !important; display:block !important; }

/* L’immagine copre davvero lo slider (override contro .img-fluid) */
.section-hero-left .hero-img img{
  width:100% !important; height:100% !important; display:block;
  object-fit:cover !important; object-position:center; max-width:none !important;
}

/* Mobile: altezza fluida e immagini contenute */
@media (max-width:767.98px){
  .section-hero-left .hero-img{ position:static; height:auto; }
  .section-hero-left .hero-img .slick-slider,
  .section-hero-left .hero-img .slick-list,
  .section-hero-left .hero-img .slick-track,
  .section-hero-left .hero-img .slick-slide,
  .section-hero-left .hero-img .slick-slide > div{ height:auto !important; }
  .section-hero-left .hero-img img{ height:auto !important; object-fit:contain !important; }
  /* Per nascondere le frecce su mobile, decommenta: */
  /* .section-hero-left .hero-img .hero-arrow{ display:none !important; } */
}

/* *** CSS SLIDER — END *** */

