/*
 * Header over the hero, and large displays.
 *
 * Two separate problems, both about the site sitting inside a fixed 1320px
 * container that was tuned on a laptop.
 */

/* ==================================================================
 * 1. The header sitting over the hero
 *
 * The header stays in the document flow — it is sticky, not fixed — so the
 * hero is pulled up beneath it by exactly the header's own height and given
 * that height back as padding. Nothing overlaps by guesswork and nothing
 * jumps: --head-h is measured by app.js and updated on resize.
 *
 * Only the front page does this. On an inner page the breadcrumb needs the
 * header's solid bar above it to stay readable.
 * ================================================================== */
.home .cq-head-wrap,
.cq-head-wrap--over {
	background: transparent;
	z-index: 92;
}

/* The utility bar and the nav border would draw a line across the hero. */
.home .cq-head-wrap:not(.is-scrolled) .cq-util { border-bottom-color: rgba(255,255,255,.14); }
.home .cq-head-wrap:not(.is-scrolled) .cq-nav { border-bottom: 0; }

/*
 * A gradient behind the header instead of a solid bar. Without it the logo and
 * the nav sit directly on the photograph and neither survives a light patch —
 * this is the difference between "transparent header" and "unreadable header".
 */
.home .cq-head-wrap::before {
	content: "";
	position: absolute;
	inset-inline: 0;
	inset-block-start: 0;
	height: calc(var(--head-h, 116px) + 70px);
	background: linear-gradient(
		180deg,
		rgba(5,7,10,.86) 0%,
		rgba(5,7,10,.62) 42%,
		rgba(5,7,10,.24) 74%,
		transparent 100%
	);
	pointer-events: none;
	z-index: -1;
	transition: opacity 420ms var(--e-ui);
}
/* Once scrolled the solid bar takes over, so the gradient is redundant. */
.home .cq-head-wrap.is-scrolled::before { opacity: 0; }

/* Pull the hero up under the header and give the space back as padding. */
.home .cq-hero--home,
.home .qb-hh {
	margin-block-start: calc(-1 * var(--head-h, 116px));
	padding-block-start: var(--head-h, 116px);
}

/* The hero has to be tall enough that the copy still clears the header. */
.home .cq-hero--home { min-height: max(620px, 92vh); }
@supports (height: 100dvh) {
	.home .cq-hero--home { min-height: max(620px, 92dvh); }
}

/* ==================================================================
 * 2. Large displays
 *
 * Everything below 1500px is unchanged — those breakpoints were tuned and
 * work. Above it the container grows, the type scale grows with it, and grids
 * gain a column rather than stretching four cards across 2000px.
 * ================================================================== */

@media (min-width: 1500px) {

	:root {
		--maxw: 1480px;
		--gut: clamp(32px, 4vw, 80px);
		--sec-y: clamp(88px, 6.5vw, 132px);
		--fs-base: 16.5px;
	}

	.cq-display { font-size: clamp(52px, 4.4vw, 72px); }
	.cq-h2 { font-size: clamp(34px, 2.9vw, 46px); }
	.cq-sub { font-size: 17px; }
	.cq-lede { font-size: 17.5px; }

	.cq-hero__body { max-width: 66ch; }
	.cq-hero { min-height: max(640px, 76vh); }

	/* A five-column band reads better than four stretched ones. */
	.cq-cards { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
	.cq-v-cards { grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); }
	.cq-v-ghost { grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); }

	.cq-mega__in { grid-template-columns: minmax(240px, var(--mega-aside-w, 24%)) minmax(0, 1fr); }
	.cq-mega__grid { grid-template-columns: repeat(min(var(--mega-cols, 3), 4), minmax(0, 1fr)); }

	.cq-v-car__i,
	.qb-car__item { flex-basis: clamp(300px, 22vw, 380px); }

	.qb-legal__wrap { grid-template-columns: minmax(240px, 300px) minmax(0, 1fr); }
	.cq-formband { grid-template-columns: minmax(0, 1.5fr) minmax(300px, .8fr); }
	.cq-cf7 .wpcf7-form { max-width: 1040px; }
}

