/*
 * Testimonial Slider block (template-parts/blocks/section_testimonial-slider.php,
 * js/blocks_js/block_testimonial-slider.js).
 * Loaded by abefactors_acf_block_enqueue_assets() only on pages that contain the block (and in the editor).
 *
 * Design (Figma "Projects", bottom, and "Testimonials_2/3/4"), at 1728px:
 *   section   Steel (#BDC2BA), 844px high; a 1px Charcoal line 90px from the top, across the content (1389px)
 *   quote     54px under the line; Red Hat Display ExtraBold 30/40, Charcoal, about 860–950px wide
 *   person    about 25px under the quote; Medium 24/30, up to 645px wide
 *   arrows    24px chevrons at the bottom left (169px from the left, 87px above the bottom)
 *   shape     yellow corner shape 475 x 565 at the bottom right edge
 *
 * Contrast: Charcoal on Steel is 9.4:1.
 */

/* ------------------------------------------------------------------
 * Section
 * ------------------------------------------------------------------ */
.section_testimonial_slider {
	--testimonial-shape-w: clamp(150px, 27.5vw, 475px);
	position: relative;
	overflow: hidden; /* the shape sits on the edges */
	color: var(--wp--preset--color--secondary);
}

/* Steel unless a background colour is chosen in the block toolbar. */
.section_testimonial_slider:not(.has_bg_color) {
	background-color: var(--wp--preset--color--steel);
}

.section_testimonial_slider.global-block-ptb {
	padding-top: clamp(48px, 5.2vw, 90px);
	padding-bottom: clamp(48px, 5vw, 87px);
}

/* Tall enough for the shape (565 / 475 of its width) plus some air above it. */
.section_testimonial_slider.has-corner-shape {
	min-height: calc(var(--testimonial-shape-w) * 565 / 475 + clamp(80px, 8vw, 140px));
}

/* Background Image (Settings): a 70% Charcoal overlay; set the text colour to White. */
.section_testimonial_slider.has_bg::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background: var(--wp--preset--color--secondary);
	opacity: 0.7;
	pointer-events: none; /* decorative */
}

.section_testimonial_slider > .container {
	position: relative;
	z-index: 1; /* text and buttons over the shape */
}

/* Line across the content, 54px above the text. */
.top-line-one .testimonial_slider_body {
	padding-top: clamp(32px, 3.1vw, 54px);
	border-top: 1px solid currentColor;
}

/* ------------------------------------------------------------------
 * Yellow corner shape (decorative)
 * ------------------------------------------------------------------ */
.testimonial_slider_shape {
	position: absolute;
	right: 0;
	bottom: 0;
	z-index: 0;
	width: var(--testimonial-shape-w);
	height: auto;
	aspect-ratio: 475 / 565;
	fill: var(--wp--preset--color--primary);
	pointer-events: none;
}

@media (forced-colors: active) {
	.testimonial_slider_shape {
		display: none;
	}
}

/* ------------------------------------------------------------------
 * Head (optional, not in the design)
 * ------------------------------------------------------------------ */
.testimonial_slider_head {
	max-width: 900px;
	margin-bottom: clamp(24px, 2.5vw, 40px);
}

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

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

.testimonial_slider_title:not([class*="fontsize-"]) {
	font-size: var(--wp--preset--font-size--medium-32);
	line-height: 1.3;
}

.testimonial_slider_description {
	margin-top: 16px;
}

.testimonial_slider_description p {
	margin: 0 0 16px;
}

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

/* ------------------------------------------------------------------
 * Testimonials
 *    Without JavaScript: one under the other. With JavaScript (.is-slider): all in one grid cell, so the
 *    section keeps the height of the longest one; only the active one is visible.
 * ------------------------------------------------------------------ */
.testimonial_slider_slides {
	display: grid;
	row-gap: 48px;
	/* Never under the shape on wide screens. */
	max-width: min(950px, calc(100% - var(--testimonial-shape-w) * 0.55));
}

