/**
 * Unified hero layout — fits below header in 100vh, 10vh symmetric inset, centered columns.
 */

:root {
	--garage-hero-edge-v: 10vh;
	--garage-hero-edge-inline: clamp(0.75rem, 2.5vw, 1.5rem);
	--garage-hero-max-width: 76rem;
	--garage-hero-slot-height: calc(100vh - var(--header-height, 5.25rem));
	--garage-hero-inner-height: calc(var(--garage-hero-slot-height) - var(--garage-hero-edge-v) - var(--garage-hero-edge-v));
}

.garage-hero-section {
	position: relative;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: var(--garage-hero-slot-height);
	min-height: calc(100dvh - var(--header-height, 5.25rem));
	max-height: var(--garage-hero-slot-height);
	max-height: calc(100dvh - var(--header-height, 5.25rem));
	padding-block: var(--garage-hero-edge-v);
	padding-inline: var(--garage-hero-edge-inline);
	margin: 0;
	overflow-x: clip;
	overflow-y: visible;
	isolation: isolate;
}

.garage-live-page > .garage-hero-section,
.garage-live-page.garage-page--home > .garage-hero-section,
.garage-live-page.garage-page--pricing > .garage-hero-section,
.garage-live-page.garage-page--rent-a-car > .garage-hero-section,
.garage-live-page .garage-contact-hero.garage-hero-section,
.garage-page--about > #garage-about-hero.garage-hero-section,
.garage-page--services > #garage-services-hero.garage-hero-section {
	min-height: var(--garage-hero-slot-height) !important;
	min-height: calc(100dvh - var(--header-height, 5.25rem)) !important;
	max-height: var(--garage-hero-slot-height) !important;
	max-height: calc(100dvh - var(--header-height, 5.25rem)) !important;
	height: auto !important;
	padding-block: var(--garage-hero-edge-v) !important;
	padding-inline: var(--garage-hero-edge-inline) !important;
	align-items: center !important;
	justify-content: center !important;
}

.garage-live-page .garage-hero-container,
.garage-page--about #garage-about-hero .garage-about-hero-container,
.garage-page--services #garage-services-hero .garage-services-hero__container,
.garage-hero-container.u-container,
.garage-hero-container {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	max-width: var(--garage-hero-max-width);
	min-height: 0;
	max-height: var(--garage-hero-inner-height);
	max-height: calc(100dvh - var(--header-height, 5.25rem) - var(--garage-hero-edge-v) - var(--garage-hero-edge-v));
	height: auto;
	flex: 1 1 auto;
	margin-inline: auto;
	padding-inline: 0 !important;
	padding-top: 0;
	padding-bottom: 0;
}

.garage-live-page .garage-hero-layout,
.garage-page--about #garage-about-hero .garage-about-hero-layout,
.garage-page--services #garage-services-hero .garage-services-hero__layout {
	display: grid;
	width: 100%;
	gap: clamp(1.5rem, 3vw, 2.5rem);
	align-items: center;
}

@media (max-width: 1023px) {
	:root {
		--garage-hero-edge-v: clamp(1.25rem, 5vh, 2.5rem);
		--garage-hero-edge-inline: clamp(0.75rem, 3vw, 1.25rem);
	}

	.garage-hero-section,
	.garage-live-page > .garage-hero-section,
	.garage-live-page.garage-page--home > .garage-hero-section,
	.garage-live-page.garage-page--pricing > .garage-hero-section,
	.garage-live-page.garage-page--rent-a-car > .garage-hero-section,
	.garage-live-page .garage-contact-hero.garage-hero-section,
	.garage-page--about > #garage-about-hero.garage-hero-section,
	.garage-page--services > #garage-services-hero.garage-hero-section {
		align-items: flex-start !important;
		justify-content: flex-start !important;
		height: auto !important;
		min-height: auto !important;
		max-height: none !important;
		padding-block: var(--garage-hero-edge-v) !important;
		padding-inline: var(--garage-hero-edge-inline) !important;
	}

	.garage-live-page .garage-hero-container,
	.garage-page--about #garage-about-hero .garage-about-hero-container,
	.garage-page--services #garage-services-hero .garage-services-hero__container,
	.garage-hero-container.u-container,
	.garage-hero-container {
		min-height: 0 !important;
		max-height: none !important;
		height: auto !important;
		padding-inline: 0 !important;
	}

	.garage-live-page .garage-hero-layout,
	.garage-page--about #garage-about-hero .garage-about-hero-layout,
	.garage-page--services #garage-services-hero .garage-services-hero__layout,
	.garage-rent-hero-layout {
		grid-template-columns: 1fr !important;
		width: 100%;
		gap: clamp(1rem, 3vw, 1.5rem) !important;
	}

	.garage-live-page .garage-hero-content,
	.garage-page--about #garage-about-hero .garage-about-hero-content,
	.garage-page--services #garage-services-hero .garage-services-hero__content,
	.garage-live-page.garage-page--contact .garage-contact-hero__content {
		width: 100%;
		max-width: 100%;
		min-width: 0;
	}

	.garage-live-page .garage-hero-form,
	.garage-live-page .garage-rent-hero-showcase,
	.garage-page--about #garage-about-hero .garage-about-hero-media,
	.garage-page--services #garage-services-hero .garage-services-hero__visual {
		width: 100%;
		max-width: 100% !important;
		margin-inline: 0 !important;
		justify-self: stretch !important;
	}

	.garage-hero-headline,
	.garage-about-hero__headline,
	.garage-services-hero__title,
	.garage-contact-hero__title {
		font-size: clamp(1.65rem, 7vw, 2.35rem) !important;
		line-height: 1.1 !important;
		word-break: break-word;
	}

	.garage-hero-description,
	.garage-contact-hero__text {
		max-width: 100%;
	}
}

