/*=========================
	IMAGE COPY BLOCK
=========================*/

.block-image-copy .container {
	display: grid;
	grid-template-columns: 1fr 1fr;
}
.block-image-copy .container.container.switchSides {
	grid-template-columns: 1fr 1fr;
}
.block-image-copy .container.switchSides .image {
	grid-column: 1;
}
.block-image-copy .container.switchSides .content {
	grid-column: 2;
	position: relative;
}
.block-image-copy .background-image {
	z-index: 0;
}
.block-image-copy .image {
	grid-column: 2;
	grid-row: 1;
	position: relative;
	width: 100%;
	aspect-ratio: 1 / 1;
	height: auto;
	overflow: hidden;
}
.block-image-copy .image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
}
.block-image-copy .image.image-align-top {
	align-self: start;
}
.block-image-copy .image.image-align-top img {
	object-position: top;
}
.block-image-copy .image.image-align-center {
	align-self: center;
	margin-left: auto !important;
	margin-right: auto !important;
}
.block-image-copy .image.has-graphic {
	aspect-ratio: unset;
	height: 100%;
}
.block-image-copy .graphic {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}
.block-image-copy .graphic svg {
	width: 100%;
	height: 100%;
}
/* Per-graphic max-heights — image-copy specific overrides */
.block-image-copy .graphic--chevron-right-double {
	max-height: 270px;
}
.block-image-copy .graphic--triangle-right-double-horizontal {
	max-height: 280px;
}
.block-image-copy .graphic--2-and-a-half-circles {
	max-height: 220px;
}
.block-image-copy .graphic--stairs-down-left {
	max-height: 560px;
}
.block-image-copy .content {
	grid-column: 1;
	grid-row: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding-right: var(--space-7);
	height: 100%;
	position: relative;
}
.block-image-copy .container.content-align-top .content {
	justify-content: flex-start;
}
/* Graphic selected: no padding between graphic and content */
.block-image-copy .container:has(.has-graphic) .content {
	padding-right: 0;
}
.block-image-copy .container.switchSides:has(.has-graphic) .content {
	padding-left: 0;
}
/* Switched layout: image on left, content on right → flip to left padding */
.block-image-copy .container.switchSides .content {
	padding-right: 0;
	padding-left: var(--space-6);
}
/* Testimonial + switched: wider left padding */
.block-image-copy .container.switchSides.is-testimonial .content {
	padding-left: var(--space-8);
}
/* Testimonial layout: center the image vertically + remove fixed min-height */
.block-image-copy .container.is-testimonial .image {
	align-self: center;
}
.block-image-copy .container.is-testimonial {
	min-height: 0;
}
/* Below md (≤ 991.98px): drop the switched-layout content's left padding so it sits
   flush against the container edge */
@media (max-width: 991.98px) {
	.block-image-copy .container.switchSides .content {
		padding-left: 0 !important;
	}
}
/* Tablet (992-1199.98px): adjust content-to-image gap */
@media (min-width: 992px) and (max-width: 1199.98px) {
	.block-image-copy .content {
		padding-right: var(--space-8);
	}
	.block-image-copy .container.switchSides .content {
		padding-right: 0;
		padding-left: var(--space-8);
	}
	/* Graphic sizing to match live on tablet: cell no longer stretches to full
	   row height, and the SVG keeps its aspect ratio at ~70% column width
	   (live uses a narrower 6/16 graphic column at this range). */
	.block-image-copy .image.has-graphic {
		height: auto;
		align-self: center;
	}
	.block-image-copy .image.has-graphic .graphic {
		height: auto;
	}
	.block-image-copy .image.has-graphic .graphic svg {
		width: 70%;
		height: auto;
	}
}

/* top-title + title sizes come from the global type scale
   (live: pre-title 22px/700, title = u-h3 fluid → 40px/700 desktop) */
.block-image-copy .content .title {
	margin-bottom: var(--space-4);
}

.block-image-copy .content .copy {
	margin-bottom: var(--space-4);
}
.block-image-copy .content .copy p {
	margin-bottom: var(--space-4);
}
/* Live spaces lists from the paragraph that follows them (35px) — bootstrap's
   1rem was leaving them cramped (e.g. "Equipment used:" under Class Focus). */
