/**
 * RackTrack — Section widget front-end styles.
 *
 * Column grid + presets + mobile stacking + interior spacing for the Section
 * container widget. The card opt-out / edge-to-edge bleed is emitted per-instance
 * as an inline <style> by the widget's render method (gated on the edge flag), so
 * it is NOT here.
 *
 * @package RackTrack
 * @subpackage Section_Widget
 * @since 1.37.5
 * @updated 1.37.8 — width mode (content/full-screen); dropped .rt-section-inner--edge
 */

.rt-section {
    position: relative;
}

/* Interior vertical breathing room for the background. Horizontal insets are
   controlled per-column via each column's padding (1.37.7), so a full-screen
   section (100vw breakout, 1.37.8) runs its content to the viewport edges by
   default and the operator pulls it back with column padding. */
.rt-section-inner {
    padding: 24px 0;
}

/* Column grid. Presets map to grid-template-columns. */
.rt-section-cols {
    display: grid;
    gap: 24px;
    align-items: start;
}
.rt-section-cols--one    { grid-template-columns: 1fr; }
.rt-section-cols--two    { grid-template-columns: 1fr 1fr; }
.rt-section-cols--three  { grid-template-columns: 1fr 1fr 1fr; }
.rt-section-cols--l60r40 { grid-template-columns: 60fr 40fr; }
.rt-section-cols--l40r60 { grid-template-columns: 40fr 60fr; }
.rt-section-cols--l70r30 { grid-template-columns: 70fr 30fr; }
.rt-section-cols--l30r70 { grid-template-columns: 30fr 70fr; }

/* Nested widgets stack within their column. They keep their own .widget card;
   space them vertically. On the public front end they are direct children of
   .rt-section-col; in the builder they sit inside a .rt-pb-editable-area column
   wrapper — cover both. */
.rt-section-col > .rt-section-nested,
.rt-section-col > .rt-pb-editable-area > .rt-section-nested {
    margin-bottom: 24px;
}
.rt-section-col > .rt-section-nested:last-child,
.rt-section-col > .rt-pb-editable-area > .rt-section-nested:last-child {
    margin-bottom: 0;
}
/* The column editable-area fills its column so the "+ Add widget" gap is
   clickable even when the column is empty. */
.rt-section-col > .rt-pb-editable-area { min-height: 1px; }

/* Stack every layout to a single column on phones. */
@media (max-width: 768px) {
    .rt-section-cols {
        grid-template-columns: 1fr !important;
    }
}