/**
 * Column Block Styles
 *
 * 12-column grid system with responsive breakpoints
 * Uses calc() to account for gap between columns
 *
 * @package Bucksalc
 */

/* Base Column */
.bucksalc-column {
    box-sizing: border-box;
}

.bucksalc-column__inner {
    height: 100%;
}

/* =============================================
   DESKTOP WIDTHS (1024px+)
   Uses CSS variable --grid-gap set by parent grid
   ============================================= */

.bucksalc-grid .bucksalc-column--desktop-1 { flex: 0 0 calc(8.333% - var(--grid-gap, 30px) * 11/12); max-width: calc(8.333% - var(--grid-gap, 30px) * 11/12); }
.bucksalc-grid .bucksalc-column--desktop-2 { flex: 0 0 calc(16.666% - var(--grid-gap, 30px) * 10/12); max-width: calc(16.666% - var(--grid-gap, 30px) * 10/12); }
.bucksalc-grid .bucksalc-column--desktop-3 { flex: 0 0 calc(25% - var(--grid-gap, 30px) * 9/12); max-width: calc(25% - var(--grid-gap, 30px) * 9/12); }
.bucksalc-grid .bucksalc-column--desktop-4 { flex: 0 0 calc(33.333% - var(--grid-gap, 30px) * 8/12); max-width: calc(33.333% - var(--grid-gap, 30px) * 8/12); }
.bucksalc-grid .bucksalc-column--desktop-5 { flex: 0 0 calc(41.666% - var(--grid-gap, 30px) * 7/12); max-width: calc(41.666% - var(--grid-gap, 30px) * 7/12); }
.bucksalc-grid .bucksalc-column--desktop-6 { flex: 0 0 calc(50% - var(--grid-gap, 30px) * 6/12); max-width: calc(50% - var(--grid-gap, 30px) * 6/12); }
.bucksalc-grid .bucksalc-column--desktop-7 { flex: 0 0 calc(58.333% - var(--grid-gap, 30px) * 5/12); max-width: calc(58.333% - var(--grid-gap, 30px) * 5/12); }
.bucksalc-grid .bucksalc-column--desktop-8 { flex: 0 0 calc(66.666% - var(--grid-gap, 30px) * 4/12); max-width: calc(66.666% - var(--grid-gap, 30px) * 4/12); }
.bucksalc-grid .bucksalc-column--desktop-9 { flex: 0 0 calc(75% - var(--grid-gap, 30px) * 3/12); max-width: calc(75% - var(--grid-gap, 30px) * 3/12); }
.bucksalc-grid .bucksalc-column--desktop-10 { flex: 0 0 calc(83.333% - var(--grid-gap, 30px) * 2/12); max-width: calc(83.333% - var(--grid-gap, 30px) * 2/12); }
.bucksalc-grid .bucksalc-column--desktop-11 { flex: 0 0 calc(91.666% - var(--grid-gap, 30px) * 1/12); max-width: calc(91.666% - var(--grid-gap, 30px) * 1/12); }
.bucksalc-grid .bucksalc-column--desktop-12 { flex: 0 0 100%; max-width: 100%; }

/* =============================================
   TABLET WIDTHS (768px - 1023px)
   ============================================= */

@media (max-width: 1024px) {
    .bucksalc-grid .bucksalc-column--tablet-1 { flex: 0 0 calc(8.333% - var(--grid-gap, 20px) * 11/12); max-width: calc(8.333% - var(--grid-gap, 20px) * 11/12); }
    .bucksalc-grid .bucksalc-column--tablet-2 { flex: 0 0 calc(16.666% - var(--grid-gap, 20px) * 10/12); max-width: calc(16.666% - var(--grid-gap, 20px) * 10/12); }
    .bucksalc-grid .bucksalc-column--tablet-3 { flex: 0 0 calc(25% - var(--grid-gap, 20px) * 9/12); max-width: calc(25% - var(--grid-gap, 20px) * 9/12); }
    .bucksalc-grid .bucksalc-column--tablet-4 { flex: 0 0 calc(33.333% - var(--grid-gap, 20px) * 8/12); max-width: calc(33.333% - var(--grid-gap, 20px) * 8/12); }
    .bucksalc-grid .bucksalc-column--tablet-5 { flex: 0 0 calc(41.666% - var(--grid-gap, 20px) * 7/12); max-width: calc(41.666% - var(--grid-gap, 20px) * 7/12); }
    .bucksalc-grid .bucksalc-column--tablet-6 { flex: 0 0 calc(50% - var(--grid-gap, 20px) * 6/12); max-width: calc(50% - var(--grid-gap, 20px) * 6/12); }
    .bucksalc-grid .bucksalc-column--tablet-7 { flex: 0 0 calc(58.333% - var(--grid-gap, 20px) * 5/12); max-width: calc(58.333% - var(--grid-gap, 20px) * 5/12); }
    .bucksalc-grid .bucksalc-column--tablet-8 { flex: 0 0 calc(66.666% - var(--grid-gap, 20px) * 4/12); max-width: calc(66.666% - var(--grid-gap, 20px) * 4/12); }
    .bucksalc-grid .bucksalc-column--tablet-9 { flex: 0 0 calc(75% - var(--grid-gap, 20px) * 3/12); max-width: calc(75% - var(--grid-gap, 20px) * 3/12); }
    .bucksalc-grid .bucksalc-column--tablet-10 { flex: 0 0 calc(83.333% - var(--grid-gap, 20px) * 2/12); max-width: calc(83.333% - var(--grid-gap, 20px) * 2/12); }
    .bucksalc-grid .bucksalc-column--tablet-11 { flex: 0 0 calc(91.666% - var(--grid-gap, 20px) * 1/12); max-width: calc(91.666% - var(--grid-gap, 20px) * 1/12); }
    .bucksalc-grid .bucksalc-column--tablet-12 { flex: 0 0 100%; max-width: 100%; }
}