@media (min-width: 1024px) {
	.garage-live-page .garage-hero-layout,
	.garage-page--about #garage-about-hero .garage-about-hero-layout,
	.garage-page--services #garage-services-hero .garage-services-hero__layout {
		grid-template-columns: minmax(0, 1.1fr) minmax(18rem, 24rem);
		align-items: center;
	}

	.garage-page--about #garage-about-hero .garage-about-hero-media,
	.garage-page--services #garage-services-hero .garage-services-hero__visual {
		justify-self: end;
		margin-inline: 0;
		align-self: center;
	}
}

/* Forms sit in hero flow — no forced min-height from plugin wrapper */
.garage-live-page .garage-hero-form .gapark-wrap,
.garage-live-page .garage-hero-form [data-gapark],
.garage-live-page .gapark-wrap {
	min-height: 0 !important;
	height: auto !important;
}

.garage-live-page .garage-hero-form {
	align-self: center;
	width: 100%;
	max-width: 24rem;
	margin-inline: auto;
	margin-top: 0;
}

@media (min-width: 1024px) {
	.garage-live-page .garage-hero-form,
	.garage-live-page.garage-page--rent-a-car .garage-rent-hero-showcase {
		justify-self: end;
		margin-inline: 0;
		align-self: center;
	}
}

/* Muted red backdrop only — no white pulsing orbs */
.garage-hero-orb--secondary,
.garage-hero-orb--accent,
.garage-about-hero-orb--secondary,
.garage-about-hero-orb--accent,
.garage-services-hero__orb--2 {
	display: none !important;
}

.garage-hero-orb--primary,
.garage-about-hero-orb--primary,
.garage-services-hero__orb--1,
.garage-contact-hero__orb--1,
.garage-contact-hero__orb--2 {
	animation: none !important;
	opacity: 0.075;
	background: var(--clr-primary-500, #c1121f) !important;
	filter: blur(80px);
}

.garage-hero-grid-pattern {
	opacity: 0.3;
}

/* Icon + text alignment */
.garage-hero-feature-item,
.u-eyebrow,
.garage-about-hero__checklist li,
.garage-services-hero__tags .garage-tag {
	display: inline-flex;
	align-items: center;
	gap: var(--space-sm);
}

.garage-hero-feature-icon,
.garage-about-hero__check-icon,
.garage-contact-info__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	line-height: 0;
}

.garage-hero-feature-icon svg,
.u-eyebrow svg,
.garage-about-hero__check-icon svg {
	display: block;
}

/* Uniform buttons site-wide */
.garage-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-xs);
	min-height: 2.75rem;
	padding: 0.75rem 1.5rem;
	border-radius: var(--radius-pill, 999px);
	font-family: var(--ff-primary);
	font-size: var(--fs-300);
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	border: 1px solid transparent;
	transition: all 0.2s ease;
	white-space: nowrap;
}

.garage-btn:focus-visible {
	outline: none;
	box-shadow: var(--ring-focus, 0 0 0 0.18rem rgba(193, 18, 31, 0.28));
}

.garage-btn--primary {
	background: var(--clr-primary-500, #c1121f);
	color: var(--clr-accent-400, #f5f5f5);
	box-shadow: 0 8px 24px rgba(193, 18, 31, 0.35);
}

.garage-btn--primary:hover {
	transform: translateY(-1px);
	background: var(--clr-primary-600, #9b0d18);
}

.garage-btn--primary:active {
	transform: translateY(0);
}

.garage-btn--outline {
	background: transparent;
	color: var(--text-strong, #f5f5f5);
	border-color: rgba(245, 245, 245, 0.28);
}

.garage-btn--outline:hover {
	background: rgba(193, 18, 31, 0.1);
	border-color: rgba(193, 18, 31, 0.38);
	color: var(--text-strong, #f5f5f5);
}

.garage-btn:disabled,
.garage-btn[aria-disabled="true"] {
	opacity: 0.5;
	cursor: not-allowed;
	transform: none;
}
