/* =========================================================
   FA Luxury Transport — Page Hero
   Reuses color/font/container tokens from header-footer.css
   ========================================================= */

.fa-hero {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 560px;
	overflow: hidden;
	background: #0b0b0d;
	box-sizing: border-box;
}

/* Hero already renders the page/post heading — hide Astra's default
   entry header (title) so it doesn't repeat directly underneath. Hiding
   the whole header, not just .entry-title, matters: with only the title
   hidden, the now-empty <header class="entry-header"> still renders with
   Astra's margin-bottom: 1.5em, which collapses straight through the
   empty header/article/main chain and shows up as a gap below the hero. */
body.fa-has-hero .entry-header {
	display: none;
}

.fa-hero * {
	box-sizing: border-box;
}

.fa-hero__bg {
	position: absolute;
	inset: 0;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}

.fa-hero__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, #0b0b0d 0%, rgba(11, 11, 13, 0.85) 50%, rgba(11, 11, 13, 0.4) 100%);
}

.fa-hero__inner {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: var(--fa-container-max);
	margin: 0 auto;
	padding: 60px var(--fa-container-pad);
}

.fa-hero__content {
	max-width: 660px;
}

.fa-hero__eyebrow {
	margin: 0 0 20px;
	color: var(--fa-gold);
	font-family: var(--fa-font-sans);
	font-size: 14px;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.25em;
}

.fa-hero__heading {
	margin: 0;
	color: var(--fa-white);
	font-family: var(--fa-font-serif);
	font-size: 60px;
	font-weight: 300;
	line-height: 1.25;
}

.fa-hero__accent {
	color: var(--fa-gold);
	font-style: italic;
}

.fa-hero__description {
	margin: 24px 0 0;
	max-width: 560px;
	color: var(--fa-gray-300);
	font-family: var(--fa-font-sans);
	font-size: 18px;
	font-weight: 300;
	line-height: 1.6;
}

/* =========================================================
   Tablet (matches the --fa-container-pad breakpoint used by
   header-footer.css)
   ========================================================= */

@media (max-width: 1279px) {
	.fa-hero {
		min-height: 440px;
	}

	.fa-hero__inner {
		padding-top: 48px;
		padding-bottom: 48px;
	}

	.fa-hero__content {
		max-width: 100%;
	}

	.fa-hero__eyebrow {
		font-size: 13px;
		letter-spacing: 0.2em;
	}

	.fa-hero__heading {
		font-size: 40px;
	}

	.fa-hero__description {
		font-size: 16px;
		max-width: 100%;
	}
}

/* =========================================================
   Mobile — flatten the gradient to a uniform dark overlay
   since the transparent right edge only reads well on wide
   viewports, and tighten spacing/type further.
   ========================================================= */

@media (max-width: 767px) {
	.fa-hero {
		min-height: 360px;
	}

	.fa-hero__overlay {
		background: rgba(11, 11, 13, 0.75);
	}

	.fa-hero__inner {
		padding-top: 40px;
		padding-bottom: 40px;
	}

	.fa-hero__eyebrow {
		margin-bottom: 14px;
		font-size: 12px;
		letter-spacing: 0.15em;
	}

	.fa-hero__heading {
		font-size: 30px;
		line-height: 1.3;
	}

	.fa-hero__description {
		margin-top: 16px;
		font-size: 15px;
	}
}