/*
 * Home "Who we help" (patterns/home-audience.php). Values from the old
 * homepage-sub-hero-section.tsx, section-title.tsx and audience-card.tsx.
 */
.sp-home-audience {
	margin-block: 40px;
}
@media (min-width: 1024px) {
	.sp-home-audience { margin-block: 80px; }
}

/* Section title (old SectionTitle, left aligned). */
.sp-home-audience .sp-home-audience__head.sp-home-audience__head {
	margin-bottom: 32px;
}
@media (min-width: 1024px) {
	.sp-home-audience .sp-home-audience__head.sp-home-audience__head { margin-bottom: 40px; }
}
.sp-home-audience .sp-home-audience__label.sp-home-audience__label {
	margin-bottom: 20px;
	font-size: var(--wp--preset--font-size--label);
	font-weight: 600;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: currentColor;
	opacity: 0.6;
}
.sp-home-audience .sp-home-audience__intro {
	display: flex;
	flex-direction: column;
	gap: 16px;
}
@media (min-width: 1024px) {
	.sp-home-audience .sp-home-audience__intro {
		flex-direction: row;
		align-items: flex-end;
		justify-content: space-between;
		gap: 32px;
	}
}
@media (min-width: 1280px) {
	.sp-home-audience .sp-home-audience__intro { gap: 150px; }
}
.sp-home-audience .sp-home-audience__title {
	font-size: var(--wp--preset--font-size--heading-2);
	line-height: 1.05;
	font-weight: 600;
	letter-spacing: -0.025em;
}
.sp-home-audience .sp-home-audience__text {
	max-width: 600px;
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.625;
	white-space: pre-line;
	color: var(--wp--preset--color--black);
	opacity: 0.6;
}
@media (min-width: 1024px) {
	.sp-home-audience .sp-home-audience__text { font-size: var(--wp--preset--font-size--large); }
}

/* Cards. */
.sp-home-audience .sp-home-audience__cards {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 10px;
}
@media (min-width: 1024px) {
	.sp-home-audience .sp-home-audience__cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.sp-home-audience .sp-home-audience__card {
	position: relative;
	width: 100%;
	height: 320px;
	overflow: hidden;
}
@media (min-width: 1024px) {
	.sp-home-audience .sp-home-audience__card { height: 400px; cursor: pointer; }
}
.sp-home-audience .sp-home-audience__photo,
.sp-home-audience .sp-home-audience__sketch {
	position: absolute;
	inset: 0;
	margin: 0;
}
.sp-home-audience .sp-home-audience__photo img,
.sp-home-audience .sp-home-audience__sketch img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.sp-home-audience .sp-home-audience__card:nth-child(3n+1) img { object-position: 5% center; }
.sp-home-audience .sp-home-audience__card:nth-child(3n+2) img { object-position: 54% center; }
.sp-home-audience .sp-home-audience__card:nth-child(3n+3) img { object-position: 100% center; }
.sp-home-audience .sp-home-audience__sketch {
	overflow: hidden;
	background: var(--wp--preset--color--white);
}
.sp-home-audience .sp-home-audience__sketch img { opacity: 0.95; }

.sp-home-audience .sp-home-audience__overlay {
	position: absolute;
	inset: auto 0 0 0;
	padding: 24px 16px;
}
@media (min-width: 1280px) {
	.sp-home-audience .sp-home-audience__overlay { padding: 48px 24px 24px; }
}
.sp-home-audience .sp-home-audience__card-title {
	font-size: var(--wp--preset--font-size--large);
	line-height: 28px;
	font-weight: 700;
	letter-spacing: -0.025em;
	white-space: pre-line;
	color: var(--wp--preset--color--black-light);
}
@media (min-width: 1280px) {
	.sp-home-audience .sp-home-audience__card-title.sp-home-audience__card-title {
		margin-bottom: 8px;
		font-size: var(--wp--preset--font-size--x-large);
		line-height: 32px;
	}
}
.sp-home-audience .sp-home-audience__card-body {
	display: grid;
	overflow: hidden;
}
.sp-home-audience .sp-home-audience__card-text {
	min-height: 0;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.625;
	/* Old text-gray-600. */
	color: var(--wp--preset--color--gray-600);
}
@media (min-width: 1280px) {
	.sp-home-audience .sp-home-audience__card-text { font-size: var(--wp--preset--font-size--medium); }
}

/* The highlighted state (always on below lg, as the old card). */
.sp-home-audience .sp-home-audience__photo { opacity: 1; transform: scale(1.05); }
.sp-home-audience .sp-home-audience__sketch { opacity: 0; }
.sp-home-audience .sp-home-audience__overlay { background-color: color-mix(in srgb, var(--wp--preset--color--primary) 92%, transparent); }
.sp-home-audience .sp-home-audience__card-title { transform: translateY(-6px); }
.sp-home-audience .sp-home-audience__card-body { grid-template-rows: 1fr; }
.sp-home-audience .sp-home-audience__card-text { opacity: 1; transform: none; }

/* From lg on the front end, only the active card is highlighted. */
@media (min-width: 1024px) {
	html.sp-js .sp-home-audience .sp-home-audience__photo {
		will-change: transform;
		transition: opacity 0.16s ease-out, transform 0.55s var(--wp--custom--ease--out);
	}
	html.sp-js .sp-home-audience .sp-home-audience__sketch { transition: opacity 0.12s ease-out; }
	html.sp-js .sp-home-audience .sp-home-audience__overlay { transition: background-color 0.36s var(--wp--custom--ease--out); }
	html.sp-js .sp-home-audience .sp-home-audience__card-title { transition: transform 0.4s var(--wp--custom--ease--out); }
	html.sp-js .sp-home-audience .sp-home-audience__card-body { transition: grid-template-rows 0.38s var(--wp--custom--ease--out); }
	html.sp-js .sp-home-audience .sp-home-audience__card-text {
		transition: opacity 0.28s ease-out 0.08s, transform 0.38s var(--wp--custom--ease--out) 0.08s;
	}

	html.sp-js .sp-home-audience .sp-home-audience__card:not(.is-active) .sp-home-audience__photo {
		opacity: 0;
		transform: scale(1.02);
		transition: opacity 0.3s ease-out, transform 0.55s var(--wp--custom--ease--out);
	}
	html.sp-js .sp-home-audience .sp-home-audience__card:not(.is-active) .sp-home-audience__sketch { opacity: 1; transition: opacity 0.3s ease-out; }
	html.sp-js .sp-home-audience .sp-home-audience__card:not(.is-active) .sp-home-audience__overlay { background-color: color-mix(in srgb, var(--wp--preset--color--white) 0%, transparent); }
	html.sp-js .sp-home-audience .sp-home-audience__card:not(.is-active) .sp-home-audience__card-title { transform: none; }
	html.sp-js .sp-home-audience .sp-home-audience__card:not(.is-active) .sp-home-audience__card-body { grid-template-rows: 0fr; transition-duration: 0.3s; }
	html.sp-js .sp-home-audience .sp-home-audience__card:not(.is-active) .sp-home-audience__card-text {
		opacity: 0;
		transform: translateY(16px);
		transition: opacity 0.2s ease-in, transform 0.3s var(--wp--custom--ease--out);
	}
}