/* Large and 4K screens (viewport 2200px and wider).
 *
 * The site is composed at 1920px: a 1140px content shell, full-bleed media,
 * and type that tops out at 56px. On a 3840px viewport that composition
 * shrinks to a strip in the middle of the screen. From 2200px each page
 * block is zoomed so it renders as it does at about 1920px, only larger:
 * the shell, its type, its spacing and its fixed heights all scale together.
 *
 * --cardinal-zoom is the single source for the steps; the header
 * (cardinal-site-nav.css) and the homepage hero copy (cardinal-home-hero.css)
 * use it too.
 *
 * Inside a zoomed element, vw/vh/svh/dvh are multiplied by the zoom as well,
 * and scripts measure the viewport in unzoomed pixels. So:
 *   - blocks whose size is driven by the viewport through script stay
 *     unzoomed (homepage hero, Scrollsequence, GSAP pins, the Mapbox map);
 *   - viewport-unit sizes inside zoomed blocks are divided back below;
 *   - Microthemer's own large-screen rules (written for the unzoomed page)
 *     are reset to their 1920px values, because a zoomed block is laid out
 *     at about 1920px wide while media queries still see the real viewport.
 * A viewport-unit height added in Elementor later needs an entry here.
 */

@media (min-width: 2200px) {
	:root {
		--cardinal-zoom: 1.3;
	}
}

@media (min-width: 2800px) {
	:root {
		--cardinal-zoom: 1.6;
	}
}

@media (min-width: 3400px) {
	:root {
		--cardinal-zoom: 2;
	}
}

