/**
 * Mobile fixes — heroes, stacking, navigation (loads last).
 */

/* ========== Compact inner page headers ========== */
@media (max-width: 1023px) {
	.garage-inner-page-header {
		padding-top: clamp(2.75rem, 7vw, 3.5rem) !important;
		padding-bottom: clamp(1.75rem, 4vw, 2.5rem) !important;
	}
}

/* ========== Heroes — no viewport lock, clear header offset ========== */
@media (max-width: 1023px) {
	.garage-hero-section,
	.garage-live-page > .garage-hero-section,
	.garage-page--home #home-hero,
	.garage-page--pricing #pricing-hero,
	.garage-page--rent-a-car #rent-hero,
	.garage-page--contact #contact-hero,
	.garage-page--about > #garage-about-hero,
	.garage-page--services > #garage-services-hero {
		display: flex !important;
		flex-direction: column !important;
		align-items: stretch !important;
		justify-content: flex-start !important;
		box-sizing: border-box !important;
		width: 100% !important;
		min-height: auto !important;
		max-height: none !important;
		height: auto !important;
		overflow: visible !important;
		padding-top: calc(var(--header-height, 5.25rem) + 1rem) !important;
		padding-bottom: clamp(2rem, 5vw, 3rem) !important;
		padding-inline: var(--garage-hero-edge-inline, clamp(0.75rem, 3vw, 1.25rem)) !important;
		margin: 0 !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,
	.garage-hero-container.u-container {
		display: block !important;
		width: 100% !important;
		min-height: 0 !important;
		max-height: none !important;
		height: auto !important;
		padding: 0 !important;
		margin: 0 !important;
		overflow: visible !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 {
		display: grid !important;
		grid-template-columns: 1fr !important;
		width: 100% !important;
		gap: clamp(1.25rem, 4vw, 1.75rem) !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 {
		order: 1;
		width: 100%;
		max-width: 100%;
		min-width: 0;
	}

	.garage-live-page .garage-hero-form,
	.garage-page--about #garage-about-hero .garage-about-hero-media,
	.garage-page--services #garage-services-hero .garage-services-hero__visual,
	.garage-live-page .garage-rent-hero-showcase {
		order: 2;
		width: 100% !important;
		max-width: 100% !important;
		margin: 0 !important;
		position: relative;
		z-index: 2;
	}

	.garage-hero-headline,
	.garage-about-hero__headline,
	.garage-services-hero__title,
	.garage-contact-hero__title {
		font-size: clamp(1.55rem, 7.5vw, 2.25rem) !important;
		line-height: 1.12 !important;
		overflow-wrap: anywhere;
	}

	.garage-hero-scroll-indicator {
		display: none !important;
	}

	/* Home: stats must not overlap hero / form */
	.garage-page--home > .garage-hero-section {
		position: relative;
		z-index: 2;
		margin-bottom: 0 !important;
	}

	.garage-page--home > .garage-hero-section + .u-section {
		position: relative;
		z-index: 3;
		margin-top: 0 !important;
		padding-top: clamp(2rem, 6vw, 3rem) !important;
		clear: both;
		isolation: isolate;
	}

	.garage-page--home .garage-hero-form {
		margin-top: 0 !important;
		margin-bottom: 0 !important;
	}

	.garage-page--home .garage-stat-grid--modern {
		display: grid !important;
		grid-template-columns: 1fr !important;
		gap: 0.75rem !important;
		position: relative;
		z-index: 1;
	}

	.garage-page--home .garage-stat-card,
	.garage-live-page .garage-stat-card {
		position: relative !important;
		overflow: hidden !important;
		min-height: auto !important;
		padding: 1rem 0.85rem !important;
		transform: none !important;
	}

	.garage-page--home .garage-stat-card:hover,
	.garage-live-page .garage-stat-card:hover {
		transform: none !important;
	}

	.garage-page--home .garage-stat-card__value,
	.garage-live-page .garage-stat-card__value {
		font-size: clamp(1.35rem, 6vw, 1.85rem) !important;
		white-space: normal !important;
		line-height: 1.15 !important;
		overflow: hidden !important;
	}

	.garage-page--home .garage-stat-card__label,
	.garage-live-page .garage-stat-card__label {
		white-space: normal !important;
		max-width: none !important;
	}

	/* About: copy first, image + stats panel second */
	.garage-page--about #garage-about-hero .garage-about-hero-layout {
		display: flex !important;
		flex-direction: column !important;
	}

	.garage-page--about #garage-about-hero .garage-about-hero-content {
		order: 1 !important;
		width: 100%;
	}

	.garage-page--about #garage-about-hero .garage-about-hero-media {
		order: 2 !important;
		width: 100% !important;
		max-width: 100% !important;
		margin-top: 0.25rem;
	}

	.garage-page--about #garage-about-hero .garage-about-hero-panel {
		width: 100%;
		max-width: 100%;
		margin-inline: auto;
	}

	/* Prevent gradient headline from clipping descenders (g, p, y) */
	.garage-page--about #garage-about-hero .garage-about-hero__headline,
	.garage-page--about #garage-about-hero .garage-hero-headline {
		overflow: visible !important;
		line-height: 1.18 !important;
		padding-block-end: 0.2rem;
	}

	.garage-page--about #garage-about-hero .garage-hero-headline__line {
		display: block;
		overflow: visible !important;
		line-height: 1.2 !important;
		padding-block-end: 0.14em;
		-webkit-box-decoration-break: clone;
		box-decoration-break: clone;
	}

	.garage-page--about #garage-about-hero .garage-hero-headline__line--accent {
		padding-block-end: 0.18em;
		margin-block-end: 0.05em;
	}

	.garage-page--about .garage-about-story-grid,
	.garage-page--about .garage-proof-grid-modern,
	.garage-page--about .garage-dual-grid {
		grid-template-columns: 1fr !important;
	}

	/* Sections — vertical rhythm, no overlap */
	.garage-page > .u-section,
	.garage-live-page > .u-section {
		position: relative;
		z-index: 1;
		clear: both;
		overflow: visible;
		padding-block: clamp(2rem, 6vw, 3.5rem);
	}

	[data-scroll-animate] {
		transform: none !important;
		opacity: 1 !important;
	}

	[data-scroll-animate].is-visible {
		transform: none !important;
		opacity: 1 !important;
	}
}

