:root{
  --nb4-car-cols:3;
  --nb4-gap:16px;
  --nb4-anim-duration:400ms;

  /* Carousel nav */
  --nb4-nav-size:36px;
  --nb4-nav-radius:999px;
  --nb4-nav-bg:rgba(0,0,0,.65);
  --nb4-nav-color:#fff;

  /* Lightbox */
  --nb4-lb-nav-size:44px;
  --nb4-lb-nav-radius:999px;
  --nb4-lb-nav-bg:rgba(0,0,0,.55);
  --nb4-lb-nav-color:#fff;
  --nb4-lb-overlay:rgba(0,0,0,.9);
  --nb4-lb-close-bg:rgba(0,0,0,.55);
  --nb4-lb-close-color:#fff;

  /* Grid/Masonry cols (valori base; i per-istanza li sovrascrivono) */
  --nb4-cols:3;
  --nb4-cols-t:2; /* non usati qui in media query globali */
  --nb4-cols-m:1; /* lasciati come default */
}

/* =================== CAROSELLO =================== */
.nb4-gal-carousel,
.nb4-el-carousel{
  position:relative; width:100%; overflow:hidden;
  --nb4-item-w: calc((100% - (var(--nb4-gap) * (var(--nb4-car-cols) - 1))) / var(--nb4-car-cols));
}

.nb4-gal-carousel .nb4-track,
.nb4-el-carousel .nb4-track{
  display:grid; grid-auto-flow:column; grid-auto-columns:var(--nb4-item-w);
  gap:var(--nb4-gap); overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch; padding-bottom:4px;
  overscroll-behavior-x:contain;
}

.nb4-gal-carousel .nb4-track > *,
.nb4-el-carousel .nb4-track > *{
  scroll-snap-align:start; border-radius:12px;
}

/* Hide scrollbar */
.nb4-gal-carousel .nb4-track,
.nb4-el-carousel .nb4-track{ scrollbar-width:none; -ms-overflow-style:none; }
.nb4-gal-carousel .nb4-track::-webkit-scrollbar,
.nb4-el-carousel .nb4-track::-webkit-scrollbar{ display:none; width:0; height:0; }

/* Nav frecce carosello */
.nb4-nav{
  position:absolute; top:50%; left:0; right:0; transform:translateY(-50%);
  display:flex; justify-content:space-between; align-items:center; padding:0 6px; z-index:3; pointer-events:none;
}
.nb4-nav button{
  pointer-events:auto; appearance:none; border:none;
  width:var(--nb4-nav-size); height:var(--nb4-nav-size); border-radius:var(--nb4-nav-radius);
  background:var(--e-global-color-secondary,var(--nb4-nav-bg));
  color:var(--e-global-color-primary,var(--nb4-nav-color));
  display:flex; align-items:center; justify-content:center; cursor:pointer; line-height:1;
  box-shadow:0 2px 10px rgba(0,0,0,.15);
}
.nb4-nav button[disabled]{ opacity:.35; cursor:default; }
.nb4-nav button:focus-visible{ outline:2px solid rgba(255,255,255,.6); outline-offset:2px; }
.nb4-nav .prev,.nb4-nav .next{ user-select:none; }

/* =================== LIGHTBOX =================== */
.nb4-lightbox{
  position:fixed; inset:0; display:none; background:var(--nb4-lb-overlay);
  align-items:center; justify-content:center; z-index:999999 !important;
}
.nb4-lightbox.is-open{ display:flex; }
.nb4-lightbox img{ max-width:95vw; max-height:90vh; object-fit:contain; border-radius:8px; }

/* Bottone chiudi */
.nb4-lightbox .nb4-close{
  position:absolute; top:14px; right:14px; width:40px; height:40px; border-radius:999px; border:none;
  background:var(--nb4-lb-close-bg) !important; color:var(--nb4-lb-close-color) !important;
  display:grid; place-items:center; line-height:1; padding:0; text-align:center; font-size:20px; cursor:pointer;
  box-shadow:0 2px 10px rgba(0,0,0,.25); z-index:3 !important;
}
.nb4-lightbox .nb4-close:focus-visible{ outline:2px solid rgba(255,255,255,.85); outline-offset:2px; }

