/* Modern Croatissimo homepage hero. Scoped to the front page JS classes. */
.jlvb-home-hero,
.jlvb-home-hero * {
	box-sizing: border-box;
}

.home .jlvb-home-hero {
	--jlvb-hero-ink: #302a25;
	--jlvb-hero-paper: #f6f1e8;
	--jlvb-hero-accent: #8a6b3d;
	position: relative !important;
	min-height: 880px !important;
	padding: 142px 32px 74px !important;
	overflow: hidden !important;
	color: var(--jlvb-hero-ink) !important;
	background-color: var(--jlvb-hero-paper) !important;
	background-image: none !important;
}

.home .jlvb-home-hero::before {
	content: "";
	position: absolute;
	top: -190px;
	right: auto !important;
	bottom: auto !important;
	left: 0 !important;
	width: 620px;
	height: 620px;
	border: 1px solid rgba(138, 107, 61, .1);
	border-radius: 50%;
	background: rgba(222, 215, 203, .9) !important;
	opacity: 1 !important;
	pointer-events: none;
}

.home .jlvb-home-hero::after {
	content: "";
	position: absolute;
	bottom: -270px;
	left: -190px;
	width: 560px;
	height: 560px;
	border: 1px solid rgba(48, 42, 37, .08);
	border-radius: 50%;
	pointer-events: none;
}

.home .jlvb-home-hero > .elementor-shape,
.home .jlvb-home-hero__legacy {
	display: none !important;
}

.home .jlvb-home-hero .jlvb-home-hero__inner {
	position: relative;
	z-index: 2;
	width: min(1480px, 100%) !important;
	max-width: 1480px !important;
	min-height: 664px;
	margin: 0 auto !important;
	padding: 0 !important;
	display: block !important;
}

.home .jlvb-home-hero__brand {
	position: absolute;
	z-index: 0;
	top: -78px;
	left: 50%;
	width: max-content;
	color: rgba(48, 42, 37, .07);
	font-family: var(--jlvb-font-text, "Manrope", Arial, sans-serif);
	font-size: clamp(140px, 15vw, 250px);
	font-style: normal;
	font-weight: 500;
	line-height: .82;
	letter-spacing: -.065em;
	white-space: nowrap;
	pointer-events: none;
	transform: translateX(-50%);
	user-select: none;
}

.home .jlvb-home-hero .jlvb-home-hero__content {
	position: relative;
	z-index: 1;
	width: 100% !important;
	max-width: none !important;
	min-height: 664px;
	margin: 0 !important;
	padding: 28px 0 0 !important;
	display: grid !important;
	grid-template-columns: minmax(360px, .78fr) minmax(560px, 1.22fr);
	grid-template-rows: auto auto auto 1fr auto;
	column-gap: clamp(54px, 7vw, 118px);
	align-items: start;
	background: transparent !important;
}

.home .jlvb-home-hero__kicker,
.home .jlvb-home-hero__title,
.home .jlvb-home-hero__intro,
.home .jlvb-home-hero__details {
	grid-column: 1;
	width: 100% !important;
	max-width: 590px;
	justify-self: start;
}

.home .jlvb-home-hero__kicker {
	grid-row: 1;
	margin: 52px 0 22px !important;
}

.home .jlvb-home-hero__kicker .elementor-heading-title {
	margin: 0 !important;
	color: #211d19 !important;
	font-family: var(--jlvb-font-text, "Manrope", Arial, sans-serif) !important;
	font-size: 12px !important;
	font-style: normal !important;
	font-weight: 700 !important;
	line-height: 1.2 !important;
	letter-spacing: .24em !important;
	text-transform: uppercase;
}

.home .jlvb-home-hero__title {
	grid-row: 2;
	margin: 0 !important;
}

.home .jlvb-home-hero__title h1,
.home .jlvb-home-hero__title .elementor-heading-title {
	max-width: 610px;
	margin: 0 !important;
	color: var(--jlvb-hero-ink) !important;
	font-size: clamp(61px, 5vw, 87px) !important;
	line-height: .94 !important;
	letter-spacing: -.055em !important;
	text-shadow: none !important;
}

.home .jlvb-home-hero__intro {
	grid-row: 3;
	margin: 30px 0 0 !important;
}

.home .jlvb-home-hero__intro,
.home .jlvb-home-hero__intro p {
	color: rgba(48, 42, 37, .72) !important;
	font-family: var(--jlvb-font-text, "Manrope", Arial, sans-serif) !important;
	font-size: 16px !important;
	font-style: normal !important;
	font-weight: 400 !important;
	line-height: 1.7 !important;
	letter-spacing: .005em !important;
	text-shadow: none !important;
}

.home .jlvb-home-hero__intro p:last-child {
	margin-bottom: 0 !important;
}

