/* Responsive aliases of DS contract values owned by theme.json. */
.ya-front-page,
.ya-hero {
	--ya-hero-padding-top: var(--wp--custom--hero--padding-top);
	--ya-hero-padding-inline: var(--wp--custom--grid--margin--mobile);
	--ya-hero-padding-bottom: var(--wp--custom--hero--padding-bottom--mobile);
	--ya-card-heading-size: var(--wp--preset--font-size--heading-md);
	--ya-card-padding: var(--wp--custom--card-highlight--mobile--padding);
	--ya-card-radius: var(--wp--custom--card-highlight--mobile--radius);
	--ya-card-content-radius: var(--wp--custom--card-highlight--mobile--content-radius);
	--ya-card-content-padding-top: var(--wp--custom--card-highlight--mobile--content-padding-top);
	--ya-card-content-padding-inline: var(--wp--custom--card-highlight--mobile--content-padding-inline);
	--ya-card-content-padding-bottom: var(--wp--custom--card-highlight--mobile--content-padding-bottom);
	--ya-card-content-gap: var(--wp--custom--card-highlight--mobile--content-gap);
	--ya-card-action-size: var(--wp--custom--button--icon-only-medium);
}

.ya-hero {
	margin-block: 0;
	min-height: auto;
	padding: var(--ya-hero-padding-top) var(--ya-hero-padding-inline) var(--ya-hero-padding-bottom);
}

.ya-hero .wp-block-cover__inner-container {
	width: 100%;
	max-width: 100%;
	align-items: stretch;
	box-sizing: border-box;
}

/* The shared first row reserves the larger of contract spacing and header height. */
.ya-front-page {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	grid-template-rows: minmax(var(--ya-hero-padding-top), min-content) auto auto auto;
}

.ya-front-page > header {
	grid-area: 1 / 1;
	align-self: start;
	z-index: 20;
	background: transparent;
}

.ya-front-page > main {
	grid-area: 1 / 1 / 4;
	display: grid;
	grid-template-rows: subgrid;
	min-width: 0;
	margin-block-start: 0;
}

.ya-front-page > main > .ya-hero {
	grid-area: 1 / 1 / 3;
	display: grid;
	/* Cover's centered content otherwise shrink-wraps an implicit auto column. */
	grid-template-columns: minmax(0, 1fr);
	grid-template-rows: subgrid;
	padding-block-start: 0;
}

.ya-front-page > main > .ya-hero > .wp-block-cover__inner-container {
	grid-area: 2 / 1;
	align-self: end;
}

.ya-front-page > main > .wp-block-post-content { grid-area: 3 / 1; }
.ya-front-page > footer { grid-area: 4 / 1; }

.ya-hero__cards.row {
	width: 100%;
	max-width: var(--wp--style--global--wide-size);
	margin-block: 0;
	margin-inline: auto;
	align-self: stretch;
	box-sizing: border-box;
}

.ya-hero-card {
	position: relative;
	background-color: var(--wp--preset--color--neutrals-white);
	border-radius: var(--ya-card-radius);
	padding: var(--ya-card-padding);
	height: 100%;
	min-width: 0;
	box-sizing: border-box;
}

.ya-hero-card__inner {
	position: relative;
	isolation: isolate;
	box-sizing: border-box;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	grid-template-rows: auto 1fr;
	gap: var(--ya-card-content-gap) var(--wp--custom--card-highlight--row-gap);
	height: 100%;
	border-radius: var(--ya-card-content-radius);
	padding: var(--ya-card-content-padding-top) var(--ya-card-content-padding-inline) var(--ya-card-content-padding-bottom);
	overflow: hidden;
	overflow-wrap: anywhere;
}

/* White circle anchored on the action; scales to fill the clipped content on hover. */
.ya-hero-card__inner::before {
	content: "";
	position: absolute;
	z-index: -1;
	right: var(--ya-card-content-padding-inline);
	bottom: var(--ya-card-content-padding-bottom);
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--wp--custom--color--layer-background);
	transform: scale(1);
	transition: transform var(--wp--custom--card-highlight--hover-duration) var(--wp--custom--card-highlight--hover-easing);
}

.ya-hero-card__inner > .wp-block-heading,
.ya-hero-card__inner > p {
	transition: color var(--wp--custom--card-highlight--hover-duration) var(--wp--custom--card-highlight--hover-easing);
}

.ya-hero-card__inner > .wp-block-heading {
	grid-column: 1 / -1;
	margin: 0;
	/* Core font-size preset classes are !important; keep this component exception scoped. */
	font-size: var(--ya-card-heading-size) !important;
}

.ya-hero-card__inner > p {
	grid-column: 1;
	align-self: end;
	max-width: var(--wp--custom--card-highlight--description-max-width);
	margin: 0;
}

.ya-hero-card__inner > .wp-block-buttons {
	grid-column: 2;
	align-self: end;
	margin: 0;
}

.ya-hero-card__arrow .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--ya-card-action-size);
	height: var(--ya-card-action-size);
	padding: 0;
	border-radius: var(--wp--custom--button--radius-full);
	line-height: 1;
	text-decoration: none;
	height: 44px;
	width: 44px;
	border: 2px solid var(--wp--preset--color--gray-300);
}

