/* ============================================================
   Domus — home: available properties, side scroll  [domus_home_properties]
   Figma: Homepage 122:280 (desktop, 1440×780 at y 1912) / 737:1538 (mobile, 375×780 at y 2155).

   The section is as tall as the scrolling it needs (one screen per property); inside, a full-screen stage stays put
   (sticky) while the page scroll moves the properties sideways, one after the other; when the last one is in place
   the page scrolls on to the next section.
   Each property: its own cover photo (the "Home cover" field) under rgba(0,0,0,.5) multiply, the property card in
   the middle (assets/cards.css — 712×445 / mobile 311: 238 over 288; the name moves out of the card).
   Fixed over the moving slides: "AVAILABLE PROPERTIES [04]" 32/28 caps (36 / 28 from the top), the current name
   26 (mobile 20) bottom left, "VIEW ALL ↳" 13 caps bottom right and the progress line (1px white 30%, the current
   share in white).
   ============================================================ */

.dm-hp {
	position: relative;
	width: 100%;
	color: #fff;
	font-family: var(--dm-font, 'CF ModGrotesk'), 'Helvetica Neue', Helvetica, Arial, sans-serif;
	font-weight: 400;
	-webkit-font-smoothing: antialiased;
	/* the scrolling room: the stage + one screen per further property (home-props.js sets --dm-hp-n) */
	height: calc(100vh * var(--dm-hp-n, 4));
}
.dm-hp *, .dm-hp *::before, .dm-hp *::after { box-sizing: border-box; }
.elementor-widget:has(> .elementor-widget-container > .elementor-shortcode > .dm-hp),
.elementor-widget:has(> .elementor-shortcode > .dm-hp) { flex: 1 1 100% !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; }
.dm-hp p, .dm-hp h2 { margin: 0; padding: 0; color: inherit; font-family: inherit; font-weight: 400; }
.dm-hp a, .dm-hp a:hover, .dm-hp a:visited, .dm-hp a:focus { color: #fff !important; text-decoration: none !important; }

.dm-hp__stage {
	position: -webkit-sticky;
	position: sticky;
	top: 0;
	width: calc(100vw - var(--dm-sbw, 0px));
	margin-left: calc(50% - (100vw - var(--dm-sbw, 0px)) / 2);
	height: 100vh;
	overflow: hidden;
	background: #111;
}

/* the moving strip: one full-screen slide per property */
.dm-hp__track { position: absolute; inset: 0; display: flex; will-change: transform; }
.dm-hp__slide { position: relative; flex: 0 0 100%; height: 100%; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.dm-hp__cover { position: absolute; top: 0; bottom: 0; left: -14%; right: -14%; will-change: transform; }
.dm-hp__cover img { display: block; width: 100% !important; max-width: none !important; height: 100% !important; object-fit: cover; }
.dm-hp__cover::after { content: ''; position: absolute; inset: 0; background: rgba(0, 0, 0, .5); mix-blend-mode: multiply; }
.dm-hp__slide .dm-card { position: relative; z-index: 1; }
.dm-hp .dm-card__name { display: none; } /* the name is shown at the bottom left instead */

/* fixed over the slides */
.dm-hp__title { position: absolute; z-index: 2; left: var(--dm-side, 32px); top: 36px; font-size: 32px; line-height: 28px; letter-spacing: -.02em; text-transform: uppercase; pointer-events: none; }
.dm-hp__title-word { display: block; }
.dm-hp__title-last { white-space: nowrap; }
.dm-hp__count { position: relative; top: -5px; margin-left: 6px; font-size: 15px; line-height: 28px; letter-spacing: -.02em; vertical-align: top; }

.dm-hp__foot { position: absolute; z-index: 2; left: var(--dm-side, 32px); right: var(--dm-side, 32px); bottom: 32px; }
.dm-hp__names { position: relative; height: 32px; }
.dm-hp__name { position: absolute; left: 0; bottom: 0; font-size: 26px; line-height: 1; letter-spacing: -.02em; white-space: nowrap; opacity: 0; will-change: opacity, transform; }
.dm-hp .dm-hp__all { position: absolute; right: 0; bottom: 4px; display: flex; align-items: center; gap: 9px; font-size: 13px; line-height: 16px; text-transform: uppercase; }
.dm-hp__all svg { display: block; width: 18px; height: 13px; transition: transform .35s ease; }
@media (hover: hover) { .dm-hp .dm-hp__all:hover svg { transform: translateX(3px); } }
.dm-hp__bar { position: relative; height: 1px; margin-top: 16px; background: rgba(255, 255, 255, .3); }
.dm-hp__bar span { position: absolute; left: 0; top: 0; width: calc(100% / var(--dm-hp-n, 4)); height: 1px; background: #fff; will-change: transform; }

@media (max-width: 767px) {
	.dm-hp__stage { height: 100svh; }
	.dm-hp__title { left: 16px; top: 28px; }
	.dm-hp__slide .dm-card { width: calc(100% - 64px); max-width: 311px; }
	.dm-hp__slide .dm-card { grid-template-rows: auto 288px; }
	.dm-hp__slide .dm-card .dm-card__media { aspect-ratio: 311 / 238; }
	.dm-hp__foot { left: 16px; right: 16px; bottom: 28px; }
	.dm-hp__names { height: 24px; }
	.dm-hp__name { font-size: 20px; }
	.dm-hp .dm-hp__all { bottom: 2px; }
	.dm-hp__bar { margin-top: 10px; }
}

/* reduced motion / no JS: a plain sideways-scrolling row */
html:not(.dm-js) .dm-hp, .dm-hp.is-static { height: auto; }
html:not(.dm-js) .dm-hp__stage, .dm-hp.is-static .dm-hp__stage { position: relative; }
html:not(.dm-js) .dm-hp__track, .dm-hp.is-static .dm-hp__track { overflow-x: auto; scroll-snap-type: x mandatory; }
html:not(.dm-js) .dm-hp__slide, .dm-hp.is-static .dm-hp__slide { scroll-snap-align: start; }

/* ============================================================
   Option 3 — data-mode="stack": nothing slides sideways. The stage holds the screen; on scroll the next property
   swipes up over the current one — its background over the background and its whole card (photo, black panel and
   texts together) over the card, inside the card's frame — while the current one drifts up a little underneath.
   home-props.js sets each layer's position.
   ============================================================ */
.dm-hp--stack .dm-hp__covers, .dm-hp[data-mode="stack"] .dm-hp__covers { position: absolute; inset: 0; overflow: hidden; }
.dm-hp[data-mode="stack"] .dm-hp__covers .dm-hp__cover { left: 0; right: 0; overflow: hidden; }
.dm-hp[data-mode="stack"] .dm-hp__center { position: absolute; inset: 0; z-index: 1; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.dm-hp[data-mode="stack"] .dm-hp__cards { position: relative; overflow: hidden; pointer-events: auto; }
.dm-hp[data-mode="stack"] .dm-hp__cards .dm-card { will-change: transform; }
.dm-hp[data-mode="stack"] .dm-hp__cards .dm-card + .dm-card { position: absolute; inset: 0; }
@media (max-width: 767px) {
	.dm-hp[data-mode="stack"] .dm-hp__cards { width: calc(100% - 64px); max-width: 311px; }
	.dm-hp[data-mode="stack"] .dm-hp__cards .dm-card { width: 100%; grid-template-rows: auto 288px; }
	.dm-hp[data-mode="stack"] .dm-hp__cards .dm-card .dm-card__media { aspect-ratio: 311 / 238; }
}
/* before the script runs, and the still version: only the first property shows */
.dm-hp[data-mode="stack"] .dm-hp__covers .dm-hp__cover:not(:first-child),
.dm-hp[data-mode="stack"] .dm-hp__cards .dm-card:not(:first-child) { transform: translate3d(0, 100%, 0); }
.dm-hp--stack.is-static .dm-hp__covers .dm-hp__cover:not(:first-child),
.dm-hp--stack.is-static .dm-hp__cards .dm-card:not(:first-child) { display: none; }
html:not(.dm-js) .dm-hp[data-mode="stack"] { height: auto; }