.home .jlvb-home-hero__details {
	grid-row: 4;
	margin-top: 36px;
	padding-top: 20px;
	display: flex;
	align-items: center;
	gap: 22px;
	border-top: 1px solid rgba(48, 42, 37, .14);
}

.home .jlvb-home-hero__details span {
	position: relative;
	color: rgba(48, 42, 37, .72);
	font-family: var(--jlvb-font-text, "Manrope", Arial, sans-serif);
	font-size: 10px;
	font-style: normal;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: .115em;
	text-transform: uppercase;
}

.home .jlvb-home-hero__details span:not(:first-child)::before {
	content: "";
	position: absolute;
	top: 50%;
	left: -13px;
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background: var(--jlvb-hero-accent);
	transform: translateY(-50%);
}

.home .jlvb-home-hero__visual {
	position: relative;
	grid-column: 2;
	grid-row: 1 / 5;
	width: 100%;
	height: 548px;
	overflow: hidden;
	align-self: start;
	border: 1px solid rgba(255, 255, 255, .58);
	border-radius: 40px 40px 40px 10px;
	background-color: #8f8a82;
	background-image: linear-gradient(180deg, rgba(16, 28, 36, .02) 42%, rgba(16, 28, 36, .58) 100%), var(--jlvb-home-hero-image);
	background-position: center;
	background-size: cover;
	box-shadow: 0 34px 76px rgba(48, 42, 37, .18);
}

.home .jlvb-home-hero__visual::before {
	content: "";
	position: absolute;
	inset: 18px;
	border: 1px solid rgba(255, 255, 255, .26);
	border-radius: 28px 28px 28px 5px;
	pointer-events: none;
}

.home .jlvb-home-hero__visual-label,
.home .jlvb-home-hero__visual-place {
	position: absolute;
	z-index: 2;
	bottom: 28px;
	color: #fff;
	font-family: var(--jlvb-font-text, "Manrope", Arial, sans-serif);
	font-size: 10px;
	font-style: normal;
	font-weight: 700;
	line-height: 1;
	letter-spacing: .15em;
	text-transform: uppercase;
}

.home .jlvb-home-hero__visual-label {
	left: 34px;
}

.home .jlvb-home-hero__visual-place {
	right: 34px;
}

.home .jlvb-home-hero__visual-mark {
	position: absolute;
	z-index: 2;
	top: 30px;
	right: 30px;
	width: 48px;
	height: 48px;
	display: grid;
	place-items: center;
	border: 1px solid rgba(255, 255, 255, .62);
	border-radius: 50%;
	color: #fff;
	background: rgba(20, 25, 27, .17);
	backdrop-filter: blur(8px);
	font-family: var(--jlvb-font-display, "Playfair Display", "Times New Roman", serif);
	font-size: 23px;
	font-style: italic;
	line-height: 1;
}

.home .jlvb-home-hero__search {
	position: relative;
	z-index: 5;
	grid-column: 1 / -1;
	grid-row: 5;
	width: min(1280px, calc(100% - 92px)) !important;
	margin: -54px auto 0 !important;
	justify-self: center;
}

.home .jlvb-home-hero__search .jlvb-search-wrap {
	left: auto;
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
	transform: none;
}

.home .jlvb-home-hero__search .jlvb-search {
	width: 100%;
	border-color: rgba(255, 255, 255, .82);
	background: rgba(246, 241, 232, .96);
	box-shadow: 0 24px 60px rgba(48, 42, 37, .2);
	backdrop-filter: blur(18px);
}

/* Open the destination picker below the search while keeping it above the
 * following homepage section. Mobile retains its existing bottom sheet. */
@media (min-width: 768px) {
	.home .jlvb-home-hero.jlvb-home-hero--destination-open {
		z-index: 999 !important;
		overflow: visible !important;
	}

	.home .jlvb-home-hero__search,
	.home .jlvb-home-hero__search .jlvb-search,
	.home .jlvb-home-hero__search .jlvb-search__field--location {
		overflow: visible !important;
	}

	.home .jlvb-home-hero__search .jlvb-search__field--location {
		z-index: 110;
	}

	.home .jlvb-home-hero__search .jlvb-search__destination-panel {
		top: calc(100% + 12px) !important;
		bottom: auto !important;
		z-index: 120;
	}
}

@media (max-width: 1180px) {
	.home .jlvb-home-hero {
		min-height: 900px !important;
		padding-inline: 28px !important;
	}

	.home .jlvb-home-hero .jlvb-home-hero__content {
		grid-template-columns: minmax(320px, .82fr) minmax(450px, 1.18fr);
		column-gap: 44px;
	}

	.home .jlvb-home-hero__visual {
		height: 520px;
	}

	.home .jlvb-home-hero__search {
		width: min(940px, calc(100% - 36px)) !important;
		margin-top: -28px !important;
	}
}

