/* ─── Hero Section ─── */

.op-hero {
	--op-hero-pad-top-min: var(--wp--preset--spacing--md);
	--op-hero-pad-top-max: var(--wp--preset--spacing--2-xl);
	--op-hero-pad-bottom-min: var(--wp--preset--spacing--sm);
	--op-hero-pad-bottom-max: var(--wp--preset--spacing--xl);
	padding-top: calc(
		var(--op-sticky-header-offset, 0px) +
			clamp(
				var(--op-hero-pad-top-min),
				calc(
					var(--op-hero-pad-top-min) +
						(
							var(--op-hero-pad-top-max) -
								var(--op-hero-pad-top-min)
						) *
						var(--op-fluid-scale)
				),
				var(--op-hero-pad-top-max)
			)
	);
	padding-right: var(--op-section-px);
	padding-bottom: clamp(
		var(--op-hero-pad-bottom-min),
		calc(
			var(--op-hero-pad-bottom-min) +
				(
					var(--op-hero-pad-bottom-max) -
						var(--op-hero-pad-bottom-min)
				) *
				var(--op-fluid-scale)
		),
		var(--op-hero-pad-bottom-max)
	);
	padding-left: var(--op-section-px);
	position: relative;
	overflow: hidden;
}

/* Parchment defaults — only when no style variant is selected */
.op-hero:not([class*='is-style-']) {
	--op-eyebrow-line-color: var(--op-color-dusk);
	background-color: var(--op-color-parchment);
}

.op-hero--no-image .op-hero__inner {
	grid-template-columns: 1fr;
}

.op-hero--no-image .op-hero__content {
	max-width: 980px;
}

.op-hero__inner {
	display: grid;
	grid-template-columns: 59fr 41fr;
	gap: clamp(
		var(--wp--preset--spacing--md),
		calc(
			var(--wp--preset--spacing--md) +
				(
					var(--wp--preset--spacing--xl) -
						var(--wp--preset--spacing--md)
				) *
				var(--op-fluid-scale)
		),
		var(--wp--preset--spacing--xl)
	);
	align-items: center;
}

/* ─── Content column ─── */

.op-hero__content {
	padding-top: clamp(
		0rem,
		calc(
			var(--wp--preset--spacing--xs) +
				(
					var(--wp--preset--spacing--md) -
						var(--wp--preset--spacing--xs)
				) *
				var(--op-fluid-scale)
		),
		var(--wp--preset--spacing--md)
	);
}

.op-hero__headline {
	font-size: clamp(
		var(--wp--preset--font-size--2-xl),
		calc(
			var(--wp--preset--font-size--2-xl) +
				(
					var(--wp--preset--font-size--3-xl) -
						var(--wp--preset--font-size--2-xl)
				) *
				var(--op-fluid-scale)
		),
		var(--wp--preset--font-size--3-xl)
	);
	line-height: 1.04;
	max-width: none;
}

/* Give TiRe hero headlines a touch more line room so highlight markers
   never collide with text on the line above. */
.op-hero[class*='is-style-tire-'] .op-hero__headline {
	line-height: 1.16;
}

/* TiRe style variants: add a branded marker background to highlighted words
   while preserving the headline's native text styling. */
.op-hero[class*='is-style-tire-'] .op-hero__headline .op-highlight {
	--op-hero-highlight-bg: var(--op-color-tire-sun);
	color: inherit;
	font-family: inherit;
	font-style: inherit;
	font-weight: inherit;
	letter-spacing: inherit;
	line-height: 1;
	background-image: linear-gradient(
		to bottom,
		transparent 0.16em,
		var(--op-hero-highlight-bg) 0.16em
	);
	background-repeat: no-repeat;
	background-size: 100% 100%;
	padding: 0 0.22em 0.05em;
	border-radius: 0.06em;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}

/* Keep glossary markers readable when they sit on top of hero highlight chips. */
.op-hero[class*='is-style-tire-']
	.op-hero__headline
	.op-highlight
	.op-glossary-term {
	padding-right: 0em;
}

