/* 
 * Columns Block Styling
 * 
 * This CSS file provides styling for the two-column layout block.
 * It handles both desktop and mobile layouts with responsive behavior.
 */

/* Main container */
.columns-block {
    width: 100%;
    margin-bottom: 2rem;
    box-sizing: border-box;
}

/* Apply container styles from data attributes */
.columns-block {
    background-color: transparent;
    border: 0;
    border-radius: 0;
    padding: 1rem;
}

.columns-block[data-background-color]:not([data-background-color="transparent"]) {
    background-color: var(--background-color);
}

.columns-block[data-border]:not([data-border="0 solid transparent"]) {
    border: var(--border);
}

.columns-block[data-border-radius]:not([data-border-radius="0"]) {
    border-radius: var(--border-radius);
}

.columns-block[data-padding] {
    padding: var(--padding);
}

/* Row layout */
.columns-row {
    display: flex;
    width: 100%;
    box-sizing: border-box;
}

/* Column spacing */
.columns-row {
    gap: 1rem; /* Default spacing */
}

.columns-block[data-column-spacing] .columns-row {
    gap: var(--column-spacing);
}

/* Column styles */
.columns-col {
    flex: 1;
    min-width: 0; /* Prevent overflow */
    box-sizing: border-box;
}

/* Apply column width from data attributes */
.columns-col[data-width] {
    flex-basis: calc(var(--width) * 1%);
    flex-grow: 0;
    max-width: calc(var(--width) * 1%); /* Ensure width is respected */
}

/* Apply column background color from data attributes */
.columns-col[data-background-color]:not([data-background-color="transparent"]) {
    background-color: var(--background-color);
    padding: 1rem;
}

/* Column block item */
.column-block-item {
    width: 100%;
    margin-bottom: 1rem;
}

.column-block-item:last-child {
    margin-bottom: 0;
}

/* Mobile behavior: Stack */
@media (max-width: 768px) {
    .columns-stack {
        flex-direction: column;
    }
    
    .columns-stack .columns-col {
        flex-basis: 100% !important;
        width: 100%;
        margin-bottom: 1rem;
    }
    
    .columns-stack .columns-col:last-child {
        margin-bottom: 0;
    }
}

/* Mobile behavior: Scroll */
@media (max-width: 768px) {
    .columns-scroll {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        padding-bottom: 1rem; /* Space for scrollbar */
    }
    
    .columns-scroll .columns-col {
        flex-shrink: 0;
        min-width: 80%;
        scroll-snap-align: start;
    }
}

/* CSS variables for data attributes */
.columns-block,
.columns-col {
    --background-color: attr(data-background-color);
    --border: attr(data-border);
    --border-radius: attr(data-border-radius);
    --padding: attr(data-padding);
    --column-spacing: attr(data-column-spacing);
    --width: attr(data-width);
}