@media (max-width: 767px) {
	.garage-site-header__inner {
		display: grid !important;
		grid-template-columns: minmax(0, 1fr) auto auto !important;
		align-items: center !important;
		gap: 0.45rem !important;
	}

	.garage-brand__logo {
		max-width: clamp(5.5rem, 32vw, 7.5rem);
		height: auto;
	}

	.garage-header-cta {
		padding: 0.45rem 0.55rem !important;
		font-size: 0.68rem !important;
		max-width: 7.5rem;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.garage-live-page .garage-stat-grid--modern,
	.garage-stat-grid--modern {
		grid-template-columns: 1fr !important;
	}
}

/* ========== Mobile menu — panel above overlay, links clickable ========== */
[data-menu-panel].garage-mobile-panel,
.garage-mobile-panel {
	z-index: var(--layer-z-menu, 75) !important;
	pointer-events: none;
}

body.is-menu-open [data-menu-panel].garage-mobile-panel,
body.is-menu-open .garage-mobile-panel {
	pointer-events: auto !important;
}

[data-menu-overlay],
.garage-overlay {
	z-index: var(--layer-z-overlay, 65) !important;
}

body.is-menu-open .garage-mobile-panel .garage-nav__link,
body.is-menu-open .garage-mobile-panel .garage-header-cta,
body.is-menu-open .garage-mobile-panel .garage-header-phone,
body.is-menu-open .garage-mobile-panel .garage-icon-button {
	position: relative;
	z-index: 2;
	pointer-events: auto !important;
	cursor: pointer;
}

body.is-menu-open .garage-site-header {
	z-index: calc(var(--layer-z-menu, 75) + 5) !important;
}

/* Mobile drawer: full viewport, safe areas, scrollable nav — avoids top/bottom crop */
@media (max-width: 1023px) {
	[data-menu-panel].garage-mobile-panel,
	.garage-mobile-panel {
		height: 100dvh !important;
		max-height: 100dvh !important;
		display: flex !important;
		flex-direction: column !important;
		overflow: hidden !important;
		box-sizing: border-box !important;
		padding-top: max(0.65rem, env(safe-area-inset-top, 0px)) !important;
		padding-bottom: max(0.75rem, env(safe-area-inset-bottom, 0px)) !important;
		padding-left: 1.15rem !important;
		padding-right: 1.15rem !important;
	}

	.garage-mobile-panel > .garage-mobile-panel__header {
		flex-shrink: 0 !important;
	}

	.garage-mobile-panel > nav {
		flex: 1 1 auto !important;
		min-height: 0 !important;
		overflow-y: auto !important;
		-webkit-overflow-scrolling: touch !important;
		overscroll-behavior-y: contain !important;
		padding-bottom: 0.35rem !important;
	}

	.garage-mobile-panel > .garage-mobile-panel__meta {
		flex-shrink: 0 !important;
		margin-top: 0 !important;
		padding-top: 0.85rem !important;
	}
}