.elementor-19 .elementor-element.elementor-element-ffa44c9{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-19 .elementor-element.elementor-element-ffa44c9:not(.elementor-motion-effects-element-type-background), .elementor-19 .elementor-element.elementor-element-ffa44c9 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://babolin.info/wp-content/uploads/2025/06/Progetto-senza-titolo-1.png");background-position:center center;background-repeat:no-repeat;}.elementor-19 .elementor-element.elementor-element-b08b15e{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-19 .elementor-element.elementor-element-e9c6215{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}@media(min-width:1025px){.elementor-19 .elementor-element.elementor-element-ffa44c9:not(.elementor-motion-effects-element-type-background), .elementor-19 .elementor-element.elementor-element-ffa44c9 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-attachment:fixed;}}/* Start custom CSS for container, class: .elementor-element-ffa44c9 *//* =========================================================
   HERO · GALLERIA
   ========================================================= */
.hero-gallery{
  position:relative;
  min-height:50vh;                      /* un hero più compatto */
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  color:#fff;
  overflow:hidden;
}

/* overlay blu brand */
.hero-gallery__overlay{
  position:absolute;
  inset:0;
  background:var(--color-primary);      /* blu #0A4EA8 */
  opacity:.55;
  mix-blend-mode:multiply;
}

.hero-gallery__content{
  position:relative;
  z-index:2;
  max-width:760px;
  padding:0 1rem;
}

/* Titolo */
.hero-gallery__title{
  font-family:"Montserrat",sans-serif;
  font-size:clamp(2rem,5vw + 1rem,3rem);
  font-weight:800;
  text-transform:uppercase;
  margin:0 0 .7rem;
}

/* Sottotitolo */
.hero-gallery__subtitle{
  font-size:clamp(1rem,1vw + .6rem,1.25rem);
  font-weight:500;
  margin:0;
}

/* Mobile */
@media(max-width:767px){
  .hero-gallery{min-height:45vh;}
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b08b15e *//* =========================================================
   SEZIONE 2 · GALLERIA MASONRY
   ========================================================= */
.gallery-section{
  padding:3rem 1rem 3.5rem;
  background:var(--color-bg);               /* bianco */
  text-align:center;
}

.gallery__title{
  font-family:"Montserrat",sans-serif;
  color:var(--color-primary);               /* blu brand */
  font-weight:700;
  font-size:clamp(1.7rem,2vw + 1rem,2.2rem);
  margin-bottom:2rem;
}

/* masonry via CSS columns */
.gallery-grid{
  columns:1 auto;          /* mobile: 1 colonna */
  gap:10px;
  max-width:1200px;
  margin-inline:auto;
}

.gallery-grid a{
  display:block;
  break-inside:avoid;      /* evita rottura colonne */
  border-radius:8px;
  overflow:hidden;
  position:relative;
  transition:transform .25s;           /* lift */
}
.gallery-grid a:hover{transform:translateY(-4px)}

/* immagine */
.gallery-grid img{
  width:100%;
  height:auto;
  display:block;
  filter:grayscale(20%);
  transition:filter .25s;
}
.gallery-grid a:hover img{filter:none}

/* overlay lente ingrandimento */
.gallery-grid a::after{
  content:"🔍";
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:2.2rem;
  color:#fff;
  background:rgba(10,78,168,.0);      /* trasparente iniziale */
  opacity:0;
  transition:background .25s,opacity .25s;
}
.gallery-grid a:hover::after{
  background:rgba(10,78,168,.55);     /* overlay blu 55 % */
  opacity:1;
}

/* --- responsive colonne --- */
@media(min-width:600px){  .gallery-grid{columns:2} }
@media(min-width:900px){  .gallery-grid{columns:3} }
@media(min-width:1200px){ .gallery-grid{columns:4} }/* End custom CSS */