/* ═══════════════════════════════════════════════════════════════════════
   Palladium content guards — platform-level mobile safety net for rendered
   content (.pb-content-zone). Ships with the app (every tenant, every deploy)
   so template-class fixes don't have to be written into per-site layout
   fragments. All rules are scoped to the content zone and only apply at
   phone widths; they were live-verified across 26 pages (2026-07-13).

   Covers the three recurring imported-template failure modes:
     1. docs-style grid wrappers whose single implicit column inflates to the
        min-content of a wide <pre>/<code> (content clipped off-screen)
     2. tailwind arbitrary-value grids (grid-cols-[…]) with no mobile variant
     3. double side padding when a chrome rule matches both the imported-page
        wrapper AND a nested <main>
   ═══════════════════════════════════════════════════════════════════════ */

@media (max-width: 480px) {
    /* grid/flex items must be allowed to shrink below their content width */
    .pb-content-zone main,
    .pb-content-zone aside {
        min-width: 0;
    }

    /* long code can wrap or scroll in place — never inflate the column */
    .pb-content-zone pre {
        max-width: 100%;
        overflow-x: auto;
    }

    .pb-content-zone pre,
    .pb-content-zone pre code,
    .pb-content-zone code {
        white-space: pre-wrap;
        word-break: break-word;
    }

    /* div-table cells (docs templates) */
    .pb-content-zone .cell {
        min-width: 0;
    }

    /* tailwind arbitrary-value grids without a mobile variant → stack */
    .pb-content-zone [class*="grid-cols-["] {
        grid-template-columns: 1fr;
    }

    /* wrapper + nested <main> both matched by the side-padding chrome rule */
    .pb-content-zone .pb-import-section main {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}