/**
 * Responsive density layer.
 *
 * Width alone does not identify a laptop: browser zoom, OS scaling and window
 * chrome all change the effective CSS viewport. Keep type and controls at the
 * established accessible sizes, then compact vertical geometry when a desktop
 * viewport is short. Loaded last on the public site and in Gutenberg.
 */

/* Shared page heroes keep their desktop design height unless the available
 * viewport height is smaller. The banner variant deliberately remains content
 * sized. `vh` is the fallback for browsers without small viewport units. */
@media (min-width: 1024px) {
	:where(.roarr-site-main, .editor-styles-wrapper)
		.page-hero:not(.page-hero--banner) {
		min-height: min(
			clamp(600px, 38.8vw, 640px),
			clamp(480px, 65vh, 640px)
		);
		min-height: min(
			clamp(600px, 38.8vw, 640px),
			clamp(480px, 65svh, 640px)
		);
	}

	/* Keep the home events composition compact without squeezing the marketing
	 * artwork into a different shape at each viewport height. The preceding rip
	 * overlaps 88px into the band and the following skyline
	 * overlaps all but 8px of its height. Keep 48px below the top brush so the
	 * composition sits lower, and 8px above the skyline at the bottom. */
	:where(.roarr-site-main, .editor-styles-wrapper) .roarr-event-band {
		padding-top: calc(var(--space-112) + var(--space-24));
		padding-bottom: var(--space-32);
	}

	:where(.roarr-site-main, .editor-styles-wrapper)
		.roarr-event-band.roarr-section--break-after-skyline {
		padding-bottom: var(--skyline-h);
	}

	:where(.roarr-site-main, .editor-styles-wrapper) .roarr-event-carousel {
		--ev-gap: var(--space-12);
		max-width: min(
			calc(var(--container-width) - var(--space-96) * 2),
			clamp(800px, 100svh, 1048px)
		);
	}

	:where(.roarr-site-main, .editor-styles-wrapper) .roarr-event-card--feature {
		height: auto;
		aspect-ratio: 2 / 1;
	}

	:where(.roarr-site-main, .editor-styles-wrapper)
		.roarr-event-carousel__track > .roarr-event-card {
		height: auto;
		aspect-ratio: 2.2 / 1;
	}

	:where(.roarr-site-main, .editor-styles-wrapper)
		.roarr-event-carousel__controls {
		margin-top: var(--space-12);
	}
}

/* Compact desktop/laptop density. This deliberately leaves body copy, UI
 * text, fields and buttons untouched; only section rhythm and decorative art
 * become shallower. Full-height home heroes also remain full-height. */
@media (min-width: 1024px) and (max-height: 900px) {
	:where(.roarr-site-main, .editor-styles-wrapper) {
		--section-padding-desktop: clamp(80px, 12vh, 96px);
		--section-padding-desktop: clamp(80px, 12svh, 96px);
		--canopy-h: var(--space-112);
		--skyline-h: calc(var(--space-112) + var(--space-32));
		--leaf-h: calc(var(--space-112) + var(--space-48));
	}

	:where(.roarr-site-main, .editor-styles-wrapper)
		.roarr-cta-band__panel {
		padding-top: var(--space-80);
	}

	:where(.roarr-site-main, .editor-styles-wrapper)
		.roarr-cta-band .site-footer__newsletter {
		padding-block: var(--space-64);
	}

	:where(.roarr-site-main, .editor-styles-wrapper)
		.roarr-cta-band .site-footer__newsletter-inner {
		padding-block: var(--space-32);
	}

	:where(.roarr-site-main, .editor-styles-wrapper)
		.site-footer__newsletter-friends {
		width: min(100%, 480px);
		max-height: clamp(128px, 20svh, 160px);
		height: auto;
		object-fit: contain;
		justify-self: center;
	}
}

/* A browser on a 1080p laptop commonly has only 750-950 CSS pixels after
 * window chrome and display scaling. Keep the home hero full-screen, but
 * treat its title, supporting line and CTAs as one compact anchored unit so
 * they do not mask the video or drift into the lifted shortcut bar. */
@media (min-width: 1024px) and (max-height: 1024px) {
	:where(.roarr-site-main, .editor-styles-wrapper)
		.roarr-home-hero__content {
		gap: var(--space-12);
	}

	:where(.roarr-site-main, .editor-styles-wrapper)
		.roarr-home-hero__title {
		font-size: clamp(40px, 3.25vw, 52px);
		line-height: 1;
	}

	:where(.roarr-site-main, .editor-styles-wrapper)
		.roarr-home-hero__copy {
		font-size: var(--text-base);
		line-height: var(--lh-normal);
	}

	/* At exactly 1024px the shortcut bar is still 2x2 and therefore taller. */
	:where(.roarr-site-main, .editor-styles-wrapper)
		.roarr-home-hero--info-bar {
		padding-bottom: calc(var(--space-128) + var(--space-96));
	}
}

@media (min-width: 1025px) and (max-height: 1024px) {
	:where(.roarr-site-main, .editor-styles-wrapper)
		.roarr-home-hero--info-bar {
		padding-bottom: calc(var(--space-128) + var(--space-48));
	}
}

/* The base media-hero split gives artwork roughly two thirds of the row.
 * That proportion works on a wide desktop, but at laptop widths it leaves a
 * narrow copy lane and lets portrait/map artwork grow beyond one viewport.
 * Ease toward a balanced composition until the full desktop canvas exists. */
@media (min-width: 1024px) and (max-width: 1439px),
	(min-width: 1024px) and (max-height: 900px) {
	:is(.roarr-site-main, .editor-styles-wrapper)
		.roarr-split:is(.roarr-split--media-hero, .is-style-roarr-split-media-hero),
	:is(body.home .roarr-site-main, .editor-styles-wrapper)
		.roarr-section
		> .roarr-split.is-style-roarr-split-media-hero:has(.roarr-glance-list) {
		grid-template-columns: minmax(340px, 1fr) minmax(0, 1.35fr);
		column-gap: clamp(var(--space-48), 5vw, var(--space-64));
	}
}

/* Four info-bar cells are too narrow at tablet widths and previously relied
 * on a two-line clamp, hiding details such as ride limits. Use the component's
 * intended 2x2 tablet composition and allow every value to size naturally. */
@media (min-width: 641px) and (max-width: 1024px) {
	:where(.roarr-site-main, .editor-styles-wrapper)
		.info-bar:not(.info-bar--home) {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	:where(.roarr-site-main, .editor-styles-wrapper)
		.info-bar:not(.info-bar--home)
		:is(.info-bar__value, .info-bar__sub) {
		display: block;
		overflow: visible;
		-webkit-line-clamp: unset;
		white-space: normal;
	}
}

/* Some saved header CTA labels are title case and rely on text-transform.
 * Museo intermittently drops the transformed lowercase "oo" glyphs in
 * Chromium (rendering "Book" as "B  K"). Use the platform UI face for this
 * compact control so the label remains legible at every mobile/tablet size. */
@media (max-width: 1024px) {
	.mobile-header-cta {
		font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	}
}