/* =============================================
   MOBILE WIDTHS (< 768px)
   ============================================= */

@media (max-width: 768px) {
    .bucksalc-grid .bucksalc-column--mobile-1 { flex: 0 0 calc(8.333% - var(--grid-gap, 15px) * 11/12); max-width: calc(8.333% - var(--grid-gap, 15px) * 11/12); }
    .bucksalc-grid .bucksalc-column--mobile-2 { flex: 0 0 calc(16.666% - var(--grid-gap, 15px) * 10/12); max-width: calc(16.666% - var(--grid-gap, 15px) * 10/12); }
    .bucksalc-grid .bucksalc-column--mobile-3 { flex: 0 0 calc(25% - var(--grid-gap, 15px) * 9/12); max-width: calc(25% - var(--grid-gap, 15px) * 9/12); }
    .bucksalc-grid .bucksalc-column--mobile-4 { flex: 0 0 calc(33.333% - var(--grid-gap, 15px) * 8/12); max-width: calc(33.333% - var(--grid-gap, 15px) * 8/12); }
    .bucksalc-grid .bucksalc-column--mobile-5 { flex: 0 0 calc(41.666% - var(--grid-gap, 15px) * 7/12); max-width: calc(41.666% - var(--grid-gap, 15px) * 7/12); }
    .bucksalc-grid .bucksalc-column--mobile-6 { flex: 0 0 calc(50% - var(--grid-gap, 15px) * 6/12); max-width: calc(50% - var(--grid-gap, 15px) * 6/12); }
    .bucksalc-grid .bucksalc-column--mobile-7 { flex: 0 0 calc(58.333% - var(--grid-gap, 15px) * 5/12); max-width: calc(58.333% - var(--grid-gap, 15px) * 5/12); }
    .bucksalc-grid .bucksalc-column--mobile-8 { flex: 0 0 calc(66.666% - var(--grid-gap, 15px) * 4/12); max-width: calc(66.666% - var(--grid-gap, 15px) * 4/12); }
    .bucksalc-grid .bucksalc-column--mobile-9 { flex: 0 0 calc(75% - var(--grid-gap, 15px) * 3/12); max-width: calc(75% - var(--grid-gap, 15px) * 3/12); }
    .bucksalc-grid .bucksalc-column--mobile-10 { flex: 0 0 calc(83.333% - var(--grid-gap, 15px) * 2/12); max-width: calc(83.333% - var(--grid-gap, 15px) * 2/12); }
    .bucksalc-grid .bucksalc-column--mobile-11 { flex: 0 0 calc(91.666% - var(--grid-gap, 15px) * 1/12); max-width: calc(91.666% - var(--grid-gap, 15px) * 1/12); }
    .bucksalc-grid .bucksalc-column--mobile-12 { flex: 0 0 100%; max-width: 100%; }
}

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

/* Editor: Make column fill its wrapper */
.wp-block-acf-bucksalc-column .bucksalc-column,
.wp-block[data-type="acf/bucksalc-column"] .bucksalc-column {
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Editor: Column inner area styling */
.wp-block-acf-bucksalc-column .bucksalc-column__inner,
.wp-block[data-type="acf/bucksalc-column"] .bucksalc-column__inner {
    min-height: 60px;
    width: 100%;
}

/* Ensure nested blocks don't break layout */
.bucksalc-column__inner > *:first-child {
    margin-top: 0;
}

.bucksalc-column__inner > *:last-child {
    margin-bottom: 0;
}

/* Editor: Remove extra margins from nested ACF blocks */
.bucksalc-column__inner .acf-innerblocks-container {
    width: 100% !important;
}

.bucksalc-column__inner .acf-innerblocks-container > .wp-block {
    margin-top: 0 !important;
    margin-bottom: 0.5rem !important;
    max-width: 100% !important;
}

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

/* Editor: Block appender in column */
.bucksalc-column__inner .block-list-appender {
    margin: 0.5rem 0 0 0 !important;
}