.dropcap-mini {
	float: left;
	height: 30px;
	width: 30px;
	line-height: 30px;
	text-align: center;
	margin: 5px 15px 0 0;
}

.dropcap-text {
	padding: 10px;
	white-space: nowrap;
	font-size: 14px;
}

.box {
	max-width: 720px;
	padding: 0 70px !important;
}

/* Villa Uhland CSS */

.vu-year {
	margin: 1px;
}

.vu-magnifier {
	position: absolute;
	background: white;
	padding: 18px 18px;
	margin: 1px;
	border: thin;
}

.vu-responsive-img {
	width: 100%;
	height: auto;
	display: block;
}

.vu-img-mobile { padding: 50px 0px; }
.vu-mobile-only { display: none; }

.vu-box-banner-img { width: 700px; }

.vu-flag {
	width: 20px;
	height: 15px;
	display: inline-block;
	vertical-align: middle;
	border: 1px solid rgba(0, 0, 0, 0.08);
	object-fit: cover;
}

/* Phone numbers must never break to a second line, anywhere. */
a[href^="tel:"] {
	white-space: nowrap;
}

/* Keep the contact strip pinned to the top while the page scrolls.
   We use position:fixed (instead of sticky) because body has
   display:flex / height:100% in skin-red.css, which can disable
   CSS sticky. body gets an initial padding-top here so content is
   never hidden under the topBar before main.js fine-tunes it. */
body {
	padding-top: 42px;
}

.topBar {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1031;
	/* Promote to its own compositor layer so MIUI/Android Chrome
	   don't repaint the bar each scroll tick while the URL bar
	   collapses — without this, the bar jiggles on Xiaomi devices. */
	transform: translateZ(0);
	-webkit-transform: translateZ(0);
	will-change: transform;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
}

.topBar ul.topBarNav li ul.w-150 li a {
	white-space: nowrap;
	padding-left: 12px;
	padding-right: 12px;
}

/* Feature list: icon + text rows that align on every viewport */
.vu-feature-list {
	list-style: none;
	padding: 0;
	margin: 0 0 18px 0;
}

.vu-feature {
	display: flex;
	align-items: center;
	margin-bottom: 10px;
	line-height: 1.4;
}

.vu-feature .dropcap-mini {
	float: none;
	flex: 0 0 30px;
	margin: 0 14px 0 0;
}

.vu-feature .dropcap-text {
	flex: 1;
	padding: 0;
	white-space: normal;
	font-size: 14px;
}

@media screen and (max-width: 991px) {

	.breadcrumbs,
	.vu-desktop-only {
		display: none !important;
	}

	.topBar .vu-contact-info {
		float: left;
		margin: 0;
	}

	.topBar .vu-contact-info > li {
		display: inline-block;
		padding: 0 8px 0 0;
		font-size: 12px;
		line-height: 38px;
	}

	.topBar .vu-contact-info > li a {
		display: inline !important;
	}

	.vu-mobile-only { display: block; }
	.vu-box { padding: 70px 20px 100px !important; }

	.vu-box-banner-img { width: 347px; }

	/* On mobile the Swiper carousel is converted to a plain stacked list.
	   Fighting Swiper's flex/transform layout was unreliable; stacking is
	   simpler and gives a better mobile UX. */
	.swiper-container.swiper-coverflow {
		height: auto !important;
		overflow: visible !important;
	}

	.swiper-container.swiper-coverflow .swiper-wrapper {
		display: block !important;
		width: 100% !important;
		height: auto !important;
		transform: none !important;
		-webkit-transform: none !important;
		-ms-transform: none !important;
	}

	.swiper-container.swiper-coverflow .swiper-slide {
		display: block !important;
		width: 100% !important;
		height: auto !important;
		flex-shrink: 1 !important;
		margin: 0 0 8px !important;
		text-align: left !important;
		position: relative !important;
		left: 0 !important;
	}

	.swiper-container.swiper-coverflow .slider-content {
		display: block !important;
		width: 100% !important;
		height: auto !important;
		padding: 20px 0 24px !important;
	}

	.swiper-container.swiper-coverflow .slider-content .box:not(.vu-desktop-only) {
		display: block !important;
		width: 100% !important;
		max-width: 640px !important;
		margin: 0 auto !important;
		padding: 4px 22px !important;
		text-align: left !important;
		vertical-align: baseline !important;
	}

	.swiper-container.swiper-coverflow .slider-content .box.vu-desktop-only {
		display: none !important;
	}

	.swiper-container.swiper-coverflow .swiper-button-prev,
	.swiper-container.swiper-coverflow .swiper-button-next,
	.swiper-container.swiper-coverflow .swiper-pagination {
		display: none !important;
	}

	.swiper-container.swiper-coverflow h2.thin {
		margin-top: 0;
	}

	.swiper-container.swiper-coverflow .meta-info {
		margin: 4px 0 14px;
	}

	.swiper-container.swiper-coverflow .btn {
		margin-top: 8px;
	}

	.vu-img-mobile {
		padding: 18px 0 8px;
		max-width: 100%;
	}

	.vu-img-mobile .vu-responsive-img {
		max-width: 100%;
		height: auto;
	}

	.vu-img-mobile .vu-magnifier {
		display: none;
	}

	.vu-feature {
		margin-bottom: 8px;
	}
}

