/**
 * Grid Block Styles
 *
 * @package Bucksalc
 */

/* =============================================
   BASE GRID
   ============================================= */

.bucksalc-grid {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    --grid-gap: 30px; /* Default gap as CSS variable */
    gap: var(--grid-gap);
}

/* =============================================
   GAP / GUTTER - Sets CSS variable for column calc
   ============================================= */

/* Desktop gaps */
.bucksalc-grid--gap-desktop-0 { --grid-gap: 0px; gap: 0; }
.bucksalc-grid--gap-desktop-5 { --grid-gap: 5px; gap: 5px; }
.bucksalc-grid--gap-desktop-10 { --grid-gap: 10px; gap: 10px; }
.bucksalc-grid--gap-desktop-15 { --grid-gap: 15px; gap: 15px; }
.bucksalc-grid--gap-desktop-20 { --grid-gap: 20px; gap: 20px; }
.bucksalc-grid--gap-desktop-25 { --grid-gap: 25px; gap: 25px; }
.bucksalc-grid--gap-desktop-30 { --grid-gap: 30px; gap: 30px; }
.bucksalc-grid--gap-desktop-40 { --grid-gap: 40px; gap: 40px; }
.bucksalc-grid--gap-desktop-50 { --grid-gap: 50px; gap: 50px; }
.bucksalc-grid--gap-desktop-60 { --grid-gap: 60px; gap: 60px; }

/* Tablet gaps */
@media (max-width: 1024px) {
    .bucksalc-grid--gap-tablet-0 { --grid-gap: 0px; gap: 0; }
    .bucksalc-grid--gap-tablet-5 { --grid-gap: 5px; gap: 5px; }
    .bucksalc-grid--gap-tablet-10 { --grid-gap: 10px; gap: 10px; }
    .bucksalc-grid--gap-tablet-15 { --grid-gap: 15px; gap: 15px; }
    .bucksalc-grid--gap-tablet-20 { --grid-gap: 20px; gap: 20px; }
    .bucksalc-grid--gap-tablet-25 { --grid-gap: 25px; gap: 25px; }
    .bucksalc-grid--gap-tablet-30 { --grid-gap: 30px; gap: 30px; }
    .bucksalc-grid--gap-tablet-40 { --grid-gap: 40px; gap: 40px; }
    .bucksalc-grid--gap-tablet-50 { --grid-gap: 50px; gap: 50px; }
    .bucksalc-grid--gap-tablet-60 { --grid-gap: 60px; gap: 60px; }
}

/* Mobile gaps */
@media (max-width: 768px) {
    .bucksalc-grid--gap-mobile-0 { --grid-gap: 0px; gap: 0; }
    .bucksalc-grid--gap-mobile-5 { --grid-gap: 5px; gap: 5px; }
    .bucksalc-grid--gap-mobile-10 { --grid-gap: 10px; gap: 10px; }
    .bucksalc-grid--gap-mobile-15 { --grid-gap: 15px; gap: 15px; }
    .bucksalc-grid--gap-mobile-20 { --grid-gap: 20px; gap: 20px; }
    .bucksalc-grid--gap-mobile-25 { --grid-gap: 25px; gap: 25px; }
    .bucksalc-grid--gap-mobile-30 { --grid-gap: 30px; gap: 30px; }
    .bucksalc-grid--gap-mobile-40 { --grid-gap: 40px; gap: 40px; }
    .bucksalc-grid--gap-mobile-50 { --grid-gap: 50px; gap: 50px; }
    .bucksalc-grid--gap-mobile-60 { --grid-gap: 60px; gap: 60px; }
}

/* =============================================
   ALIGN ITEMS
   ============================================= */

.bucksalc-grid--align-stretch { align-items: stretch; }
.bucksalc-grid--align-start { align-items: flex-start; }
.bucksalc-grid--align-center { align-items: center; }
.bucksalc-grid--align-end { align-items: flex-end; }
.bucksalc-grid--align-baseline { align-items: baseline; }

/* =============================================
   JUSTIFY CONTENT
   ============================================= */

