/* Shared first-screen layout for the four home pages. Loaded after the theme. */
body.hc-home {
	--home-header-height: 166px;
	--home-viewport-height: 100vh;
}

@supports (height: 100dvh) {
	body.hc-home { --home-viewport-height: 100dvh; }
}

html body.hc-home .page {
	padding-top: var(--home-header-height) !important;
}

/* Long translated menus may use two rows instead of covering logo/booking. */
@media (min-width: 1200px) {
	html body.hc-home .page .rd-navbar .rd-navbar-nav {
		flex-wrap: wrap !important;
		row-gap: 2px !important;
	}
}

#home-hero {
	--hero-gap: clamp(12px, 2vh, 22px);
	--hero-inset: clamp(20px, 4vh, 48px);
	box-sizing: border-box !important;
	width: 100% !important;
	height: calc(var(--home-viewport-height) - var(--home-header-height)) !important;
	min-height: var(--home-content-height, 0px) !important;
	max-height: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

#home-hero .swiper-container.swiper-slider,
#home-hero .swiper-wrapper,
#home-hero .swiper-slide,
#home-hero .swiper-slide-caption {
	box-sizing: border-box !important;
	height: 100% !important;
	min-height: 0 !important;
	max-height: none !important;
	border-radius: 0 !important;
}

#home-hero .swiper-slide {
	background-size: cover !important;
	background-position: center !important;
}

#home-hero .swiper-slide-caption {
	display: flex !important;
	align-items: center !important;
	padding: var(--hero-inset) 0 calc(var(--hero-inset) + 24px) !important;
}

#home-hero .swiper-slide-caption .container {
	width: 100% !important;
	max-width: 1440px !important;
	margin: 0 auto !important;
	padding: 0 clamp(16px, 5vw, 72px) !important;
}

#home-hero .swiper-slide-caption .row {
	margin: 0 !important;
}

#home-hero .swiper-slide-caption .row > [class*="col-"] {
	display: grid !important;
	grid-template-columns: auto minmax(0, 1fr) !important;
	align-items: center !important;
	gap: var(--hero-gap) 12px !important;
	flex: 0 1 720px !important;
	width: 100% !important;
	min-width: 0 !important;
	max-width: 720px !important;
	margin: 0 !important;
	padding: clamp(20px, 2.5vw, 36px) !important;
}

#home-hero .list-rating {
	grid-column: 1 !important;
	gap: 2px !important;
	margin: 0 !important;
	padding: 4px 10px !important;
}

#home-hero .list-rating .icon {
	margin: 0 !important;
	font-size: 24px !important;
	line-height: 30px !important;
}

#home-hero h6:not(#hc-heading-metric-guard) {
	grid-column: 2 !important;
	justify-self: start !important;
	min-width: 0 !important;
	max-width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	font-size: 11px !important;
	line-height: 1.4 !important;
	letter-spacing: .12em !important;
	white-space: normal !important;
	overflow-wrap: anywhere !important;
}

#home-hero h1:not(#hc-heading-metric-guard) {
	grid-column: 1 / -1 !important;
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	font-size: clamp(40px, 5vw, 68px) !important;
	line-height: 1.12 !important;
	letter-spacing: -.025em !important;
	overflow-wrap: anywhere !important;
}

#home-hero .swiper-slide-caption p {
	grid-column: 1 / -1 !important;
	display: block !important;
	width: 100% !important;
	max-width: none !important;
	height: auto !important;
	min-height: 0 !important;
	max-height: none !important;
	margin: 0 !important;
	padding: 0 0 0 14px !important;
	overflow: visible !important;
	font-size: clamp(14px, 1.15vw, 17px) !important;
	line-height: 1.5 !important;
	-webkit-line-clamp: unset !important;
	line-clamp: unset !important;
}

#home-hero .hero-actions {
	grid-column: 1 / -1 !important;
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 10px !important;
	width: 100% !important;
	margin: 0 !important;
}

#home-hero .hero-actions .button {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: auto !important;
	min-width: 0 !important;
	height: auto !important;
	min-height: 46px !important;
	margin: 0 !important;
	padding: 12px 20px !important;
	font-size: 11px !important;
	line-height: 1.3 !important;
	white-space: normal !important;
}

#home-hero .swiper-pagination {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	bottom: 8px !important;
	left: 0 !important;
	width: 100% !important;
	height: 24px !important;
	margin: 0 !important;
	transform: none !important;
	/* Legacy enlarged bullet hit areas must not intercept the booking buttons. */
	overflow: hidden !important;
}