/* Frecce lightbox (sempre visibili) */
.nb4-lightbox .nb4-lb-nav{ position:absolute; inset:0; display:flex; align-items:center; justify-content:space-between; pointer-events:none; padding:0 8px; }
.nb4-lightbox .nb4-lb-nav button{ pointer-events:auto; }
.nb4-lightbox .nb4-lb-nav button,
.nb4-lightbox > .nb4-arrow{
  appearance:none; border:none;
  width:var(--nb4-lb-nav-size); height:var(--nb4-lb-nav-size); border-radius:var(--nb4-lb-nav-radius);
  background:var(--nb4-lb-nav-bg) !important; color:var(--nb4-lb-nav-color) !important;
  display:flex !important; visibility:visible !important; opacity:1 !important;
  align-items:center; justify-content:center; cursor:pointer; line-height:1;
  box-shadow:0 2px 10px rgba(0,0,0,.25);
}
.nb4-lightbox > .nb4-arrow{
  position:absolute !important; top:50% !important; transform:translateY(-50%) !important; margin:0 !important;
  left:auto !important; right:auto !important; inset-inline-start:auto !important; inset-inline-end:auto !important; z-index:2 !important;
}
.nb4-lightbox > .nb4-prev{ left:12px !important; right:auto !important; inset-inline-start:12px !important; inset-inline-end:auto !important; }
.nb4-lightbox > .nb4-next{ right:12px !important; left:auto !important; inset-inline-end:12px !important; inset-inline-start:auto !important; }
.nb4-lightbox .nb4-lb-prev{ margin-left:6px; }
.nb4-lightbox .nb4-lb-next{ margin-right:6px; }
.nb4-lightbox .nb4-lb-nav button:focus-visible,
.nb4-lightbox > .nb4-arrow:focus-visible{ outline:2px solid rgba(255,255,255,.85); outline-offset:2px; }

/* =================== UTILITY =================== */
.nb4-hidden{ display:none !important; }

/* =================== RELATED GRID =================== */
/* Nessun breakpoint fisso: i #uid per-istanza definiscono le colonne */
.nb4-related-grid{
  display:grid; gap:16px;
  grid-template-columns:repeat(var(--nb4-cols,3),minmax(0,1fr));
}

/* =================== PROJECT GRID / MASONRY =================== */
/* Non-masonry: CSS Grid (niente media query globali) */
.nb4p-grid-wrapper[data-masonry="0"] .nb4p-grid{
  display:grid;
  grid-template-columns: repeat(var(--nb4-cols,3), minmax(0,1fr));
  gap: var(--nb4-gap,24px);
}

/* Masonry: CSS columns — colonne controllate da regole per-istanza */
.nb4p-grid-wrapper[data-masonry="1"] .nb4p-grid{
  display:block !important;
  column-count: var(--nb4-cols,3);
  column-gap: var(--nb4-gap,24px);
}
.nb4p-grid-wrapper[data-masonry="1"] .nb4p-grid-sizer{ display:none !important; }
.nb4p-grid-wrapper[data-masonry="1"] .nb4p-card{
  display:block; margin:0 0 var(--nb4-gap,24px) 0; break-inside:avoid;
}

/* Card & overlay */
.nb4p-card{ position:relative; background:#fff; }
.nb4p-card .nb4p-card-media{ position:relative; display:block; overflow:hidden; }
.nb4p-card .nb4p-card-media img{ width:100%; height:auto; display:block; transition: transform .25s ease; }
.nb4p-card .nb4p-card-overlay{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center; padding:1rem;
  background:rgba(0,0,0,.35); color:#fff; opacity:0; transform:translateY(6px); transition: all .25s ease; z-index:1;
}
.nb4p-card:hover .nb4p-card-overlay{ opacity:1; transform:translateY(0); }

/* =================== PROJECT CARD "CAPTION" (immagine + box titolo/descrizione) =================== */
.nb4p-card--caption{
  position:relative;
  display:block;
  text-decoration:none;
  color:inherit;
}
.nb4p-card--caption .nb4p-card-media{
  position:relative;
  display:block;
  overflow:hidden;
  border-radius:18px;
}
.nb4p-card--caption .nb4p-card-media img{
  width:100%;
  height:auto;
  display:block;
  transition: transform .35s ease;
}
.nb4p-card--caption .nb4p-card-caption{
  position:relative;
  display:block;
  margin:-40px 18px 0;
  padding:22px;
  background:#fff;
  border-radius:18px;
  box-shadow:0 14px 34px rgba(0,0,0,.12);
  text-align:center;
  z-index:2;
  transition: transform .25s ease;
}
.nb4p-card--caption .nb4p-card-caption-title{
  display:block;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.08em;
  line-height:1.2;
}
.nb4p-card--caption .nb4p-card-caption-text{
  display:block;
  margin-top:10px;
  font-size:.92em;
  line-height:1.45;
  opacity:.9;
}
.nb4p-card--caption:hover .nb4p-card-media img{ transform:scale(1.03); }
.nb4p-card--caption:hover .nb4p-card-caption{ transform:translateY(-2px); }

/* =================== BREADCRUMBS =================== */
.nb4p-breadcrumbs{ display:flex; flex-wrap:wrap; gap:.5em; align-items:center; font-size:.9em; }
.nb4p-breadcrumbs a{ text-decoration:none; }
.nb4p-breadcrumbs .nb4p-current{ opacity:.85; }

/* =================== GALLERIA (grid/masonry) =================== */
.nb4-gallery[data-nb4-grid="1"]{ display:grid; gap:var(--nb4-gap,16px); }
.nb4-gallery .nb4-gallery-item{ display:block; }
.nb4-gallery .nb4-gallery-item img{ width:100%; height:auto; display:block; }

/* Galleria Masonry (CSS columns) — senza breakpoint fissi globali */
.nb4-gallery[data-nb4-masonry="1"]{
  display:block !important; width:100%;
  column-count: var(--nb4-cols,3);
  column-gap: var(--nb4-gap,16px);
  -webkit-columns: var(--nb4-cols,3);
  -webkit-column-gap: var(--nb4-gap,16px);
  -moz-columns: var(--nb4-cols,3);
  -moz-column-gap: var(--nb4-gap,16px);
}
.nb4-gallery[data-nb4-masonry="1"] .nb4-gallery-item{
  display:block;
  break-inside: avoid-column;
  -webkit-column-break-inside: avoid;
  -moz-column-break-inside: avoid;
  margin: 0 0 var(--nb4-gap,16px) 0;
  width:auto; /* lasciare alla colonna */
  aspect-ratio:auto !important; /* neutralizza ratio della griglia in masonry */
}
.nb4-gallery[data-nb4-masonry="1"] .nb4-gallery-item img{
  width:100%; height:auto !important; display:block;
}

/* =================== Progressive reveal =================== */
.nb4-g-hidden{ display:none !important; }
.nb4-g-reveal{ animation: nb4-fade .35s ease-out both; }
@keyframes nb4-fade{ from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none} }

