/* Hero page-header element. Tokens: tokens.css. Loaded conditionally by inc/enqueue.php. Mobile-first. */

.ppc-hero {
	position: relative;
	isolation: isolate;
	display: flex;
	/* Floor is tall enough that the content fits without spilling into the bottom padding,
	   so there is real breathing room below the CTA (matching the Figma proportion). */
	min-height: clamp(44rem, 90vh, 48rem);
	/* Pull up behind the sticky, transparent navbar so the background reaches the very top;
	   content is padded down so it clears the floating pill. */
	margin-top: calc(-1 * var(--ppc-header-h));
	padding: calc(var(--ppc-header-h) + clamp(1rem, 2.5vw, 2.5rem)) var(--ppc-header-inset-x) clamp(3rem, 7vw, 5rem);
	color: var(--ppc-color-hero-text);
	overflow: hidden;
}

/* Background layers */
.ppc-hero__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.ppc-hero__poster,
.ppc-hero__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.ppc-hero__overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: var(--ppc-hero-overlay);
}

/* Content column */
.ppc-hero__inner {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	width: 100%;
	max-width: 1440px;
	margin-inline: auto;
}

.ppc-hero__content {
	display: flex;
	flex-direction: column;
	gap: clamp(2rem, 4vw, 3.5rem);
	max-width: 42.5rem;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

/* Rating + title/subtitle group. The 8px sits between the rating and the title; the 56px
   content gap above applies only between this group and the CTA. */
.ppc-hero__lead {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

/* Rating */
.ppc-hero__rating-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	color: var(--ppc-color-hero-text);
	font-family: var(--ppc-font-sans);
	font-size: 0.875rem;
	line-height: var(--ppc-line-height-tight);
	text-shadow: 0 2px 3px rgba(0, 0, 0, 0.2);
}

.ppc-hero__rating-label {
	font-weight: var(--ppc-font-weight-semibold);
}

.ppc-hero__rating-score {
	font-weight: 400;
}

/* Trustindex badge (placeholder). Same crop of the source image as the Figma export. */
.ppc-hero__rating-logo {
	flex-shrink: 0;
	width: 88.889px;
	height: 15px;
	background-image: url('trustindex-badge.png');
	background-repeat: no-repeat;
	background-size: 112.79px 24.44px;
	background-position: -6.11px -4.44px;
}

/* Heading */
.ppc-hero__heading {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

.ppc-hero__title {
	margin: 0;
	font-family: var(--ppc-font-sans);
	font-weight: var(--ppc-font-weight-extrabold);
	font-size: var(--ppc-font-size-h1);
	line-height: var(--ppc-line-height-tight);
}

.ppc-hero__subtitle {
	margin: 0;
	font-family: var(--ppc-font-open-sans);
	font-weight: var(--ppc-font-weight-semibold);
	font-size: var(--ppc-font-size-hero-subtitle);
	line-height: var(--ppc-line-height-tight);
}

/* Actions */
.ppc-hero__actions {
	display: flex;
	flex-direction: column;
	align-items: center;
	align-self: flex-start;
	gap: 1rem;
}

.ppc-hero__disclaimer {
	margin: 0;
	font-family: var(--ppc-font-sans);
	font-style: italic;
	font-weight: 400;
	font-size: 0.75rem;
	line-height: var(--ppc-line-height-tight);
	color: var(--ppc-color-hero-text);
	white-space: nowrap;
	text-shadow: 0 2px 3px rgba(0, 0, 0, 0.32);
}

/* Bottom-right badge: the shared credit-badge now carries the FULL star artwork (467x468).
   The 1440 design shows a corner crop: svg-box pixel (330, 296) sits exactly on the viewport
   corner, so the box hangs 137px past the right and 172px past the bottom (hero overflow clips).
   On wider screens the right offset tracks the 1280 container (same +80px overhang 1440 has),
   revealing the full star instead of a floating crop; <=1440 the max() clamps to the old look. */
.ppc-hero__badge {
	position: absolute;
	right: calc(max(0px, (100% - var(--ppc-container-width)) / 2 - 80px) - 137px);
	bottom: -172px;
	display: grid;
	place-items: center;
	/* Above __inner (z 2) so the star's upper arm stays hoverable; harmless because only the
	   star silhouette catches the pointer - the rest of the badge box passes through. */
	z-index: 3;
	pointer-events: none;
}

/* Small screens: keep the corner badge from cluttering the stacked layout */
@media (max-width: 40rem) {
	.ppc-hero__badge {
		display: none;
	}
}

/* Entry animations. The header always enters the screen first, so these play on load
   (no viewport observer). The `translate` property is animated instead of `transform`
   so the badge's internal transforms stay untouched. */
@keyframes ppc-hero-in-left {
	from {
		opacity: 0;
		translate: -2.5rem 0;
	}

	to {
		opacity: 1;
		translate: 0 0;
	}
}

@keyframes ppc-hero-in-corner {
	from {
		opacity: 0;
		translate: 4rem 4rem;
	}

	to {
		opacity: 1;
		translate: 0 0;
	}
}

.ppc-hero__content {
	animation: ppc-hero-in-left 0.7s ease-out both;
}

.ppc-hero__badge {
	animation: ppc-hero-in-corner 0.8s ease-out 0.2s both;
}

@media (prefers-reduced-motion: reduce) {
	.ppc-hero__video {
		display: none;
	}

	.ppc-hero__sparkle-group {
		transition: none;
	}

	.ppc-hero__sparkle-group:hover {
		transform: none;
	}

	.ppc-hero__content,
	.ppc-hero__badge {
		animation: none;
	}
}