/*
 * Homepage (native replacement for Elementor page 15008).
 * Values are the computed boxes/styles of the Elementor page on staging (bin/visual/home.mjs,
 * 1440 / 1366 / 1024 / 390) plus its custom CSS (docs/reference/elementor-2026-09/css/post-15008.css)
 * and the "#whatsnew" / "featured-first-slide" rules from the Customizer and the
 * ndic-city-three-posts plugin, so the page keeps working once those are removed.
 * Breakpoints are Elementor's: mobile <=767, tablet <=1024, laptop <=1366, widescreen >=1920.
 * Loads after site-kit.css; .vb-home selectors outrank the kit's element rules.
 */

/* ---------- shared ---------- */
.vb-home {
	position: relative;
	top: 0; /* custom.css "footer, main {position:relative; top:114px}" (legacy header offset) */
	display: block;
	overflow-x: clip;
}
.vb-home h1, .vb-home h2, .vb-home h3, .vb-home h4, .vb-home h5 {
	line-height: 1;
	margin: 0;
	padding: 0;
	font-weight: 500;
	color: var(--vb-color-primary, #231F20);
}
.vb-home h1, .vb-home h2 { font-family: "Instrument Serif", serif; font-size: 50px; }
.vb-home h3 { font-family: "Instrument Serif", serif; font-size: 30px; }
.vb-home h4 { font-family: "Lexend", sans-serif; font-size: 22px; }
.vb-home h5 { font-family: "Lexend", sans-serif; font-size: 20px; }
.vb-home p, .vb-home .vb-home__text {
	font-family: "Lexend", sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.6em;
	color: inherit;
}
.vb-home p { margin: 0 0 16px; }
.vb-home .vb-home__text--lead p { font-size: 18px; line-height: 1.65em; }
.vb-home img { display: inline-block; max-width: 100%; height: auto; vertical-align: middle; }
.vb-home hr {
	box-sizing: content-box;
	display: block;
	width: 100%;
	height: 0;
	margin: 0;
	padding: 1px 0;
	border: 0;
	border-top: 1px solid #23201F;
	background: none;
	opacity: 1;
}
.vb-home__section { padding: 80px 36px; }
.vb-home__inner {
	display: flex;
	flex-direction: column;
	gap: 20px;
	width: 100%;
	max-width: 1680px;
	margin: 0 auto;
	padding: 10px 0;
}
.vb-home .vb-home__mobile-only { display: none; }
.vb-home__more-wrap, .vb-home__quick-item { display: block; line-height: 1.6em; }

/* "Learn More" text link (Elementor button widget, transparent, Courier Prime) */
.vb-home .vb-home__more {
	display: inline-block;
	font-family: "Courier Prime", monospace;
	font-size: 18px;
	font-weight: 700;
	line-height: 1;
	text-align: center;
	text-decoration: none;
	background: transparent;
	color: #EE5323;
	fill: #EE5323;
	padding: 2px 2px 2px 0;
	transition: all .3s;
}
/* Kit button (Elementor kit 15007) */
.vb-home .vb-btn {
	display: inline-block;
	font-family: "Lexend", sans-serif;
	font-size: 18px;
	font-weight: 700;
	line-height: 1;
	text-align: center;
	text-decoration: none;
	background-color: var(--vb-color-accent, #EF4343);
	color: var(--vb-color-cream, #F4F2EB);
	fill: #fff;
	border: 0;
	border-radius: 0;
	padding: 11px 28px;
	transition: all .3s;
}
.vb-home .vb-btn:hover, .vb-home .vb-btn:focus { background-color: var(--vb-color-primary, #231F20); color: #fff; }

/* ---------- hero ---------- */
.vb-home__hero { display: flex; flex-direction: column; }

/* Hero carousel: stacked slides that crossfade on a timer. No controls, no zoom, by request. */
.vb-hero { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; background: #000; }
.vb-hero__slides { position: absolute; inset: 0; }
.vb-hero__slide { position: absolute; inset: 0; opacity: 0; transition: opacity .9s ease; }
.vb-hero__slide.is-active { opacity: 1; z-index: 1; }
.vb-hero__slide img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Dots: hidden on load, JS adds .is-shown after two slides and they fade up. */
.vb-hero__dots { position: absolute; left: 0; right: 0; bottom: 18px; z-index: 3; display: flex; justify-content: center; gap: 10px; opacity: 0; visibility: hidden; transition: opacity .9s ease, visibility 0s linear .9s; }
.vb-hero__dots.is-shown { opacity: 1; visibility: visible; transition: opacity .9s ease; }
.vb-home .vb-hero__dot {
	width: 10px;
	height: 10px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .5);
	cursor: pointer;
	filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .55));
	transition: background .25s ease-in-out, transform .25s ease-in-out;
}
.vb-home .vb-hero__dot.is-active { background: #fff; transform: scale(1.25); }
.vb-home .vb-hero__dot:hover, .vb-home .vb-hero__dot:focus-visible { background: #fff; }
.vb-home .vb-hero__dot:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .vb-hero__slide { transition: opacity .3s ease; } }
@media (max-width: 767px) {
	.vb-hero { aspect-ratio: 4 / 3; }
	.vb-hero__dots { bottom: 10px; gap: 8px; }
	.vb-home .vb-hero__dot { width: 8px; height: 8px; }
}

/* ---------- intro ---------- */
.vb-home__intro > .vb-home__inner { flex-direction: row; align-items: center; gap: 0 50px; }
.vb-home__intro-text {
	display: flex;
	flex-direction: column;
	gap: 20px;
	width: 50%;
	padding: 35px 100px;
	text-align: center;
}
.vb-home__intro-text h1 { padding-bottom: 3%; }
.vb-home__intro-card { position: relative; display: flex; flex-direction: column; width: 50%; }
.vb-home__intro-card > img { width: 100%; }
.vb-home__intro-caption {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 5px;
	padding: 35px;
	color: #fff;
	background-image: linear-gradient(180deg, #00000000 0%, #00000045 100%);
}
.vb-home__intro-caption h3, .vb-home__intro-caption .vb-home__text { color: #fff; }
.vb-home__intro-caption .vb-home__more { color: var(--vb-color-pink, #EDD0E4); fill: var(--vb-color-pink, #EDD0E4); padding: 0; }
.vb-home__intro-caption .vb-home__more:hover, .vb-home__intro-caption .vb-home__more:focus { color: #fff; }

/* ---------- Your Guide to Burbank ---------- */
.vb-home__guide-head { display: flex; flex-direction: column; gap: 10px; padding: 10px 36px; }
.vb-home__guide-head h2 { font-weight: 400; }
.vb-home__guide { padding: 0 0 80px; }
.vb-home__guide > .vb-home__inner { padding: 0; }

.vb-carousel { position: relative; width: 100%; }
.vb-carousel__viewport { position: relative; overflow: hidden; }
.vb-carousel__track {
	display: flex;
	align-items: flex-start;
	transition: transform .5s ease;
	will-change: transform;
}
.vb-carousel__track.is-static { transition: none; }
.vb-carousel__slide { position: relative; flex: 0 0 auto; }
.vb-home .vb-carousel__prev, .vb-home .vb-carousel__next {
	position: absolute;
	top: calc(50% - .5em); /* Elementor: 50% minus half the arrow size, then translateY(-50%) */
	transform: translateY(-50%);
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: #BBBBBB;
	font-size: 30px;
	line-height: 1;
	cursor: pointer;
	transition: color .25s ease-in-out;
}
.vb-home .vb-carousel__prev { left: 0; }
.vb-home .vb-carousel__next { right: 0; }
.vb-home .vb-carousel__prev svg, .vb-home .vb-carousel__next svg { flex: none; width: 1em; height: 1em; fill: currentColor; transition: all .25s ease-in-out; }
.vb-home .vb-carousel__prev:hover, .vb-home .vb-carousel__next:hover, .vb-home .vb-carousel__prev:focus-visible, .vb-home .vb-carousel__next:focus-visible { color: var(--vb-color-black, #000); background: transparent; }

.vb-carousel--guide .vb-carousel__viewport { width: calc(100% - 60px); margin: 0 auto 0 18px; padding-top: 20px; }
.vb-carousel--guide .vb-carousel__slide {
	width: calc((100% - 90px) / 4);
	max-width: 350px;
	margin-right: 30px;
	transition: width .5s ease, max-width .5s ease, padding .5s ease; /* same curve/duration as the track move */
}
.vb-carousel--guide .vb-carousel__slide.is-active { width: 100%; max-width: 650px; padding-left: 18px; }
.vb-carousel--guide .vb-carousel__slide.is-next { width: 100%; max-width: 515px; }
.vb-carousel--guide .vb-carousel__slide:before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	display: block;
	width: 100%;
	height: 100%;
	z-index: 0;
	transition: all .25s ease-in-out;
}
.vb-carousel--guide .vb-carousel__slide:hover:before { background: #EDD0E4; left: -15px; top: -20px; }
.vb-carousel--guide .vb-carousel__box { position: relative; }
.vb-carousel--guide .vb-carousel__image {
	position: relative;
	width: 100%;
	height: 515px;
	aspect-ratio: 350 / 515;
	overflow: hidden;
	margin: 0 auto;
}
.vb-carousel--guide .vb-carousel__image img { display: block; width: 100%; height: 100%; object-fit: cover; transition: all .25s ease-in-out; }
.vb-carousel--guide .guide-content {
	position: absolute;
	left: 0;
	bottom: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
	width: 101%;
	margin-left: -1px;
	min-height: 160px;
	background-color: #fff;
	padding: 15px 40px 0 1px;
	transition: all .25s ease-in-out;
}
.vb-carousel--guide .guide-content * { transition: all .25s ease-in-out; }
.vb-carousel--guide .guide-content p { margin-bottom: 0; }
.vb-carousel--guide .guide-content h4 a, .vb-carousel--guide .short-cont a { color: #231f20; text-decoration: none; }
.vb-carousel--guide .guide-content h4 a { font-size: 18px; }
.vb-carousel--guide .short-cont p { font-size: 16px; }
.vb-carousel--guide .short-cont a { font-size: 18px; }
.vb-carousel--guide .vb-carousel__slide.is-active .guide-content { background-color: transparent; padding: 20px; color: #fff; }
.vb-carousel--guide .vb-carousel__slide.is-active .guide-content h4,
.vb-carousel--guide .vb-carousel__slide.is-active .guide-content h4 a,
.vb-carousel--guide .vb-carousel__slide.is-active .guide-content .short-cont,
.vb-carousel--guide .vb-carousel__slide.is-active .guide-content .short-cont * { color: #fff; text-decoration: none; }
.vb-carousel--guide .vb-carousel__slide.is-active .guide-content .vb-home__more { color: #EDD0E4; }
.vb-carousel--guide .vb-carousel__slide.is-active .guide-content h4 a:hover,
.vb-carousel--guide .vb-carousel__slide.is-active .guide-content .short-cont a:hover { text-decoration: underline; }

/* ---------- Find Your Mark ---------- */
.vb-home__mark { position: relative; z-index: 1; padding: 0 36px; background-color: var(--vb-color-pink, #EDD0E4); }
.vb-home__mark > .vb-home__inner { flex-direction: row; align-items: center; gap: 0 50px; }
.vb-home__mark-info { display: flex; flex-direction: column; gap: 20px; width: 41%; }
.vb-home__mark-map { display: flex; flex-direction: column; gap: 20px; width: 59%; }
.vb-home__mark-svg { margin: -14px 0 -50px; line-height: 0; }
.vb-home__mark-svg svg { width: 100%; height: auto; display: inline; overflow: hidden; }
.vb-home__mark-svg #Landmarks g.raster { visibility: hidden !important; }
.vb-home__mark-svg path.neighborhood { cursor: pointer; }

.vb-home__mark-card {
	position: relative;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 30px;
	padding: 30px 40px 30px 0;
	background-color: #F4F2EB;
}
.vb-home__mark-card-inner {
	position: relative;
	display: flex;
	justify-content: space-between;
	gap: 20px;
	width: 100%;
}
.vb-home__mark-text { display: flex; flex-direction: column; width: 55%; }
.vb-home__mark-text h3, .vb-home__mark-slide h3 { font-style: italic; }
.vb-home__mark-desc { margin-top: 20px; }
.vb-home__mark-text .vb-home__more, .vb-home__mark-slide .vb-home__more {
	align-self: flex-start;
	margin-left: -1px;
	padding: 5px 5px 5px 0;
	color: var(--vb-color-accent, #EF4343);
	fill: var(--vb-color-accent, #EF4343);
}
.vb-home__mark-text .vb-home__more:hover, .vb-home__mark-slide .vb-home__more:hover,
.vb-home__mark-text .vb-home__more:focus, .vb-home__mark-slide .vb-home__more:focus { color: var(--vb-color-primary, #231F20); }
.vb-home__mark-photos { display: flex; flex-direction: column; gap: 20px; width: 40%; }
.vb-home__mark-photo { position: relative; text-align: center; }
.vb-home__mark-photo[hidden] { display: none; }
.vb-home__mark-photo img { width: 100%; transition: opacity .2s; }
.vb-home__mark-photo.is-fading img { opacity: 0; }
.vb-home__mark-carousel { display: none; }
.vb-home__mark-map-img { display: none; text-align: center; }

/* ---------- Discover Your Burbank Story ---------- */
.vb-home__story-head { display: flex; align-items: flex-end; gap: 20px; }
.vb-home__story-title { display: flex; flex-direction: column; justify-content: flex-end; gap: 20px; width: 33.33%; }
.vb-home__story-text { display: flex; flex-direction: column; gap: 20px; width: 66.66%; }
.vb-home__story-row { display: flex; gap: 20px; padding-top: 20px; }
.vb-home__hotel {
	display: flex;
	flex-direction: column;
	gap: 20px;
	width: 50%;
	padding: 60px;
	background-color: var(--vb-color-cream, #F4F2EB);
}
.vb-home__hotel .c-hotel, .vb-home__hotel #aresHeader { display: none; }
.vb-home__hotel #aresWrap { padding: 0 !important; flex-direction: column; background-color: unset !important; }
.vb-home__hotel .widgetSkin { width: 100%; box-shadow: none; padding: 0; }
.vb-home__card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 20px;
	width: 25%;
	padding: 20px;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
}
.vb-home__card:before { content: ""; position: absolute; inset: 0; background-color: #000; opacity: .5; transition: background .3s, border-radius .3s, opacity .3s; }
.vb-home__card h3 { position: relative; color: var(--vb-color-cream, #F4F2EB); }
.vb-home__card h3 a { color: inherit; text-decoration: none; }
.vb-home__card h3 a:hover { color: inherit; text-decoration: underline; }
.vb-home__quick-wrap { display: flex; flex-direction: column; gap: 20px; }
.vb-home__quick {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 20px;
	padding: 50px 60px;
	background-color: var(--vb-color-primary, #231F20);
}
.vb-home .vb-home__quick h4 { color: var(--vb-color-cream, #F4F2EB); }
.vb-home .vb-home__quick-link {
	display: inline-flex;
	flex-direction: row;
	align-items: center;
	gap: 0;
	font-family: "Courier Prime", monospace;
	font-size: 18px;
	font-weight: 700;
	line-height: 1;
	text-align: center;
	text-decoration: none;
	color: var(--vb-color-cream, #F4F2EB);
	fill: var(--vb-color-cream, #F4F2EB);
	background: transparent;
	padding: 0;
	transition: all .3s;
}
.vb-home .vb-home__quick-link svg { width: 1em; height: 1em; fill: currentColor; }
.vb-home .vb-home__quick-link:hover, .vb-home .vb-home__quick-link:focus { color: var(--vb-color-accent, #EF4343); }

/* ---------- See What's New ---------- */
.vb-home__news { position: relative; }
.vb-home__news:before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	display: block;
	width: 100%;
	height: 40%;
	background: #F4F2EB;
	z-index: 0;
}
.vb-home__news > .vb-home__inner { position: relative; z-index: 1; }
.vb-home__news-head { display: flex; align-items: flex-end; gap: 20px; }
.vb-home__news-body { display: flex; flex-direction: column; gap: 20px; padding: 30px 40px 0; }
#whatsnew *, #whatsnew .city-post a.city-post__media:before { transition: all .5s ease-in-out; }
#whatsnew .city-three-posts__inner {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 30px;
	align-items: flex-start;
}
#whatsnew .city-three-posts__inner:has(.city-three-posts__col--left:hover) { grid-template-columns: 1.6fr 1fr 1fr; }
#whatsnew .city-three-posts__inner:has(.city-three-posts__col--center:hover) { grid-template-columns: 1fr 1.6fr 1fr; }
#whatsnew .city-three-posts__inner:has(.city-three-posts__col--right:hover) { grid-template-columns: 1fr 1fr 1.6fr; }
#whatsnew .city-three-posts__inner .city-three-posts__col { margin-top: 0; }
#whatsnew .city-post { position: relative; }
#whatsnew .city-post.is-featured { transform: scale(1); }
#whatsnew .city-post a.city-post__media { display: block; position: relative; width: 100%; }
#whatsnew .city-post a.city-post__media img { position: relative; z-index: 1; width: 100%; }
#whatsnew .city-post a.city-post__media:before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	display: block;
	width: 100%;
	height: 100%;
	opacity: 0;
	z-index: 0;
}
#whatsnew .city-post a.city-post__media:hover:before { background: #EDD0E4; opacity: 1; left: -15px; top: -15px; }
#whatsnew .city-post__date { margin: 15px 0; }
#whatsnew .city-post__title { font-size: 30px; line-height: 1.2; margin: 0 0 8px; }
#whatsnew .city-post__title a { color: #231f20; text-decoration: none; }
#whatsnew .city-post__title a:hover { text-decoration: underline; }
#whatsnew .city-three-posts__view-all-btn { display: block; width: fit-content; margin: 50px auto 0; }

/* ---------- Follow Us ---------- */
.vb-home__follow { display: flex; flex-direction: column; gap: 20px; padding: 10px 36px; }
.vb-home__follow-head { display: flex; gap: 20px; }
.vb-home__follow-title { display: flex; flex-direction: column; justify-content: flex-end; gap: 20px; width: 50%; }
.vb-home__follow-social { display: flex; flex-direction: column; align-items: flex-end; gap: 20px; width: 50%; text-align: right; }
.vb-home__social { display: inline-flex; gap: 5px; list-style: none; margin: 0; padding: 0; }
.vb-home__social li { display: block; margin: 0; }
.vb-home__social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	background-color: var(--vb-color-primary, #231F20);
	color: #fff;
	font-size: 25px;
	line-height: 1;
	transition: all .3s;
}
.vb-home__social a svg { width: 1em; height: 1em; fill: #fff; }
.vb-home__social a:hover, .vb-home__social a:focus { background-color: var(--vb-color-accent, #EF4343); }
.vb-home__follow-hr { display: flex; flex-direction: column; }
.vb-home__instagram #sb_instagram, .vb-home__instagram #sb_instagram.sbi_width_resp { margin-left: -10px; width: calc(100% + 20px) !important; }

/* ---------- breakpoints ---------- */
@media (min-width: 768px) {
	.vb-carousel--guide .guide:hover .vb-carousel__image img { transform: scale(1.01); filter: brightness(70%); }
	.vb-carousel--guide .guide h4:hover, .vb-carousel--guide .guide .short-cont:hover, .vb-carousel--guide .guide a:hover { text-decoration: underline; }
	.vb-carousel--guide .guide:hover .guide-content { background-color: transparent; padding: 20px; }
	.vb-carousel--guide .guide:hover .guide-content h4, .vb-carousel--guide .guide:hover .guide-content h4 a,
	.vb-carousel--guide .guide:hover .guide-content .short-cont, .vb-carousel--guide .guide:hover .guide-content .short-cont p,
	.vb-carousel--guide .guide:hover .guide-content .short-cont p a { color: #F4F2EB; }
	.vb-carousel--guide .guide:hover .guide-content .vb-home__more { color: #EDD0E4; }
	#whatsnew .city-three-posts__inner { gap: 40px; }
	#whatsnew .city-three-posts__inner:has(.city-three-posts__col--left:hover) .city-three-posts__col:not(.city-three-posts__col--left),
	#whatsnew .city-three-posts__inner:has(.city-three-posts__col--center:hover) .city-three-posts__col:not(.city-three-posts__col--center),
	#whatsnew .city-three-posts__inner:has(.city-three-posts__col--right:hover) .city-three-posts__col:not(.city-three-posts__col--right) { margin-top: 40px; }
}
@media (min-width: 992px) {
	.vb-home .vb-home__text--lead p { font-size: 19px; }
}
@media (min-width: 1200px) {
	.vb-home__mark-card:before {
		content: "";
		position: absolute;
		top: 0;
		left: calc(100% - 50vw);
		display: block;
		width: 100%;
		height: 100%;
		background-color: #F4F2EB;
	}
}
@media (min-width: 1600px) {
	.vb-carousel--guide .vb-carousel__viewport { margin-left: 25px; }
	#whatsnew .city-three-posts__inner { gap: 50px; }
}
@media (min-width: 1920px) {
	.vb-home h1, .vb-home h2 { font-size: 80px; }
	.vb-home h3 { font-size: 40px; }
	.vb-home h4 { font-size: 23px; }
	.vb-home .vb-btn { padding: 16px 30px; }
	.vb-home .vb-carousel__prev, .vb-home .vb-carousel__next { width: 48px; height: 48px; font-size: 48px; }
	.vb-home .vb-carousel--guide .vb-carousel__prev { left: -20px; }
	.vb-home .vb-carousel--guide .vb-carousel__next { right: -20px; }
	.vb-carousel--guide .vb-carousel__image { height: 625px; aspect-ratio: 350 / 625; }
	.vb-home__mark > .vb-home__inner { gap: 40px; }
	.vb-home__mark-intro { padding-right: 40px; }
	.vb-home__mark-card { width: 85%; margin: 20px 0; padding: 65px 40px 65px 0; }
	.vb-home__mark-desc { margin-top: 40px; }
	.vb-home__mark-svg { margin: -51px 0; }
	#whatsnew .city-three-posts__inner { gap: 65px; }
}
@media (max-width: 1366px) {
	.vb-home__intro > .vb-home__inner { gap: 30px; }
	.vb-home__intro-text { padding: 0; }
	.vb-home__intro-caption { gap: 3px; }
	.vb-home__mark-info { padding: 40px 0; }
	.vb-home__mark-card { padding: 30px; }
	.vb-home__mark-card-inner { gap: 0; }
	.vb-home__story-head { align-items: flex-start; }
	.vb-home__story-row { padding-top: 0; }
	.vb-home__hotel { padding: 40px; }
	.vb-home__quick { padding: 20px; }
	.vb-home__news-body { padding: 30px; }
}
@media (max-width: 1024px) {
	.vb-home h1, .vb-home h2 { font-size: 50px; }
	.vb-home h3 { font-size: 24px; }
	.vb-home h4 { font-size: 20px; }
	.vb-home__section { padding: 40px 36px; }
	.vb-home__guide { padding: 0 0 40px; }
	.vb-home__intro-caption { gap: 0; padding: 20px; }
	.vb-home__mark > .vb-home__inner { align-items: flex-start; gap: 30px; }
	.vb-home__mark-card { flex-direction: column; }
	.vb-home__mark-card-inner { flex-direction: column; }
	.vb-home__mark-text { width: 100%; }
	.vb-home__mark-photos { display: none; }
	.vb-home__hotel { padding: 30px; }
	.vb-home__quick { flex-direction: row; align-items: center; gap: 0; padding: 10px; }
	.vb-home .vb-home__quick h4 { font-size: 16px; line-height: 1em; }
	.vb-home .vb-home__quick-link { font-size: 14px; }
	.vb-home__news-body { padding: 0 20px; }
	#whatsnew .city-post__title { font-size: 24px; }
}
@media (max-width: 767px) {
	.vb-home h1, .vb-home h2 { font-size: 44px; }
	.vb-home h4 { font-size: 18px; }
	.vb-home .vb-home__mobile-only { display: block; }
	.vb-home .vb-home__no-mobile { display: none; }
	.vb-home__intro > .vb-home__inner { flex-wrap: wrap; gap: 10px; }
	.vb-home__intro-text, .vb-home__intro-card { width: 100%; }
	.vb-home__intro-caption { display: none; }
	.vb-home__guide-head { padding: 0 36px; }
	.vb-carousel--guide { padding: 30px 30px 0; }
	.vb-carousel--guide .vb-carousel__viewport { width: 100%; margin: 0; padding-top: 0; }
	.vb-carousel--guide .vb-carousel__slide,
	.vb-carousel--guide .vb-carousel__slide.is-active,
	.vb-carousel--guide .vb-carousel__slide.is-next { width: 100%; max-width: none; padding-left: 0; }
	.vb-carousel--guide .guide-content { min-height: 184px; }
	.vb-carousel--guide .vb-carousel__slide.is-active .guide-content { background-color: #FFFFFF; padding: 20px 20px 20px 0; }
	.vb-carousel--guide .vb-carousel__slide.is-active .guide-content h4,
	.vb-carousel--guide .vb-carousel__slide.is-active .guide-content h4 a,
	.vb-carousel--guide .vb-carousel__slide.is-active .guide-content .short-cont,
	.vb-carousel--guide .vb-carousel__slide.is-active .guide-content .short-cont * { color: #231f20; text-decoration: none; border-bottom: none; }
	.vb-carousel--guide .vb-carousel__slide.is-active .guide-content .vb-home__more { color: #EE5323; }
	.vb-carousel--guide .short-cont a { font-size: 16px; }
	.vb-home__mark > .vb-home__inner { flex-wrap: wrap; padding: 40px 0; }
	.vb-home__mark-info { width: 100%; padding: 0; }
	.vb-home__mark-card, .vb-home__mark-map { display: none; }
	.vb-home__mark-carousel { display: block; width: calc(100% + 60px); max-width: none; margin-left: -30px; }
	.vb-home__mark-map-img { display: block; }
	.vb-carousel--mark .vb-carousel__track { align-items: stretch; } /* Swiper: slides share the tallest height */
	.vb-carousel--mark .vb-carousel__slide { display: flex; width: 100%; margin-right: 10px; }
	.vb-carousel--mark .vb-home__mark-slide { width: 100%; }
	.vb-home .vb-carousel--mark .vb-carousel__prev, .vb-home .vb-carousel--mark .vb-carousel__next { width: 25px; height: 25px; font-size: 25px; color: #B09BA8; }
	.vb-home .vb-carousel--mark .vb-carousel__prev:hover, .vb-home .vb-carousel--mark .vb-carousel__next:hover { color: #23201F; }
	.vb-home__mark-slide { display: flex; flex-direction: column; padding: 30px; background-color: #fff; }
	.vb-home__story-head { flex-wrap: wrap; gap: 10px; }
	.vb-home__story-title, .vb-home__story-text { width: 100%; }
	.vb-home__story-text { gap: 0; }
	.vb-home__story-row { flex-wrap: wrap; }
	.vb-home__hotel, .vb-home__card { width: 100%; }
	.vb-home__hotel { padding: 20px; }
	.vb-home__quick { flex-direction: column; gap: 5px; padding: 25px; }
	.vb-home .vb-home__quick h4 { padding-bottom: 10px; }
	.vb-home__news-body { padding: 0; }
	#whatsnew .city-three-posts__inner { grid-template-columns: 1fr !important; gap: 30px; }
	#whatsnew .city-post a.city-post__media:before { left: -15px; top: -15px; }
	.vb-home__follow { gap: 10px; }
	.vb-home__follow-head { flex-direction: column; gap: 20px; }
	.vb-home__follow-title, .vb-home__follow-social { width: 100%; }
	.vb-home__follow-social { align-items: flex-start; }
	.vb-home__social a { width: 40px; height: 40px; font-size: 20px; }
}
@media (max-width: 640px) {
	.vb-home__instagram #sb_instagram.sbi_col_3.sbi_mob_col_auto #sbi_images .sbi_item,
	.vb-home__instagram #sb_instagram.sbi_col_4.sbi_mob_col_auto #sbi_images .sbi_item,
	.vb-home__instagram #sb_instagram.sbi_col_5.sbi_mob_col_auto #sbi_images .sbi_item,
	.vb-home__instagram #sb_instagram.sbi_col_6.sbi_mob_col_auto #sbi_images .sbi_item { width: 50% !important; }
}

/* Touch devices: zoom/pan controls the JS adds around the SVG map */
.vb-home__map-ui { display: flex; justify-content: center; align-items: center; gap: 10px; margin: 10px 0; }
.vb-home__map-ui .svg-btn { padding: 8px 12px; border: 1px solid #ccc; background: #fff; border-radius: 6px; cursor: pointer; color: #EF4343; font: inherit; }
.vb-home__map-ui .svg-btn:not(.zoom-reset) { width: 45px; }
.vb-home__map-ui .svg-zoom-range { width: 180px; }
.vb-home__map-viewport { position: relative; height: 300px; overflow: hidden; touch-action: none; }
.vb-home__map-viewport > svg { width: 100%; height: 100%; display: block; user-select: none; }