/* Final hero layout shared by the front end and Gutenberg preview. */
.hb-hero-block,
.editor-styles-wrapper .hb-editor-hero {
	margin-bottom: var(--hb-hero-margin-bottom, 0);
	margin-top: var(--hb-hero-margin-top, 0);
	position: relative;
}

.hb-hero-block .hb-hero-overlay,
.editor-styles-wrapper .hb-hero-overlay {
	background: var(--hb-hero-overlay, #101a14);
	inset: 0;
	opacity: var(--hb-hero-overlay-opacity, 0.34);
	pointer-events: none;
	position: absolute;
	z-index: 1;
}

.hb-hero-block .zt-hero__inner--booking,
.editor-styles-wrapper .zt-hero__inner--booking {
	align-items: stretch;
	display: flex;
	justify-content: stretch;
	position: relative;
	z-index: 2;
}

.hb-hero-block .hb-hero-content,
.editor-styles-wrapper .hb-hero-content {
	display: grid;
	flex: 1 1 auto;
	grid-template-rows: minmax(280px, 1fr) auto;
	min-height: 0;
	width: 100%;
}

.hb-hero-block .zt-hero-booking__content,
.editor-styles-wrapper .zt-hero-booking__content {
	align-self: var(--hb-hero-content-y, center);
	box-sizing: border-box;
	justify-self: var(--hb-hero-content-x, center);
	max-width: min(100%, var(--hb-hero-content-width, 980px));
	padding: var(--hb-hero-content-py, 0) var(--hb-hero-content-px, 0);
	text-align: var(--hb-hero-content-align, center);
	width: 100%;
}

.hb-hero-block .zt-hero-booking__content :is(.zt-hero-booking__eyebrow, .zt-hero-booking__title, .zt-hero-booking__intro),
.editor-styles-wrapper .zt-hero-booking__content :is(.zt-hero-booking__eyebrow, .zt-hero-booking__title, .zt-hero-booking__intro) {
	margin-left: 0;
	margin-right: 0;
	max-width: 100%;
	overflow-wrap: normal;
	word-break: normal;
}

.hb-hero-block .zt-hero-booking__eyebrow,
.editor-styles-wrapper .zt-hero-booking__eyebrow {
	color: var(--hb-hero-body-color, #fff);
	font-family: var(--hb-hero-body-font, Montserrat, Arial, sans-serif);
}

.hb-hero-block .zt-hero-booking__title,
.editor-styles-wrapper .zt-hero-booking__title {
	color: var(--hb-hero-title-color, #fff);
	font-family: var(--hb-hero-title-font, "Cormorant Garamond", Georgia, serif);
	font-size: clamp(28px, var(--hb-hero-title-size, 64px), 110px);
	margin-bottom: var(--hb-hero-title-gap, 16px);
	text-align: var(--hb-hero-align, inherit);
}

.hb-hero-block .zt-hero-booking__intro,
.editor-styles-wrapper .zt-hero-booking__intro {
	color: var(--hb-hero-body-color, #fff);
	font-family: var(--hb-hero-body-font, Montserrat, Arial, sans-serif);
	font-size: var(--hb-hero-body-size, 18px);
	margin-bottom: var(--hb-hero-text-gap, 24px);
}

.hb-hero-block .zt-hero-booking__content .hb-hero-actions,
.editor-styles-wrapper .zt-hero-booking__content .hb-hero-actions {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: var(--hb-hero-buttons-gap, 12px);
	justify-content: var(--hb-hero-button-align, center);
	margin: 0;
	width: 100%;
}

.hb-hero-block .zt-hero-booking__content .hb-hero-actions .zt-button,
.editor-styles-wrapper .zt-hero-booking__content .hb-hero-actions .zt-button {
	background: var(--hb-hero-button-bg, #faf8f3);
	border-color: var(--hb-hero-button-bg, #faf8f3);
	border-radius: var(--hb-hero-button-radius, 0);
	color: var(--hb-hero-button-color, #3b3b38);
	display: inline-flex;
	font-family: var(--hb-hero-button-font, Montserrat, Arial, sans-serif);
	font-size: var(--hb-hero-button-size, 16px);
	justify-content: center;
	max-width: 100%;
	padding: var(--hb-hero-button-py, 14px) var(--hb-hero-button-px, 26px);
	width: auto !important;
}

.hb-hero-block .zt-hero-booking__content .hb-hero-actions .zt-button:hover,
.hb-hero-block .zt-hero-booking__content .hb-hero-actions .zt-button:focus-visible {
	background: var(--hb-hero-button-hover-bg, #d9a642);
	border-color: var(--hb-hero-button-hover-bg, #d9a642);
	color: var(--hb-hero-button-hover-color, #17201c);
}

.hb-hero-block--without-form .hb-hero-content,
.editor-styles-wrapper .hb-hero-block--without-form .hb-hero-content {
	grid-template-rows: minmax(0, 1fr);
}

.hb-hero-block .zt-hero-booking,
.editor-styles-wrapper .zt-hero-booking {
	align-self: end;
	margin-top: clamp(20px, 3vh, 38px);
}

@media (max-width: 760px) {

	.hb-hero-block.zt-hero--media,
	.hb-hero-block .zt-hero__inner--royal,
	.editor-styles-wrapper .hb-editor-hero,
	.editor-styles-wrapper .hb-editor-hero .zt-hero__inner--royal {
		min-height: 100vh;
		min-height: 100svh;
	}

	.hb-hero-block .zt-hero__inner--booking,
	.editor-styles-wrapper .zt-hero__inner--booking {
		padding-bottom: max(12px, env(safe-area-inset-bottom));
		padding-top: calc(5.75rem + env(safe-area-inset-top));
	}

	.hb-hero-block .hb-hero-content,
	.editor-styles-wrapper .hb-hero-content {
		grid-template-rows: minmax(calc(100vh - 6.5rem), auto) auto;
		grid-template-rows: minmax(calc(100svh - 6.5rem), auto) auto;
	}

	.hb-hero-block--without-form .hb-hero-content,
	.editor-styles-wrapper .hb-hero-block--without-form .hb-hero-content {
		grid-template-rows: minmax(0, 1fr);
	}

	.hb-hero-block .zt-hero-booking__content,
	.editor-styles-wrapper .zt-hero-booking__content {

		/* Pin the CTA low while keeping it inside the visible viewport. */
		align-self: end;
		max-width: 100%;
		padding: min(var(--hb-hero-content-py, 0px), 48px) min(var(--hb-hero-content-px, 0px), 24px);
	}

	.hb-hero-block .zt-hero-booking__title,
	.editor-styles-wrapper .zt-hero-booking__title {
		font-size: clamp(28px, 12vw, min(var(--hb-hero-title-size, 64px), 64px));
		line-height: 0.98;
	}

	.hb-hero-block .zt-hero-booking__intro,
	.editor-styles-wrapper .zt-hero-booking__intro {
		font-size: clamp(14px, 4.6vw, min(var(--hb-hero-body-size, 18px), 21px));
		line-height: 1.4;
	}

	.hb-hero-block .zt-hero-booking__content .hb-hero-actions,
	.editor-styles-wrapper .zt-hero-booking__content .hb-hero-actions {
		flex-direction: row;
	}

	.hb-hero-block .zt-hero-booking__content .hb-hero-actions .zt-button,
	.editor-styles-wrapper .zt-hero-booking__content .hb-hero-actions .zt-button {
		flex: 0 0 auto;
		font-size: clamp(12px, 4vw, var(--hb-hero-button-size, 16px));
		min-width: 0;
		padding: min(var(--hb-hero-button-py, 14px), 16px) min(var(--hb-hero-button-px, 26px), 28px);
		white-space: normal;
	}

	.zt-home-section .zt-home-values.wp-block-columns {
		display: grid !important;
		grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	}
}

@media (max-width: 300px) {

	.zt-home-section .zt-home-values.wp-block-columns {
		grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	}
}