/**
 * White Breaks - Breakout Styling
 * Handles left/right alignment for tall breakouts
 */

/* Base breakout styles */
.break-item {
    position: relative;
}

.break-content-item,
.break-products-item {
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
}

/* Tall breakout - 2 rows height */
.break-products-tall,
.break-products_tall {
    /* Takes 1 column width, 2 rows height */
}

/* Tile breakout - 1 row height */
.break-products-tile,
.break-products_tile {
    /* Takes 1 column width, 1 row height */
}

/* Right alignment for tall breakouts */
.break-align-right {
    /* Right alignment handled by grid ordering in JavaScript or CSS Grid */
    order: 999; /* Push to end of grid row */
}

/*
 * Grid adjustment for alignment
 * You may need to adjust the grid layout in your category-product-grid
 * to ensure right-aligned tall breakouts appear on the right side
 */

/* Responsive adjustments */
@media (max-width: 768px) {
    /* On mobile, alignment doesn't matter as much */
    .break-align-right {
        order: unset;
    }
}

/* PageBuilder content within breakouts */
.break-content-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.break-content-item a {
    display: block;
    width: 100%;
    height: 100%;
}

/* Ensure breakout content fills the space */
.break-item > * {
    width: 100%;
    height: 100%;
}