/* ============================================
   RSL Sections Component
   Version: 1.0.0
   Description: Balanced/masonry-style layout for
   existing slot layout system with dynamic column
   distribution.
   ============================================ */

/* ──────────────────────────────────────────────
   Balanced Layout Mode
   ────────────────────────────────────────────── */

.responsive-slot-layout[data-layout="balanced"] {
    /* Override your normal layout only when balanced is active */
    display: flex;
    align-items: flex-start;
    gap: var(--rsl-slot-gap, 1rem);
}

/* ──────────────────────────────────────────────
   Smart Columns (Created by JS)
   ────────────────────────────────────────────── */

.responsive-slot-layout[data-layout="balanced"] .rsl-smart-column {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    gap: var(--rsl-slot-gap, 1rem);
    min-width: 0;
}

/* ──────────────────────────────────────────────
   Slot Items
   ────────────────────────────────────────────── */

/* Ensure slot-items fill column width */
.responsive-slot-layout[data-layout="balanced"] .slot-item {
    width: 100%;
}

/* ──────────────────────────────────────────────
   Transitions
   ────────────────────────────────────────────── */

/* Optional: make reflows feel smoother */
.responsive-slot-layout[data-layout="balanced"],
.responsive-slot-layout[data-layout="balanced"] * {
    transition: transform 0.18s ease-out, opacity 0.18s ease-out;
}

/* ──────────────────────────────────────────────
   Reduced Motion Support
   ────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .responsive-slot-layout[data-layout="balanced"],
    .responsive-slot-layout[data-layout="balanced"] * {
        transition: none;
    }
}