/* ==========================================================================
 * pd_col_visibility_public.css
 *
 * Public-page runtime rules for Column "Responsive Visibility"
 * (pd_column_panel.js → data-pd-col-hide-{desktop,tablet,mobile}).
 *
 * Loaded ONLY by frontend_page.php — never the editor canvas. The
 * canvas variant lives in pd_col_visibility_canvas.css and dims
 * hidden columns instead of removing them so authors can still
 * select & edit them.
 *
 * Hiding the COLUMN hides every block it contains via DOM
 * containment — that's the whole point of column-level visibility:
 * one toggle controls all child blocks regardless of their type
 * (shortcode, form_builder, custom-code, image, etc.).
 *
 * Namespace: pd-col-* (no shared classes, no shared DOM).
 *
 * Breakpoints — Elementor-aligned so user expectations match
 * across page builders:
 *   Mobile  : viewport <=  767px
 *   Tablet  : viewport  768-1024px
 *   Desktop : viewport >= 1025px
 *
 * Specificity is achieved by combining `.gjs-cell` (every column
 * carries this canonical class — see editor.js buildRow at line
 * ~909) with the [data-pd-col-hide-*="1"] flag — no !important.
 * ==========================================================================
 */

/* ── Hide on Mobile ──────────────────────────────────────────────── */
@media (max-width: 767px) {
    .gjs-cell[data-pd-col-hide-mobile="1"] {
        display: none;
    }
    /* Collapse the row when ALL its cells are hidden on mobile —
     * otherwise the row keeps its 60px min-height as an empty band. */
    .gjs-row:has(> .gjs-cell):not(:has(> .gjs-cell:not([data-pd-col-hide-mobile="1"]))) {
        display: none;
    }
    /* Collapse the container when its only children are rows AND no
     * cell anywhere inside is visible — prevents the container's
     * inline padding/margin from leaving an empty band. */
    [data-pd-layout="container"]:has(> .gjs-row):not(:has(> *:not(.gjs-row))):not(:has(.gjs-cell:not([data-pd-col-hide-mobile="1"]))) {
        display: none;
    }
    /* Collapse the section when its only children are containers AND
     * no cell anywhere inside is visible — kills the section's
     * 20px-top + 20px-bottom padding too. */
    section[data-pd-layout="section"]:has([data-pd-layout="container"]):not(:has(> *:not([data-pd-layout="container"]))):not(:has(.gjs-cell:not([data-pd-col-hide-mobile="1"]))) {
        display: none;
    }
}

/* ── Hide on Tablet ──────────────────────────────────────────────── */
@media (min-width: 768px) and (max-width: 1024px) {
    .gjs-cell[data-pd-col-hide-tablet="1"] {
        display: none;
    }
    .gjs-row:has(> .gjs-cell):not(:has(> .gjs-cell:not([data-pd-col-hide-tablet="1"]))) {
        display: none;
    }
    [data-pd-layout="container"]:has(> .gjs-row):not(:has(> *:not(.gjs-row))):not(:has(.gjs-cell:not([data-pd-col-hide-tablet="1"]))) {
        display: none;
    }
    section[data-pd-layout="section"]:has([data-pd-layout="container"]):not(:has(> *:not([data-pd-layout="container"]))):not(:has(.gjs-cell:not([data-pd-col-hide-tablet="1"]))) {
        display: none;
    }
}

/* ── Hide on Desktop ─────────────────────────────────────────────── */
@media (min-width: 1025px) {
    .gjs-cell[data-pd-col-hide-desktop="1"] {
        display: none;
    }
    .gjs-row:has(> .gjs-cell):not(:has(> .gjs-cell:not([data-pd-col-hide-desktop="1"]))) {
        display: none;
    }
    [data-pd-layout="container"]:has(> .gjs-row):not(:has(> *:not(.gjs-row))):not(:has(.gjs-cell:not([data-pd-col-hide-desktop="1"]))) {
        display: none;
    }
    section[data-pd-layout="section"]:has([data-pd-layout="container"]):not(:has(> *:not([data-pd-layout="container"]))):not(:has(.gjs-cell:not([data-pd-col-hide-desktop="1"]))) {
        display: none;
    }
}

/* ==========================================================================
 * Column Boxed vs Fullwidth
 * (pd_column_panel.js → data-pd-col-layer="fullwidth")
 *
 * Fullwidth columns escape their row's max-width and stretch edge-to-edge
 * across the viewport via the standard `100vw` break-out pattern.
 * Boxed = attribute absent or any value other than "fullwidth".
 * ========================================================================== */
.gjs-cell[data-pd-col-layer="fullwidth"] {
    position: relative;
    left: 50%;
    right: 50%;
    /* --pd-sbw is the vertical scrollbar's width (published by pd_sbw.js).
       Plain 100vw includes the scrollbar, so the break-out ran ~15px past what
       the page can show and every long page grew a horizontal scrollbar. The
       0px fallback keeps the old behaviour wherever the value is absent. */
    margin-left: calc(-50vw + var(--pd-sbw, 0px) / 2);
    margin-right: calc(-50vw + var(--pd-sbw, 0px) / 2);
    width: calc(100vw - var(--pd-sbw, 0px));
    max-width: calc(100vw - var(--pd-sbw, 0px));
}

/* Admin pages only: the left sidebar offsets the content, so a viewport-wide
 * (100vw) break-out spills LEFT over the sidebar menu. On admin, fill the
 * content area (#wrapper) instead — it stops at the sidebar edge and auto-
 * expands to full width when the sidebar is collapsed. Higher #id specificity
 * wins; public pages have no #wrapper so they keep the true 100vw break-out. */
#wrapper .gjs-cell[data-pd-col-layer="fullwidth"] {
    left: auto;
    right: auto;
    margin-left: 0;
    margin-right: 0;
    width: 100%;
    max-width: 100%;
}