.bucksalc-grid--justify-start { justify-content: flex-start; }
.bucksalc-grid--justify-center { justify-content: center; }
.bucksalc-grid--justify-end { justify-content: flex-end; }
.bucksalc-grid--justify-between { justify-content: space-between; }
.bucksalc-grid--justify-around { justify-content: space-around; }
.bucksalc-grid--justify-evenly { justify-content: space-evenly; }

/* =============================================
   REVERSE ORDER
   ============================================= */

.bucksalc-grid--reverse-desktop {
    flex-direction: row-reverse;
}

@media (max-width: 1024px) {
    .bucksalc-grid--reverse-tablet {
        flex-direction: row-reverse;
    }

    /* Reset if desktop was reversed but tablet shouldn't be */
    .bucksalc-grid--reverse-desktop:not(.bucksalc-grid--reverse-tablet) {
        flex-direction: row;
    }
}

@media (max-width: 768px) {
    /* Default stack on mobile */
    .bucksalc-grid {
        flex-direction: column;
    }

    .bucksalc-grid--reverse-mobile {
        flex-direction: column-reverse;
    }
}

/* =============================================
   EQUAL HEIGHT
   ============================================= */

.bucksalc-grid--equal-height {
    align-items: stretch;
}

.bucksalc-grid--equal-height > .bucksalc-column {
    display: flex;
    flex-direction: column;
}