/* ==================================================================
 * 3. Very large displays — proportional scaling
 *
 * Growing the container and nudging the type scale stops working past
 * ~1700px: every component (header, cards, buttons, icons, widgets) is sized
 * in px, so the page ends up a small island in the middle of the screen.
 *
 * Instead, from 1700px up the whole page is scaled with `zoom`, so a large
 * display renders exactly the layout a ~1400px laptop gets, only bigger. Each
 * step is roughly its breakpoint / 1400, which keeps the effective width
 * between ~1400 and ~1500px however wide the screen is.
 *
 * Media queries are not affected by zoom, and nothing below 1700px changes.
 *
 * zoom also multiplies vw/vh, so every viewport-unit height is divided by
 * --z to land back on the real viewport. Elementor controls that accept
 * vh/vw do the same through --z-vh / --z-vw (see the widget selectors), and
 * app.js divides --vw by the zoom for the same reason.
 * ================================================================== */
@media (min-width: 1700px) { :root { --z: 1.2; } }
@media (min-width: 1820px) { :root { --z: 1.3; } }
@media (min-width: 1960px) { :root { --z: 1.4; } }
@media (min-width: 2100px) { :root { --z: 1.5; } }
@media (min-width: 2240px) { :root { --z: 1.6; } }
@media (min-width: 2380px) { :root { --z: 1.7; } }
@media (min-width: 2520px) { :root { --z: 1.8; } }
@media (min-width: 2800px) { :root { --z: 2; } }
@media (min-width: 3080px) { :root { --z: 2.2; } }
@media (min-width: 3360px) { :root { --z: 2.4; } }
@media (min-width: 3640px) { :root { --z: 2.6; } }
@media (min-width: 3840px) { :root { --z: 2.75; } }
@media (min-width: 4480px) { :root { --z: 3.2; } }
@media (min-width: 5120px) { :root { --z: 3.65; } }

@media (min-width: 1700px) {

	html { zoom: var(--z); }

	:root {
		--z-vh: var(--z);
		--z-vw: var(--z);
		--maxw: 1320px;
		--gut: 64px;
		--sec-y: 100px;
	}

	/* Heights in viewport units, back to the real viewport. :root raises the
	   specificity over the dvh rules in mobile.css, which loads later. */
	:root .cq-hero { min-height: max(var(--hero-h-min), calc(var(--hero-h) / var(--z))); }
	:root .cq-hero--home { min-height: max(var(--hero-h-min), calc(var(--hero-h-home) / var(--z))); }
	:root .home .cq-hero--home { min-height: max(620px, calc(92vh / var(--z))); }
	:root .qb-hh { min-height: calc(88vh / var(--z)); }
	:root .elementor-section.elementor-section-height-full { height: calc(100vh / var(--z)); }

	@supports (height: 100dvh) {
		:root .home .cq-hero--home { min-height: max(620px, calc(92dvh / var(--z))); }
		:root .qb-hh { min-height: calc(88dvh / var(--z)); }
	}
}

/* A measure cap regardless of container width: a 140-character line is not
   readable however much room there is for it. */
@media (min-width: 1500px) {
	.cq-copy p,
	.cq-prose p,
	.cq-v-two__c p,
	.cq-v-panel__p,
	.qb-legal__t p,
	.cq-acc__in p { max-width: 78ch; }
}

/* Opt-out: restore the solid bar and the normal hero offset. */
.cq-no-heroOver.home .cq-head-wrap { background: var(--void); }
.cq-no-heroOver.home .cq-head-wrap::before { display: none; }
.cq-no-heroOver.home .cq-hero--home,
.cq-no-heroOver.home .qb-hh { margin-block-start: 0; padding-block-start: clamp(60px, 8vw, 120px); }