*
* At narrow container widths we set the vars; the inline styles read
* them. No !important needed — the var() is the lever, not specificity. */
/* FIRM TIERS by CONTAINER width — Bootstrap-standard boundaries (1199.98 /
991.98 / 767.98) so grids reflow through a proper column-count ladder
(4 → 3 → 2 → 1) instead of jumping 4 → 2. Container-query based so the
ladder is still correct when nested in a narrow slider/drawer (the
market-leader approach). Cascade order matters: each narrower tier
follows the wider one so it wins as the container shrinks.
Desktop (≥1200) keeps the authored width % (no override). */
/* Large tablet / small desktop (≤ 1199.98px container): three per row.
A fourth column wraps; flex-grow lets wrapped leftovers fill the row.
Two-column rows are unaffected in practice — each cell still grows to
half the row via the inline flex-grow. */
@container (max-width: 1199.98px) {
.pd-resp-row {
--pd-resp-wrap: wrap;
--pd-resp-gap-grow: 12px;
}
.pd-resp-cell {
--pd-resp-w: 31.5%;
}
}
/* FOUR CARDS = TWO ROWS OF TWO (owner, 21 Oct 2026 — Design & Layout Formula:
tablet shows two per row). A row of exactly four (or eight) cells skips the
three-per-row tier, which left one card alone under three, and goes 2 + 2 on
any tablet width. The range keeps the phone tier's single stack untouched. */
@container (min-width: 768px) and (max-width: 1199.98px) {
.pd-resp-row:has(> .pd-resp-cell:nth-child(4):last-child) > .pd-resp-cell,
.pd-resp-row:has(> .pd-resp-cell:nth-child(8):last-child) > .pd-resp-cell {
--pd-resp-w: 48%;
}
}
/* Tablet (≤ 991.98px container): two per row. A third+ column wraps; a lone
leftover grows to fill its row via the cell's inline flex-grow. */
@container (max-width: 991.98px) {
.pd-resp-cell {
--pd-resp-w: 48%;
}
}
/* Phone (≤ 767.98px container): one per row — a clean single stack for any count. */
@container (max-width: 767.98px) {
.pd-resp-row {
--pd-resp-dir: column;
--pd-resp-wrap: wrap;
}
.pd-resp-cell {
--pd-resp-w: 100%;
}
}
/* ── Typographic reflow — PROPORTIONAL (v3.7.1233) ───────────────────
* History: v3.7.957 removed the original down-scale because it SNAPPED
* every heading to one fixed small cap on mobile (big headlines went
* tiny, small ones untouched → mismatched). This is the corrected,
* industry-standard approach: headings scale by a PROPORTION of the
* theme's heading size — a huge headline shrinks visibly, a modest one
* barely moves, and a floor stops anything dropping below readable.
*
* scaled = max( min(themeSize, floor), themeSize × factor )
* → 64px hero: phone 46px · 28px heading: phone 22px · 16px: stays 16px
*
* Seam: the Global Theme emitters define --pd-header-size at :root and
* paint h1–h6 with that same value, so multiplying the var reproduces
* the theme size exactly. Blocks with an explicit per-block size (inline
* font-size baked by the sizePct/legacy path) keep the author's size —
* deliberate intent wins.
* px-only math (max/min/calc) — canvas-safe; NO vw/cqi/clamp fluid units
* (those collapse to min inside the editor canvas iframe).
* Specificity (0,2,1) via the cell hop beats the theme's flat h rule
* (0,0,1) with no !important.
*
* A cell is named TWICE below, by its editor marker and by its class.
* The marker (data-gjs-type) exists only inside the editor canvas: a saved
* or published page keeps the class alone, so with the marker only this
* whole rule matched no heading on any real page and long words in a
* headline snapped in two on a phone (owner, 7 Oct 2026).
*
* ONLY THE THEME'S OWN HEADINGS (owner, 8 Oct 2026). Naming every h1-h6 in
* a cell also caught the headings INSIDE blocks: a Panel card's title is an
*
with its own size (36px, 28px on a
* phone), and this rule, being stronger, set it to the theme's headline
* size instead: LARGER on a phone than on a desktop, so "Separation
* agreements" broke as "Separatio / n". The rule now names a Heading block
* ([data-pd-block="heading"]) and any plain heading, and leaves alone a
* heading that belongs to a block (a class beginning pd-blk-), which keeps
* the size its own block gives it. */
@container (max-width: 991.98px) {
[data-pd-layout="section"] [data-gjs-type="cell"] h1:not([class*="pd-blk-"]),
[data-pd-layout="section"] [data-gjs-type="cell"] h2:not([class*="pd-blk-"]),
[data-pd-layout="section"] [data-gjs-type="cell"] h3:not([class*="pd-blk-"]),
[data-pd-layout="section"] [data-gjs-type="cell"] h4:not([class*="pd-blk-"]),
[data-pd-layout="section"] [data-gjs-type="cell"] h5:not([class*="pd-blk-"]),
[data-pd-layout="section"] [data-gjs-type="cell"] h6:not([class*="pd-blk-"]),
[data-pd-layout="section"] [data-gjs-type="cell"] .pd-blk-rt-htag,
[data-pd-layout="section"] [data-gjs-type="cell"] [data-pd-block="heading"],
[data-pd-layout="section"] .gjs-cell h1:not([class*="pd-blk-"]),
[data-pd-layout="section"] .gjs-cell h2:not([class*="pd-blk-"]),
[data-pd-layout="section"] .gjs-cell h3:not([class*="pd-blk-"]),
[data-pd-layout="section"] .gjs-cell h4:not([class*="pd-blk-"]),
[data-pd-layout="section"] .gjs-cell h5:not([class*="pd-blk-"]),
[data-pd-layout="section"] .gjs-cell h6:not([class*="pd-blk-"]),
[data-pd-layout="section"] .gjs-cell .pd-blk-rt-htag,
[data-pd-layout="section"] .gjs-cell [data-pd-block="heading"] {
font-size: max(min(var(--pd-header-size, 32px), 24px), calc(var(--pd-header-size, 32px) * 0.85));
}
}
@container (max-width: 767.98px) {
[data-pd-layout="section"] [data-gjs-type="cell"] h1:not([class*="pd-blk-"]),
[data-pd-layout="section"] [data-gjs-type="cell"] h2:not([class*="pd-blk-"]),
[data-pd-layout="section"] [data-gjs-type="cell"] h3:not([class*="pd-blk-"]),
[data-pd-layout="section"] [data-gjs-type="cell"] h4:not([class*="pd-blk-"]),
[data-pd-layout="section"] [data-gjs-type="cell"] h5:not([class*="pd-blk-"]),
[data-pd-layout="section"] [data-gjs-type="cell"] h6:not([class*="pd-blk-"]),
[data-pd-layout="section"] [data-gjs-type="cell"] .pd-blk-rt-htag,
[data-pd-layout="section"] [data-gjs-type="cell"] [data-pd-block="heading"],
[data-pd-layout="section"] .gjs-cell h1:not([class*="pd-blk-"]),
[data-pd-layout="section"] .gjs-cell h2:not([class*="pd-blk-"]),
[data-pd-layout="section"] .gjs-cell h3:not([class*="pd-blk-"]),
[data-pd-layout="section"] .gjs-cell h4:not([class*="pd-blk-"]),
[data-pd-layout="section"] .gjs-cell h5:not([class*="pd-blk-"]),
[data-pd-layout="section"] .gjs-cell h6:not([class*="pd-blk-"]),
[data-pd-layout="section"] .gjs-cell .pd-blk-rt-htag,
[data-pd-layout="section"] .gjs-cell [data-pd-block="heading"] {
font-size: max(min(var(--pd-header-size, 32px), 22px), calc(var(--pd-header-size, 32px) * 0.72));
}
}
/* ── Cell padding reflow ─────────────────────────────────────────────
* Preset cells emit padding:var(--pd-resp-pad, ) so this tier
* can actually win over the inline style (a literal padding rule here
* could never beat an inline declaration). Scale spacing DOWN on narrow
* containers — stacked cells with desktop padding waste phone space. */
@container (max-width: 480px) {
.pd-resp-cell { --pd-resp-pad: 8px 6px; }
}
/* ── Section-level vertical padding scale ────────────────────────────
* The section() helper emits inline padding:20px 0 by default but many
* presets pass 60px-80px vertical padding for hero / launch / hero-style
* blocks. At narrow widths this is excessive. Scale via container-query
* using a var the helper can opt into. */
@container (max-width: 480px) {
[data-pd-layout="section"][style*="--pd-resp-spy"] {
padding-top: var(--pd-resp-spy, 20px);
padding-bottom: var(--pd-resp-spy, 20px);
}
}
/* ── Media safety net ────────────────────────────────────────────────
* Ensure ALL embedded media inside preset rows respects its cell width
* and never forces the page wider — images, video, iframes, canvases,
* SVG alike (breakpoint spec: media is responsive at every tier). */
.pd-resp-row img,
.pd-resp-row video,
.pd-resp-row iframe,
.pd-resp-row canvas,
.pd-resp-row svg,
[data-pd-layout="section"] img,
[data-pd-layout="section"] video,
[data-pd-layout="section"] iframe,
[data-pd-layout="section"] canvas {
max-width: 100%;
}
.pd-resp-row img,
.pd-resp-row video,
[data-pd-layout="section"] img,
[data-pd-layout="section"] video {
height: auto;
}
/* Spacing eases down on narrow screens (owner, 23 Oct 2026).
* The Design panel's Spacing saves padding and margin as
* calc( * var(--pd-spc-k, 1)) (pd_dsp_space_pro.js). Desktop keeps
* what was set; a tablet gets three quarters and a phone half, so stacked
* columns are not left with desktop-sized gaps. */
:root { --pd-spc-k: 1; }
@media (max-width: 991.98px) { :root { --pd-spc-k: .75; } }
@media (max-width: 575.98px) { :root { --pd-spc-k: .5; } }