/**
 * WP Smart Gallery — Responsive Grid Styles
 *
 * Uses CSS custom properties (--wpsg-cols-desktop, --wpsg-cols-tablet,
 * --wpsg-cols-mobile, --wpsg-gap) injected via wp_add_inline_style()
 * from the plugin's PHP settings.
 *
 * Breakpoints follow Elementor defaults:
 *   Desktop: >= 1025px
 *   Tablet:  768px – 1024px
 *   Mobile:  <= 767px
 */

/* ===== Base Grid =====
 * Using high-specificity selectors and !important to override both
 * Gutenberg's built-in flex layout AND custom theme CSS that may
 * force flexbox (e.g. .gallery-post-content .gallery { display: flex }).
 */
.wpsmartgallery-grid,
div.wpsmartgallery-grid,
.gallery.wpsmartgallery-grid {
    display: grid !important;
    grid-template-columns: repeat(var(--wpsg-cols-desktop, 4), 1fr) !important;
    gap: var(--wpsg-gap, 10px) !important;
    width: 100% !important;
    flex-wrap: unset !important;
}

/* ---------------------------------------------------------------
 * Override Gutenberg's flex-based sizing on figure items.
 * WP core uses selectors like:
 *   .wp-block-gallery.has-nested-images figure.wp-block-image
 * --------------------------------------------------------------- */
.wp-block-gallery.wpsmartgallery-grid figure.wp-block-image,
.wp-block-gallery.has-nested-images.wpsmartgallery-grid figure.wp-block-image,
.wpsmartgallery-grid .gallery-item,
.wpsmartgallery-grid figure.gallery-item {
    width: 100% !important;
    max-width: 100% !important;
    flex: unset !important;
    margin: 0 !important;
}

/* ---------------------------------------------------------------
 * Images: fill their grid cell with consistent aspect ratio.
 * Override any inline width/height attributes, theme CSS, and
 * Gutenberg defaults. The aspect-ratio keeps them square
 * (matching the 1:1 crop). object-fit: cover fills uniformly.
 * --------------------------------------------------------------- */
.wpsmartgallery-grid figure.wp-block-image img,
.wpsmartgallery-grid .gallery-item img,
.wpsmartgallery-grid figure img {
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    display: block;
    border-radius: 4px;
}

/* Links fill the figure */
.wpsmartgallery-grid figure.wp-block-image a,
.wpsmartgallery-grid .gallery-item a,
.wpsmartgallery-grid figure a {
    display: block;
    width: 100%;
}

/* Classic gallery: icon wrapper */
.wpsmartgallery-grid .gallery-icon {
    width: 100%;
}

/* Remove default figure margins */
.wpsmartgallery-grid figure {
    margin: 0 !important;
}

/* ===== Tablet: 768px – 1024px ===== */
@media (max-width: 1024px) {
    .wpsmartgallery-grid,
    div.wpsmartgallery-grid,
    .gallery.wpsmartgallery-grid {
        grid-template-columns: repeat(var(--wpsg-cols-tablet, 3), 1fr) !important;
    }
}

/* ===== Mobile: <= 767px ===== */
@media (max-width: 767px) {
    .wpsmartgallery-grid,
    div.wpsmartgallery-grid,
    .gallery.wpsmartgallery-grid {
        grid-template-columns: repeat(var(--wpsg-cols-mobile, 2), 1fr) !important;
    }
}