/**
 * Canonical hero spacing — page-scoped (no cross-page conflicts).
 * Home + Pricing pattern: .garage-live-page
 * About: #garage-about-hero on .garage-page--about
 * Services: #garage-services-hero on .garage-page--services
 */

:root {
	--garage-hero-container-pt: 0;
	--garage-hero-container-pb: 0;
	--garage-hero-layout-gap: var(--space-2xl);
	--garage-hero-content-gap: var(--space-md);
}

/* Compact inner headers — never full viewport */
.garage-inner-page-header {
	min-height: 0 !important;
	max-height: none !important;
	height: auto !important;
}

/* ========== Shared hero shell (live pages + contact) ========== */
.garage-live-page > .garage-hero-section,
.garage-live-page.garage-page--rent-a-car > .garage-hero-section,
.garage-page--contact > .garage-contact-hero.garage-hero-section {
	position: relative;
	box-sizing: border-box !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 100%;
	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;
	margin: 0 !important;
	overflow-x: clip;
	overflow-y: visible;
	isolation: isolate;
}

/* ========== About hero — same shell as home/pricing ========== */
.garage-page--about > #garage-about-hero.garage-hero-section {
	position: relative;
	box-sizing: border-box !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 100%;
	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;
	margin: 0 !important;
	overflow-x: clip;
	overflow-y: visible;
	isolation: isolate;
}

/* ========== Services hero — same shell as home/pricing ========== */
.garage-page--services > #garage-services-hero.garage-hero-section {
	position: relative;
	box-sizing: border-box !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 100%;
	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;
	margin: 0 !important;
	overflow-x: clip;
	overflow-y: visible;
	isolation: isolate;
}

/* ========== Containers ========== */
.garage-live-page .garage-hero-container,
.garage-page--contact .garage-contact-hero .garage-hero-container,
.garage-page--contact .garage-contact-hero .u-container,
.garage-page--about #garage-about-hero .garage-about-hero-container,
.garage-page--services #garage-services-hero .garage-services-hero__container {
	box-sizing: border-box;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 100% !important;
	max-width: var(--garage-hero-max-width) !important;
	min-height: 0 !important;
	max-height: var(--garage-hero-inner-height) !important;
	max-height: calc(100dvh - var(--header-height, 5.25rem) - var(--garage-hero-edge-v) - var(--garage-hero-edge-v)) !important;
	height: auto !important;
	flex: 1 1 auto;
	margin-inline: auto !important;
	padding-inline: 0 !important;
	padding-top: var(--garage-hero-container-pt) !important;
	padding-bottom: var(--garage-hero-container-pb) !important;
}

/* ========== Layout grids ========== */
.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 !important;
	width: 100%;
	align-items: center !important;
	gap: var(--garage-hero-layout-gap) !important;
}

/* ========== Content column ========== */
.garage-live-page .garage-hero-content {
	display: grid !important;
	gap: var(--garage-hero-content-gap) !important;
}

.garage-page--about #garage-about-hero .garage-about-hero-content {
	display: grid !important;
	gap: var(--garage-hero-content-gap) !important;
}

.garage-page--services #garage-services-hero .garage-services-hero__content {
	display: grid !important;
	gap: var(--garage-hero-content-gap) !important;
	align-self: center !important;
	margin-top: 0 !important;
	padding-top: 0 !important;
}

/* ========== Aside column (form / image / card) ========== */
.garage-live-page .garage-hero-form,
.garage-live-page .garage-rent-hero-showcase,
.garage-page--about #garage-about-hero .garage-about-hero-panel,
.garage-page--about #garage-about-hero .garage-about-hero-media,
.garage-page--services #garage-services-hero .garage-services-hero__visual {
	align-self: center !important;
	margin-top: 0 !important;
	padding-top: 0 !important;
	width: 100%;
	max-width: 24rem;
	margin-inline: auto;
}

.garage-live-page .garage-hero-badge,
.garage-page--about #garage-about-hero .garage-about-hero__badge,
.garage-page--services #garage-services-hero .garage-services-hero__badge {
	margin-top: 0 !important;
	padding-top: 0 !important;
}

.garage-live-page .garage-hero-cta-group,
.garage-page--about #garage-about-hero .garage-about-hero__actions,
.garage-page--services #garage-services-hero .garage-services-hero__actions {
	padding-block-start: 0.35rem !important;
	margin-top: 0 !important;
}

.garage-page--about #garage-about-hero .garage-about-hero__features,
.garage-page--services #garage-services-hero .garage-services-hero__tags {
	gap: 0.55rem !important;
	margin-block: 0 !important;
}

@media (min-width: 768px) {
	.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, 1fr) minmax(18rem, 0.9fr) !important;
	}
}

@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) !important;
		align-items: center !important;
	}

	.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 {
		justify-self: end !important;
		margin-inline: 0 !important;
		align-self: center !important;
	}
}

@media (max-width: 1023px) {
	:root {
		--garage-hero-edge-v: clamp(1.25rem, 5vh, 2.5rem);
	}

	.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-page--contact > .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: auto !important;
		max-height: none !important;
		height: auto !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 {
		max-height: none !important;
		min-height: 0 !important;
	}
}