@media (max-width: 900px) {
	.home .jlvb-home-hero {
		min-height: 0 !important;
		padding: 132px 24px 96px !important;
	}

	.home .jlvb-home-hero .jlvb-home-hero__inner,
	.home .jlvb-home-hero .jlvb-home-hero__content {
		min-height: 0;
	}

	.home .jlvb-home-hero__brand {
		top: -36px;
		font-size: clamp(92px, 18vw, 152px);
	}

	.home .jlvb-home-hero .jlvb-home-hero__content {
		padding-top: 0 !important;
		grid-template-columns: 1fr;
		grid-template-rows: auto;
		column-gap: 0;
	}

	.home .jlvb-home-hero__kicker,
	.home .jlvb-home-hero__title,
	.home .jlvb-home-hero__intro,
	.home .jlvb-home-hero__details,
	.home .jlvb-home-hero__visual,
	.home .jlvb-home-hero__search {
		grid-column: 1;
		grid-row: auto;
	}

	.home .jlvb-home-hero__kicker,
	.home .jlvb-home-hero__title,
	.home .jlvb-home-hero__intro,
	.home .jlvb-home-hero__details {
		max-width: 680px;
		margin-right: auto !important;
		margin-left: auto !important;
		text-align: center;
	}

	.home .jlvb-home-hero__kicker {
		margin-top: 38px !important;
	}

	.home .jlvb-home-hero__title h1,
	.home .jlvb-home-hero__title .elementor-heading-title {
		max-width: 720px;
		margin-inline: auto !important;
		font-size: clamp(56px, 9vw, 76px) !important;
	}

	.home .jlvb-home-hero__intro {
		margin-top: 24px !important;
	}

	.home .jlvb-home-hero__details {
		width: auto !important;
		margin-top: 26px !important;
		justify-content: center;
	}

	.home .jlvb-home-hero__visual {
		width: min(720px, 100%);
		height: 430px;
		margin: 42px auto 0;
		justify-self: center;
	}

	.home .jlvb-home-hero__search {
		width: min(720px, 100%) !important;
		margin-top: -34px !important;
	}
}

@media (max-width: 767px) {
	.home .jlvb-home-hero {
		min-height: 650px !important;
		padding: 112px 20px 88px !important;
	}

	.home .jlvb-home-hero::before {
		top: -92px;
		right: auto !important;
		left: 50% !important;
		width: min(530px, 142vw);
		height: min(530px, 142vw);
		background: rgba(222, 215, 203, .68) !important;
		transform: translateX(-50%);
	}

	.home .jlvb-home-hero__brand {
		top: 30px;
		right: 10px;
		left: 10px;
		width: auto;
		color: rgba(48, 42, 37, .085);
		font-size: clamp(42px, 12.3vw, 58px);
		line-height: .9;
		letter-spacing: -.052em;
		text-align: center;
		transform: none;
	}

	.home .jlvb-home-hero__kicker {
		margin-top: 88px !important;
		margin-bottom: 17px !important;
	}

	.home .jlvb-home-hero__kicker .elementor-heading-title {
		font-size: 10px !important;
		letter-spacing: .2em !important;
	}

	.home .jlvb-home-hero__title h1,
	.home .jlvb-home-hero__title .elementor-heading-title {
		font-size: clamp(47px, 14.2vw, 66px) !important;
		line-height: .95 !important;
	}

	.home .jlvb-home-hero__intro,
	.home .jlvb-home-hero__intro p {
		font-size: 14px !important;
		line-height: 1.65 !important;
	}

	.home .jlvb-home-hero__intro {
		max-width: 440px;
		margin-top: 20px !important;
	}

	.home .jlvb-home-hero__details {
		max-width: 420px;
		margin-top: 22px !important;
		padding-top: 16px;
		flex-wrap: wrap;
		justify-content: center;
		gap: 10px 20px;
	}

	.home .jlvb-home-hero__details span {
		font-size: 8px;
		letter-spacing: .09em;
	}

	.home .jlvb-home-hero__visual {
		display: none !important;
		background-image: none !important;
	}

	.home .jlvb-home-hero__search {
		width: 100% !important;
		height: 0;
		margin: 0 !important;
	}

	.home .jlvb-home-hero__search .jlvb-search-wrap {
		height: 0;
	}
}

@media (prefers-reduced-motion: no-preference) {
	.home .jlvb-home-hero__kicker,
	.home .jlvb-home-hero__title,
	.home .jlvb-home-hero__intro,
	.home .jlvb-home-hero__details,
	.home .jlvb-home-hero__visual {
		animation: jlvb-home-hero-reveal .72s both;
	}

	.home .jlvb-home-hero__title { animation-delay: .05s; }
	.home .jlvb-home-hero__intro { animation-delay: .1s; }
	.home .jlvb-home-hero__details { animation-delay: .15s; }
	.home .jlvb-home-hero__visual { animation-delay: .12s; }
}

@keyframes jlvb-home-hero-reveal {
	from {
		opacity: 0;
		transform: translateY(18px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}