/* ============================================================
   FALLBACK RESPONSIVO *FORZATO* (tablet/mobile)
   ------------------------------------------------------------
   - Imposta le colonne direttamente sul WRAPPER dei caroselli,
     non sul .nb4-track (così incide su --nb4-item-w).
   - Usa le var per-istanza --nb4-cols / --nb4-cols-t / --nb4-cols-m
     se presenti; altrimenti fallback 2 / 1.
   - Forza anche le griglie/masonry con !important.
   ============================================================ */
@media (max-width:1024px){
  /* Caroselli (WRAPPER) */
  .nb4-el-carousel,
  .nb4-gal-carousel{
    --nb4-car-cols: var(--nb4-cols-t, 2) !important;
  }

  /* Project Grid */
  .nb4p-grid-wrapper[data-masonry="0"] .nb4p-grid{
    grid-template-columns: repeat(var(--nb4-cols-t, var(--nb4-cols,3)), minmax(0,1fr)) !important;
  }
  .nb4p-grid-wrapper[data-masonry="1"] .nb4p-grid{
    column-count: var(--nb4-cols-t, var(--nb4-cols,3)) !important;
  }

  /* Gallery Grid/Masonry */
  .nb4-gallery[data-nb4-grid="1"]{
    grid-template-columns: repeat(var(--nb4-cols-t, var(--nb4-cols,3)), minmax(0,1fr)) !important;
  }
  .nb4-gallery[data-nb4-masonry="1"]{
    column-count: var(--nb4-cols-t, var(--nb4-cols,3)) !important;
    -webkit-columns: var(--nb4-cols-t, var(--nb4-cols,3)) !important;
    -moz-columns: var(--nb4-cols-t, var(--nb4-cols,3)) !important;
  }
}

@media (max-width:767px){
  /* Caroselli (WRAPPER) */
  .nb4-el-carousel,
  .nb4-gal-carousel{
    --nb4-car-cols: var(--nb4-cols-m, var(--nb4-cols-t, 1)) !important;
  }

  /* Project Grid */
  .nb4p-grid-wrapper[data-masonry="0"] .nb4p-grid{
    grid-template-columns: repeat(var(--nb4-cols-m, var(--nb4-cols-t, var(--nb4-cols,3))), minmax(0,1fr)) !important;
  }
  .nb4p-grid-wrapper[data-masonry="1"] .nb4p-grid{
    column-count: var(--nb4-cols-m, var(--nb4-cols-t, var(--nb4-cols,3))) !important;
  }

  /* Gallery Grid/Masonry */
  .nb4-gallery[data-nb4-grid="1"]{
    grid-template-columns: repeat(var(--nb4-cols-m, var(--nb4-cols-t, var(--nb4-cols,3))), minmax(0,1fr)) !important;
  }
  .nb4-gallery[data-nb4-masonry="1"]{
    column-count: var(--nb4-cols-m, var(--nb4-cols-t, var(--nb4-cols,3))) !important;
    -webkit-columns: var(--nb4-cols-m, var(--nb4-cols-t, var(--nb4-cols,3))) !important;
    -moz-columns: var(--nb4-cols-m, var(--nb4-cols-t, var(--nb4-cols,3))) !important;
  }
}