/* ==========================================================================
   PITON-Global 2026 — Sitewide responsive typography (small screens)
   Loaded LAST on every page (wp_enqueue_scripts priority 20) so its
   !important declarations win over every page-type stylesheet, including
   the handful of heading rules that use `font: … !important` themselves
   (tie on specificity is broken by this sheet's later source order, and
   `:root body` out-specifies single-class contextual rules anyway).

   Derived from a rendered-page audit at 360px (2026-08-03): hero h1s were
   printing at 54–64px and section h2s at 40–60px on phones because no
   page-type stylesheet defines mobile heading sizes. Fluid clamp() sizes
   below scale with the viewport instead of pinning one breakpoint size.

   Small text (computed size under 15px) is handled by the companion
   assets/js/responsive-fineprint.js (+1px on the same breakpoint) — CSS
   cannot express "current cascade value + 1px", and the affected
   selector combos include classless and inline-styled elements.
   ========================================================================== */

/* ---------- Inline-styled section wrappers: 64px side padding → 30px ----------
   The class-based section wrappers already swap 64px side padding to 30px at
   ≤560px in their own page-type stylesheets (sitewide convention). Content
   also carries INLINE-styled wrappers (e.g. the industry mid-CTA's
   `padding:56px 64px 72px` div) that never got the swap. The attribute pair
   matches any div whose inline padding shorthand has 64px as its horizontal
   value ("px 64px" = second value of the shorthand), in both raw and
   CSSOM-normalized ("padding: 56px 64px") spellings. */
@media (max-width: 560px) {
	div[style*="padding:"][style*="px 64px"] {
		padding-left: 30px !important;
		padding-right: 30px !important;
	}
}

/* ---------- Executive quote cards (John/Ralf photo + quote) ----------
   Two families sitewide: class-based (.pg-svcp-quote-card / .pg-indp-quote-card /
   .pg-svcp-execquote, 34 instances) and fully inline-styled `pg-reveal` divs
   (33 instances — display:flex + gap:26px in the style attribute, no other
   class). On tablet portrait/phones both stack: centered photo on top, badge
   and quote below. The inline family is reached via :has() on the direct-child
   portrait img — the only stable signature those divs have. */
@media (max-width: 800px) {
	.pg-svcp-quote-card,
	.pg-indp-quote-card,
	.pg-svcp-execquote,
	div[style*="display:flex"]:has(> img[src*="john-maczynski"]),
	div[style*="display:flex"]:has(> img[src*="ralf-ellspermann"]),
	div[style*="display: flex"]:has(> img[src*="john-maczynski"]),
	div[style*="display: flex"]:has(> img[src*="ralf-ellspermann"]) {
		flex-direction: column !important;
		padding: 28px 24px !important;
	}

	.pg-svcp-quote-card > img,
	.pg-indp-quote-card > img,
	.pg-svcp-execquote > img,
	div[style*="flex"] > img[src*="john-maczynski"],
	div[style*="flex"] > img[src*="ralf-ellspermann"] {
		align-self: center;
		/* Stacked layout gives the portrait room — 100px reads much better than
		   the 58px set inline/by the card classes (!important beats both). */
		width: 100px !important;
		height: 100px !important;
	}
}

@media (max-width: 700px) {
	/* Doubled :root lifts specificity to (0,2,2) — above the strongest
	   competing !important heading rules in the page stylesheets
	   (`.pg-cap-h2.lg` at (0,2,0), `.pg-legacy-body h2.x-text-…` at (0,2,1));
	   everything else is single-class and already loses. */

	/* All audited h1s sit between 32–64px; fluid 30–52px keeps hierarchy. */
	:root:root body h1 {
		font-size: clamp(30px, 8.5vw, 52px) !important;
	}

	/* All audited h2s sit between 24–60px (closing-CTA h2s were 60px). */
	:root:root body h2 {
		font-size: clamp(24px, 7vw, 40px) !important;
	}

	/* The only h3s that measured oversized on phones (34px): the shared
	   industry/service h3 classes, the home timeline h3, and Leadership's
	   inline-styled section h3 (direct child — the > keeps award-card h3s
	   nested deeper inside the same section untouched). Other h3s are card
	   titles at 17.5px — a blanket h3 rule would enlarge them, so only the
	   known-big ones are scaled. */
	:root:root body .pg-indp-h3,
	:root:root body .pg-svcp-h3,
	:root:root body .pg-home-timeline-wrap h3,
	:root:root body .pg-lead-section > h3 {
		font-size: clamp(20px, 5.5vw, 30px) !important;
	}

	/* Long unbroken words in now-narrower headings shouldn't reintroduce
	   horizontal overflow. */
	:root:root body h1,
	:root:root body h2 {
		overflow-wrap: break-word;
	}
}