@media (min-width: 2200px) {
	/* Page blocks: the outermost Elementor section or container (Elementor
	 * also marks containers inside embedded templates as e-parent, so
	 * anything already inside a block is skipped), theme-rendered content
	 * beside the Elementor document, and the search results shell. */
	main.site-main :is(.elementor-top-section, .e-con.e-parent):not(:is(.elementor-top-section, .e-con) *):not(:has(.hero-video-html-wrap, .scrollsequence-wrap, .section-pin, .pin-wrap, .mapboxgl-map, #map)),
	:is(main.site-main, main.site-main > .page-content) > :not(.elementor, .page-content, :has(.elementor)),
	body > .search-result-data > .elementor-container,
	.elementor-location-footer .elementor-top-section {
		zoom: var(--cardinal-zoom);
	}

	/* Script-driven blocks: the canvas, pin or map stays unzoomed so its
	 * script measures what it draws; the shell widens to the zoomed width
	 * and the text laid over it scales. */
	html body main.site-main .elementor-section-boxed:has(.scrollsequence-wrap) > .elementor-container {
		max-width: calc(1140px * var(--cardinal-zoom));
	}

	html body .scrollsequence-page > *,
	html body .section-pin .pin-wrap > .section,
	html body #cardinal-locations-panel,
	html body .location_type_main {
		zoom: var(--cardinal-zoom);
	}

	/* The list scrolls inside the panel; the same class also sits in the
	 * unzoomed map column, so the script leaves this rule alone. */
	html body #cardinal-locations-panel .location_wrap {
		height: calc(81vh / var(--cardinal-zoom) - 250px) !important;
	}

	/* History's inline large-screen rules, reset to their 1920px values.
	 * The pin is unzoomed, so its vh heights are true; the section after
	 * it is zoomed, so its overlap is divided. */
	html body .section-pin {
		height: 200vh !important;
	}

	html body .section-pin .pin-wrap {
		height: 100vh !important;
	}

	html body .section-pin .inner-section {
		height: 540px;
		padding: 50px;
		width: 300px;
	}

	html body .guiding-principles {
		margin-top: calc(-100vh / var(--cardinal-zoom)) !important;
	}

	/* Elementor's stretched sections get the window width inline, in
	 * viewport pixels; zoomed, that would be twice the window. */
	html body .elementor-section.elementor-section-stretched:not(:has(.hero-video-html-wrap, .scrollsequence-wrap, .section-pin, .pin-wrap, .mapboxgl-map, #map)) {
		width: calc(100vw / var(--cardinal-zoom)) !important;
	}

	/* Viewport-unit sizes inside zoomed blocks. js/cardinal-large-screen.js
	 * divides these everywhere at runtime; the rules here are the ones that
	 * must hold before (or without) the script. ------------------------ */
	html body .elementor-section.elementor-section-height-full {
		height: calc(100vh / var(--cardinal-zoom));
	}

	html body .eael-img-accordion {
		height: calc(50vh / var(--cardinal-zoom));
	}

	/* History hero; the products hero sizes itself below. These sections
	 * carry no class of their own for the 90vh minimum. */
	html body .elementor-14684 :is(.elementor-element-1d7fe34, .elementor-element-0c409c6) > .elementor-container,
	html body .elementor-34 .elementor-element-6f82cbf > .elementor-container {
		min-height: calc(90vh / var(--cardinal-zoom));
	}

	html body .innerPage_banner .elementor-background-overlay {
		height: calc(100vh / var(--cardinal-zoom)) !important;
	}

	html body .custom_modal .modal_content {
		height: calc(100vh / var(--cardinal-zoom)) !important;
	}

	/* The header is zoomed by the same factor, so its 85px stays 85px here. */
	html body .cardinal-products-hero {
		--cardinal-products-hero-height: min(
			calc(84svh / var(--cardinal-zoom)),
			calc(100svh / var(--cardinal-zoom) - var(--cardinal-products-hero-header, 85px) - 4.5rem)
		);
	}

	/* The products jump bar sticks under the header, which the script
	 * measures in viewport pixels. */
	html body .cardinal-products .cardinal-products__jump {
		top: calc(var(--cardinal-products-header) / var(--cardinal-zoom));
	}

	html body .cardinal-products .cardinal-products__family {
		scroll-margin-top: calc(var(--cardinal-products-header) / var(--cardinal-zoom) + var(--cardinal-products-jump));
	}

	/* The Newsroom breaks out of its column to the viewport width. */
	html body .cardinal-newsroom {
		margin-left: calc(50% - 50vw / var(--cardinal-zoom));
		max-width: calc(100vw / var(--cardinal-zoom));
		width: calc(100vw / var(--cardinal-zoom));
	}

	html body .cvl-dialog {
		max-height: calc(100dvh / var(--cardinal-zoom) - 2rem);
		width: min(72rem, calc(100vw / var(--cardinal-zoom) - 2 * var(--cardinal-gutter)));
	}

	html body .cvl-dialog__player video {
		max-height: min(40.5rem, calc(58dvh / var(--cardinal-zoom)));
	}

	/* Microthemer large-screen rules, reset to their 1920px values ------ */
	html body .black-header-wrap .elementor-column-gap-default {
		max-width: 1140px !important;
	}

	html body.single-glossary .page-content,
	html body .glossary_post_list .eael-post-grid-container {
		width: 50% !important;
	}

	html body .divert-info-block {
		margin: 10rem 0 0 0 !important;
	}

	html body .compliance-block {
		padding: 4rem 0 20rem !important;
	}

	html body .divert-eng-endur {
		padding: 0 8px !important;
	}

	html body .clare-control-main {
		padding: 42rem 0 4rem !important;
	}

	html body .clare-control-main > .elementor-container.elementor-column-gap-default {
		gap: 80px !important;
	}

	html body .solar-control-type.low-cooling {
		right: 0 !important;
	}

	html body .sun-turn {
		padding: 8rem 0 54rem !important;
	}

	html body .energy-comfort-img .elementor-container.elementor-column-gap-default {
		min-height: 750px !important;
	}

	html body .energy-comfort-main {
		background-image: linear-gradient(180deg, #cdcdc000 0%, #cecabb 17%) !important;
		margin-top: -18.5rem !important;
	}

	html body .feature-type-box.application-use-video-wrap .feature-type-center {
		height: calc(53vh / var(--cardinal-zoom)) !important;
		width: 900px !important;
	}

	html body .exceptional-fade {
		padding: 15em 0 6em !important;
	}

	html body .exceptional-fade::after {
		height: 80% !important;
		width: 80% !important;
	}

	html body .shgc-value {
		left: calc(50% - 270px) !important;
		top: calc(50% + 140px) !important;
	}

	html body .trap-heat-indoors {
		margin: -15% 0 0 !important;
	}

	html body .trap-heat-indoors .loe-i89-first-img img,
	html body .thermal-loss img {
		width: auto !important;
	}

	html body .neutral-img {
		margin-top: -28em !important;
	}

	html body .neat452_coating {
		z-index: auto !important;
	}

	html body .dataTables_scrollBody {
		margin: -1px 0 0 !important;
	}

	html body .ceramicPrinting_wrap {
		min-height: 0 !important;
	}

	html body .ceramicPrinting_wrap .elementor-container {
		position: static !important;
	}

	html body .ceramicPrinting_wrap .elementor-background-video-container .elementor-background-video-hosted {
		height: auto !important;
		left: 70% !important;
		top: 50% !important;
		width: 58% !important;
	}

	html body .milano_photo {
		margin-top: 60em !important;
	}

	html body .perfect_cold .elementor-background-overlay {
		background-size: auto !important;
	}
}