.block-image-copy .content .copy ul,
.block-image-copy .content .copy ol {
	margin-bottom: 35px;
}
.block-image-copy .content .copy *:last-child {
	margin-bottom: 0;
}
.block-image-copy .content .copy a {
	color: var(--color-n-black, #282829);
	text-decoration: underline;
}
.block-image-copy .content .copy a:hover,
.block-image-copy .content .copy a:focus {
	background: rgba(255, 110, 51, 0.25) !important;
	box-shadow: 0 0 0 3px rgba(255, 110, 51, 0.25) !important;
	color: #282829;
	text-decoration: none;
}

.block-image-copy .content .c-btn {
	align-self: flex-start;
	margin-top: var(--space-5);
}

/* ---------- Testimonial layout ---------- */
/* Small accent line under the top title in testimonial mode */
.block-image-copy .container.is-testimonial .content .top-title {
	margin-bottom: var(--space-3);
	padding-bottom: var(--space-2);
	width: 100%;
}

/* Blockquote with decorative curly opening and closing quotes */
.block-image-copy .testimonial-figure {
	margin: 0;
}
.block-image-copy .testimonial-quote {
	margin: 0 0 var(--space-4);
	padding: 0;
	position: relative;
	quotes: "\201C" "\201D" "\2018" "\2019";
}
.block-image-copy .testimonial-quote:last-child {
	margin-bottom: 0;
}
.block-image-copy .testimonial-quote::before {
	content: none;
}
.block-image-copy .testimonial-quote::after {
	content: none;
}
.block-image-copy .testimonial-quote p {
	display: inline;
}
.block-image-copy .testimonial-quote p:not(:last-child)::after {
	content: "";
	display: block;
	margin-bottom: var(--space-3);
}
/* Author block: circular avatar + name & company stacked */
.block-image-copy .testimonial-author {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	margin-top: var(--space-3);
	margin-bottom: var(--space-6);
}
.block-image-copy .testimonial-author__avatar {
	width: 50px;
	height: 50px;
	border-radius: 50%;
	object-fit: cover;
	flex-shrink: 0;
	margin-right: 20px;
}
.block-image-copy .testimonial-author__info {
	display: flex;
	flex-direction: column;
	justify-content: center;
	line-height: 1.25;
}
.block-image-copy .testimonial-author__name {
	font-weight: 700;
	font-style: normal;
	font-size: 2rem;
}
.block-image-copy .testimonial-author__company {
	font-size: 2rem;
	color: var(--color-n-black, #282829);
}

.block-image-copy .content .c-btn--primary {
	--c-btn-bg-hover: transparent;
}

.block-image-copy .link-standard:hover,
.block-image-copy .link-standard:focus,
.block-image-copy a:not([class]):hover,
.block-image-copy a:not([class]):focus {
	background: none !important;
	box-shadow: none !important;
}

.block-image-copy .content blockquote {
	margin-bottom: 32px;
}
.block-image-copy .content blockquote p {
	font-size: 4rem !important;
	font-weight: 700;
	letter-spacing: -0.025em;
	line-height: 1.1em;
}

@media only screen and (max-width: 991.98px) {
	.block-image-copy .container,
	.block-image-copy .container.container.switchSides {
		display: grid;
		grid-template-columns: 1fr;
		gap: 60px;
	}
	.block-image-copy .image {
		grid-column: 1 !important;
		grid-row: 2 !important;
		/* Default (not switched): image breaks out to the viewport's RIGHT edge,
       with 15vw of blank space on the LEFT. */
		margin-left: 15vw;
		margin-right: calc(var(--container-px) * -1);
		width: auto;
		max-width: none;
		aspect-ratio: 1 / 1;
		height: auto;
		min-height: 0;
	}
	/* Switched: image breaks out to the viewport's LEFT edge, 15vw on the RIGHT */
	.block-image-copy .container.switchSides .image {
		margin-left: calc(var(--container-px) * -1);
		margin-right: 15vw;
	}
	/* Testimonial layout: image stays INSIDE the container, fixed 600px square */
	.block-image-copy .container.is-testimonial .image,
	.block-image-copy .container.is-testimonial.switchSides .image {
		margin-left: 0;
		margin-right: 0;
		width: 100%;
		max-width: 600px;
	}
	.block-image-copy .content {
		grid-column: 1 !important;
		grid-row: 1 !important;
		padding: 0 30px 0 15px;
	}
	.block-image-copy .content .copy {
		margin-bottom: var(--space-3);
	}
	/* .block-image-copy .content .title {
		font-size: 22px !important;
	} */

	.block-image-copy .background-image {
		position: relative;
	}

	.block-image-copy .content blockquote p {
		font-size: calc(3rem + 1.38889vw - 6.66667px) !important;
	}

	.block-image-copy .image {
		margin-left: auto;
		margin-right: auto;
	}
	.block-image-copy .graphic {
		display: none;
	}
	.block-image-copy .testimonial-author {
		margin-bottom: var(--space-3);
	}
}

@media only screen and (max-width: 767.98px) {
}