/* Benefits follow the complete cover instead of covering its text/actions. */
html body.hc-home .page .hotel-highlights {
	margin-top: 0 !important;
	padding-top: clamp(16px, 3vw, 32px) !important;
}

@media (min-width: 768px) and (max-width: 1199.98px) {
	body.hc-home { --home-header-height: 84px; }
	#home-hero .swiper-slide-caption .row > [class*="col-"] { margin: 0 auto !important; }
}

/* The legacy navbar uses a different layout on touch iPads. Normalize both. */
@media (max-width: 1199.98px) {
	body.hc-home { --home-navigation-height: 84px; }
	html body.hc-home .page > .page-header,
	html body.hc-home .page .rd-navbar,
	html body.hc-home .page .rd-navbar-inner {
		height: var(--home-navigation-height) !important;
		min-height: var(--home-navigation-height) !important;
	}
	html body.hc-home .page .rd-navbar { padding: 0 !important; }
	html body.hc-home .page .rd-navbar-inner {
		width: 100% !important;
		max-width: none !important;
		margin: 0 !important;
		padding: 6px 20px !important;
	}
	html body.hc-home .page .rd-navbar-panel {
		position: static !important;
		display: flex !important;
		align-items: center !important;
		justify-content: space-between !important;
		width: 100% !important;
		height: 100% !important;
		min-height: 0 !important;
		margin: 0 !important;
		padding: 0 !important;
		border: 0 !important;
		background: transparent !important;
		box-shadow: none !important;
	}
	html body.hc-home .page .rd-navbar-brand,
	html body.hc-home .page .rd-navbar-brand .brand__name {
		position: static !important;
		height: auto !important;
		min-height: 0 !important;
		margin: 0 !important;
		padding: 0 !important;
		overflow: visible !important;
		border: 0 !important;
		background: transparent !important;
		box-shadow: none !important;
		transform: none !important;
	}
	html body.hc-home .page .rd-navbar-brand img[src*="logo-menu"] {
		width: 104px !important;
		height: auto !important;
		max-height: 68px !important;
	}
	html body.hc-home .page .rd-navbar-toggle {
		width: 48px !important;
		height: 48px !important;
		margin: 0 !important;
		border-radius: 13px !important;
	}
}

@media (max-width: 767.98px) {
	body.hc-home { --home-header-height: 76px; --home-navigation-height: 76px; }
	html body.hc-home .page .rd-navbar-inner { padding: 6px 14px !important; }
	html body.hc-home .page .rd-navbar-brand img[src*="logo-menu"] { width: 98px !important; max-height: 64px !important; }
	#home-hero { --hero-inset: 16px; --hero-gap: 14px; }
	#home-hero .swiper-slide-caption .container { padding: 0 16px !important; }
	#home-hero .swiper-slide-caption .row > [class*="col-"] {
		max-width: 540px !important;
		margin: 0 auto !important;
		padding: 20px !important;
	}
	#home-hero h1:not(#hc-heading-metric-guard) { font-size: clamp(32px, 9.5vw, 48px) !important; }
	#home-hero .hero-actions { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
	#home-hero .hero-actions .button { padding: 10px 8px !important; }
}

/* Use the available width on short screens, including phones in landscape. */
@media (min-width: 480px) and (max-height: 540px) and (orientation: landscape) {
	#home-hero { --hero-inset: 10px; --hero-gap: 10px; }
	#home-hero .swiper-slide-caption .container { padding: 0 20px !important; }
	#home-hero .swiper-slide-caption .row > [class*="col-"] {
		grid-template-columns: minmax(166px, .85fr) minmax(0, 1.4fr) !important;
		flex-basis: 960px !important;
		max-width: 960px !important;
		margin: 0 auto !important;
		padding: 14px 18px !important;
		column-gap: 20px !important;
	}
	#home-hero .list-rating { grid-area: 1 / 1 !important; justify-self: start !important; }
	#home-hero h6:not(#hc-heading-metric-guard) { grid-area: 2 / 1 !important; }
	#home-hero h1:not(#hc-heading-metric-guard) { grid-area: 3 / 1 !important; font-size: clamp(27px, 4.4vw, 42px) !important; }
	#home-hero .swiper-slide-caption p { grid-area: 1 / 2 / 3 !important; font-size: 13px !important; line-height: 1.4 !important; }
	#home-hero .hero-actions { grid-area: 3 / 2 !important; display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
	#home-hero .hero-actions .button { min-height: 44px !important; padding: 8px !important; font-size: 10px !important; }
	#home-hero .list-rating .icon { font-size: 20px !important; line-height: 24px !important; }
}

