/* calculator-fullwidth.css */
/* Full-width single-column calculator layout with multi-section grid display */
/* Use this for calculators that need more horizontal space (e.g., multi-sport zone displays) */

/* --- Full-Width Single Column Layout --- */
.calculator-page-wrapper.full-width {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.calculator-page-wrapper.full-width > .bac-page-header { order: 1; }
.calculator-page-wrapper.full-width > .right-column { order: 2; }
.calculator-page-wrapper.full-width > .left-column { order: 3; }

/* Desktop: Override grid, use full container width */
@media (min-width: 1024px) {
    .calculator-page-wrapper.full-width {
        display: flex;
        flex-direction: column;
        gap: 2rem;
    }

    .calculator-page-wrapper.full-width > .bac-page-header,
    .calculator-page-wrapper.full-width > .left-column,
    .calculator-page-wrapper.full-width > .right-column {
        grid-column: unset;
        grid-row: unset;
        position: relative;
        top: unset;
        width: 100%;
        max-width: 100%;
    }

    /* Full-width calculator card */
    .calculator-page-wrapper.full-width .bb-card {
        max-width: 100%;
    }
}

/* --- Multi-Section Grid (e.g., 3 sport zones side by side) --- */
.bb-section-grid {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* Tablet and up: 3 columns */
@media (min-width: 768px) {
    .bb-section-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 1.5rem;
    }

    .bb-section-grid .bb-zones-container {
        margin-top: 0;
    }
}

/* 2 columns variant */
.bb-section-grid.cols-2 {
    grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 768px) {
    .bb-section-grid.cols-2 {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* 4 columns variant (large screens only) */
@media (min-width: 1200px) {
    .bb-section-grid.cols-4 {
        grid-template-columns: repeat(4, 1fr);
    }
}