/* =====================================================================
   Device-wide responsive fixes, loaded last on every page.
   Found by checking every page at 320-2560px wide (phones, tablets,
   laptops, large monitors). Keep fixes here, grouped by component.
   ===================================================================== */

/* ---- Floating Call / WhatsApp buttons: the whole circle is tappable
   (before, only the small icon in the middle responded). ---- */
.wmn-wrap .wmn-widget {
	display: flex;
	padding: 0 !important;
}

.wmn-wrap .wmn-widget > a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	border-radius: inherit;
}

/* ---- Readable small labels: nothing below 12px on any screen ---- */
.ts-row-label,
.luxury-tag,
.spotlight-content .luxury-tag {
	font-size: 12px;
}

@media (max-width: 360px) {
	/* Hero stats on the smallest phones: keep 12px and let a long label
	   wrap onto two short lines instead of shrinking to 10px. */
	.stats-row .count-label {
		font-size: 12px;
		line-height: 1.25;
		white-space: normal;
	}
}

/* ---- Comfortable tap targets on touch screens (about 40px+) ---- */
@media (max-width: 1023px) {
	/* Text links: bigger hit area without moving anything on screen. */
	.seo-crumbs a,
	.service-card-link,
	.luxury-link,
	.contact-detail-item a[href^="mailto:"],
	.contact-detail-item a[href^="tel:"],
	.map-contact-card a[href^="mailto:"],
	.map-contact-card a[href^="tel:"] {
		display: inline-block;
		padding-block: 10px;
		margin-block: -10px;
	}

	.service-card-link {
		display: inline-flex;
	}

	/* Carousel dots stay small to look at but get a larger invisible hit area. */
	.spotlight-dot {
		position: relative;
	}

	.spotlight-dot::after {
		content: "";
		position: absolute;
		inset: -14px -6px;
	}
}

/* ---- Service card images: keep the photo's own 3:2 shape at every
   width, so the title printed on each image is never cropped. ---- */
.premium-img img {
	height: auto;
	aspect-ratio: 3 / 2;
}

/* ---- Tech stack: on screens narrower than the page container the row
   labels sat at the very edge, under the round Call button. Centre them. */
@media (max-width: 1199px) {
	.ts-row-label,
	.ts-row[data-direction="rtl"] .ts-row-label {
		left: 50%;
		right: auto;
		translate: -50% 0;
		white-space: nowrap;
	}
}

/* ---- Phone menu panel: scrolls when taller than the screen (phones held
   sideways), sized to the visible screen, clear of the home bar. ---- */
@media (max-width: 992px) {
	.nav-menu {
		height: 100vh;
		height: 100dvh;
		overflow-y: auto;
		overscroll-behavior: contain;
		padding-bottom: calc(40px + env(safe-area-inset-bottom, 0px));
	}

	/* Floating Call / WhatsApp / chat buttons step aside while the menu is open. */
	body:has(.nav-menu.active) :is(#call-fx, #wmn-fx, .chatbot-toggle) {
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
	}
}

@media (max-width: 992px) and (max-height: 500px) {
	.nav-menu {
		padding-top: 80px;
		gap: 20px;
	}

	.nav-menu ul {
		gap: 12px;
	}
}

/* ---- Large monitors: use more of the width instead of a narrow column. ---- */
@media (min-width: 1600px) {
	.container {
		max-width: 1320px;
	}

	/* The header is designed a little wider than the page content. */
	.site-header .container {
		max-width: 1420px;
	}

	.ts-row-label {
		left: max(16px, calc((100vw - 1320px) / 2 + 15px));
	}

	.ts-row[data-direction="rtl"] .ts-row-label {
		right: max(16px, calc((100vw - 1320px) / 2 + 15px));
	}
}

@media (min-width: 2200px) {
	.container {
		max-width: 1480px;
	}

	.site-header .container {
		max-width: 1580px;
	}

	html {
		font-size: 17px;
	}

	.ts-row-label {
		left: calc((100vw - 1480px) / 2 + 15px);
	}

	.ts-row[data-direction="rtl"] .ts-row-label {
		right: calc((100vw - 1480px) / 2 + 15px);
	}
}