/**
 * Grid Conflict Fix CSS
 * 
 * This file contains styles to prevent conflicts between Media Grid and Post Grid
 * when both are present on the same page.
 */

/* Ensure proper isolation between different grid types */
.gmfgb-mg-grid {
    /* Reset any inherited styles that might conflict */
    box-sizing: border-box;
    * {
        box-sizing: border-box;
    }
}

.gmfgb-pg-grid {
    /* Reset any inherited styles that might conflict */
    box-sizing: border-box;
    * {
        box-sizing: border-box;
    }
}

/* Prevent CSS inheritance conflicts */
.gmfgb-mg-grid .gmfgb-pg-grid,
.gmfgb-pg-grid .gmfgb-mg-grid {
    /* Reset styles when grids are nested (shouldn't happen but just in case) */
    all: unset;
    display: block;
}

/* Ensure Isotope containers don't interfere with each other */
.gmfgb-mg-grid.isotope-initialized {
    /* Override any flex properties that might conflict with Isotope */
    display: block !important;
    position: relative !important;
}

.gmfgb-pg-grid.isotope-initialized {
    /* Override any flex properties that might conflict with Isotope */
    display: block !important;
    position: relative !important;
}

/* Ensure Isotope items are properly positioned */
.gmfgb-mg-grid.isotope-initialized .gmfgb-mg-media {
    position: absolute !important;
    /* Remove any flex properties */
    flex: none !important;
    flex-basis: auto !important;
    flex-grow: 0 !important;
    flex-shrink: 0 !important;
}

.gmfgb-pg-grid.isotope-initialized .wp-block-post {
    position: absolute !important;
    /* Remove any flex properties */
    flex: none !important;
    flex-basis: auto !important;
    flex-grow: 0 !important;
    flex-shrink: 0 !important;
}

/* Prevent margin/padding conflicts */
.gmfgb-mg-grid,
.gmfgb-pg-grid {
    margin: 0;
    padding: 0;
}

/* Ensure proper z-index stacking */
.gmfgb-mg-grid {
    z-index: 1;
    position: relative;
}

.gmfgb-pg-grid {
    z-index: 1;
    position: relative;
}

/* Clear any floats that might cause layout issues */
.gmfgb-mg-grid::after,
.gmfgb-pg-grid::after {
    content: "";
    display: table;
    clear: both;
}

/* Ensure responsive breakpoints don't conflict */
@media (min-width: 1024px) {
    .gmfgb-mg-grid[data-grid-desktop] .gmfgb-mg-media,
    .gmfgb-pg-grid[data-grid-desktop] .wp-block-post {
        /* Ensure proper width calculations don't interfere */
        box-sizing: border-box;
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .gmfgb-mg-grid[data-grid-tablet] .gmfgb-mg-media,
    .gmfgb-pg-grid[data-grid-tablet] .wp-block-post {
        /* Ensure proper width calculations don't interfere */
        box-sizing: border-box;
    }
}

@media (max-width: 767px) {
    .gmfgb-mg-grid[data-grid-mobile] .gmfgb-mg-media,
    .gmfgb-pg-grid[data-grid-mobile] .wp-block-post {
        /* Ensure proper width calculations don't interfere */
        box-sizing: border-box;
    }
}

/* Frontend-specific responsive grid support */
body:not(.wp-admin) .gmfgb-pg-grid[data-grid-desktop][data-grid-tablet][data-grid-mobile] {
    display: flex !important;
    flex-wrap: wrap !important;
    row-gap: 20px !important;
    column-gap: var(--gap, 20px) !important;
}

/* Frontend-specific WordPress Query block flexbox support */
body:not(.wp-admin) .gmfgb-pg-grid .wp-block-query {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: var(--gap, 20px);
    margin: 0 !important;
    padding: 0 !important;
    width: 100%;
}

body:not(.wp-admin) .gmfgb-pg-grid .wp-block-query ul {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: var(--gap, 20px);
    margin: 0 !important;
    padding: 0 !important;
    width: 100%;
    list-style: none !important;
}

body:not(.wp-admin) .gmfgb-pg-grid .wp-block-query .wp-block-post-template {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: var(--gap, 20px);
    margin: 0 !important;
    padding: 0 !important;
    width: 100%;
}

/* Debug styles - can be removed in production */
.gmfgb-mg-grid.debug,
.gmfgb-pg-grid.debug {
    border: 2px solid red;
    background: rgba(255, 0, 0, 0.1);
}

.gmfgb-mg-grid.debug .gmfgb-mg-media,
.gmfgb-pg-grid.debug .wp-block-post {
    border: 1px solid blue;
    background: rgba(0, 0, 255, 0.1);
}