/* Base */
.lgm { box-sizing: border-box; }

/* Active area */
.lgm.active-area { position: relative; width: 100%; }

/* Reserve space (prevents height=0) */
.lgm-active-inner {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  background: #eef8fb;
  aspect-ratio: 16 / 9;               /* modern browsers keep height */
  max-width: 100%;
}
/* Fallback so older mobile browsers also keep height */
.lgm-active-inner::before {
  content: "";
  display: block;
  padding-top: 56.25%;                 /* 16:9 */
}
/* Actual media sits above the reserved box */
.lgm-active-inner > * { position: absolute; inset: 0; }

/* Media */
.lgm-active-inner img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.lgm-active-inner iframe {
  width: 100%; height: 100%;
  border: 0; pointer-events: auto;
  touch-action: pan-x pan-y pinch-zoom;
}

/* Map touch behaviour on mobile: allow one-finger pan */
.lgm.active-area.lgm-map-mode .lgm-active-inner {
  /* do NOT use touch-action:none; it blocks iframe gestures on some mobiles */
  touch-action: pan-x pan-y;
}

/* Fade */
.lgm-fade { animation: lgmFadeIn .22s ease; }
.lgm-fade-out { opacity: .2; transition: opacity .12s ease; }
@keyframes lgmFadeIn { from { opacity: .2; } to { opacity: 1; } }

/* Lightbox */
.lgm-lightbox { position: fixed; inset: 0; display: none; z-index: 999999; }
.lgm-lightbox.open { display: block; }
.lgm-lightbox-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.65); }
.lgm-lightbox-content {
  position: absolute; inset: 6% 8%; display: grid; place-items: center;
  border-radius: 10px; overflow: hidden;
}
.lgm-lightbox-content img { max-width: 100%; max-height: 100%; }
.lgm-lightbox-close,
.lgm-lightbox-next, .lgm-lightbox-prev{
  position:absolute; border:0; width:44px; height:44px;
  border-radius:50% !important; font-size:28px; line-height:1; cursor:pointer;
  background:rgba(255,255,255,.9);
  padding: 0 !important;
}
.lgm-lightbox-close{ top:10px; right:16px; width:36px; height:36px; font-size:24px; }
.lgm-lightbox-prev{ top:50%; left:14px; transform:translateY(-50%); }
.lgm-lightbox-next{ top:50%; right:14px; transform:translateY(-50%); }

/* Thumbs carousel */
.lgm.thumbs { position: relative; }
.lgm-nav {
  position:absolute; top:50%; transform:translateY(-50%);
  width:34px; height:34px; border-radius:50%;
  border:0; background:#fff; box-shadow:0 2px 8px rgba(0,0,0,.15);
  cursor:pointer; display:none;
}
.lgm-nav-prev{ left:-8px; } .lgm-nav-next{ right:-8px; }

.lgm-thumbs-viewport {
  overflow-x: auto; overflow-y: hidden;
  scrollbar-width: none; -ms-overflow-style: none;
  padding: 2px 6px;
}
.lgm-thumbs-viewport::-webkit-scrollbar{ display:none; }

.lgm-thumbs-list {
  display: flex; gap: 14px; align-items: stretch;
  white-space: nowrap;
}

.lgm.thumbs .lgm-thumb-item {
  flex: 0 0 auto;
  display: inline-flex;
  border: 2px solid transparent;
  border-radius: 12px; padding: 0; overflow: hidden;
  background: #eaf7fb; cursor: pointer; line-height: 0;
  transition: border-color .15s ease, transform .12s ease;
}
.lgm.thumbs .lgm-thumb-item:hover { transform: translateY(-1px); }
.lgm.thumbs .lgm-thumb-item img { width: 120px; height: 90px; object-fit: cover; display:block; }

/* Active border */
.lgm.thumbs .lgm-thumb-item.lgm-active { border-color: #38bdf8; }

/* Map thumbnail */
.lgm-thumb-map-pin {
  width: 120px; height: 90px;
  display: grid; place-items: center;
  font: 600 14px/1.2 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: #f0fbff; color: #1e293b;
}
.lgm.thumbs .is-map { background: #f0fbff; }

/* --- thumbnails drag polish --- */
.lgm-thumbs-viewport{
  overflow-x: auto; overflow-y: hidden;
  scrollbar-width: none; -ms-overflow-style: none;
  padding: 2px 6px;
  user-select: none;           /* text select off while dragging */
  cursor: grab;                /* better affordance on desktop */
}
.lgm-dragging .lgm-thumbs-viewport{ cursor: grabbing; }
.lgm.thumbs .lgm-thumb-item img{ -webkit-user-drag: none; user-drag: none; } /* stop ghost image */



@media (max-width: 768px) {
    .lgm-thumb-map-pin, .lgm.thumbs .lgm-thumb-item img {
        width: 75px;
        height: 60px;
    }

    .lgm-lightbox-close {
        right: 0;
    }

    .lgm-lightbox-content {
        inset: 6% 3%;
    }

    .lgm-lightbox-prev {
        left: 0;
    }

    .lgm-lightbox-next {
        right: 0;
    }

    .lgm-lightbox-close, .lgm-lightbox-next, .lgm-lightbox-prev {
        width: 35px;
        height: 35px;
    }
    
}