.op-hero[class*='is-style-tire-']
	.op-hero__headline
	.op-highlight
	.op-glossary-term__indicator {
	background-color: var(--op-hero-highlight-bg, #ffde59);
	border-radius: 100%;
	color: color-mix(in srgb, currentColor 33%, transparent);
	opacity: 1;
	padding: 0.3rem 0.2rem 0.2rem 0.2rem;
	top: -0.18em;
}

/* On these three variants, TiRe Sun yellow is too close to the section color.
   Switch marker background to TiRe Rust for better separation. */
.op-hero:is(
		.is-style-tire-green-sun,
		.is-style-tire-sun,
		.is-style-tire-sun-black
	)
	.op-hero__headline
	.op-highlight {
	--op-hero-highlight-bg: var(--op-color-tire-rust);
}

.op-hero__subheadline {
	font-size: clamp(
		var(--wp--preset--font-size--base),
		calc(
			var(--wp--preset--font-size--base) +
				(
					var(--wp--preset--font-size--md) -
						var(--wp--preset--font-size--base)
				) *
				var(--op-fluid-scale)
		),
		var(--wp--preset--font-size--md)
	);
	margin-bottom: clamp(
		var(--wp--preset--spacing--sm),
		calc(
			var(--wp--preset--spacing--sm) +
				(
					var(--wp--preset--spacing--lg) -
						var(--wp--preset--spacing--sm)
				) *
				var(--op-fluid-scale)
		),
		var(--wp--preset--spacing--lg)
	);
	max-width: 68ch;
}

.op-hero__actions {
	display: flex;
	gap: var(--wp--preset--spacing--sm);
	flex-wrap: wrap;
	margin-bottom: clamp(
		var(--wp--preset--spacing--sm),
		calc(
			var(--wp--preset--spacing--sm) +
				(
					var(--wp--preset--spacing--lg) -
						var(--wp--preset--spacing--sm)
				) *
				var(--op-fluid-scale)
		),
		var(--wp--preset--spacing--lg)
	);
	padding-top: var(--wp--preset--spacing--xs);
}

.op-hero__trust {
	padding: 1rem 0 0;
	gap: var(--wp--preset--spacing--lg);
}

.op-hero__trust-dot {
	width: 4px;
	height: 4px;
	background-color: var(--op-highlight-color);
	border-radius: var(--op-pill-radius);
	flex-shrink: 0;
}

/* ─── Media column ─── */

.op-hero__media {
	position: relative;
	align-self: start;
	margin-top: clamp(
		var(--wp--preset--spacing--xs),
		calc(
			var(--wp--preset--spacing--xs) +
				(
					var(--wp--preset--spacing--sm) -
						var(--wp--preset--spacing--xs)
				) *
				var(--op-fluid-scale)
		),
		var(--wp--preset--spacing--sm)
	);
}

.op-hero__image-wrap {
	position: relative;
	z-index: 1;
	overflow: hidden;
	border-radius: var(--wp--custom--border-radius--card);
}

.op-hero__image {
	display: block;
	width: 100%;
	height: auto;
	-o-object-fit: cover;
	   object-fit: cover;
	aspect-ratio: 505 / 632;
}

.op-hero__image--placeholder {
	background-color: var(--op-card-bg);
	border-radius: var(--wp--custom--border-radius--card);
}

.op-hero__video-wrap {
	position: relative;
	z-index: 1;
	overflow: hidden;
	border-radius: var(--wp--custom--border-radius--card);
	aspect-ratio: var(--op-video-ratio, 16 / 9);
	background-color: var(--op-card-bg);
}

.op-hero__video-embed {
	width: 100%;
	height: 100%;
}

.op-hero__video-embed :is(iframe, video, object, embed) {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

.op-hero__video-wrap--placeholder {
	display: grid;
	place-items: center;
}

/* TiRe Sun/Ivory keep supporting copy black while headline remains green. */
.op-hero:is(
		.is-style-tire-sun,
		.is-style-tire-ivory,
		.is-style-tire-ivory-black
	)
	.op-hero__subheadline {
	color: rgb(var(--op-rgb-black));
}

/* ─── Responsive ─── */

@media (max-width: 1023px) {
	.op-hero__inner {
		grid-template-columns: 1fr;
		gap: var(--wp--preset--spacing--xl);
	}

	.op-hero__content {
		padding-top: 0;
		order: 1;
	}

	.op-hero__media {
		order: 2;
		max-width: 500px;
		margin-top: 0;
	}

	.op-hero .op-eyebrow {
		margin-bottom: var(--wp--preset--spacing--xl);
	}

	.op-hero__trust {
		gap: var(--wp--preset--spacing--sm);
	}
}

@media (max-width: 639px) {
	.op-hero__actions {
		flex-direction: column;
	}

	.op-hero__actions .op-btn {
		width: 100%;
	}

	.op-hero__trust {
		flex-direction: column;
		gap: 0.75rem;
	}
}