/**
 * Offer Hero Takeover styles — ported from the Scottsdale Air reference
 * (idiom-base lineage), mapped to Sierra Air brand colors and Font Awesome.
 *
 * Sierra exposes --sa-* color tokens but no spacing/radius/gradient/display
 * tokens, so we bridge them locally here with the reference's values.
 *
 * @package Sierra_Air_Child
 */

.hero-offer-takeover,
.hero-offer-strip,
.ppc-offer-disclaimer {
	--space-xs: 0.25rem;
	--space-sm: 0.5rem;
	--space-md: 1rem;
	--space-lg: 2rem;
	--space-xl: 4rem;
	--radius-sm: 4px;
	--radius-lg: 12px;
	--offer-font-display: 'Archivo Black', 'Archivo', 'Source Sans 3', sans-serif;
	--offer-white: #ffffff;
	--offer-accent: #4a9fe8; /* bright blue heading accent / trust icons */
	--offer-off-white: #f8f9fa;
	--offer-light-gray: #e9ecef;
	--offer-medium-gray: #6c757d;
	--offer-dark-gray: #343a40;
	--offer-gradient-red: linear-gradient(180deg, #ee3a44 0%, #d63238 100%);
}

/* ===========================================================
   Section shell — background photo + blue multiply overlay
   =========================================================== */
.hero-offer-takeover {
	position: relative;
	overflow: hidden;
	min-height: auto;
	padding: 12rem var(--space-lg) 4.5rem;
	border-bottom: none;
	color: var(--offer-white);
	/* Base blue to match the homepage hero. */
	background: linear-gradient(135deg, #003366 0%, #0051a3 100%);
}

/* Background photo behind the blue overlay. */
.hero-offer-takeover::after {
	content: '';
	position: absolute;
	inset: 0;
	background: var(--hero-bg-image) center center / cover no-repeat;
	z-index: 0;
}

/* Homepage-style overlay: translucent blue gradient + subtle diagonal texture
   and corner accents, over the photo. */
.hero-offer-takeover::before {
	content: '';
	position: absolute;
	inset: 0;
	background:
		repeating-linear-gradient( -45deg, transparent, transparent 80px, rgba(255, 255, 255, 0.025) 80px, rgba(255, 255, 255, 0.025) 82px ),
		linear-gradient( -45deg, transparent 60%, rgba(0, 90, 160, 0.15) 100% ),
		linear-gradient( 45deg, rgba(0, 90, 160, 0.15) 0%, transparent 35% ),
		linear-gradient( 135deg, rgba(0, 51, 102, 0.85) 0%, rgba(0, 81, 163, 0.78) 100% );
	z-index: 1;
	pointer-events: none;
}

.hero-offer-takeover .section-container {
	position: relative;
	z-index: 2;
}

/* ---- Grid + desktop order swap (media left, copy right) ---- */
.hero-offer-grid {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
	gap: var(--space-xl);
	align-items: center;
}

.hero-offer-body {
	order: 2;
}

.hero-offer-media {
	order: 1;
	position: relative;
	margin-top: 2.5rem; /* desktop breathing room above the photo card */
}

/* ---- Breadcrumbs inside the takeover body ---- */
.hero-offer-body .breadcrumbs {
	margin: 0 0 var(--space-md);
	padding: 0;
	background: none;
	border: 0;
	box-shadow: none;
	border-radius: 0;
}

/* Strip the <ol> default indentation so it sits flush-left with the copy. */
.hero-offer-body .breadcrumb-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.25rem;
}

.hero-offer-body .breadcrumb-item {
	display: inline-flex;
	align-items: center;
}

.hero-offer-body .breadcrumbs a,
.hero-offer-body .breadcrumb-current,
.hero-offer-body .breadcrumb-separator,
.hero-offer-body .breadcrumbs .breadcrumb-item {
	color: rgba(255, 255, 255, 0.85);
}

.hero-offer-body .breadcrumbs a:hover {
	color: var(--offer-white);
}

/* ---- Copy column ---- */
.hero-offer-kicker {
	color: var(--offer-white);
	font-family: var(--offer-font-display);
	font-weight: 700;
	font-size: 0.875rem;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	margin: 0 0 var(--space-sm);
	text-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}

.hero-offer-heading {
	font-family: var(--offer-font-display);
	font-weight: 700;
	font-style: italic;
	font-size: clamp(2rem, 3.4vw, 2.875rem);
	color: var(--offer-white);
	line-height: 1.1;
	margin: 0 0 var(--space-md);
	text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}

.hero-offer-heading-accent {
	color: var(--offer-accent);
}

.hero-offer-lede {
	font-size: 1.125rem;
	color: rgba(255, 255, 255, 0.92);
	line-height: 1.55;
	max-width: 540px;
	margin: 0 0 var(--space-lg);
}

/* ---- Perks: vertical checklist with circle check chips ---- */
.hero-offer-perks {
	list-style: none;
	margin: 0 0 var(--space-lg);
	padding: 0;
}

.hero-offer-perks li {
	display: flex;
	align-items: flex-start;
	gap: var(--space-sm);
	margin-bottom: 0.625rem;
	color: var(--offer-white);
	font-size: 1.1875rem;
	font-weight: 600;
}

.hero-offer-perks li:last-child {
	margin-bottom: 0;
}

.hero-offer-perk-check {
	flex: 0 0 24px;
	width: 24px;
	height: 24px;
	margin-top: 1px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.18);
	border: 1px solid rgba(255, 255, 255, 0.25);
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.hero-offer-perk-check i {
	font-size: 12px;
	color: var(--offer-white);
	line-height: 1;
}

/* ---- Actions: red CTA + arrow-style phone link ---- */
.hero-offer-actions {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--space-lg);
}

