/* Balanced Masonry Gallery – front-end CSS */
.bm-gallery{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(var(--bm-min, 250px), 1fr));
  grid-auto-rows:var(--bm-row, 10px);
  gap:var(--bm-gap, 8px);
  overflow:hidden;
  position:relative;
  opacity:0;
  pointer-events:none;
  transition:opacity .25s ease;
}

.bm-gallery.bm-ready{
  opacity:1;
  pointer-events:auto;
}

/* In editor Elementor, non nascondere */
.bm-gallery.bm-editor{ opacity:1; pointer-events:auto; }
.bm-gallery.bm-editor::after{ display:none; }

/* Fallback: in Elementor editor mostra sempre la gallery anche se JS non parte */
.elementor-editor-active .bm-gallery{ opacity:1; pointer-events:auto; }
.elementor-editor-active .bm-gallery::after{ display:none; }
/* Evita elementi "schiacciati" in editor se JS non parte */
.elementor-editor-active .bm-gallery .bm-item{ min-height:140px; }
/* Forza le immagini a riempire il box in editor contro height:auto di Elementor */
.elementor-editor-active .bm-gallery .bm-img{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  display:block !important;
}

/* Loader semplice (spinner) visibile finché non è ready */
.bm-gallery::after{
  content:"";
  position:absolute;
  top:50%;
  left:50%;
  width:28px;
  height:28px;
  margin:-14px 0 0 -14px;
  border-radius:50%;
  border:3px solid #e5e7eb;
  border-top-color:#155eef;
  animation:bm-spin 1s linear infinite;
}

.bm-gallery.bm-ready::after{ display:none; }

@keyframes bm-spin{
  to{ transform:rotate(360deg); }
}

.bm-gallery .bm-item{
  position:relative;
  overflow:hidden;
  border-radius:var(--bm-radius, 8px); /* configurabile da shortcode */
  margin:0; /* elimina margini di default del tag figure */
  line-height:0; /* evita spazi di baseline interni che possono creare micro-gap */
}

/* Assicura che l'anchor riempia il box, evitando aree non cliccabili o spazi interni */
.bm-gallery .bm-link{
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
}

/* Debug overlay visivo (attivo quando .bm-gallery ha .bm-debug) */
.bm-gallery.bm-debug .bm-item .bm-debug-label{
  position:absolute;
  left:6px;
  bottom:6px;
  z-index:2;
  font: 11px/1.3 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  color:#0b1021;
  background:rgba(255,255,255,.8);
  border:1px solid rgba(0,0,0,.15);
  border-radius:4px;
  padding:3px 6px;
  pointer-events:none;
}

/* L'immagine riempie il box (ritaglio tipo cover) */
.bm-gallery .bm-img{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  object-position:center !important;
  display:block !important;
  transition:transform .25s ease;
}

.bm-gallery .bm-item:hover .bm-img{
  transform:scale(1.02);
}

/* (rimosso) .bm-padding-item: non più usato */

/* Varianti opzionali */
.bm-gallery.fit-contain .bm-img{ object-fit:contain; background:#f5f5f5; }
.bm-gallery.pos-top .bm-img{ object-position: top center; }
.bm-gallery.pos-left .bm-img{ object-position: center left; }

/* Assicura che le frecce del lightbox Elementor siano visibili per la galleria balanced-masonry */
#elementor-lightbox-slideshow-balanced-masonry .elementor-swiper-button-next,
#elementor-lightbox-slideshow-balanced-masonry .elementor-swiper-button-prev{
  display:flex !important;
  opacity:1 !important;
  visibility:visible !important;
  pointer-events:auto !important;
  z-index:9999 !important;
  position:absolute !important;
  /* Dimensioni minime per assicurare visibilità */
  min-width:50px !important;
  min-height:50px !important;
  width:auto !important;
  height:auto !important;
  /* Posizionamento esplicito */
  top:50% !important;
  transform:translateY(-50%) !important;
  /* Colore visibile */
  color:#ffffff !important;
  background-color:rgba(0, 0, 0, 0.5) !important;
  border-radius:50% !important;
  align-items:center !important;
  justify-content:center !important;
  transition:background-color 0.3s ease !important;
}

/* Posizionamento specifico per next e prev */
#elementor-lightbox-slideshow-balanced-masonry .elementor-swiper-button-next{
  right:20px !important;
  left:auto !important;
}

#elementor-lightbox-slideshow-balanced-masonry .elementor-swiper-button-prev{
  left:20px !important;
  right:auto !important;
}

/* Hover effect per migliore visibilità */
#elementor-lightbox-slideshow-balanced-masonry .elementor-swiper-button-next:hover,
#elementor-lightbox-slideshow-balanced-masonry .elementor-swiper-button-prev:hover{
  background-color:rgba(0, 0, 0, 0.8) !important;
}

/* Assicura che le icone SVG dentro le frecce siano visibili */
#elementor-lightbox-slideshow-balanced-masonry .elementor-swiper-button-next svg,
#elementor-lightbox-slideshow-balanced-masonry .elementor-swiper-button-prev svg{
  display:block !important;
  opacity:1 !important;
  visibility:visible !important;
  fill:#ffffff !important;
  width:24px !important;
  height:24px !important;
  min-width:24px !important;
  min-height:24px !important;
}

/* Assicura che le frecce siano visibili anche quando ci sono più immagini */
#elementor-lightbox-slideshow-balanced-masonry .elementor-swiper-button-next:not(.swiper-button-disabled),
#elementor-lightbox-slideshow-balanced-masonry .elementor-swiper-button-prev:not(.swiper-button-disabled){
  opacity:1 !important;
  visibility:visible !important;
  display:flex !important;
}

/* Assicura che il container del lightbox non nasconda le frecce */
#elementor-lightbox-slideshow-balanced-masonry{
  overflow:visible !important;
}

#elementor-lightbox-slideshow-balanced-masonry .swiper{
  overflow:visible !important;
}

@media (max-width: 768px){
  .bm-gallery{
    --bm-min:160px;
    --bm-row:8px;
    --bm-gap:6px;
  }
  /* Forza 2 colonne su mobile se richiesto */
  .bm-gallery.bm-mobile-2{
    grid-template-columns:repeat(2, 1fr) !important;
  }
}