/**
 * Page Designer — UNIVERSAL RESPONSIVE COLUMNS  (.gjs-row / .gjs-cell)
 * v1.0.0 — dedicated, fully isolated. Loaded on the editor canvas, public web
 * pages, AND live admin override pages, so column behaviour is IDENTICAL
 * everywhere (both editors + both live surfaces).
 * ───────────────────────────────────────────────────────────────────────────
 * THE ONE RULE: a multi-column row reflows by its OWN available width, with no
 * device breakpoints. Each column keeps its authored width %, but never shrinks
 * below a readable floor; when the columns can no longer hold that floor side by
 * side, the row wraps them onto the next line — many → fewer → one — exactly the
 * intrinsic CSS-Grid/flex pattern the market leaders use (min() + wrap). This is
 * dynamic and global: every CURRENT and FUTURE layout-template, manual column,
 * core-block column and admin-element column gets it automatically, because it
 * keys off the universal .gjs-row / .gjs-cell classes.
 *
 * Preset blocks (.pd-resp-row / .pd-resp-cell) already have their own container-
 * query system (pd_responsive.css); they are EXCLUDED here via :not() so the two
 * systems never double-handle the same row.
 *
 * No !important — specificity (two classes) beats the single-class baseline. The
 * only thing CSS cannot beat is a hardcoded inline flex-wrap:nowrap baked into
 * already-SAVED older layouts; pd_resp_columns.js flips just those at runtime.
 */

/* Allow rows to wrap their columns (new rows; and CSS-level baseline). */
.gjs-row:not(.pd-resp-row) {
    flex-wrap: wrap;
}

/* ── FIRM TIERS by CONTAINER width ─────────────────────────────────────────────
   Predictable, consistent column counts that key off the row's CONTAINER width
   (its Section / Container, or the Slider slide when nested) — NOT the device. So a
   layout is its designed count on desktop, two-up on a tablet, and a single stack
   on a phone, identically everywhere, and still correct when nested in a narrow
   slider (the market-leader container-query approach).

   The lever is min-width: the cells' width % is INLINE (which CSS can't override),
   but min-width is NOT set inline, so it wins cleanly with no !important. The
   cells' inline flex-grow makes an odd leftover column fill its own row.

   The container context is the Section/Container/slide (made a container by
   pd_responsive.css). Tiers cascade: the phone rule follows the tablet rule so it
   wins at ≤767. Desktop (≥1024) gets no override → the designed column count. */
@container (max-width: 1023.98px) {
    /* Tablet: two per row (a third+ wraps; a lone leftover grows to full width).
       48% guarantees exactly two fit with gap room and blocks a third. */
    .gjs-row:not(.pd-resp-row) > .gjs-cell:not(.pd-resp-cell) {
        min-width: 48%;
    }
}
@container (max-width: 767.98px) {
    /* Phone: one per row — a clean single stack for ANY column count. */
    .gjs-row:not(.pd-resp-row) > .gjs-cell:not(.pd-resp-cell) {
        min-width: 100%;
    }
}