/*
 * Home banner (slider.php). Figma "Homel" (static) and "Home_Scroll" (photo at full width after scrolling).
 *
 *   Band      Steel #BDC2BA, continues the header
 *   Title     Red Hat Display Bold 100/90 (fluid 44 → 100px), black (11.6:1 on steel)
 *   Photo     1594 x 777 at 1728px: 67px in from each side, grows to the full width while scrolling
 *             (js/home-banner.js sets --abe-banner-progress 0 → 1; not for reduced motion)
 *   Shape     Yellow corner, bottom right of the photo, 490 x 435 at 1728px (decorative); draws itself in view.
 *             It stays where it is while the photo widens; its top arm grows to the photo's right edge.
 *
 * 1. Band and text
 * 2. Slides and photo
 * 3. Yellow shape
 * 4. Slide show controls (only with more than one slide)
 * 5. Smaller screens
 */

.home_banner {
	--abe-banner-inset: max(20px, 3.877vw); /* 67px at 1728px */
	--abe-banner-progress: 0;
	--abe-banner-edge: calc(var(--abe-banner-inset) * (1 - var(--abe-banner-progress)));
	--abe-banner-ratio: 0.48745; /* 777 / 1594 */
	position: relative;
	background-color: var(--wp--preset--color--steel);
	color: var(--wp--preset--color--black);
}

/* ------------------------------------------------------------------
 * 1. Band and text
 * ------------------------------------------------------------------ */
.home_banner_text .container {
	margin: 0 auto;
	padding-top: clamp(40px, 6.6vw, 114px); /* title 114px under the header at 1728px */
	padding-bottom: clamp(28px, 3vw, 52px);
}

