/*
 * gm/audience-card — one photo card in the "Who we help" row.
 *
 * Figma: Card / Homeowners (643:2221 desktop, 643:2297 mobile). 8 radius, the
 * photo cropped to fill, a top-to-bottom scrim over it, and the copy set 48
 * from the bottom and 32 from the sides.
 */

.gm-audience-card {
	position: relative;
	box-sizing: border-box;
	display: flex;
	/* Copy sits at the foot of the card; the photo fills everything above it. */
	flex-direction: column;
	justify-content: flex-end;
	/*
	 * The card is sized by proportion, not a fixed height, so it scales with the
	 * column it sits in. Figma's desktop card is 443 x 594.
	 */
	aspect-ratio: 443 / 594;
	padding: var(--wp--preset--spacing--48) var(--wp--preset--spacing--32);
	overflow: hidden;
	border-radius: 8px;
	/*
	 * Shows while the photo loads, and is what a card with no photo falls back
	 * to. Matches the Figma card's own fill.
	 */
	background-color: var(--wp--preset--color--blue-3);
	color: var(--wp--preset--color--white);
}

/*
 * Position, size and crop come from .gm-parallax in assets/shared.css, which
 * also drifts the photo inside the card as the page scrolls. The card sets the
 * position: relative and overflow: hidden that it needs.
 */
/*
 * The zoom uses `scale` rather than `transform`. The parallax already animates
 * transform, and a hover rule on the same property would simply lose to it.
 * `scale` is its own property and composes with the drift instead of replacing
 * it, so the photo can travel and grow at once.
 */
/*
 * The class is repeated to out-rank the fade-in rule, and opacity is restated: the fade-in rule in assets/shared.css
 * (html.gm-fade main img) carries more specificity and sets its own transition,
 * which replaced this one and made the zoom jump in one frame instead of growing.
 */
.gm-audience-card .gm-audience-card__img.gm-audience-card__img {
	transition: opacity 0.3s ease-out, scale 600ms ease;
}

.gm-audience-card:hover .gm-audience-card__img,
.gm-audience-card:focus-within .gm-audience-card__img {
	scale: 1.05;
}

.gm-audience-card__img--empty {
	background-color: var(--wp--preset--color--blue-3);
}

/*
 * The whole card is the target, not just the words. The link stays a real link
 * in the markup and stretches an invisible layer over the card, which keeps one
 * anchor per card: nesting the card inside another <a> would be invalid and
 * would give a screen reader two links saying the same thing.
 */
.gm-audience-card__link::after {
	content: "";
	position: absolute;
	inset: 0;
	/* Above the photo and the scrim: it is the click target. */
	z-index: 2;
}

/*
 * The pointer meets the card long before it meets the link, so the link's own
 * states have to answer to the card.
 */
.gm-audience-card:hover .gm-audience-card__link,
.gm-audience-card:focus-within .gm-audience-card__link {
	color: var(--wp--preset--color--blue-4);
}

.gm-audience-card:hover .gm-link-arrow__glyph,
.gm-audience-card:focus-within .gm-link-arrow__glyph {
	transform: translateX(3px);
}

@media (prefers-reduced-motion: reduce) {

	.gm-audience-card .gm-audience-card__img.gm-audience-card__img {
		transition: none;
	}

	.gm-audience-card:hover .gm-audience-card__img,
	.gm-audience-card:focus-within .gm-audience-card__img {
		scale: none;
	}
}

/*
 * Darkens the foot of the photo so the copy stays legible whatever the picture
 * does. Values from the Figma overlay: black at 12%, 30% and 90%.
 */
.gm-audience-card__scrim {
	position: absolute;
	inset: 0;
	background-image: var(--wp--preset--gradient--card-scrim);
}

.gm-audience-card__content {
	/* Lifts the copy above the absolutely-placed photo and scrim. */
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--16);
}

.gm-audience-card__titles {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--4);
}

.gm-audience-card__title,
.gm-audience-card__subtitle {
	margin-block: 0;
	font-size: var(--wp--preset--font-size--intro);
	line-height: 1.1;
}

.gm-audience-card__title {
	font-family: var(--wp--preset--font-family--sans);
	font-weight: 500;
	color: var(--wp--preset--color--white);
}

.gm-audience-card__subtitle {
	font-family: var(--wp--preset--font-family--serif);
	font-style: italic;
	font-weight: 500;
	color: var(--wp--preset--color--blue-4);
}

/* ------------------------------------------------------------
   Mobile — a slightly squarer card, matching the 390 design
   ------------------------------------------------------------ */

@media (max-width: 900px) {

	.gm-audience-card {
		/* Figma's mobile card is 342 x 456. */
		aspect-ratio: 3 / 4;
	}
}