/*
 * Parallax Banner block (template-parts/blocks/section_parallax-banner.php).
 * Loaded by abefactors_acf_block_enqueue_assets() only on pages that contain the block (and in the editor).
 * Script: js/blocks_js/block_parallax-banner.js (sets --abe-parallax-y while the block is on screen).
 *
 * Design (Figma "Homel" 2012:4871): full-width photo, 1728 x 764 at 1728px, no space above or below.
 */

.section_parallax_banner {
	--abe-parallax-y: 0px;
	--abe-parallax-range: 0.12; /* Movement: share of the block height the image can move each way */
	position: relative;
	display: grid;
	min-height: clamp(280px, 44.2vw, 1000px); /* Height "As in the design": 764 / 1728, keeps growing on wide screens so the photo is cropped as in the design */
	margin-top: 0;
	margin-bottom: 0;
	overflow: hidden;
	background-color: var(--wp--preset--color--secondary); /* shows while the image loads */
}

/* Block Settings > Height: part of the screen height (svh: the small viewport, so mobile browser bars
 * do not cut the block). A little smaller on phones. The block still grows when its text needs more room. */
.section_parallax_banner.height-small { min-height: 40vh; min-height: 40svh; }
.section_parallax_banner.height-medium { min-height: 60vh; min-height: 60svh; }
.section_parallax_banner.height-large { min-height: 80vh; min-height: 80svh; }
.section_parallax_banner.height-full { min-height: 100vh; min-height: 100svh; }

@media screen and (max-width: 767px) {
	.section_parallax_banner.height-small { min-height: 30vh; min-height: 30svh; }
	.section_parallax_banner.height-medium { min-height: 45vh; min-height: 45svh; }
	.section_parallax_banner.height-large { min-height: 60vh; min-height: 60svh; }
	.section_parallax_banner.height-full { min-height: 80vh; min-height: 80svh; }
}

/* Block Settings > Movement */
.section_parallax_banner.movement-subtle { --abe-parallax-range: 0.06; }
.section_parallax_banner.movement-strong { --abe-parallax-range: 0.2; }
.section_parallax_banner.movement-none { --abe-parallax-range: 0; }

/* ------------------------------------------------------------------
 * Photo
 * The image is taller than the block by the movement range at the top and at the bottom,
 * so it can move without showing an edge (js/blocks_js/block_parallax-banner.js uses the same range).
 * ------------------------------------------------------------------ */
.parallax_banner_media {
	position: absolute;
	inset: calc(-100% * var(--abe-parallax-range)) 0;
	pointer-events: none;
}

.parallax_banner_img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: center;
}

[data-parallax-banner] .parallax_banner_img {
	transform: translate3d(0, var(--abe-parallax-y), 0);
	will-change: transform;
}

/* Settings > Image Focus */
.parallax_banner_img.focus-top { object-position: center top; }
.parallax_banner_img.focus-bottom { object-position: center bottom; }
.parallax_banner_img.focus-left { object-position: left center; }
.parallax_banner_img.focus-right { object-position: right center; }

/* ------------------------------------------------------------------
 * Corner Shape (Block Settings): the yellow shape from the About photo.
 * At 1728px it is 556 x 433px in the bottom corner of the 764px photo (the band is 188px wide). It is sized
 * from the block height (433 / 764 = 56.7%), so it keeps the design's proportion on wide screens, where the
 * block stops growing in height. It does not move with the photo. Decorative.
 * ------------------------------------------------------------------ */
.parallax_banner_shape {
	position: absolute;
	bottom: 0;
	z-index: 1;
	height: 56.7%;
	width: auto;
	max-width: 45%;
	aspect-ratio: 556 / 433;
	fill: var(--wp--preset--color--primary);
	pointer-events: none;
}

.parallax_banner_shape.shape-bottom-right {
	right: 0;
}

.parallax_banner_shape.shape-bottom-left {
	left: 0;
	transform: scaleX(-1);
}

/* With text, the shape goes under the dark overlay so white text on top of it keeps its contrast
 * (WCAG 1.4.3); without text (as on the About page) it stays bright yellow. */
.section_parallax_banner.has_text .parallax_banner_shape {
	z-index: 0;
}

.section_parallax_banner.has_text::before {
	z-index: 1;
}

.section_parallax_banner .parallax_banner_content {
	z-index: 2;
}

/* ------------------------------------------------------------------
 * Text on the photo (only when Section Head fields are filled)
 * ------------------------------------------------------------------ */
.section_parallax_banner.has_text::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background-color: var(--wp--preset--color--secondary);
	opacity: 0.6;
	pointer-events: none; /* decorative */
}

.section_parallax_banner.overlay-50::before { opacity: 0.5; }

/* Text and the corner shape together: at least 60%, so white text over the dimmed yellow stays at 4.98:1. */
.section_parallax_banner.overlay-50:has(.parallax_banner_shape)::before { opacity: 0.6; }
.section_parallax_banner.overlay-70::before { opacity: 0.7; }
.section_parallax_banner.overlay-80::before { opacity: 0.8; }

.parallax_banner_content {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	padding: clamp(48px, 5.8vw, 100px) 0;
	color: var(--wp--preset--color--white);
}

.parallax_banner_text {
	max-width: 760px;
}

.text-align-center .parallax_banner_text {
	margin-inline: auto;
}

.text-align-right .parallax_banner_text {
	margin-left: auto;
}

.parallax_banner_text .section_title_above,
.parallax_banner_text .parallax_banner_title,
.parallax_banner_text .parallax_banner_description {
	color: inherit;
}

.parallax_banner_text .section_title_above {
	margin: 0 0 12px;
}

.parallax_banner_title {
	margin: 0;
	font-weight: 700;
	letter-spacing: 0;
}

/* Default size; a size chosen in "Title Font Size" (.fontsize-*) is used instead. */
.parallax_banner_title:not([class*="fontsize-"]) {
	font-size: var(--wp--preset--font-size--large-60);
	line-height: 1.17;
}

.parallax_banner_description {
	margin-top: 20px;
}

.parallax_banner_description:not([class*="fontsize-"]) {
	font-size: var(--wp--preset--font-size--small-20);
	line-height: 1.5;
}

.parallax_banner_description p {
	margin: 0 0 15px;
}

.parallax_banner_description > :last-child {
	margin-bottom: 0;
}

.parallax_banner_description a:not(.button) {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.parallax_banner_buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 32px;
}

.text-align-center .parallax_banner_buttons {
	justify-content: center;
}

.text-align-right .parallax_banner_buttons {
	justify-content: flex-end;
}

/* No image: text on Charcoal. */
.section_parallax_banner.no-image {
	min-height: 0;
}

/* ------------------------------------------------------------------
 * No movement for visitors who ask for less motion (WCAG 2.3.3)
 * ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
	.parallax_banner_media {
		inset: 0;
	}

	[data-parallax-banner] .parallax_banner_img {
		transform: none;
		will-change: auto;
	}
}

/* Empty block in the editor. */
.parallax_banner_empty {
	margin: 0;
	padding: 40px 20px;
	border: 1px dashed var(--wp--preset--color--mediumgrey);
	border-radius: 24px;
	text-align: center;
}