/* =========================================================================
 * Hero 002 — Home Cover
 *
 * Hero 001's frame (inset by clip-path, rounded, shaded at the foot) with the
 * copy at the lower left. Buttons are inverted for the photo: the primary is
 * white with ink letters, the secondary a white outline.
 * ========================================================================= */

.hero-002 {
	position: relative;
	isolation: isolate;
	display: flex;
	align-items: flex-end;
	height: clamp(32rem, 46vw, calc(100svh - var(--header-height) - var(--hero-inset)));
	padding: var(--space-lg) calc(var(--hero-inset) + 4vw);
	overflow: hidden;
	clip-path: inset(0 var(--hero-inset) round var(--radius-lg));
	color: var(--color-on-dark);
}

.hero-002.hero-002 > * {
	margin: 0;
}

.hero-002::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(
		180deg,
		color-mix(in srgb, var(--color-primary-dark) 10%, transparent) 30%,
		color-mix(in srgb, var(--color-primary-dark) 62%, transparent) 100%
	);
	pointer-events: none;
}

.hero-002__image.hero-002__image {
	position: absolute;
	inset: 0;
	z-index: -2;
	margin: 0;
}

.hero-002__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hero-002__copy > * {
	margin-block: 0;
}

.hero-002 h1 {
	margin-block: var(--space-sm);
	color: inherit;
}

.hero-002 .rating,
.hero-002 .rating em,
.hero-002 .rating a {
	color: var(--color-on-dark);
}

.hero-002 .rating a {
	text-decoration: none;
	border-bottom: 1px solid color-mix(in srgb, var(--color-on-dark) 50%, transparent);
}

.hero-002__actions.hero-002__actions {
	gap: var(--space-sm);
	margin-top: var(--space-md);
}

/* On the photo: white button, ink letters; the outline one in white. */
.hero-002 .wp-block-button__link {
	--button-bg: var(--color-on-dark);
	--button-color: var(--color-primary);
	--button-border-color: var(--color-on-dark);
}

.hero-002 .is-style-secondary .wp-block-button__link {
	--button-outline-bg: transparent;
	--button-outline-color: var(--color-on-dark);
}

.hero-002 .wp-block-button__link:hover,
.hero-002 .wp-block-button__link:focus-visible {
	--button-bg: color-mix(in srgb, var(--color-on-dark) 85%, var(--color-primary));
	--button-border-color: var(--color-on-dark);
}

.hero-002 .is-style-secondary .wp-block-button__link:hover,
.hero-002 .is-style-secondary .wp-block-button__link:focus-visible {
	--button-bg: var(--color-on-dark);
	--button-color: var(--color-primary);
}

@media (prefers-reduced-motion: no-preference) {
	.hero-002__image img {
		animation: hero-002-settle 2.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
	}
}

@keyframes hero-002-settle {
	from { transform: scale(1.08); }
}

@media (max-width: 40rem) {
	.hero-002 {
		height: calc(78svh - var(--wp--custom--header-height-sm));
		min-height: 28rem;
		padding: var(--space-md) var(--space-sm);
		clip-path: none;
	}
}