/*
 * Mobile / tablet-only fixes found by scripts/mobile-audit. Every rule here lives inside a
 * max-width media query so desktop (>1024px) is never affected. Source of each fix is noted.
 */

/*
 * Certification Detail layout: an atomic Elementor flexbox holding the document sidebar
 * (document_download_list) next to the criteria grid. The designer left it at `width: 1200px;
 * flex-direction: row` with no tablet/mobile variants, which pushed the page 825px wide at 375px.
 * Matched by structure, not by element ID, so every certification page picks it up.
 */
@media (max-width: 1024px) {
	.elementor .e-flexbox-base:has(> .elementor-widget-criteria_grid_27984) {
		width: 100%;
		max-width: 100%;
		flex-direction: column;
		gap: 24px;
	}

	.elementor .e-flexbox-base:has(> .elementor-widget-criteria_grid_27984) > .elementor-widget {
		width: 100%;
		max-width: 100%;
	}
}

/*
 * Atomic headings, paragraphs and flexboxes are saved with fixed pixel widths and no tablet/mobile
 * variant (e.g. /industry/: an h2 at `width: 800px`, 425px past a 375px screen). Capping them at the
 * width of their parent leaves desktop alone and removes the whole class of bug.
 */
@media (max-width: 1024px) {
	.elementor .e-heading-base,
	.elementor .e-paragraph-base,
	.elementor .e-flexbox-base {
		max-width: 100%;
	}
}

/*
 * /contact/ hero. The atomic wrapper (.e-26faf59) sets `padding: 60px`, which beats the page's own
 * `padding: 0` and squeezes the grid to 223px (the page already adds its own 16px side margins).
 * The H1 is a fixed 68px, so the single word "CONTACT" (330px) did not fit either.
 */
@media (max-width: 767px) {
	.elementor .elementor-element.elementor-element-7f12f11 {
		padding: 0;
	}

	.elementor .elementor-element-7f12f11 h1 {
		font-size: clamp(2.25rem, 12vw, 4.25rem);
	}
}

/*
 * Thank-you pages 10060 (/thank-you/email/) and 18278 (/thank-you/entering/). The title is saved as
 * 50px on desktop but 150px on tablet and 120px on mobile (bigger than desktop) with a fixed 65px
 * line-height, so "Submission" alone is 650px wide. Scoped by page + widget, with a `body` prefix to
 * outrank Elementor's per-page stylesheet regardless of load order.
 */
@media (max-width: 1024px) {
	body .elementor-10060 .elementor-element.elementor-element-787c84f .elementor-heading-title,
	body .elementor-18278 .elementor-element.elementor-element-787c84f .elementor-heading-title {
		font-size: clamp(30px, 8vw, 50px);
		line-height: 1.3;
	}
}

/*
 * /resources/certifications/: "OUR CERTIFICATIONS" is a fixed 52px and the single word
 * "CERTIFICATIONS" (424px) is wider than a 375px screen.
 */
@media (max-width: 767px) {
	.elementor-27929 .elementor-element-467fd5f > .e-heading-base {
		font-size: clamp(1.75rem, 9vw, 3.25rem);
	}
}

/*
 * Text + Image Split stats panel (text_image_split_27703, seen on /about/project-management-team/).
 * Two stat columns leave each stat 80px wide at 375px and 46px at 768px for a 58px number
 * ("14,950" = 166px). Stack them up to 1024px. Kept here, not in angie-components/, because that
 * component's source currently has unreleased edits that would also change desktop sizes.
 */
@media (max-width: 1024px) {
	.elementor-widget-text_image_split_27703 .tis-27703__stats-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

/*
 * /lp__trashed/food-safety-summit/ (page 26699): the h1 sits in a 235px column and its longest word,
 * "CONTAMINATION", needs 308px at 36px.
 */
@media (max-width: 767px) {
	.elementor-26699 .elementor-element-ecf29a1 .elementor-heading-title {
		font-size: clamp(22px, 6.5vw, 36px);
	}
}