/**
 * Block Theme Support Feature - CSS
 * 
 * Styles to ensure WordPress block theme features work properly with Oxygen Builder
 * Specifically handles grid layouts and spacing
 * 
 * @package Advance_Block_Features
 * @since 1.0.0
 */

/* --------------------------------
   Grid Layout Styles
-------------------------------- */

/* Base grid styles */
.abf-grid {
    display: grid !important;
    grid-gap: 1.5em;
}

/* Column count classes */
.abf-columns-1 {
    grid-template-columns: repeat(1, 1fr) !important;
}

.abf-columns-2 {
    grid-template-columns: repeat(2, 1fr) !important;
}

.abf-columns-3 {
    grid-template-columns: repeat(3, 1fr) !important;
}

.abf-columns-4 {
    grid-template-columns: repeat(4, 1fr) !important;
}

.abf-columns-5 {
    grid-template-columns: repeat(5, 1fr) !important;
}

.abf-columns-6 {
    grid-template-columns: repeat(6, 1fr) !important;
}

/* Layout types */
.abf-layout-grid {
    display: grid !important;
}

.abf-layout-flex {
    display: flex !important;
    flex-wrap: wrap;
}

.abf-layout-flex > * {
    flex: 1 0 0%;
}

/* Gallery specific styles */
.abf-gallery {
    display: grid !important;
}

.abf-gallery .blocks-gallery-grid,
.abf-gallery .wp-block-gallery {
    display: grid !important;
    grid-template-columns: inherit !important;
    grid-gap: inherit !important;
}

/* Query block styles */
.abf-query {
    display: block !important;
}

/* Columns block styles */
.abf-columns {
    display: flex !important;
    flex-wrap: wrap;
}

.abf-columns > * {
    flex: 1;
}

/* --------------------------------
   Responsive Styles
-------------------------------- */

/* Tablet styles */
@media (max-width: 781px) {
    .abf-columns-3,
    .abf-columns-4,
    .abf-columns-5,
    .abf-columns-6 {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    
    .abf-columns {
        flex-direction: column;
    }
    
    .abf-columns > * {
        width: 100% !important;
        margin-left: 0 !important;
    }
}

/* Mobile styles */
@media (max-width: 599px) {
    .abf-columns-2,
    .abf-columns-3,
    .abf-columns-4,
    .abf-columns-5,
    .abf-columns-6 {
        grid-template-columns: repeat(1, 1fr) !important;
    }
}

/* --------------------------------
   Debug Styles
-------------------------------- */

/* Add visual indicators when debug mode is active */
.abf-debug-mode [data-abf-block] {
    position: relative;
    outline: 2px dashed #007cba;
}

.abf-debug-mode [data-abf-block]::before {
    content: attr(data-abf-block);
    position: absolute;
    top: 0;
    right: 0;
    background: #007cba;
    color: white;
    font-size: 10px;
    padding: 2px 5px;
    z-index: 999;
}

/* --------------------------------
   Utility Classes
-------------------------------- */

/* Force display properties */
.abf-display-block {
    display: block !important;
}

.abf-display-flex {
    display: flex !important;
}

.abf-display-grid {
    display: grid !important;
}

/* Force flex properties */
.abf-flex-wrap {
    flex-wrap: wrap !important;
}

.abf-flex-nowrap {
    flex-wrap: nowrap !important;
}

/* Force grid properties */
.abf-grid-auto-flow-row {
    grid-auto-flow: row !important;
}

.abf-grid-auto-flow-column {
    grid-auto-flow: column !important;
}