/* ===== BASE ===== */
.mcbg-gallery{--mcbg-gap:8px;--mcbg-cols:4}
.mcbg-item{margin:0;position:relative;overflow:hidden;background:#e8e8e8;cursor:pointer}
.mcbg-item img{display:block;width:100%;height:100%;object-fit:cover;transition:filter .2s ease}
.mcbg-item:hover img{filter:brightness(.88)}
.mcbg-rounded .mcbg-item{border-radius:12px}
.mcbg-shadow .mcbg-item{box-shadow:0 4px 12px rgba(0,0,0,.12)}
.mcbg-item figcaption{position:absolute;left:0;right:0;bottom:0;padding:10px 12px;background:linear-gradient(transparent,rgba(0,0,0,.72));color:#fff;display:flex;flex-direction:column;gap:2px;font-size:14px}

/* ===== RATIOS ===== */
.mcbg-ratio-1x1{aspect-ratio:1/1}
.mcbg-ratio-4x3{aspect-ratio:4/3}
.mcbg-ratio-16x9{aspect-ratio:16/9}
.mcbg-ratio-3x2{aspect-ratio:3/2}

/* ===== GRID LAYOUT ===== */
.mcbg-grid-wrap{display:grid;grid-template-columns:repeat(var(--mcbg-cols),1fr);gap:var(--mcbg-gap)}
.mcbg-masonry .mcbg-grid-wrap{columns:var(--mcbg-cols);display:block}
.mcbg-masonry .mcbg-item{break-inside:avoid;margin-bottom:var(--mcbg-gap);aspect-ratio:auto}

/* ===== FILMSTRIP ===== */
.mcbg-filmstrip-wrap{display:flex;gap:var(--mcbg-gap);overflow-x:auto;padding-bottom:8px;scroll-snap-type:x mandatory}
.mcbg-filmstrip-wrap .mcbg-item{min-width:280px;scroll-snap-align:start}

/* ===== CAROUSEL ===== */
.mcbg-carousel .mcbg-item{height:520px}

/* ===== PAGINATION ===== */
.mcbg-pagination{margin-top:20px}
.mcbg-pagination .page-link{border-radius:8px!important;margin:0 2px;border:none;color:#333;background:#f5f5f5}
.mcbg-pagination .page-item.active .page-link{background:#333;color:#fff}

/* ============================================
   BOOKING LAYOUT - Stile Booking.com
   ============================================ */
.mcbg-booking{--mcbg-booking-height:340px;--mcbg-booking-bottom-height:170px}

.mcbg-booking .row{--bs-gutter-x:var(--mcbg-gap);--bs-gutter-y:0}

/* Prima riga: immagine grande + 2 a destra */
.mcbg-booking .mcbg-booking-top{
  height:var(--mcbg-booking-height);
}
.mcbg-booking .mcbg-booking-top .mcbg-item{
  height:100%;
}

/* Colonna destra: 2 immagini impilate */
.mcbg-booking .mcbg-booking-right{
  display:flex;
  flex-direction:column;
  gap:var(--mcbg-gap);
  height:100%;
}
.mcbg-booking .mcbg-booking-right .mcbg-item{
  flex:1;
  min-height:0;
}

/* Seconda riga: 4 immagini uguali */
.mcbg-booking .mcbg-booking-bottom{
  height:var(--mcbg-booking-bottom-height);
  margin-top:var(--mcbg-gap);
}
.mcbg-booking .mcbg-booking-bottom .mcbg-item{
  height:100%;
}

/* Overlay stile Booking: sfondo scuro + testo bianco centrato */
.mcbg-booking .mcbg-overlay{
  position:absolute;inset:0;
  background:rgba(0,0,0,.55);
  color:#fff;
  font-weight:600;
  font-size:18px;
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  gap:4px;
  border-radius:inherit;
  transition:background .2s ease;
  cursor:pointer;
  z-index:2;
}
.mcbg-booking .mcbg-overlay:hover{
  background:rgba(0,0,0,.65);
}
.mcbg-booking .mcbg-overlay .mcbg-overlay-count{
  font-size:28px;
  font-weight:700;
  line-height:1;
}
.mcbg-booking .mcbg-overlay .mcbg-overlay-text{
  font-size:14px;
  font-weight:500;
  opacity:.9;
}
/* Icona foto */
.mcbg-booking .mcbg-overlay .mcbg-overlay-icon{
  width:32px;height:32px;
  margin-bottom:4px;
  opacity:.85;
}

/* ===== RESPONSIVE BOOKING ===== */
@media(max-width:991.98px){
  .mcbg-booking{--mcbg-booking-height:280px;--mcbg-booking-bottom-height:140px}
}
@media(max-width:767.98px){
  .mcbg-booking .mcbg-booking-top{height:auto}
  .mcbg-booking .mcbg-booking-right{
    flex-direction:row;
    margin-top:var(--mcbg-gap);
    height:auto;
  }
  .mcbg-booking .mcbg-booking-right .mcbg-item{
    aspect-ratio:16/10;
    flex:1;
  }
  .mcbg-booking .mcbg-booking-bottom{
    height:auto;
    margin-top:var(--mcbg-gap);
  }
  .mcbg-booking .mcbg-booking-bottom .mcbg-item{
    aspect-ratio:16/10;
    height:auto;
  }
  .mcbg-booking .mcbg-overlay{font-size:15px}
  .mcbg-booking .mcbg-overlay .mcbg-overlay-count{font-size:22px}
  .mcbg-carousel .mcbg-item{height:320px}
}
@media(max-width:480px){
  .mcbg-booking .mcbg-booking-right{flex-direction:column}
  .mcbg-grid-wrap{grid-template-columns:1fr}
}

/* ===== LIGHTBOX - Posizione fissa per evitare problemi di contesto ===== */
#mcbgLightbox{
  position:fixed!important;
  top:0;left:0;right:0;bottom:0;
  z-index:999999!important;
}
#mcbgLightbox .modal-dialog{
  margin:0;
  max-width:100%;
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
}
#mcbgLightbox .modal-content{
  position:relative;
  min-height:200px;
  background:rgba(0,0,0,.95);
  border:none;
  border-radius:0;
  width:auto;
  max-width:95vw;
  max-height:95vh;
}
#mcbgLightbox .mcbg-lightbox-img{
  max-height:85vh;
  width:auto;
  max-width:90vw;
  object-fit:contain;
  display:block;
  border-radius:4px;
}
#mcbgLightbox .mcbg-lightbox-loader{
  display:none;
  position:absolute;
  left:50%;top:50%;
  width:44px;height:44px;
  margin:-22px 0 0 -22px;
  border:4px solid rgba(255,255,255,.2);
  border-top-color:#fff;
  border-radius:50%;
  animation:mcbg-spin .7s linear infinite;
  z-index:5;
}
#mcbgLightbox.mcbg-is-loading .mcbg-lightbox-loader{display:block}
#mcbgLightbox.mcbg-is-loading .mcbg-lightbox-img{opacity:0}