@media (hover: hover) and (pointer: fine) {
	/* The real link covers the card. Focus keeps the base look; editor controls are not links. */
	.ya-hero-card:has(.ya-hero-card__arrow a:hover:not(:focus-visible)) > .ya-hero-card__inner::before {
		transform: scale(var(--wp--custom--card-highlight--fill-scale));
	}

	.ya-hero-card:has(.ya-hero-card__arrow a:hover:not(:focus-visible)) > .ya-hero-card__inner > :is(.wp-block-heading, p) {
		/* Override WordPress's !important text presets so copy stays readable on the white fill. */
		color: var(--wp--custom--color--text-primary) !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ya-hero-card__inner::before,
	.ya-hero-card__inner > .wp-block-heading,
	.ya-hero-card__inner > p {
		transition: none;
	}
}

/* Stretch the one native link across the card; no click handlers or duplicate links. */
.ya-hero-card__arrow .wp-block-button__link::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: var(--ya-card-radius);
}

.ya-hero-card:has(.ya-hero-card__arrow .wp-block-button__link:focus-visible) {
	/* Inset onto the white card border for reliable contrast, independent of the photo. */
	outline: var(--wp--custom--focus--width) solid var(--wp--preset--color--brand-900);
	outline-offset: calc(-1 * var(--wp--custom--focus--width));
}

@media (forced-colors: active) {
	.ya-hero-card:has(.ya-hero-card__arrow .wp-block-button__link:focus-visible) {
		outline-color: Highlight;
	}
}

/* Leave Gutenberg's text and link controls directly selectable. */
.editor-styles-wrapper .ya-hero-card__arrow .wp-block-button__link::after {
	content: none;
}

/* CSS custom properties cannot be used as media-query thresholds. */
@media (min-width: 480px) {
	.ya-front-page, .ya-hero {
		--ya-hero-padding-inline: var(--wp--custom--grid--margin--mobile-l);
		--ya-hero-padding-bottom: var(--wp--custom--hero--padding-bottom--mobile-l);
	}
}

@media (min-width: 768px) {
	.ya-front-page, .ya-hero {
		--ya-hero-padding-inline: var(--wp--custom--grid--margin--tablet);
		--ya-hero-padding-bottom: var(--wp--custom--hero--padding-bottom--tablet);
		--ya-card-padding: var(--wp--custom--card-highlight--desktop--padding);
		--ya-card-radius: var(--wp--custom--card-highlight--desktop--radius);
		--ya-card-content-radius: var(--wp--custom--card-highlight--desktop--content-radius);
		--ya-card-content-padding-top: var(--wp--custom--card-highlight--desktop--content-padding-top);
		--ya-card-content-padding-inline: var(--wp--custom--card-highlight--desktop--content-padding-inline);
		--ya-card-content-padding-bottom: var(--wp--custom--card-highlight--desktop--content-padding-bottom);
		--ya-card-content-gap: var(--wp--custom--card-highlight--desktop--content-gap);
		--ya-card-action-size: var(--wp--custom--button--icon-only-default);
	}

	/* Subgrid ignores its own min-height; size the shared hero rows instead. */
	.ya-front-page > main::before {
		content: "";
		grid-area: 1 / 1 / 3;
		min-height: 100svh;
		pointer-events: none;
	}

	.ya-hero {
		min-height: 100svh;
		clip-path: inset(0);
	}
}

/* Otherwise core Cover positioning makes the image scroll with the hero. */
@media (min-width: 768px) and (prefers-reduced-motion: no-preference) {
	.ya-hero .wp-block-cover__image-background {
		position: fixed;
		inset: 0;
		width: 100%;
		height: 100svh;
		max-width: none;
		object-fit: cover;
		pointer-events: none;
	}
}

@media (min-width: 992px) {
	.ya-front-page, .ya-hero { --ya-hero-padding-top: var(--ya-spacing-00); }
}

/* Include previously saved patterns without rewriting their block markup. */
@media (min-width: 992px) and (max-width: 1279px) {
	.ya-hero__cards.row > .ya-hero-card--yellow { grid-column: auto / span 12; }
	.ya-hero__cards.row > :is(.ya-hero-card--navy, .ya-hero-card--olive) { grid-column: auto / span 6; }
}

@media (min-width: 1280px) {
	.ya-front-page, .ya-hero {
		--ya-hero-padding-bottom: var(--wp--custom--hero--padding-bottom--desktop);
	}
	/* Editor preview only. Frontend order is handled by hero.js, including focus order. */
	.editor-styles-wrapper .ya-hero__cards > .ya-hero-card--navy { order: 1; }
	.editor-styles-wrapper .ya-hero__cards > .ya-hero-card--yellow { order: 2; }
	.editor-styles-wrapper .ya-hero__cards > .ya-hero-card--olive { order: 3; }
}

@media (min-width: 1920px) {
	.ya-front-page, .ya-hero {
		--ya-hero-padding-bottom: var(--wp--custom--hero--padding-bottom--big-screen);
	}
}