/* Content-aware compact spacing for shorter windows and longer translations. */
#home-hero.home-hero--compact { --hero-inset: 8px; --hero-gap: 8px; }
#home-hero.home-hero--compact .swiper-slide-caption .row > [class*="col-"] { padding: 14px !important; }
#home-hero.home-hero--compact .list-rating .icon { font-size: 20px !important; line-height: 24px !important; }
#home-hero.home-hero--compact .swiper-slide-caption p { font-size: 14px !important; line-height: 1.4 !important; }

@media (min-width: 480px) and (max-height: 540px) and (orientation: landscape) {
	/* Compact mode must not enlarge the landscape paragraph. */
	#home-hero.home-hero--compact .swiper-slide-caption p { font-size: 13px !important; }
}

/* Small landscape phones with browser controls still visible. */
@media (min-width: 480px) and (max-width: 767.98px) and (max-height: 360px) {
	#home-hero,
	#home-hero.home-hero--compact { --hero-inset: 3px; --hero-gap: 6px; }
	#home-hero .swiper-slide-caption .container { padding: 0 12px !important; }
	#home-hero .swiper-slide-caption .row > [class*="col-"],
	#home-hero.home-hero--compact .swiper-slide-caption .row > [class*="col-"] {
		grid-template-columns: minmax(140px, .7fr) minmax(0, 1.6fr) !important;
		padding: 8px !important;
		column-gap: 12px !important;
	}
	#home-hero .list-rating { grid-area: 1 / 1 !important; padding: 2px 5px !important; }
	#home-hero .list-rating .icon,
	#home-hero.home-hero--compact .list-rating .icon { font-size: clamp(16px, 3.17vw, 18px) !important; line-height: 22px !important; }
	#home-hero h6:not(#hc-heading-metric-guard) {
		grid-area: 1 / 1 !important;
		justify-self: end !important;
		font-size: 9px !important;
		letter-spacing: .05em !important;
	}
	#home-hero h1:not(#hc-heading-metric-guard) {
		grid-area: 2 / 1 !important;
		align-self: start !important;
		font-size: clamp(23px, 4.58vw, 26px) !important;
	}
	#home-hero .swiper-slide-caption p { grid-area: 1 / 2 / 3 / 3 !important; padding-left: 10px !important; }
	#home-hero .hero-actions { grid-area: 3 / 1 / 4 / 3 !important; }
	#home-hero .swiper-pagination { bottom: 4px !important; height: 16px !important; }
	#home-hero.home-hero--compact { --hero-inset: 2px; --hero-gap: 4px; }
	#home-hero.home-hero--compact .swiper-slide-caption { padding-bottom: calc(var(--hero-inset) + 16px) !important; }
	#home-hero.home-hero--compact .swiper-slide-caption .row > [class*="col-"] { padding: 6px !important; }
	#home-hero.home-hero--compact .swiper-pagination { bottom: 0 !important; }
}

/* Keep narrow, short windows readable without shrinking the touch targets. */
@media (max-width: 479.98px) and (max-height: 450px) {
	#home-hero.home-hero--compact { --hero-inset: 2px; --hero-gap: 4px; }
	#home-hero.home-hero--compact .swiper-slide-caption .row > [class*="col-"] { padding: 8px !important; }
	#home-hero.home-hero--compact .list-rating { padding: 2px 8px !important; }
	#home-hero.home-hero--compact h1:not(#hc-heading-metric-guard) { font-size: 28px !important; }
	#home-hero.home-hero--compact .swiper-slide-caption p { font-size: 13px !important; line-height: 1.4 !important; }
	#home-hero.home-hero--compact .hero-actions .button { min-height: 44px !important; padding: 8px !important; font-size: 10px !important; }
}

@media (max-height: 540px) and (max-width: 1199.98px) {
	html body.hc-home .page .rd-navbar-inner { padding: 4px 14px !important; }
	html body.hc-home .page .rd-navbar-brand img[src*="logo-menu"] { width: 84px !important; max-height: 56px !important; }
	body.hc-home { --home-header-height: 64px; --home-navigation-height: 64px; }
}