/**
 * Testimonial style: Carousel
 *
 * A 517px portrait on --container-breakout beside seven columns of quote, with the arrows
 * bottom-aligned over the same columns. The whole pair is the slide, so the photo crossfades
 * with the attribution it belongs to.
 *
 * A heading moves the arrows up beside it; a video widens the frame to eight columns and
 * gives the copy a panel to sit on; the full composition runs the photo off the edge of the
 * screen instead and swaps the arrows for a row of dots.
 */

.module.testimonial.style-carousel .quotes {
	display: grid;
	grid-column: 1 / -1;
	grid-row: 1;
	list-style: none;
	margin: 0;
	padding: 0;
	transition: height var(--motion-slow) var(--ease-out);
}

.module.testimonial.style-carousel .quotes > li {
	align-self: start;
	display: grid;
	gap: var(--gap);
	grid-column: 1;
	grid-row: 1;
	grid-template-columns: var(--grid);
}

.module.testimonial.style-carousel .quotes:not(.jazzy-carousel) > li + li {
	opacity: 0;
}

.module.testimonial.style-carousel :is(.media, .quote) {
	grid-row: 1;
}

.module.testimonial.style-carousel .media {
	aspect-ratio: 517 / 568;
	border-radius: 10px;
}

.module.testimonial.style-carousel .quote {
	gap: var(--text-spacing-xsmall);
	padding-bottom: calc(48px + var(--text-spacing-small));
}

.module.testimonial.style-carousel .mark {
	margin-bottom: var(--text-spacing-xxsmall);
}

/** Quote Size: small — the words are set in marks, the opening one hung out of the column **/

.module.testimonial.style-carousel .quote-small {
	text-indent: -0.42em;
}

.module.testimonial.style-carousel .quote-small::before {
	content: '\201C';
}

.module.testimonial.style-carousel .quote-small::after {
	content: '\201D';
}

.module.testimonial.style-carousel .arrows {
	align-self: end;
	display: flex;
	gap: var(--text-spacing-xxsmall);
	grid-row: 1;
	position: relative;
}

.module.testimonial.style-carousel:has(.jazzy-static) .arrows {
	display: none;
}

/** Head — the heading, the pager beside it, and a link beneath **/

.module.testimonial.style-carousel .head {
	display: grid;
	gap: var(--text-spacing-small) var(--gap);
	grid-column: 1 / -1;
	grid-row: 1;
	grid-template-columns: var(--grid);
}

.module.testimonial.style-carousel:has(.head) .quotes {
	grid-row: 2;
}

.module.testimonial.style-carousel:has(.head) .container {
	row-gap: var(--text-spacing-small);
}

.module.testimonial.style-carousel:has(.head) .quote {
	padding-bottom: 0;
}

.module.testimonial.style-carousel .head > .heading-3 {
	grid-column: 1 / span 7;
	grid-row: 1;
}

.module.testimonial.style-carousel .head > .btn {
	grid-column: 1 / span 7;
	grid-row: 2;
	justify-self: start;
}

/* A single quote carries no pager, so the link takes the seat the pager would have had beside the
   heading. With a pager it stays on its own line under it. */
.module.testimonial.style-carousel:has(.jazzy-static) .head > .btn {
	align-self: center;
	grid-column: 8 / -1;
	grid-row: 1;
	justify-self: end;
}

/** Layout: image left (default) **/

.module.testimonial.style-carousel.image-left .media {
	grid-column: 1 / span 5;
	margin-left: var(--container-breakout);
}

.module.testimonial.style-carousel.image-left :is(.quote, .arrows) {
	grid-column: 6 / span 7;
	padding-left: var(--gap);
}

/** Layout: image right **/

.module.testimonial.style-carousel.image-right .media {
	grid-column: 8 / span 5;
	margin-right: var(--container-breakout);
}

