/* ---------- closing "Become a Partner" banners: one shared layout ----------
 * inc/cta-banners.php tags every closing banner `.mcdp-cta-banner` and adds a
 * shade layer (plus art-directed images while the stock photo is in use).
 * Every banner: the photo fills the banner, the content is centered like the
 * home page, and the height follows --mcdp-photo-cta-min-height (desktop),
 * 616px (tablet), and 506px (phone).
 *
 * :not(#mcdp-cta-banner) adds ID-level weight so these rules replace the older
 * per-page banner rules without editing each one. Per-banner photo crops live
 * at the end of this file.
 */
.mcdp-cta-banner:not(#mcdp-cta-banner) {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	height: var(--mcdp-photo-cta-min-height);
	min-height: var(--mcdp-photo-cta-min-height);
	--mcdp-inline-min-height: var(--mcdp-photo-cta-min-height);
	padding: 48px var(--wp--preset--spacing--medium, 24px) !important;
	overflow: hidden;
	background-color: #0a1826;
	text-align: center;
}
@media (max-width: 1023px) {
	.mcdp-cta-banner:not(#mcdp-cta-banner) {
		height: 616px;
		min-height: 616px !important;
	}
}
@media (max-width: 599px) {
	.mcdp-cta-banner:not(#mcdp-cta-banner) {
		height: 506px;
		min-height: 506px !important;
		padding: 40px 20px !important;
	}
}
/* Art-directed banners never show the older CSS background photo. */
.mcdp-cta-banner.has-banner-art:not(#mcdp-cta-banner) {
	background-image: none;
}

