/* Hero backgrounds and content share the inspector and template width contract. */
@layer emergency-inline-layout {

	.emergency-section--hero {
		--emergency-hero-viewport-width: 100vw;
		--emergency-hero-inline-padding: var(--emergency-hero-block-padding, var(--emergency-section-padding));
		--emergency-hero-content-width: min(var(--emergency-layout-max-width), calc(var(--emergency-hero-viewport-width) - 2 * var(--emergency-hero-inline-padding)));
		box-sizing: border-box;
		padding-inline: var(--emergency-hero-inline-padding) !important;
	}

	:is(.wp-site-blocks, .editor-styles-wrapper) .emergency-section--hero:is(.emergency-hero--full-width, [data-emergency-hero-width="full"]) {
		--emergency-hero-inline-padding: var(--emergency-layout-bounded-inset, calc(0 * var(--emergency-layout-margin)));
		width: var(--emergency-hero-viewport-width) !important;
		max-width: none !important;
		margin-inline: calc(50% - var(--emergency-hero-viewport-width) / 2) !important;
		margin-inline-start: calc(-1 * var(--emergency-hero-inline-offset, calc(var(--emergency-hero-viewport-width) / 2 - 50%))) !important;
	}

	:is(.wp-site-blocks, .editor-styles-wrapper) .emergency-section--hero:is(.emergency-hero--boxed, [data-emergency-hero-width="boxed"]) {
		--emergency-page-inset: 0;
		--emergency-hero-widget-inset: 0;
		--emergency-section-shell-inset: 0;
		width: 100% !important;
		max-width: var(--emergency-layout-max-width) !important;
		margin-inline: auto !important;
	}

	.emergency-section--hero > :is(.wp-block-cover__inner-container, .emergency-section__shell, .emergency-hero__inner),
	.emergency-section--hero > .alignwide:not(.wp-block-image, .wp-block-post-featured-image),
	.emergency-section--hero .emergency-editorial-hero__shell,
	.emergency-section--hero .emergency-section__hero-columns {
		box-sizing: border-box;
		width: min(100%, var(--emergency-layout-max-width)) !important;
		max-width: var(--emergency-layout-max-width) !important;
		margin-inline: auto !important;
		padding-inline: 0 !important;
		min-width: 0;
	}

	:is(.emergency-hero--full-width, [data-emergency-hero-width="full"]) > .alignfull {
		width: 100% !important;
		max-width: none !important;
		margin-inline: 0 !important;
	}

	:is(.emergency-hero--full-width, [data-emergency-hero-width="full"]) .emergency-editorial-hero__shell {
		grid-template-columns: minmax(0, 1fr);
	}

	/* The widget grid owns its content width; its transparent Cover inner stays full. */
	:is(.emergency-hero--full-width, [data-emergency-hero-width="full"]).emergency-hero-widget > .wp-block-cover__inner-container {
		width: 100% !important;
	}

	:is(.emergency-hero--full-width, [data-emergency-hero-width="full"]).emergency-hero-widget .emergency-section__hero-columns {
		grid-template-columns: minmax(0, 1fr) minmax(0, 27.125rem);
	}

	:is(.emergency-hero--full-width, [data-emergency-hero-width="full"]).emergency-hero-widget--contact .emergency-section__hero-columns {
		grid-template-columns: minmax(0, 1fr) minmax(0, 29.75rem);
	}

	:is(.emergency-hero--full-width, [data-emergency-hero-width="full"]) > :is(.wp-block-heading, .wp-block-post-title, p) {
		width: var(--emergency-hero-content-width);
		margin-inline: auto !important;
	}

	:is(.emergency-hero--full-width, [data-emergency-hero-width="full"]) [data-emergency-hero-media] {
		width: var(--emergency-hero-viewport-width) !important;
		max-width: none !important;
		margin-inline: calc(50% - var(--emergency-hero-viewport-width) / 2) !important;
		margin-inline-start: calc(-1 * var(--emergency-hero-inline-offset, calc(var(--emergency-hero-viewport-width) / 2 - 50%))) !important;
	}

	.editor-styles-wrapper .emergency-editorial-hero__preview > .emergency-section--hero {
		padding-inline: 0 !important;
		width: 100% !important;
		margin-inline: 0 !important;
	}
}

.emergency-section--hero.emergency-hero--contain {
	--emergency-hero-image-fit: contain;
	background-size: contain !important;
	background-repeat: no-repeat;
}

.emergency-hero--contain.wp-block-cover,
.emergency-hero--contain.wp-block-emergency-hero:not(.emergency-editorial-hero, .emergency-hero--profile) {
	background-color: var(--wp--preset--color--black);
}

.emergency-section--hero:is(.emergency-hero--full-width, .emergency-hero--boxed, [data-emergency-hero-width]):not(.emergency-hero--contain) {
	--emergency-hero-image-fit: cover;
	background-size: cover !important;
}

.emergency-section--hero:is(.emergency-hero--contain, .emergency-hero--full-width, .emergency-hero--boxed, [data-emergency-hero-width]) :is(.wp-block-cover__image-background, .wp-block-cover__video-background, [data-emergency-hero-media] img, .emergency-gallery-marquee__item img) {
	object-fit: var(--emergency-hero-image-fit, cover) !important;
}

/* A contextual block's outer canvas wrapper owns the viewport extension. */
:is(.emergency-hero--full-width, [data-emergency-hero-width="full"]) .emergency-editorial-hero__preview :is(.emergency-hero--full-width, [data-emergency-hero-width="full"]) {
	width: 100% !important;
	margin-inline: 0 !important;
}

:is(.emergency-section-wrapper, .emergency-section-composition, .emergency-page-composition):has(:is(.emergency-hero--full-width, [data-emergency-hero-width="full"])) {
	overflow: visible;
}

@layer emergency-section-rhythm {

	.emergency-section--hero.emergency-section--space-after {
		margin-block-end: var(--emergency-section-padding) !important;
	}
}

@media (max-width: 63.999rem) {

	.emergency-section--hero {
		--emergency-section-padding: var(--wp--preset--spacing--section-mobile, 4rem);
		--emergency-section-heading-gap: var(--wp--preset--spacing--heading-mobile, 2rem);
	}
}

@media (max-width: 782px) {

	/* Boxed mobile Heroes leave less room for the existing donation tabs. */
	.emergency-hero-widget .emergency-donation__frequency:not(.becrm-frequencies) button {
		min-width: 0;
		padding-inline: var(--emergency-layout-mobile-gutter);
	}

	:is(.emergency-hero--full-width, [data-emergency-hero-width="full"]).emergency-hero-widget .emergency-section__hero-columns {
		grid-template-columns: minmax(0, 1fr);
	}
}