.testimonial_slider.is-slider .testimonial_slider_slides > .testimonial_slide {
	grid-area: 1 / 1;
	visibility: hidden;
	opacity: 0;
	transition: opacity 0.35s ease, visibility 0s linear 0.35s;
}

.testimonial_slider.is-slider .testimonial_slider_slides > .testimonial_slide.is-active {
	visibility: visible;
	opacity: 1;
	transition: opacity 0.35s ease, visibility 0s;
}

.testimonial_slide {
	margin: 0;
}

.testimonial_slide_quote {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: clamp(21px, 1.74vw, 30px);
	font-weight: 800;
	line-height: 1.333; /* 40px at 30px */
	letter-spacing: 0;
	quotes: none;
}

.testimonial_slide_quote::before,
.testimonial_slide_quote::after {
	content: none; /* no quote marks from the theme */
}

.testimonial_slide_quote p {
	margin: 0 0 0.6em;
}

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

.testimonial_slide_author {
	max-width: 645px;
	margin-top: 25px;
	font-size: clamp(18px, 1.39vw, 24px);
	font-weight: 500;
	line-height: 1.25; /* 30px at 24px */
}

/* ------------------------------------------------------------------
 * Previous / next (24px chevrons as in the design, 44px click area: WCAG 2.5.8)
 * ------------------------------------------------------------------ */
.testimonial_slider_nav {
	display: flex;
	gap: 0;
	margin: clamp(40px, 8vw, 140px) 0 0 -10px; /* the chevrons line up with the text */
}

.testimonial_slider_nav[hidden] {
	display: none;
}

.section_testimonial_slider .testimonial_slider_button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: inherit;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.section_testimonial_slider .testimonial_slider_button::after {
	content: none; /* no button arrow from the theme */
}

.section_testimonial_slider .testimonial_slider_button:hover {
	background-color: rgba(36, 31, 33, 0.1);
}

.section_testimonial_slider .testimonial_slider_button:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 0;
}

.testimonial_slider_cta {
	margin-top: 32px;
}

@media (prefers-reduced-motion: reduce) {
	.testimonial_slider.is-slider .testimonial_slider_slides > .testimonial_slide,
	.testimonial_slider.is-slider .testimonial_slider_slides > .testimonial_slide.is-active {
		transition: none;
	}
}

/* ------------------------------------------------------------------
 * Smaller screens: text full width, a small shape in the corner; the arrows stay on the left,
 * with enough room under the text that the shape never covers it.
 * ------------------------------------------------------------------ */
@media screen and (max-width: 900px) {
	.section_testimonial_slider {
		--testimonial-shape-w: 130px; /* 155px high */
	}

	.section_testimonial_slider.has-corner-shape {
		min-height: 0;
	}

	.testimonial_slider_slides {
		max-width: none;
	}

	.testimonial_slider_nav {
		margin-top: 32px;
	}

	/* Arrows row (44px) + space under it is taller than the shape. */
	.section_testimonial_slider.has-corner-shape .testimonial_slider_nav {
		margin-top: 72px;
	}
}

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

/* Rotation is first in keyboard order; visually it sits between the arrows. */
.testimonial_slider_prev { order: 0; }
.testimonial_slider_rotation { order: 1; }
.testimonial_slider_next { order: 2; }

.section_testimonial_slider .testimonial_slider_rotation {
	width: 44px;
	min-width: 44px;
	padding: 0;
	border-radius: 4px;
	font-family: inherit;
	font-size: 16px;
	font-weight: 700;
}

/* Use the theme's explicit keyboard input state as well as browser focus detection. */
html[data-input="keyboard"] .testimonial_slider_button:focus {
	outline: 2px solid currentColor;
	outline-offset: 0;
}
html[data-input="pointer"] .testimonial_slider_button:focus {
	outline: none;
}

.testimonial_slider_rotation[data-playing="true"] .testimonial_play_icon,
.testimonial_slider_rotation[data-playing="false"] .testimonial_pause_icon {
	display: none;
}