/**
 * Page Designer — DEVICE POLISH (additive, isolated, no new classes).
 * v1.1.0 — added GAP 5: universal long-word / oversized-text overflow safety
 *          (always-on break-word + balanced headings) so no font size can cause
 *          sideways scroll on any device or column width.
 * v1.0.0 — loaded on the editor canvas, public web pages, and live admin override
 * pages, so behaviour is identical everywhere. Closes the four market-leader gaps
 * the responsive sweep found, WITHOUT touching desktop appearance.
 *
 * Everything is scoped to Page-Designer CONTENT ([data-pd-block], [data-pd-layout],
 * .gjs-cell) so admin chrome and other modules are never affected. Tap-size and
 * input rules are intentionally VIEWPORT-based (finger size is a device fact, not a
 * container fact); column LAYOUT stays container-based (pd_resp_columns.css).
 *
 * No !important — plain specificity. Purely adds minimums / safety caps; it can only
 * make small screens friendlier, never shrink or restyle a desktop layout.
 */

/* ── GAP 4 — media never forces the page wide (covers pasted embeds: iframes,
   videos, objects, canvases — images were already covered). ── */
:is([data-pd-block], [data-pd-layout], .gjs-cell) :is(img, video, iframe, embed, object, canvas) {
    max-width: 100%;
}

/* ── GAP 3 — wide tables in ordinary content blocks (e.g. the Data block) get a
   horizontal scroll inside their own box on phones/tablets, so the page itself
   never scrolls sideways. The ELEMENT BLOCK is deliberately EXCLUDED: it restacks
   its tables into cards on its own, and a scroll box here would defeat that (the
   card logic would see no overflow and never trigger). Scoped to a non-element
   block ancestor only — never .gjs-cell, so an element-block table is untouched. ── */
@media (max-width: 768px) {
    [data-pd-block]:not([data-pd-block="element"]) table:not(.pd-ert-stack) {
        display: block;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* ── GAP 1 — touch comfort on tablet & phone: tap targets reach ~44px so they're
   easy to hit with a thumb (only grows them on small screens; desktop untouched).
   Section-Slider runtime chrome (.pd-sl-rt-*: pagination dots, nav arrows) is
   excluded — a 44px min-height DEFORMS a 10px dot into a pill; the slider ships
   its own ≥44px invisible tap pads in slider_section.css instead.

   The Partners carousel's pagination dot is excluded for exactly the same
   reason, added 2026-09-02: it asks for 8px square and was rendering 10 wide by
   55 tall on a tablet — a thin vertical oval, which is what prompted this. It
   now ships the same invisible tap pads in partners.css, so touch comfort is
   kept and the dot stays a dot. Its ARROW is deliberately NOT excluded: that is
   a real button and should grow, so partners.css makes it a true 44x44 rather
   than letting this rule stretch a 36px circle into an oval. ── */
@media (max-width: 768px) {
    :is([data-pd-block], [data-pd-layout], .gjs-cell) :is(a.btn, button:not([class*="pd-sl-rt-"]):not(.pd-blk-prt-dot), [class*="pd-blk-btn"], [class*="pd-btn"], input[type="submit"], input[type="button"], input[type="reset"]) {
        min-height: 44px;
    }
}

/* ── GAP 2 — text on mobile: form fields use a 16px font so phones don't auto-zoom
   when you focus them (the iOS/Android standard), and they keep a 44px tap height.
   Long headings always wrap rather than overflow. ── */
@media (max-width: 768px) {
    :is([data-pd-block], [data-pd-layout], .gjs-cell) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, textarea) {
        min-height: 44px;
        font-size: 16px;
    }
    :is([data-pd-block], [data-pd-layout], .gjs-cell) :is(h1, h2, h3, h4, h5, h6) {
        overflow-wrap: break-word;
        word-break: break-word;
    }
}

/* ── GAP 5 — long-word / oversized-text overflow safety (v1.1.0) ──────────────
 * Market-standard catch-all (matches Webflow et al.): content text can NEVER
 * spill out of its column and force sideways scrolling, no matter how large the
 * font is set. `overflow-wrap: break-word` only activates when a SINGLE word is
 * genuinely wider than the available line — so normal phrases still wrap by
 * whole words and are never split. It works at the REAL rendered width, so this
 * one always-on rule covers desktop, tablet, mobile AND narrow nested columns
 * with no media/container query needed (supersedes the phone-only heading rule
 * above, which is kept for safety). Headings also get `text-wrap: balance` so a
 * wrapped heading splits into evenly-sized lines instead of one long line and a
 * lone stray word. Scoped to PD content only; no !important — author overrides
 * still win. */
:is([data-pd-block], [data-pd-layout], .gjs-cell) :is(h1, h2, h3, h4, h5, h6, p, li, a, span, label, blockquote, figcaption, dt, dd, [class*="pd-blk-btn"], [class*="pd-btn"], button) {
    overflow-wrap: break-word;
}
:is([data-pd-block], [data-pd-layout], .gjs-cell) :is(h1, h2, h3, h4, h5, h6) {
    text-wrap: balance;
}