/**
 * Browser zoom and text reflow safeguards.
 *
 * This layer contains structural fallbacks only. Component styling remains in
 * calm.css, relaunch-pages.css and edd-flow.css. The rules below prevent a
 * zoomed viewport from inheriting rigid desktop dimensions without hiding
 * overflow or scaling the interface artificially.
 */

:where(
	.e-header__inner,
	.e-header__brand,
	.e-nameplate,
	.e-nameplate__copy,
	.e-header__actions,
	.e-hero > *,
	.r-hero > *,
	.r-archive-hero > *,
	.r-simple-hero > *,
	.r-section > *,
	.r-project-report-card > *,
	.r-contact-layout > *,
	.r-donation > *,
	.r-edd-layout > *
) {
	min-width: 0;
}

:where(main, .e-footer) :where(img, svg, video, canvas, iframe) {
	max-width: 100%;
}

:where(main, .e-footer) :where(input, select, textarea, button) {
	max-width: 100%;
}

/*
 * The navigation changes to its compact variant at 1240 CSS pixels. That
 * shell breakpoint must not also collapse the homepage hero: at 150% browser
 * zoom a wide desktop window still provides enough inline room for the two
 * hero columns. Keeping them here prevents the copy from losing its gutter
 * and the artwork from expanding to the full zoomed viewport. The existing
 * <= 1020px component rules remain the canonical one-column fallback.
 */
@media (min-width: 63.8125rem) and (max-width: 77.5rem) {
	.isla-concept--strecke-e .e-hero {
		grid-template-columns: minmax(32.5rem, .96fr) minmax(0, 1.04fr);
	}

	.isla-concept--strecke-e .e-hero__copy {
		padding: 3.375rem clamp(1.875rem, 3vw, 3.25rem) 3.375rem clamp(3rem, 6vw, 4.5rem);
	}
}

/*
 * At the following real browser zoom steps the homepage hero changes to its
 * one-column layout. Without an inline-size cap, that switch makes the artwork
 * grow from roughly 615 to 820 CSS pixels even though the viewport has become
 * smaller. Keep the readable copy width, but preserve the artwork's stable
 * desktop-zoom size and centre it. Narrow mobile viewports remain fluid.
 */
@media (max-width: 63.75rem) {
	.isla-concept--strecke-e .e-hero__art {
		width: min(100%, 38rem);
		margin-inline: auto;
	}
}

@media (max-width: 30rem) {
	/*
	 * At 300–480 CSS pixels (roughly 267–400% desktop zoom), the archive title
	 * needs a slightly smaller upper bound. Breaking anywhere produced orphaned
	 * final letters such as "Projektbericht / e".
	 */
	.r-archive-hero h1 {
		font-size: clamp(2.25rem, 12vw, 2.625rem);
		overflow-wrap: normal;
		word-break: normal;
		hyphens: auto;
	}

	/*
	 * A fixed minimum height plus 16:9 aspect ratio forces the media column
	 * wider than its card at high zoom. Let the available inline size determine
	 * the corresponding height instead.
	 */
	.r-project-report-card__media {
		width: 100%;
		min-width: 0;
		min-height: 0;
		aspect-ratio: 16 / 9;
	}

	.r-project-report-card__image {
		width: 100%;
		height: 100%;
	}
}

@media (max-width: 22rem) {
	/* Long translated labels and account actions must wrap inside their cards. */
	:where(.r-button, .e-button, .r-pill, .r-meta-pill, .edd-submit) {
		white-space: normal;
		text-align: center;
		overflow-wrap: break-word;
	}
}