/**
 * Testimonial
 */

/*** Layout ***/

.module.testimonial .container {
	align-items: center;
}

/*** Content ***/

.module.testimonial .content {
	align-items: flex-start;
	color: var(--samoyed-white);
	display: flex;
	flex-direction: column;
	grid-column: 1 / 8;
	grid-row: 1;
	isolation: isolate;
	margin-top: var(--text-spacing-xlarge);
	padding: var(--module-spacing-large) var(--text-spacing-xlarge) var(--module-spacing-large) var(--text-spacing-medium);
	position: relative;
}

/* Card background — on .content so height matches text, letting
   the image protrude past the card boundaries naturally. */

.module.testimonial .content::before {
	background: var(--russian-blue);
	border-radius: var(--border-radius-large);
	content: "";
	inset: 0;
	left: var(--container-breakout);
	position: absolute;
	z-index: -1;
	width: calc(100% - var(--container-breakout) + (var(--one-column-width) * 3));
}

.module.testimonial .content blockquote {
	margin: var(--text-spacing-small) 0 var(--text-spacing-medium);
}

.module.testimonial .content blockquote p {
	margin: 0;
}

.module.testimonial .eyebrow:not(.attribution) {
	align-items: flex-end;
	display: flex;
	gap: var(--text-spacing-xsmall);
}

.module.testimonial .content > .eyebrow::before {
	background: url('../../svgs/quote.svg') no-repeat center center;
	background-size: contain;
	content: "";
	display: block;
	height: 40px;
	width: 50px;
}

.module.testimonial .content > .eyebrow + .quote {
	margin-top: var(--text-spacing-small);
}

.module.testimonial .attribution {
	color: var(--samoyed-white);
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: var(--text-spacing-xxsmall);
}

.module.testimonial .attribution + .buttons,
.module.testimonial .quote + .buttons {
	margin-top: var(--text-spacing-xxlarge);
}

/*** Quote ***/

.module.testimonial .quote {
	margin: 0;
	padding: 0;
}

.module.testimonial .quote p {
	margin: 0;
}

/*** Image ***/

.module.testimonial .media {
	aspect-ratio: 598 / 700;
	border-radius: var(--border-radius-large);
	grid-column: 8 / -1;
	grid-row: 1;
	margin-right: var(--container-breakout);
	rotate: 0deg;
	transition: rotate .6s ease;
}

.module.testimonial .media.animated-in {
	rotate: 1.5deg;
}

/** Image Left **/

.module.testimonial.layout-image-left .content {
	grid-column: 6 / -1;
	padding: var(--module-spacing-large) var(--text-spacing-medium) var(--module-spacing-large) var(--text-spacing-xlarge);
}

.module.testimonial.layout-image-left .content::before {
	left: unset;
	right: var(--container-breakout);
}

.module.testimonial.layout-image-left .media {
	grid-column: 1 / 6;
	margin-left: var(--container-breakout);
	margin-right: 0;
}

.module.testimonial.layout-image-left .media.animated-in {
	rotate: -1.5deg;
}

/** No Image **/

.module.testimonial.no-image .content {
	grid-column: 3 / -3;
	margin-top: 0;
}

.module.testimonial.no-image .content::before {
	left: calc(var(--container-breakout) / 2);
	right: calc(var(--container-breakout) / 2);
}

/*
 * ====================================================================== *
 * MQ <=1200px — Laptop
 * ====================================================================== *
 */

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

	.module.testimonial .content {
		grid-column: 1 / 8;
		padding-left: var(--text-spacing-xlarge);
		padding-right: var(--text-spacing-xxsmall);
	}

	.module.testimonial.layout-image-left .content {
		grid-column: 6 / -1;
		padding-left: var(--text-spacing-xlarge);
		padding-right: var(--text-spacing-medium);
	}

	.module.testimonial.no-image .content {
		grid-column: 1 / 9;
	}

}

/*
 * ====================================================================== *
 * MQ <=950px — Tablet
 * ====================================================================== *
 */

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

	.module.testimonial {
		overflow-x: clip;
	}

	.module.testimonial .container {
		align-items: center;
		display: flex;
		flex-direction: column;
		position: relative;
	}

	.module.testimonial .content::before,
	.module.testimonial.layout-image-left .content::before {
		border-radius: var(--border-radius-large);
		bottom: 0;
		left: 0;
		width: 100%;
		position: absolute;
		top: calc(-140px);
		z-index: -1;
	}

	.module.testimonial.no-image .content::before {
		top: 0;
	}

	.module.testimonial .media {
		border-radius: var(--border-radius-normal);
		grid-row: auto;
		margin: 0;
		max-width: 300px;
		order: -1;
		position: relative;
		width: 100%;
		z-index: 2;
	}

	.module.testimonial .content,
	.module.testimonial.layout-image-left .content {
		align-items: center;
		grid-row: auto;
		margin-top: 0;
		padding: var(--text-spacing-small) var(--text-spacing-medium) var(--module-spacing-medium);
		position: relative;
		text-align: center;
		z-index: 1;
	}

	.module.testimonial .content > .eyebrow:not(.attribution) {
		align-items: center;
		flex-direction: column;
		justify-content: center;
	}

	.module.testimonial .content > .eyebrow + .quote {
		margin-top: var(--text-spacing-xsmall);
	}

	.module.testimonial .attribution {
		justify-content: center;
	}

	.module.testimonial .attribution + .buttons,
	.module.testimonial .quote + .buttons {
		margin-top: var(--text-spacing-large);
	}

	.module.testimonial .buttons {
		flex-direction: column;
		gap: var(--text-spacing-medium);
	}

}

/*
 * ====================================================================== *
 * MQ <=650px — Mobile
 * ====================================================================== *
 */

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

	.module.testimonial .content::before,
	.module.testimonial.layout-image-left .content::before {
		border-radius: 0;
		left: var(--viewport-edge);
		width: calc(100% - var(--viewport-edge) * 2);
	}

	.module.testimonial .container::before {
		top: 100px;
	}

	/* The quote card is the whole module at this width — drop the module
	   background and the padding that framed it. */

	.module.testimonial:is(.background-russian-blue, .background-appaloosa-beige, .background-mustang-blue) > .container {
		padding-bottom: 0;
		padding-top: 0;
	}

	.module.testimonial:is(.background-russian-blue, .background-appaloosa-beige, .background-mustang-blue) .container::before {
		display: none;
	}

	.module.testimonial .media {
		aspect-ratio: auto;
		max-width: 183px;
	}

	.module.testimonial .media img {
		height: auto;
		position: static;
	}

	.module.testimonial .content,
	.module.testimonial.layout-image-left .content {
		padding: 0 0 var(--module-spacing-small);
	}

	.module.testimonial .media.animated-in {
		rotate: 2.5deg;
	}

	.module.testimonial .content blockquote {
		margin: var(--text-spacing-xsmall) 0 0;
	}

	.module.testimonial .content blockquote + .attribution {
		margin-top: var(--text-spacing-small);
	}

	.module.testimonial .content > .eyebrow + .quote {
		margin-top: var(--text-spacing-small);
	}

}