@media screen and (max-width: 480px) {

	.swiper-container .swiper-slide .slider-content .box {
		padding: 8px 16px !important;
	}

	.swiper-button-prev,
	.swiper-button-next {
		display: none;
	}

	.vu-feature .dropcap-mini {
		flex: 0 0 28px;
		height: 28px;
		width: 28px;
		line-height: 28px;
		margin-right: 12px;
	}

	.vu-feature .dropcap-text {
		font-size: 13px;
	}

	.topBar .vu-contact-info > li {
		font-size: 11px;
		padding-right: 6px;
		line-height: 36px;
	}
}

/* Swiper slide content (left text-box + right photo-box) has top/bottom padding of 0 in the skin,
   so the photo on the right side touches the top and bottom edges of the slider. Add vertical
   breathing room on desktop. */
@media (min-width: 767px) {
	.swiper-container .swiper-slide .slider-content .box {
		padding-top: 40px;
		padding-bottom: 40px;
	}
}

/* skin-red.css makes <body> a fixed-height flex column (html, body { height: 100% } +
   display: flex). A direct body child with overflow: hidden — the Swiper container — has no
   automatic flex minimum size, so the browser crushes it to 0 px to make the column fit the
   viewport, and the whole slider disappears. Content children of body must never flex-shrink;
   the page scrolls instead. */
body > * {
	flex-shrink: 0;
}

/* The skin hardcodes .swiper-container { height: 700px }, which clips content on small monitors
   and after we made the slide taller (new See Photos button + vertical padding). Make the slider
   grow with content: 600px minimum on the slide itself, no upper cap. Paired with autoHeight:true
   in the Swiper init so slide positions recompute when heights change.

   The min-height sits on the SLIDE (not the container) so the slide's flex centering
   (align-items: center, already from the skin) has a frame to vertically centre its content within
   when the content is shorter than 600px. Putting min-height on the container would let the slide
   shrink to content and the slide content would slide to the top of the container instead. */
.swiper-container {
	height: auto !important;
	background-color: #e1e6e6;
}
.swiper-container .swiper-slide {
	height: auto !important;
	min-height: 600px;
}
.swiper-container .swiper-slide .slider-content {
	height: auto !important;
}

/* The slider's grey band stays full-bleed, but the CONTENT inside the slides must line up with
   the same centered column as header, text sections and footer (Bootstrap .container widths).
   The skin used fixed paddings instead, and the global `.box { padding: 0 70px !important }`
   above forces 70px — so the paddings here need !important too.
   The photo cell gets the larger share (55%) so the picture stays prominent inside the column,
   and the prev/next arrows sit right next to the content column instead of at the screen edge. */
@media (min-width: 768px) {
	.swiper-container .swiper-slide .slider-content {
		width: 750px;
		margin-left: auto;
		margin-right: auto;
	}
	.swiper-container .swiper-slide .slider-content .box {
		padding: 40px 15px !important;
	}
	.swiper-container .swiper-slide .slider-content .box.vu-desktop-only {
		width: 55%;
	}
	.swiper-container .swiper-button-prev { left: max(10px, calc(50% - 435px)); }
	.swiper-container .swiper-button-next { right: max(10px, calc(50% - 435px)); }
}
@media (min-width: 992px) {
	.swiper-container .swiper-slide .slider-content {
		width: 970px;
	}
	.swiper-container .swiper-button-prev { left: calc(50% - 545px); }
	.swiper-container .swiper-button-next { right: calc(50% - 545px); }
}
@media (min-width: 1200px) {
	.swiper-container .swiper-slide .slider-content {
		width: 1170px;
	}
	.swiper-container .swiper-button-prev { left: calc(50% - 645px); }
	.swiper-container .swiper-button-next { right: calc(50% - 645px); }
}

/* "See Photos" secondary button on apartment slides — sits next to the primary "Make a reservation"
   button. Add a small left gap so the two buttons don't touch, and stack vertically on small screens. */
.vu-btn-photos {
	margin-left: 8px;
}
@media (max-width: 480px) {
	.vu-btn-photos {
		margin-left: 0;
		margin-top: 8px;
		display: inline-block;
	}
}

/* Footer partner link: give it a visible dotted underline so it reads as a
   link against the dark footer (the skin renders footer links without one). */
.vu-partner-link {
	text-decoration: underline dotted;
	text-underline-offset: 3px;
}
.vu-partner-link:hover,
.vu-partner-link:focus {
	text-decoration: underline solid;
}

/* Desktop: give the Apartments mega-dropdown more vertical breathing room
   so the two stacked sections (Photos + Apartments at Airbnb) don't feel cramped. */
@media (min-width: 767px) {
	.yamm li .dropdown-menu .yamm-content {
		padding-top: 45px !important;
		padding-bottom: 45px !important;
		min-height: 480px;
	}
	.yamm li .dropdown-menu .yamm-content ul li a {
		padding: 11px 0 !important;
	}
	.yamm li .dropdown-menu .yamm-content ul li.title {
		margin: 12px 0 !important;
	}
}