/* Multi-sized Boxes V2 - CSS Grid Layout */

.fce-multi-sized-boxes-v2 .fce-msb-cell {
    padding: 70px 60px;
}

.fce-multi-sized-boxes-v2 .fce-msb-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto auto;
}

/* Top wide cell - spans 2 columns, 1 row */
.fce-multi-sized-boxes-v2 .fce-msb-cell--top-wide {
    grid-column: 1 / 3;
    grid-row: 1 / 2;
}

/* Right tall cell - spans 1 column, 2 rows */
.fce-multi-sized-boxes-v2 .fce-msb-cell--right-tall {
    grid-column: 3 / 4;
    grid-row: 1 / 3;
}

/* Bottom left cell - 1x1 */
.fce-multi-sized-boxes-v2 .fce-msb-cell--bottom-left {
    grid-column: 1 / 2;
    grid-row: 2 / 3;
}

/* Bottom right cell - 1x1 */
.fce-multi-sized-boxes-v2 .fce-msb-cell--bottom-right {
    grid-column: 2 / 3;
    grid-row: 2 / 3;
}

.fce-multi-sized-boxes-v2 .fce-msb-cell-content {
    width: 100%;
}

/* Responsive behavior */

/* Tablet landscape large: right column narrows to 35%, bottom cells stack in left column */
@media (max-width: 1199px) {
    .fce-multi-sized-boxes-v2 .fce-msb-cell {
        padding-top: 45px;
        padding-bottom: 45px;
        padding-left: var(--bagels-pg-margin);
        padding-right: var(--bagels-pg-margin);
    }

    .fce-multi-sized-boxes-v2 .fce-msb-grid {
        grid-template-columns: calc(100% - 35%) 35%;
        grid-template-rows: auto auto auto;
    }

    .fce-multi-sized-boxes-v2 .fce-msb-cell--top-wide {
        grid-column: 1 / 2;
        grid-row: 1 / 2;
    }

    .fce-multi-sized-boxes-v2 .fce-msb-cell--right-tall {
        grid-column: 2 / 3;
        grid-row: 1 / 4;
    }

    .fce-multi-sized-boxes-v2 .fce-msb-cell--bottom-left {
        grid-column: 1 / 2;
        grid-row: 2 / 3;
    }

    .fce-multi-sized-boxes-v2 .fce-msb-cell--bottom-right {
        grid-column: 1 / 2;
        grid-row: 3 / 4;
    }
}

/* Tablet: 2x2 grid — wide + bottom-left in row 1, bottom-right + right-tall in row 2 */
@media (max-width: 1023px) {
    .fce-multi-sized-boxes-v2 .fce-msb-grid {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto;
    }

    .fce-multi-sized-boxes-v2 .fce-msb-cell--top-wide {
        grid-column: 1 / 2;
        grid-row: 1 / 2;
    }

    .fce-multi-sized-boxes-v2 .fce-msb-cell--bottom-left {
        grid-column: 2 / 3;
        grid-row: 1 / 2;
    }

    .fce-multi-sized-boxes-v2 .fce-msb-cell--bottom-right {
        grid-column: 1 / 2;
        grid-row: 2 / 3;
    }

    .fce-multi-sized-boxes-v2 .fce-msb-cell--right-tall {
        grid-column: 2 / 3;
        grid-row: 2 / 3;
    }
}

@media (max-width: 991px) {
    .fce-multi-sized-boxes-v2 .fce-msb-cell {
        padding-top: 50px;
        padding-bottom: 50px;
    }
}

@media (max-width: 767px) {
    .fce-multi-sized-boxes-v2 .fce-msb-cell {
        padding-left: 30px;
        padding-right: 30px;
    }
}

/* Small mobile: all cells full width, stacked */
@media (max-width: 499px) {
    .fce-multi-sized-boxes-v2 .fce-msb-grid {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
    }

    .fce-multi-sized-boxes-v2 .fce-msb-cell--top-wide,
    .fce-multi-sized-boxes-v2 .fce-msb-cell--bottom-left,
    .fce-multi-sized-boxes-v2 .fce-msb-cell--bottom-right,
    .fce-multi-sized-boxes-v2 .fce-msb-cell--right-tall {
        grid-column: 1 / 2;
        grid-row: auto;
    }

    .fce-multi-sized-boxes-v2 .fce-msb-cell--right-tall {
        order: 4;
    }

    .fce-multi-sized-boxes-v2 .fce-msb-cell {
        padding: 45px 15px;
    }
}