/* Self-styled so it matches the reference regardless of the theme .btn rules
   (Sierra's global .btn-primary is blue; this CTA is red — the deal = button). */
.hero-offer-takeover .hero-offer-cta {
	display: inline-flex;
	align-items: center;
	gap: var(--space-sm);
	padding: 16px 36px;
	font-family: var(--offer-font-display);
	font-weight: 700;
	font-style: italic;
	font-size: 1.0625rem;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	text-decoration: none;
	color: var(--offer-white);
	background: var(--offer-gradient-red);
	border: none;
	border-radius: var(--radius-sm);
	box-shadow: 0 4px 20px rgba(238, 58, 68, 0.4);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hero-offer-takeover .hero-offer-cta:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 25px rgba(238, 58, 68, 0.5);
	color: var(--offer-white);
}

.hero-offer-phone {
	display: inline-flex;
	align-items: center;
	gap: var(--space-sm);
	color: var(--offer-white);
	font-size: 1.0625rem;
	font-weight: 600;
	text-decoration: none;
	transition: color 0.2s ease, gap 0.2s ease;
}

.hero-offer-phone strong {
	font-family: var(--offer-font-display);
	font-weight: 700;
}

.hero-offer-phone-arrow {
	font-size: 14px;
	transition: transform 0.2s ease;
}

.hero-offer-phone:hover {
	color: var(--offer-accent);
	gap: 0.75rem;
}

.hero-offer-phone:hover .hero-offer-phone-arrow {
	transform: translateX(2px);
}

/* ---- Media column: photo + circular price badge ---- */
.hero-offer-photo {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 5 / 4;
	object-fit: cover;
	border-radius: var(--radius-lg);
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
}

.hero-offer-badge {
	position: absolute;
	right: -8px;
	bottom: -16px;
	width: 168px;
	height: 168px;
	border-radius: 50%;
	background: var(--offer-gradient-red);
	color: var(--offer-white);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: var(--space-sm);
	line-height: 1.05;
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3), inset 0 0 0 5px rgba(255, 255, 255, 0.9);
}

.hero-offer-badge-value {
	font-family: var(--offer-font-display);
	font-weight: 800;
	font-style: italic;
	font-size: 2.5rem;
	line-height: 1;
	margin: 0.25rem 0;
}

.hero-offer-badge-top,
.hero-offer-badge-bottom {
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	line-height: 1.15;
	max-width: 130px;
}

