/* ===============================
   GALLERY GRID
   =============================== */

.dgc-grid {
  display: grid;
  gap: var(--dgc-gap, 12px);
}

@media (min-width: 1024px) {
  .dgc-grid {
    grid-template-columns: repeat(var(--dgc-cols-desktop), 1fr);
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .dgc-grid {
    grid-template-columns: repeat(var(--dgc-cols-tablet), 1fr);
  }
}

@media (max-width: 767px) {
  .dgc-grid {
    grid-template-columns: repeat(var(--dgc-cols-mobile), 1fr);
  }
}

.dgc-item img {
  width: 100%;
  display: block;
}

/* Square thumbnails (gallery only) */
.dgc-aspect-square img {
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

/* =========================================
   GLightbox – FIT MODE (FULL IMAGE VISIBLE)
   ========================================= */

/* Lightbox overlay */
.glightbox-container {
    background: rgba(0, 0, 0, 0.95) !important;
    overflow: hidden !important;
}

/* Center content properly */
.glightbox-container .gslide-inner-content {
    padding: 0 !important;
    max-width: 100% !important;
    background: transparent !important;
}

/* Image wrapper */
.glightbox-container .gslide-image {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: auto !important;
}

/* ✅ FIT MODE – SHOW FULL IMAGE */
.glightbox-container .gslide-image img {
    max-width: 100% !important;
    max-height: 100% !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;

    margin: auto !important;
    cursor: zoom-in;
}

/* Zoomed state – allow pan */
.glightbox-container .gslide-image.zoomed img {
    cursor: grab;
}

.glightbox-container .gslide-image.zoomed img:active {
    cursor: grabbing;
}

/* Mobile tuning */
@media (max-width: 768px) {
    .glightbox-container .gslide-image img {
        max-height: 90vh !important;
    }
}
/* ===============================
   LOAD MORE BUTTON – STYLING
   =============================== */

.dgc-load-more {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    margin: 30px auto 0;
    padding: 12px 28px;

    background-color: #ed1c24;
    color: #ffffff;

    border: none;
    border-radius: 10px;

    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.3px;

    cursor: pointer;
    transition: all 0.25s ease;

    text-align: center;
}

/* Center align wrapper */
.dgc-wrapper .dgc-load-more {
    display: flex;
}

/* Hover effect */
.dgc-load-more:hover {
    background-color: #c8161e; /* slightly darker red */
    transform: translateY(-1px);
}

/* Active click */
.dgc-load-more:active {
    transform: translateY(0);
}

/* Disabled state */
.dgc-load-more:disabled {
    background-color: #f5a1a6;
    cursor: not-allowed;
    opacity: 0.8;
}

/* Mobile tweak */
@media (max-width: 768px) {
    .dgc-load-more {
        width: 100%;
        max-width: 280px;
    }
}

