*
* 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%;
}
}
/* 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. */
@container (max-width: 991.98px) {
[data-pd-layout="section"] [data-gjs-type="cell"] h1,
[data-pd-layout="section"] [data-gjs-type="cell"] h2,
[data-pd-layout="section"] [data-gjs-type="cell"] h3,
[data-pd-layout="section"] [data-gjs-type="cell"] h4,
[data-pd-layout="section"] [data-gjs-type="cell"] h5,
[data-pd-layout="section"] [data-gjs-type="cell"] h6 {
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,
[data-pd-layout="section"] [data-gjs-type="cell"] h2,
[data-pd-layout="section"] [data-gjs-type="cell"] h3,
[data-pd-layout="section"] [data-gjs-type="cell"] h4,
[data-pd-layout="section"] [data-gjs-type="cell"] h5,
[data-pd-layout="section"] [data-gjs-type="cell"] h6 {
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;
}