#mcbgLightbox .mcbg-lightbox-nav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  z-index:10;
  width:52px;height:52px;
  border:none;
  border-radius:50%;
  background:rgba(255,255,255,.15);
  color:#fff;
  font-size:36px;
  line-height:1;
  display:flex;align-items:center;justify-content:center;
  transition:background .2s;
  backdrop-filter:blur(4px);
}
#mcbgLightbox .mcbg-lightbox-nav:hover{background:rgba(255,255,255,.3)}
#mcbgLightbox .mcbg-lightbox-prev{left:20px}
#mcbgLightbox .mcbg-lightbox-next{right:20px}

#mcbgLightbox .btn-close{
  position:absolute;
  top:16px;right:16px;
  z-index:10;
  opacity:.7;
  filter:invert(1);
}
#mcbgLightbox .btn-close:hover{opacity:1}

#mcbgLightbox .mcbg-lightbox-counter{
  position:absolute;
  left:50%;bottom:16px;
  transform:translateX(-50%);
  z-index:10;
  color:#fff;
  background:rgba(0,0,0,.5);
  border-radius:20px;
  padding:6px 16px;
  font-size:13px;
  font-weight:500;
  backdrop-filter:blur(4px);
}

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

@media(max-width:768px){
  #mcbgLightbox .mcbg-lightbox-nav{width:40px;height:40px;font-size:28px}
  #mcbgLightbox .mcbg-lightbox-prev{left:10px}
  #mcbgLightbox .mcbg-lightbox-next{right:10px}
  #mcbgLightbox .mcbg-lightbox-img{max-height:75vh;max-width:95vw}
}