/* =====================================================
   MODERN DASHBOARD GALLERY – FRONTEND CSS
   Elementor-safe | Flexbox grid | Responsive
===================================================== */

/* ===============================
   HARD RESET (BLOCK ELEMENTOR)
================================ */
.mdg-gallery,
.mdg-gallery * {
  box-sizing: border-box;
}

.mdg-gallery img {
  max-width: none !important;
}

/* ===============================
   GALLERY ROOT
================================ */
.mdg-gallery {
  width: 100%;
  position: relative;
  --gap: 16px;
  --radius: 18px;
  --shadow: 0 14px 35px rgba(0, 0, 0, 0.12);
  --shadow-hover: 0 20px 45px rgba(0, 0, 0, 0.18);
}

/* ===============================
   FLEX GRID
================================ */
.mdg-gallery .mdg-grid {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: var(--gap);
  width: 100%;
}

/* ===============================
   GALLERY ITEM (RESET BUTTON)
================================ */
.mdg-gallery .mdg-item {
  all: unset; /* 🔥 kills Elementor button styles */
  display: block;
  cursor: pointer;
  width: calc(33.333% - 10.67px); /* 3 columns */
}

/* ===============================
   IMAGE STYLING
================================ */
.mdg-gallery .mdg-item img {
  width: 100% !important;
  height: 400px !important;
  display: block;
  object-fit: contain !important;
  border-radius: var(--radius);
  background: #f8fafc;
  box-shadow: var(--shadow);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.mdg-gallery .mdg-item:hover img {
  transform: translateY(-4px) scale(1.01);
  box-shadow: var(--shadow-hover);
}

/* ===============================
   TABLET – 2 IMAGES
================================ */
@media (max-width: 1024px) {
  .mdg-gallery .mdg-item {
    width: calc(50% - 8px);
  }
}

/* ===============================
   MOBILE – 1 IMAGE
================================ */
@media (max-width: 600px) {
  .mdg-gallery .mdg-item {
    width: 100%;
  }
}

/* =====================================================
   LIGHTBOX STYLES
===================================================== */
.mdg-lightbox {
  position: fixed;
  inset: 0;
  display: none;
  z-index: 999999;
}

.mdg-lightbox.is-open {
  display: block;
}

/* Backdrop */
.mdg-lightbox__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(2, 6, 23, 0.75);
  backdrop-filter: blur(6px);
}

/* Modal Panel */
.mdg-lightbox__panel {
  position: absolute;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  width: min(1000px, calc(100vw - 32px));
  height: min(80vh, 720px);
  border-radius: 18px;
  background: rgba(15, 23, 42, 0.4);
  border: 1px solid rgba(148, 163, 184, 0.3);
  box-shadow: 0 40px 100px rgba(0, 0, 0, 0.4);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Image */
.mdg-lightbox__img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: rgba(2, 6, 23, 0.25);
}

/* Close Button */
.mdg-lightbox__close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.3);
  background: rgba(2, 6, 23, 0.6);
  color: #fff;
  font-size: 26px;
  cursor: pointer;
}

/* Nav Buttons */
.mdg-lightbox__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.3);
  background: rgba(2, 6, 23, 0.65);
  color: #fff;
  font-size: 22px;
  cursor: pointer;
}

.mdg-lightbox__prev {
  left: 14px;
}

.mdg-lightbox__next {
  right: 14px;
}

/* Hide arrows on mobile */
@media (max-width: 600px) {
  .mdg-lightbox__nav {
    display: none;
  }
}

/* =====================================================
   DISABLE ELEMENTOR BUTTON HOVER FOR GALLERY
===================================================== */
.mdg-gallery .mdg-item,
.mdg-gallery .mdg-item:hover,
.mdg-gallery .mdg-item:focus,
.mdg-gallery .mdg-item:active {
  background: #fff !important;
  color: inherit !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Prevent Elementor :before / :after effects */
.mdg-gallery .mdg-item::before,
.mdg-gallery .mdg-item::after {
  display: none !important;
}

/* Disable Elementor hover on image */
.mdg-gallery .mdg-item:hover img,
.mdg-gallery .mdg-item:focus img {
  background: none !important;
}

/* Remove focus ring added by themes/Elementor */
.mdg-gallery .mdg-item:focus-visible {
  outline: none !important;
}