/* Hero — full-bleed media band with centered display title.
   Measured: container clamp heights, .25 soft-black overlay (gradient variant on the
   homepage), content centered, image absolute cover. Written fresh against tokens. */

.hero {
	margin-top: 0;
	padding: 0 var(--grid-col-gutter) var(--grid-col-gutter);
}
@media screen and (min-width: 768px) {
	.hero { padding-bottom: 0; }
}

.hero__container {
	display: flex;
	flex-direction: column;
	height: clamp(400px, calc(307.69px + 16.03vw), 500px);
	overflow: hidden;
	position: relative;
}
.hero--large .hero__container {
	height: clamp(400px, calc(178.46px + 38.46vw), 640px);
}

.hero__container::after {
	background: rgba(23, 25, 26, 0.25);
	bottom: 0;
	content: "";
	display: block;
	height: 100%;
	left: 0;
	position: absolute;
	right: 0;
	z-index: 1;
}
.hero--gradient .hero__container::after {
	background: linear-gradient(
		to top,
		rgba(23, 25, 26, 0.7),
		rgba(23, 25, 26, 0.4) 55%,
		rgba(23, 25, 26, 0.15)
	);
}

.hero__image {
	height: 100%;
	left: 0;
	object-fit: cover;
	position: absolute;
	top: 0;
	width: 100%;
}

.hero__content {
	align-items: center;
	color: var(--color-soft-white);
	display: flex;
	flex-direction: column;
	justify-content: center;
	margin-bottom: 50px;
	margin-top: auto;
	padding: 0 var(--grid-col-gutter);
	position: relative;
	text-align: center;
	z-index: 2;
}
.hero--center .hero__content {
	margin-bottom: auto;
	margin-top: auto;
}
@media screen and (min-width: 1024px) {
	.hero__content {
		margin-left: auto;
		margin-right: auto;
		max-width: var(--wrap-width);
		width: 100%;
	}
}

.hero__kicker { margin: 0 0 12px; opacity: 0.9; }

.hero__title { margin-bottom: 0; margin-top: 5px; }
.hero__title:first-child { margin-top: 0; }

.hero__sub-title {
	font-family: var(--heading-font-family);
	font-style: italic;
	font-weight: var(--font-weight-default);
	margin: 5px 0 0;
}

.hero__cta { margin-top: 25px; }

/* Hero search module (homepage variant): soft-white panel, icon input, brass Explore */
.hero__search {
	margin-top: 34px;
	width: min(920px, 100%);
}
.hero__search-form {
	background: var(--color-soft-white);
	display: flex;
	gap: 15px;
	padding: 15px;
}
.hero__search-field { flex: 1; position: relative; }
.hero__search-field svg {
	color: var(--color-gray-700);
	left: 14px;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
}
.hero__search-field input {
	background: var(--color-white);
	border: 1px solid var(--color-gray-400);
	border-radius: 2px;
	color: var(--color-soft-black);
	font-size: 15px;
	height: 46px;
	padding: 7px 12px 7px 40px;
}
.hero__search-field input::placeholder { color: var(--color-gray-700); opacity: 1; }
.hero__search-submit { min-width: 0; padding: 13px 36px; }
@media screen and (max-width: 575px) {
	.hero__search-form { flex-direction: column; }
}

/* Measured corrections vs the reference homepage (computed-style diff 2026-07-08):
   h1 -2px tracking / lh 1 / warm off-white; hero 800px tall on home;
   search input 48px, radius 0, 16px, 44px icon inset. */
.home .hero--large .hero__title {
	letter-spacing: -0.025em;
	line-height: 1;
	color: #f1efe6;
	color: oklch(0.942 0.009 90);
}
.home .hero--large .hero__container {
	height: clamp(420px, 62vw, 800px);
}
.hero__search-field input {
	border-radius: 0;
	height: 48px;
	font-size: 16px;
	padding-left: 44px;
	background: #fffefa;
	background: oklch(0.996 0.002 90);
	border-color: #d5ccbe;
	border-color: oklch(0.82 0.016 70);
}
.hero__search-submit {
	background-color: #d2b989;
	background-color: oklch(0.795 0.07 83);
	border: 0;
	color: #100e0c;
	color: oklch(0.165 0.006 55);
	font-size: 12px;
	height: 48px;
	letter-spacing: normal;
	line-height: 21px;
	padding: 0 24px;
	text-transform: none;
}
/* --color-brass-1 stays untouched: their footer Submit still uses rgb(211,182,132) */

.home .hero--large {
	background-color: #eeece5;
	background-color: oklch(0.942 0.009 90);
	padding: 0;
}
@media (max-width: 1023px) {
	.home .hero--large { margin: 0 15px; }
}
@media (max-width: 399px) {
	.home .hero__title { font-size: 40px; }
}

/* Inner-page hero CTA buttons compute their UA-ish metrics on the reference */
.hero__custom-cta .btn {
	border: 0;
	font-size: inherit;
	letter-spacing: normal;
	line-height: 1.5;
	padding: calc(0.667em + 2px) calc(1.333em + 2px);
	text-transform: none;
}

.page-template-page-departing-soon .hero__container {
	height: clamp(400px, calc(400px + 0.6 * (100vh - 500px)), calc(100vh - 100px));
}