.home_banner_above {
	margin: 0 0 16px;
	font-size: var(--wp--preset--font-size--small-16);
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.home_banner_title {
	max-width: 7.2em; /* "Accessibility / with intention" on two lines, as in the design */
	margin: 0;
	color: var(--wp--preset--color--black);
	font-size: var(--wp--preset--font-size--x-large-100);
	font-weight: 700;
	line-height: 0.9;
	letter-spacing: 0;
}

.home_banner_description {
	max-width: 760px;
	margin: 24px 0 0;
	font-size: var(--wp--preset--font-size--small-20);
	line-height: 1.6;
}

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

/* ------------------------------------------------------------------
 * 2. Slides and photo
 * ------------------------------------------------------------------ */
.home_banner_stage {
	position: relative;
	container-type: inline-size;
}

/* All slides in one grid cell; only the active one is visible (and in the tab order). */
.home_banner_slides {
	display: grid;
}

.home_banner_slide {
	grid-area: 1 / 1;
	display: flex;
	flex-direction: column;
	justify-content: flex-end; /* photos line up at the bottom when slide texts differ in height */
	visibility: hidden;
	opacity: 0;
	transition: opacity 0.6s ease, visibility 0s linear 0.6s;
}

.home_banner_slide.is-active {
	visibility: visible;
	opacity: 1;
	transition: opacity 0.6s ease, visibility 0s;
}

/* Full-width box, clipped to the photo width: growing the clip does not move anything else on the page. */
.home_banner_media {
	height: calc((100cqw - 2 * var(--abe-banner-inset)) * var(--abe-banner-ratio));
	background-color: var(--wp--preset--color--secondary);
	clip-path: inset(0 var(--abe-banner-edge) 0 var(--abe-banner-edge));
}

.home_banner_img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ------------------------------------------------------------------
 * 3. Yellow shape (decorative)
 * ------------------------------------------------------------------ */
.home_banner_shape {
	position: absolute;
	right: var(--abe-banner-inset); /* fixed: the shape does not move when the photo widens */
	bottom: 0;
	z-index: 2;
	width: calc((100cqw - 2 * var(--abe-banner-inset)) * 0.3074); /* 490 / 1594 */
	height: auto;
	fill: var(--wp--preset--color--primary);
	pointer-events: none;
}

/* The top arm extension reaches past the viewBox. This selector beats the reset "svg:not(:root) { overflow: hidden }"
 * in style.css. */
.home_banner_stage svg.home_banner_shape {
	overflow: visible;
}

/*
 * Top arm extension (designer: the shape stays exactly where it is; when the photo widens, the right side
 * gets longer to match the photo width). A 1-unit rect at the right end of the top arm, scaled sideways by
 * --abe-shape-ext (viewBox units + 1, set by js/home-banner.js from the photo's growth).
 * While the shape is still drawing itself it stays at zero; when the drawing ends (.is-drawn) it grows out
 * from the arm's end, so the arm looks like one piece. Without JavaScript the photo does not widen and the
 * extension stays at zero length.
 */
.home_banner_shape_ext {
	transform-box: fill-box;
	transform-origin: left center;
	transform: scaleX(var(--abe-shape-ext, 0));
}

.home_banner_shape.anim-run:not(.is-drawn) .home_banner_shape_ext {
	transform: scaleX(0);
}

/* Growing out after the drawing: a short ease; afterwards it follows the scroll directly. */
.home_banner_shape.is-drawn:not(.is-ext-live) .home_banner_shape_ext {
	transition: transform 0.35s cubic-bezier(0.2, 0.6, 0.35, 1);
}

/*
 * The shape draws itself from the corner when it comes into view, the same way as the shape on the About
 * photo (Parallax Banner): classes "animated drawCorner delay-200ms" in slider.php, keyframes in
 * css/animations.css, started by js/animations.js. Without JavaScript or with reduced motion it is shown complete.
 */

/* ------------------------------------------------------------------
 * 4. Slide show controls: Stop/Start, Previous, Next, one button per slide.
 *    On a charcoal pill, so they keep their contrast on any photo. 44px targets.
 * ------------------------------------------------------------------ */
.home_banner_controls {
	position: absolute;
	left: calc(var(--abe-banner-edge) + 24px);
	bottom: 24px;
	z-index: 3;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 2px;
	max-width: calc(100% - 2 * var(--abe-banner-edge) - 48px);
	padding: 4px;
	border-radius: 30px;
	background-color: rgba(36, 31, 33, 0.9);
	color: var(--wp--preset--color--white);
}

.home_banner_controls[hidden] {
	display: none;
}

/* Reset of the global button look from theme.css (yellow pill with arrow). */
.home_banner_controls button,
.home_banner_controls button:hover,
.home_banner_controls button:focus,
.home_banner_controls button:active {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	min-width: 44px;
	height: 44px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background-color: transparent;
	box-shadow: none;
	color: var(--wp--preset--color--white);
	font: inherit;
	line-height: 1;
	letter-spacing: 0;
	text-transform: none;
	cursor: pointer;
}

.home_banner_controls button::after {
	content: none;
	display: none;
}

.home_banner_controls button:hover {
	background-color: rgba(255, 255, 255, 0.16);
}

.home_banner_controls button:focus-visible {
	outline: 3px solid var(--wp--preset--color--primary);
	outline-offset: -3px;
}

.home_banner_icon {
	display: block;
	width: 20px;
	height: 20px;
}

/* Stop/Start: one button, the icon shows the action it will do. */
.home_banner_rotation_play,
.home_banner--paused .home_banner_rotation_pause {
	display: none;
}

.home_banner--paused .home_banner_rotation_play {
	display: block;
}

.home_banner_dots {
	display: flex;
	align-items: center;
	padding: 0 6px 0 4px;
}

.home_banner_controls .home_banner_dot,
.home_banner_controls .home_banner_dot:hover,
.home_banner_controls .home_banner_dot:focus {
	width: 28px;
	min-width: 28px;
	height: 44px;
	border-radius: 14px;
}

/* Dot: ring for other slides, filled for the current one (shape, not only colour). */
.home_banner_dot::before {
	content: "";
	display: block;
	width: 12px;
	height: 12px;
	border: 2px solid var(--wp--preset--color--white);
	border-radius: 50%;
	box-sizing: border-box;
}

.home_banner_dot[aria-current="true"]::before {
	width: 14px;
	height: 14px;
	border-color: var(--wp--preset--color--primary);
	background-color: var(--wp--preset--color--primary);
}

/* ------------------------------------------------------------------
 * 5. Smaller screens
 * ------------------------------------------------------------------ */
@media screen and (max-width: 768px) {
	.home_banner {
		--abe-banner-ratio: 0.75; /* 4:3, so the photo keeps some height on phones */
	}

	.home_banner_controls {
		left: calc(var(--abe-banner-edge) + 12px);
		bottom: 12px;
		max-width: calc(100% - 2 * var(--abe-banner-edge) - 24px);
	}
}