.module.testimonial.style-carousel.image-right :is(.quote, .arrows) {
	grid-column: 1 / span 7;
	padding-right: var(--gap);
}

/** Head: the pager **/

.module.testimonial.style-carousel .head .arrows {
	align-self: center;
	gap: 12px;
	grid-column: 1 / -1;
	grid-row: 1;
	justify-self: end;
	padding: 0;
}

.module.testimonial.style-carousel.composition-landscape .quotes > li {
	padding-block: var(--text-spacing-xlarge);
	position: relative;
}

.module.testimonial.style-carousel.composition-landscape .quotes > li::before {
	background-color: var(--white);
	background-image: url('../../../svgs/dot-grid-tint.svg');
	border-radius: 10px;
	content: '';
	grid-row: 1;
	margin-block: calc(var(--text-spacing-xlarge) * -1);
}

.module.testimonial.style-carousel.composition-landscape .media {
	align-self: center;
	aspect-ratio: 784 / 440;
}

.module.testimonial.style-carousel.composition-landscape .quote {
	align-self: center;
	flex-direction: column-reverse;
	gap: var(--text-spacing-xlarge);
}

/* The panel reads eyebrow, then attribution, then quote. The column is reversed so the
   attribution rises above the words, which would drop the eyebrow to the floor — so it is
   ordered to the top explicitly, and pulls the 48px gap back to the comp's 16. */
.module.testimonial.style-carousel.composition-landscape .quote > .eyebrow {
	margin-bottom: calc(var(--text-spacing-xsmall) - var(--text-spacing-xlarge));
	order: 1;
}

.module.testimonial.style-carousel.composition-landscape figcaption {
	align-items: flex-start;
	gap: var(--text-spacing-xsmall);
}

/** Layout: image left **/

.module.testimonial.style-carousel.composition-landscape.image-left .media {
	grid-column: 1 / span 8;
}

.module.testimonial.style-carousel.composition-landscape.image-left .quote,
.module.testimonial.style-carousel.composition-landscape.image-left .container > .arrows {
	grid-column: 9 / span 4;
	padding-left: 0;
}

.module.testimonial.style-carousel.composition-landscape.image-left .quotes > li::before {
	grid-column: 7 / -1;
	margin-right: var(--container-breakout);
}

/** Layout: image right **/

.module.testimonial.style-carousel.composition-landscape.image-right .media {
	grid-column: 5 / span 8;
}

.module.testimonial.style-carousel.composition-landscape.image-right .quote,
.module.testimonial.style-carousel.composition-landscape.image-right .container > .arrows {
	grid-column: 1 / span 4;
	padding-right: 0;
}

.module.testimonial.style-carousel.composition-landscape.image-right .quotes > li::before {
	grid-column: 1 / span 6;
	margin-left: var(--container-breakout);
}

.page-builder > .module.testimonial.composition-full.wash:last-child {
	margin-bottom: 0;
}

.module.testimonial.style-carousel.composition-full .media {
	aspect-ratio: 766 / 900;
	border-radius: 0;
}

.module.testimonial.style-carousel.composition-full .quote {
	align-self: center;
	gap: var(--text-spacing-small);
	margin-bottom: 78px;
	padding-bottom: 0;
}

.module.testimonial.style-carousel.composition-full .mark {
	margin-bottom: 0;
}

.module.testimonial.style-carousel.composition-full figcaption {
	gap: 4px;
}

/** The pager **/

.module.testimonial.style-carousel.composition-full .jazzy-dots {
	align-self: end;
	grid-row: 1;
	justify-content: flex-start;
	margin-bottom: calc(var(--text-spacing-xlarge) - 9px);
	margin-left: -9px;
	position: relative;
}

.module.testimonial.style-carousel.composition-full:has(.head) .jazzy-dots {
	grid-row: 2;
}

.module.testimonial.style-carousel.composition-full .jazzy-dot {
	color: var(--white);
	opacity: 0.5;
}