.bucksalc-grid--equal-height > .bucksalc-column > .bucksalc-column__inner {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* =============================================
   EDITOR STYLES
   ============================================= */

/*
 * The block editor wraps InnerBlocks in multiple layers:
 * .bucksalc-grid
 *   > .acf-innerblocks-container (ACF wrapper)
 *     > .wp-block (Gutenberg wrapper for each column)
 *       > .bucksalc-column (our actual column)
 *
 * We need to target these wrappers to maintain the grid layout
 */

/* Editor: Apply flex to the innerblocks container */
.bucksalc-grid > .acf-innerblocks-container {
    display: flex !important;
    flex-wrap: wrap !important;
    width: 100% !important;
    gap: var(--grid-gap, 30px) !important;
}

/* Editor: Reset wp-block wrapper styles that break layout */
.bucksalc-grid > .acf-innerblocks-container > .wp-block {
    margin: 0 !important;
    padding: 0 !important;
    max-width: none !important;
    border: none !important;
    border-left: none !important;
}

/* Editor: Apply column widths to the wp-block wrapper using :has() */
.bucksalc-grid > .acf-innerblocks-container > .wp-block:has(.bucksalc-column--desktop-1) { flex: 0 0 calc(8.333% - var(--grid-gap, 30px) * 11/12) !important; max-width: calc(8.333% - var(--grid-gap, 30px) * 11/12) !important; }
.bucksalc-grid > .acf-innerblocks-container > .wp-block:has(.bucksalc-column--desktop-2) { flex: 0 0 calc(16.666% - var(--grid-gap, 30px) * 10/12) !important; max-width: calc(16.666% - var(--grid-gap, 30px) * 10/12) !important; }
.bucksalc-grid > .acf-innerblocks-container > .wp-block:has(.bucksalc-column--desktop-3) { flex: 0 0 calc(25% - var(--grid-gap, 30px) * 9/12) !important; max-width: calc(25% - var(--grid-gap, 30px) * 9/12) !important; }
.bucksalc-grid > .acf-innerblocks-container > .wp-block:has(.bucksalc-column--desktop-4) { flex: 0 0 calc(33.333% - var(--grid-gap, 30px) * 8/12) !important; max-width: calc(33.333% - var(--grid-gap, 30px) * 8/12) !important; }
.bucksalc-grid > .acf-innerblocks-container > .wp-block:has(.bucksalc-column--desktop-5) { flex: 0 0 calc(41.666% - var(--grid-gap, 30px) * 7/12) !important; max-width: calc(41.666% - var(--grid-gap, 30px) * 7/12) !important; }
.bucksalc-grid > .acf-innerblocks-container > .wp-block:has(.bucksalc-column--desktop-6) { flex: 0 0 calc(50% - var(--grid-gap, 30px) * 6/12) !important; max-width: calc(50% - var(--grid-gap, 30px) * 6/12) !important; }
.bucksalc-grid > .acf-innerblocks-container > .wp-block:has(.bucksalc-column--desktop-7) { flex: 0 0 calc(58.333% - var(--grid-gap, 30px) * 5/12) !important; max-width: calc(58.333% - var(--grid-gap, 30px) * 5/12) !important; }
.bucksalc-grid > .acf-innerblocks-container > .wp-block:has(.bucksalc-column--desktop-8) { flex: 0 0 calc(66.666% - var(--grid-gap, 30px) * 4/12) !important; max-width: calc(66.666% - var(--grid-gap, 30px) * 4/12) !important; }
.bucksalc-grid > .acf-innerblocks-container > .wp-block:has(.bucksalc-column--desktop-9) { flex: 0 0 calc(75% - var(--grid-gap, 30px) * 3/12) !important; max-width: calc(75% - var(--grid-gap, 30px) * 3/12) !important; }
.bucksalc-grid > .acf-innerblocks-container > .wp-block:has(.bucksalc-column--desktop-10) { flex: 0 0 calc(83.333% - var(--grid-gap, 30px) * 2/12) !important; max-width: calc(83.333% - var(--grid-gap, 30px) * 2/12) !important; }
.bucksalc-grid > .acf-innerblocks-container > .wp-block:has(.bucksalc-column--desktop-11) { flex: 0 0 calc(91.666% - var(--grid-gap, 30px) * 1/12) !important; max-width: calc(91.666% - var(--grid-gap, 30px) * 1/12) !important; }
.bucksalc-grid > .acf-innerblocks-container > .wp-block:has(.bucksalc-column--desktop-12) { flex: 0 0 100% !important; max-width: 100% !important; }

/* Editor: Block appender at the end */
.bucksalc-grid > .acf-innerblocks-container > .block-list-appender {
    flex: 0 0 100% !important;
    margin-top: 10px !important;
}

/* =============================================
   EDITOR: COLUMN INNER BLOCKS
   ============================================= */

/* Reset nested wp-block styling within columns */
.bucksalc-column .wp-block {
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    border-left: none !important;
    padding-left: 0 !important;
}

/*
 * CRITICAL: In the editor, the .wp-block wrapper already has the column width
 * applied via :has() selectors above. The inner .bucksalc-column element must
 * NOT re-apply the flex/max-width - it should just be 100% of its parent.
 */
.bucksalc-grid .acf-block-component .bucksalc-column,
.bucksalc-grid .acf-block-preview .bucksalc-column,
.bucksalc-grid .wp-block .bucksalc-column {
    flex: none !important;
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Column inner content area - EDITOR ONLY styling */
.editor-styles-wrapper .bucksalc-column .bucksalc-column__inner,
.block-editor-block-list__layout .bucksalc-column .bucksalc-column__inner {
    min-height: 60px;
    padding: 15px;
    background: rgba(0, 0, 0, 0.02);
    border: 1px dashed rgba(0, 0, 0, 0.1);
    border-radius: 4px;
}

/* Column inner blocks container */
.bucksalc-column .acf-innerblocks-container {
    width: 100% !important;
}

/* Reset any margin/padding on blocks inside columns */
.bucksalc-column .acf-innerblocks-container > .wp-block {
    margin: 0 0 0.5rem 0 !important;
    padding: 0 !important;
    max-width: 100% !important;
    border: none !important;
}

.bucksalc-column .acf-innerblocks-container > .wp-block:last-child {
    margin-bottom: 0 !important;
}

/* =============================================
   EDITOR: VISUAL HELPERS
   ============================================= */

/* Highlight columns on hover for easier selection */
.bucksalc-grid > .acf-innerblocks-container > .wp-block:hover {
    outline: 2px dashed rgba(0, 123, 255, 0.3);
    outline-offset: -2px;
}

/* Selected column highlight */
.bucksalc-grid > .acf-innerblocks-container > .wp-block.is-selected,
.bucksalc-grid > .acf-innerblocks-container > .wp-block.has-child-selected {
    outline: 2px solid var(--color-primary, #007bff);
    outline-offset: -2px;
}