/*** Module: Testimonials ***/

.module.testimonials {
	color: var(--white);
}

/* Over-sized gradient layers give the euphoria-drift animation room to pan. */
.module.testimonials .bg-field {
	background: var(--euphoric-blue);
	background-size: 200% 200%, 220% 220%, 240% 240%, 100% 100%;
}

/* Page-closing band needs breathing room before the footer. */
.page-builder > .module.testimonials:last-child:has(.bg-field) {
	margin-bottom: var(--text-spacing-small);
}

.module.testimonials .container > * {
	grid-column: 2 / span 10;
	text-align: center;
}

/* Relative so the absolute dots/arrows anchor to the grid area. */
.module.testimonials .container {
	align-content: center;
	gap: var(--text-spacing-xsmall);
	padding-block: var(--module-spacing-large);
	position: relative;
}

/* Leading eyebrow adds its own top weight — trim the container's top padding. */
.module.testimonials .container:has(> .eyebrow:first-child) {
	padding-top: var(--module-spacing-medium);
}

.module.testimonials .heading-3 {
	color: var(--white);
	text-align: center;
}

.module.testimonials .heading-3 ~ .carousel {
	margin-top: var(--text-spacing-xsmall);
}

/** Controls **/

.module.testimonials .dots-target {
	align-items: center;
	bottom: 0;
	display: flex;
	grid-column: 1 / -1;
	left: calc(var(--viewport-edge) + var(--text-spacing-small) + var(--text-spacing-large));
	min-height: 48px; /* matches arrow height so dots vertically center against them */
	position: absolute;
}

.module.testimonials .jazzy-dots {
	display: flex;
	gap: var(--text-spacing-xsmall);
}

.module.testimonials .jazzy-dot {
	background: var(--lavender);
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	height: 6px;
	opacity: 0.4;
	padding: 0;
	transition: background .25s ease, opacity .25s ease;
	width: 6px;
}

.module.testimonials .jazzy-dot.is-active {
	background: var(--teal);
	opacity: 1;
}

.module.testimonials .bottom-right {
	bottom: var(--text-spacing-xxsmall);
	display: flex;
	gap: var(--text-spacing-xxsmall);
	grid-column: 1 / -1;
	position: absolute;
	right: calc(var(--viewport-edge) + var(--text-spacing-small) + var(--text-spacing-xxsmall));
}

/** Slide **/

.module.testimonials .slide {
	align-items: center;
	display: flex;
	flex-direction: column;
	justify-content: center;
	margin: 0;
	text-align: center;
}

.module.testimonials .slide > * + * {
	margin-top: var(--text-spacing-small);
}

.module.testimonials .slide > .photo + .quote {
	margin-top: var(--text-spacing-xxsmall);
}

.module.testimonials .slide > * + .btn,
.module.testimonials .slide > * + .logo {
	margin-top: var(--text-spacing-large);
}

.module.testimonials .logo img {
	display: block;
	height: auto;
	max-height: 64px;
	object-fit: contain;
	width: 100%;
}

.module.testimonials .photo {
	border-radius: 50%;
	flex-shrink: 0;
	height: 64px;
	overflow: hidden;
	width: 64px;
}

.module.testimonials .photo img {
	display: block;
	height: 100%;
	object-fit: cover;
	width: 100%;
}

.module.testimonials .quote {
	color: var(--lavender);
	margin: 0;
}

/* Curly quotes wrap in PHP (testimonials.php strips any saved pair) so the .highlight span can flow with the marks — ::before/::after can't. */

.module.testimonials .highlight {
	color: var(--white);
	font-weight: 500;
}

/* Body font — the slide is a <blockquote>, which otherwise inherits the display
   heading font. small-text gives Body Small; .name adds the bold cut. */
.module.testimonials .attribution {
	align-items: center;
	color: var(--lavender);
	display: flex;
	flex-wrap: wrap;
	font-family: var(--body-font);
	gap: 4px;
	justify-content: center;
	margin-inline: auto;
	max-width: 50%;
}

.module.testimonials .attribution .name {
	font-style: normal;
	font-weight: 700;
}

.module.testimonials .attribution .name:has(+ .role)::after {
	content: ",";
}

/** Style: parchment **/

.module.testimonials.style-parchment {
	color: var(--black);
}

.module.testimonials.style-parchment .bg-field {
	animation: none;
	background: var(--parchment);
}

.module.testimonials.style-parchment .heading-3,
.module.testimonials.style-parchment .quote,
.module.testimonials.style-parchment .attribution {
	color: var(--black);
}

.module.testimonials.style-parchment .highlight {
	color: var(--orange);
}

.module.testimonials.style-parchment .jazzy-dot {
	background: var(--black);
}

/** Style: page-default **/

.module.testimonials.style-page-default {
	color: var(--black);
}

.module.testimonials.style-page-default .bg-field {
	animation: none;
	background: var(--off-white);
}

.module.testimonials.style-page-default .heading-3,
.module.testimonials.style-page-default .quote,
.module.testimonials.style-page-default .attribution {
	color: var(--black);
}

.module.testimonials.style-page-default .highlight {
	color: var(--orange);
}

.module.testimonials.style-page-default .jazzy-dot {
	background: var(--black);
}

/***************************************************************************************************************************************************************************************/
/* MQ MAX-WIDTH 1400 - Smaller Desktop Sizes */
/***************************************************************************************************************************************************************************************/

@media only screen and (max-width: calc(1400rem / 16)) {

	/* Echoes the base selector — the global .module:last-child reset is (0,4,0) and
	   can't beat it, so the band would keep its gutter after every other one drops. */
	.page-builder > .module.testimonials:last-child:has(.bg-field) {
		margin-bottom: 0;
	}

	.module.testimonials .dots-target {
		left: calc(var(--viewport-edge) + var(--text-spacing-small) + var(--text-spacing-small));
	}

	.module.testimonials .bottom-right {
		right: calc(var(--viewport-edge) + var(--text-spacing-xxsmall));
	}

}

/***************************************************************************************************************************************************************************************/
/* MQ MAX-WIDTH 950 - Tablet Sizes */
/***************************************************************************************************************************************************************************************/

@media only screen and (max-width: calc(950rem / 16)) {

	.module.testimonials .container > * {
		grid-column: 1 / -1;
	}

	.module.testimonials .attribution {
		max-width: none;
	}

	.module.testimonials .dots-target {
		left: 0;
	}

	.module.testimonials .bottom-right {
		/*right: var(--container-outer-padding);*/
	}

}

/***************************************************************************************************************************************************************************************/
/* MQ MAX-WIDTH 650 - Mobile Sizes */
/***************************************************************************************************************************************************************************************/

@media only screen and (max-width: calc(650rem / 16)) {

	.module.testimonials .container {
		padding-bottom: var(--module-spacing-xlarge);
	}

}

@media (prefers-reduced-motion: no-preference) {

	.module.testimonials .bg-field {
		animation: euphoria-drift 10s ease-in-out infinite;
	}

}