.module.testimonial.style-carousel.composition-full .jazzy-dot::before {
	height: 6px;
	width: 6px;
}

.module.testimonial.style-carousel.composition-full .jazzy-dot.is-active {
	color: var(--dark-teal);
	opacity: 1;
}

/** Layout: image left (default) **/

.module.testimonial.style-carousel.composition-full.image-left .media {
	grid-column: 1 / span 7;
	margin-left: var(--viewport-edge);
	margin-right: 37px;
}

.module.testimonial.style-carousel.composition-full.image-left :is(.quote, .jazzy-dots) {
	grid-column: 8 / span 5;
	padding-left: 0;
}

/** Layout: image right **/

.module.testimonial.style-carousel.composition-full.image-right .media {
	grid-column: 6 / span 7;
	margin-left: 37px;
	margin-right: var(--viewport-edge);
}

.module.testimonial.style-carousel.composition-full.image-right :is(.quote, .jazzy-dots) {
	grid-column: 1 / span 5;
	padding-right: 0;
}

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

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

	.module.testimonial.style-carousel :is(.quotes, .arrows, .media, .quote) {
		grid-row: auto;
	}

	.module.testimonial.style-carousel:is(.image-left, .image-right) .media {
		grid-column: 1 / -1;
		max-width: 517px;
	}

	.module.testimonial.style-carousel:is(.image-left, .image-right) :is(.quote, .arrows) {
		grid-column: 1 / -1;
		padding-left: 0;
		padding-right: 0;
	}

	.module.testimonial.style-carousel .quote {
		padding-bottom: 0;
	}

	.module.testimonial.style-carousel .arrows {
		margin-top: var(--text-spacing-small);
	}

	.module.testimonial.style-carousel .head .arrows {
		grid-row: 1;
		margin-top: 0;
	}

	.module.testimonial.style-carousel.composition-landscape:is(.image-left, .image-right) :is(.media, .quote, .arrows) {
		grid-column: 1 / -1;
		max-width: none;
		padding-inline: 0;
	}

	.module.testimonial.style-carousel.composition-landscape .quotes > li {
		padding-inline: var(--text-spacing-small);
	}

	/* The panel becomes the quote's own ground rather than a sheet over the whole slide: absolute
	   and unplaced in the stack it painted over the words, and it opened above the video instead
	   of under it. As the quote's background it starts where the words do, and the video is lifted
	   to sit on its top edge the way it laps the panel's side on a wider screen. */
	.module.testimonial.style-carousel.composition-landscape:is(.image-left, .image-right) .quotes > li::before {
		content: none;
	}

	.module.testimonial.style-carousel.composition-landscape .media {
		position: relative;
		z-index: 1;
	}

	/* The panel reaches past the video either side; the words inside it start on the video's own
	   left edge, which is what the padding is. Written against the layout classes because the rule
	   that clears this padding beside the video carries them. */
	.module.testimonial.style-carousel.composition-landscape:is(.image-left, .image-right) .quote {
		background-color: var(--white);
		background-image: url('../../../svgs/dot-grid-tint.svg');
		border-radius: 10px;
		gap: var(--text-spacing-small);
		/* Half the video's own height, taken from its ratio against the width the two share — a
		   percentage here resolves against that width, so the panel opens on the video's middle
		   however wide the screen is. */
		--video-half: calc(100% * 220 / 784);
		margin-inline: calc(-1 * var(--text-spacing-medium));
		margin-top: calc(-1 * (var(--gap) + var(--video-half)));
		padding-block: calc(var(--video-half) + var(--text-spacing-medium)) var(--text-spacing-xlarge);
		padding-inline: var(--text-spacing-medium);
	}

	/* The eyebrow's pull-back is written against the gap above, so it answers this one. */
	.module.testimonial.style-carousel.composition-landscape .quote > .eyebrow {
		margin-bottom: calc(var(--text-spacing-xsmall) - var(--text-spacing-small));
	}

	/* Two lines of heading, so the link sits on the foot of the text box rather than in the middle
	   of it — the 8 is optical, holding it off the last line's descenders. */
	.module.testimonial.style-carousel:has(.jazzy-static) .head > .btn {
		align-self: end;
		margin-bottom: var(--text-spacing-xxsmall);
	}

	/* No cursor to ask with, so the video says what it is at rest — the same answer the media and
	   content module gives on this rung. */
	.module.testimonial.style-carousel.composition-landscape .media.video:not(:has(.play[data-state="playing"]))::after,
	.module.testimonial.style-carousel.composition-landscape .media.video .play:not([data-state="playing"]) .play-label {
		opacity: 1;
	}

	.module.testimonial.style-carousel.composition-full:is(.image-left, .image-right) .media {
		aspect-ratio: 3 / 2;
		grid-column: 1 / -1;
		margin-inline: var(--viewport-edge);
		max-width: none;
	}

	.module.testimonial.style-carousel.composition-full:is(.image-left, .image-right) .quote {
		grid-column: 1 / -1;
		margin-bottom: 0;
	}

	.module.testimonial.style-carousel.composition-full:is(.image-left, .image-right) .jazzy-dots {
		grid-column: 1 / -1;
		grid-row: auto;
		margin-bottom: calc(var(--text-spacing-xlarge) - 9px);
		margin-top: calc(var(--text-spacing-xsmall) - var(--gap));
	}

	/* The portrait composition stacked is one centred column — photograph, mark, words, arrows —
	   rather than a left-aligned column with the photograph's half of the row gone. The video
	   variant is left out: it sets the words on a panel of their own, which is aligned as a panel.

	   The photograph at 70% of its old cap: full-width it was most of a screen before the quote
	   started, and the quote is what the module is for. */
	/* A width stated alongside the cap, because centring a grid item shrinks it to its content and
	   the photograph has none in flow — it collapsed to nothing. */
	.module.testimonial.style-carousel.composition-portrait .media {
		justify-self: center;
		max-width: 360px;
		width: 100%;
	}

	.module.testimonial.style-carousel.composition-portrait .quote {
		align-items: center;
		text-align: center;
	}

	/* The mark sets its own start alignment, which outranks the column's centring item by item. */
	.module.testimonial.style-carousel.composition-portrait .quote > .mark {
		align-self: center;
	}

	/* The arrows were a row-gap and a margin below the caption, stacked. Written as the difference
	   so the two together land on one medium step, whatever the gap is. */
	.module.testimonial.style-carousel.composition-portrait .arrows {
		justify-content: center;
		margin-top: calc(var(--text-spacing-medium) - var(--gap));
	}

}

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

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

	.module.testimonial.style-carousel .head > :is(.heading-3, .btn),
	.module.testimonial.style-carousel .head .arrows {
		grid-column: 1 / -1;
		justify-self: start;
	}

	.module.testimonial.style-carousel .head .arrows {
		grid-row: 3;
	}

	.module.testimonial.style-carousel.composition-landscape .quotes > li {
		padding: 0;
	}

	/* The panel's reach is capped at the gutter: 32 past a 20px gutter is 12px of page scroll. */
	.module.testimonial.style-carousel.composition-landscape:is(.image-left, .image-right) .quote {
		margin-inline: calc(-1 * var(--container-outer-padding));
		padding-inline: var(--container-outer-padding);
	}

	/* The article cut is a page's own measure; a quote set in it here is four words to a line. Down
	   one step, this module only — the scale it borrows is shared with every article on the site. */
	.module.testimonial.style-carousel .quote :is(.article-title.medium, h2:not([class^="heading-"])) {
		font-size: calc(22rem / 16);
	}

	/* The mark belongs to the words under it rather than standing over them. */
	.module.testimonial.style-carousel .mark {
		margin-bottom: 0;
	}

}