/* ===========================================================
   Trust strip — sibling band below the section
   =========================================================== */
.hero-offer-strip {
	background: var(--offer-off-white);
	border-bottom: 1px solid var(--offer-light-gray);
	padding: 0.875rem var(--space-lg);
}

.hero-offer-strip-trust {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: var(--space-sm) var(--space-xl);
}

.hero-offer-strip-trust li {
	display: flex;
	align-items: center;
	gap: 0.375rem;
	color: var(--offer-dark-gray);
	font-size: 0.875rem;
	font-weight: 600;
}

.hero-offer-strip-trust i {
	font-size: 15px;
	color: var(--offer-accent);
}

/* ===========================================================
   Offer disclaimer band — auto-inserted above the footer
   =========================================================== */
.ppc-offer-disclaimer {
	background: var(--offer-light-gray);
	border-top: 1px solid rgba(0, 0, 0, 0.06);
	padding: 0.875rem var(--space-lg);
}

.ppc-offer-disclaimer p {
	margin: 0;
	text-align: center;
	color: var(--offer-medium-gray);
	font-size: 0.75rem;
	line-height: 1.5;
}

/* ---- Breadcrumbs over the standard service hero (lighter for contrast) ---- */
.service-hero .breadcrumbs {
	margin: 0 0 1rem;
	padding: 0;
	background: none;
	border: 0;
	box-shadow: none;
	border-radius: 0;
}

.service-hero .breadcrumbs a,
.service-hero .breadcrumb-current,
.service-hero .breadcrumb-separator,
.service-hero .breadcrumbs .breadcrumb-item {
	color: rgba(255, 255, 255, 0.9);
}

/* ===========================================================
   Standard service hero — centered (the coupon badge that filled
   the right column is retired, so the lone content column is centered).
   Overrides the theme's left-aligned `body #page ... !important` rules.
   =========================================================== */
body #page .service-hero .hero-split-layout,
.site .service-hero .hero-split-layout {
	justify-content: center !important;
	text-align: center !important;
}

body #page .service-hero .hero-content-left,
.site .service-hero .hero-content-left {
	margin-left: auto !important;
	margin-right: auto !important;
	text-align: center !important;
}

body #page .service-hero .hero-content-left h1,
.site .service-hero .hero-content-left h1 {
	text-align: center !important;
}

.service-hero .hero-content-left .cta-button {
	margin-left: auto;
	margin-right: auto;
}

.service-hero .breadcrumbs {
	display: flex;
	justify-content: center;
}

.service-hero .breadcrumb-list {
	list-style: none;
	margin: 0 auto;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.25rem;
}

.service-hero .breadcrumb-item {
	display: inline-flex;
	align-items: center;
}

/* ===========================================================
   Responsive
   =========================================================== */
@media (max-width: 900px) {
	.hero-offer-takeover {
		padding: 9rem var(--space-md) 3.5rem;
	}

	.hero-offer-grid {
		grid-template-columns: 1fr;
		gap: var(--space-lg);
	}

	/* Copy first, photo (with price badge) after the CTA. */
	.hero-offer-body {
		order: 1;
	}

	.hero-offer-media {
		order: 2;
		margin-top: 0; /* reset desktop spacing on mobile */
		margin-bottom: var(--space-md);
	}

	.hero-offer-photo {
		aspect-ratio: 4 / 3;
	}

	.hero-offer-badge {
		width: 128px;
		height: 128px;
		right: -4px;
		bottom: -12px;
	}

	.hero-offer-badge-value {
		font-size: 1.875rem;
	}

	.hero-offer-lede {
		font-size: 1rem;
	}

	.hero-offer-actions {
		flex-direction: column;
		align-items: stretch;
		gap: var(--space-md);
		text-align: center;
	}

	.hero-offer-takeover .hero-offer-cta {
		justify-content: center;
		width: 100%;
	}

	.hero-offer-phone {
		justify-content: center;
	}

	.hero-offer-strip {
		padding: 0.875rem var(--space-md);
	}

	.hero-offer-strip-trust {
		gap: var(--space-sm) var(--space-md);
	}
}