/* Media: the new picture, or an editor's own image, fills the banner. */
.mcdp-cta-banner:not(#mcdp-cta-banner) > .mcdp-cta-banner__media,
.mcdp-cta-banner:not(#mcdp-cta-banner) > .mcdp-cta-banner__media > img,
.mcdp-cta-banner:not(#mcdp-cta-banner) > .wp-block-cover__image-background,
.mcdp-cta-banner:not(#mcdp-cta-banner) > picture > img,
.mcdp-cta-banner:not(#mcdp-cta-banner) > img[class*="-contact__photo"] {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0;
	object-fit: cover;
	object-position: var(--mcdp-banner-position, center);
	transform: none;
}
.mcdp-cta-banner:not(#mcdp-cta-banner) > .mcdp-cta-banner__media {
	display: block;
}
.mcdp-cta-banner:not(#mcdp-cta-banner) > picture:not(.mcdp-cta-banner__media) {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 0;
}

/* One shade for every banner, replacing the per-page overlays, vignettes,
 * and gradients. Slightly deeper behind the centered text. */
.mcdp-cta-banner:not(#mcdp-cta-banner) > .wp-block-cover__background,
.mcdp-cta-banner:not(#mcdp-cta-banner) > [class*="-contact__overlay"],
.mcdp-cta-banner:not(#mcdp-cta-banner) > [class*="-contact__vignette"] {
	display: none;
}
.mcdp-cta-banner:not(#mcdp-cta-banner)::before,
.mcdp-cta-banner:not(#mcdp-cta-banner)::after {
	display: none;
}
.mcdp-cta-banner:not(#mcdp-cta-banner) > .mcdp-cta-banner__shade {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 1;
	pointer-events: none;
	background:
		radial-gradient(ellipse 60% 55% at 50% 52%, rgba(10, 24, 38, 0.42) 0%, rgba(10, 24, 38, 0) 100%),
		linear-gradient(180deg, rgba(10, 24, 38, 0.46) 0%, rgba(10, 24, 38, 0.54) 100%);
}

/* Content: centered in the banner at every width. */
.mcdp-cta-banner:not(#mcdp-cta-banner) > .wp-block-cover__inner-container,
.mcdp-cta-banner:not(#mcdp-cta-banner) > [class*="-contact__content"] {
	position: relative;
	top: auto;
	right: auto;
	bottom: auto;
	left: auto;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	max-width: 760px;
	margin: 0 auto;
	padding: 0;
	text-align: center;
}
.mcdp-cta-banner:not(#mcdp-cta-banner) > .wp-block-cover__inner-container > *,
.mcdp-cta-banner:not(#mcdp-cta-banner) > [class*="-contact__content"] > * {
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}
.mcdp-cta-banner:not(#mcdp-cta-banner) .wp-block-buttons {
	justify-content: center;
}

/* ---------- photo crop ----------
 * inc/cta-banners.php writes each image's shape and focus onto the banner
 * (from MCDP Content -> Banner images), per breakpoint: --mcdp-art-ratio-*
 * (height / width), --mcdp-face-top-* / --mcdp-face-bottom-* (the subject,
 * usually the heads, as fractions of the image height), and --mcdp-face-x-*.
 * The crop keeps the subject in frame at every screen width and centers it in
 * the band above the text when the photo has room. A focus at the very top
 * (subject 0-0) simply anchors the photo to its top edge.
 */
.mcdp-cta-banner[data-mcdp-banner] {
	--mcdp-art-ratio: var(--mcdp-art-ratio-d, 0.5625);
	--mcdp-face-top: var(--mcdp-face-top-d, 0.5);
	--mcdp-face-bottom: var(--mcdp-face-bottom-d, 0.5);
	--mcdp-face-x: var(--mcdp-face-x-d, 50%);
	--mcdp-banner-height: var(--mcdp-photo-cta-min-height);
	/* Rendered image height while the photo is scaled to the banner width. */
	--mcdp-art-height: calc(100vw * var(--mcdp-art-ratio));
	/* Ideal: subject centered in the band above the text (top 30%). */
	--mcdp-face-shift-ideal: calc(var(--mcdp-art-height) * (var(--mcdp-face-top) + var(--mcdp-face-bottom)) / 2 - var(--mcdp-banner-height) * 0.15);
	/* Never raise the subject out of the top, or pull the photo off its bottom edge... */
	--mcdp-face-shift-max: min(calc(var(--mcdp-art-height) * var(--mcdp-face-top) - 12px), calc(var(--mcdp-art-height) - var(--mcdp-banner-height)));
	/* ...and never leave the subject below the banner. */
	--mcdp-face-shift-min: max(0px, calc(var(--mcdp-art-height) * var(--mcdp-face-bottom) - var(--mcdp-banner-height) + 12px));
	--mcdp-face-shift: max(var(--mcdp-face-shift-min), min(var(--mcdp-face-shift-ideal), var(--mcdp-face-shift-max)));
	--mcdp-banner-position: var(--mcdp-face-x) calc(-1 * var(--mcdp-face-shift));
}
@media (max-width: 1023px) {
	.mcdp-cta-banner[data-mcdp-banner] {
		--mcdp-art-ratio: var(--mcdp-art-ratio-t, 0.8333);
		--mcdp-face-top: var(--mcdp-face-top-t, 0.5);
		--mcdp-face-bottom: var(--mcdp-face-bottom-t, 0.5);
		--mcdp-face-x: var(--mcdp-face-x-t, 50%);
		--mcdp-banner-height: 616px;
	}
}
@media (max-width: 599px) {
	.mcdp-cta-banner[data-mcdp-banner] {
		--mcdp-art-ratio: var(--mcdp-art-ratio-m, 1.2267);
		--mcdp-face-top: var(--mcdp-face-top-m, 0.5);
		--mcdp-face-bottom: var(--mcdp-face-bottom-m, 0.5);
		--mcdp-face-x: var(--mcdp-face-x-m, 50%);
		--mcdp-banner-height: 506px;
	}
}

/* Home's skyline has a message on the billboard. Keep the copy above it,
 * with more of the photograph in view instead of hiding it behind the CTA. */
.mcdp-cta-banner[data-mcdp-banner="home"]:not(#mcdp-cta-banner) {
	--mcdp-banner-height: clamp(680px, 50vw, 800px);
	height: var(--mcdp-banner-height);
	min-height: var(--mcdp-banner-height) !important;
	justify-content: flex-start;
	padding-top: 64px !important;
	background-color: #070a0e;
}
.mcdp-cta-banner[data-mcdp-banner="home"]:not(#mcdp-cta-banner) > .mcdp-cta-banner__media > img {
	object-position: center top;
}
@media (min-width: 600px) and (max-width: 1023px) {
	.mcdp-cta-banner[data-mcdp-banner="home"]:not(#mcdp-cta-banner) {
		--mcdp-banner-height: 680px;
	}
}
@media (max-width: 599px) {
	.mcdp-cta-banner[data-mcdp-banner="home"]:not(#mcdp-cta-banner) {
		--mcdp-banner-height: 650px;
		padding-top: 40px !important;
	}
	.mcdp-cta-banner[data-mcdp-banner="home"]:not(#mcdp-cta-banner) > .mcdp-cta-banner__media > img {
		top: auto;
		height: auto;
		object-position: center;
	}
}