/* ============================================================
   Domus — property card (.dm-card) — reusable in any section, and the "See also" carousel  [domus_related]
   Figma: Property 374:1212 "see also" (desktop card 712×445 = image 356 + black panel 356, 44 apart, current card
   centred, arrows top right) and 800:705 (mobile card 343: image 238 over a 288 panel, arrows + "1 / 13").

   Panel (desktop): padding 27 · name 22.5 (−0.02em) · 41 · area 16 caps (+0.02em, two lines) · desc 14/14 (−0.02em)
   · numbers 48 (−0.02em) with 13px labels at the bottom · arrow 32 at 26 / 21 from the corner.
   Panel (mobile): padding 22 32 · name 20 (kept, though the mobile frame leaves it out) · numbers 42.
   ============================================================ */

.dm-card {
	position: relative;
	display: grid;
	grid-template-columns: 1fr 1fr;
	width: 712px;
	height: 445px;
	color: #fff !important;
	text-decoration: none !important;
	background: #000 !important;
	font-family: var(--dm-font, 'CF ModGrotesk'), 'Helvetica Neue', Helvetica, Arial, sans-serif;
	font-weight: 400;
	-webkit-font-smoothing: antialiased;
	overflow: hidden;
}
.dm-card *, .dm-card *::before, .dm-card *::after { box-sizing: border-box; }
.dm-card:hover, .dm-card:focus, .dm-card:visited { color: #fff !important; text-decoration: none !important; }
.dm-card:focus-visible { outline: 1px solid #000; outline-offset: 3px; }

.dm-card__media { position: relative; overflow: hidden; background: #222; }
.dm-card .dm-card__media img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100% !important;
	max-width: none !important;
	height: 100% !important;
	object-fit: cover;
	transition: transform .8s cubic-bezier(.2, .7, .2, 1);
	-webkit-user-drag: none;
}
@media (hover: hover) { .dm-card:hover .dm-card__media img { transform: scale(1.04); } }

.dm-card__body { position: relative; display: flex; flex-direction: column; padding: 27px 27px 21px; min-width: 0; }
.dm-card__name { display: block; font-size: 22.5px; line-height: 1; letter-spacing: -.02em; }
.dm-card__area { display: block; margin-top: 18px; font-size: 16px; line-height: 1; letter-spacing: .02em; text-transform: uppercase; text-box: trim-both cap alphabetic; }
.dm-card__desc { display: block; max-width: 303px; margin-top: 26px; font-size: 14px; line-height: 14px; letter-spacing: -.02em; }
.dm-card__stats { display: flex; flex-direction: column; gap: 15px; margin-top: auto; }
.dm-card__stat { display: flex; flex-direction: column; gap: 11px; }
.dm-card__num { font-size: 48px; line-height: 1; letter-spacing: -.02em; text-box: trim-both cap alphabetic; }
.dm-card__label { font-size: 13px; line-height: 1; text-box: trim-both cap alphabetic; }
.dm-card__arrow { position: absolute; right: 26px; bottom: 21px; width: 32px; height: 32px; transition: transform .35s ease; }
@media (hover: hover) { .dm-card:hover .dm-card__arrow { transform: translate(3px, -3px); } }

@media (max-width: 767px) {
	.dm-card { grid-template-columns: 1fr; grid-template-rows: 238px auto; width: 343px; height: auto; }
	.dm-card__body { min-height: 288px; padding: 22px 32px 29px; }
	.dm-card__name { font-size: 20px; }
	.dm-card__area { margin-top: 14px; }
	.dm-card__desc { max-width: 244px; margin-top: 13px; }
	.dm-card__stats { padding-top: 24px; }
	.dm-card__num { font-size: 42px; }
	.dm-card__stat { gap: 10px; }
	.dm-card__arrow { right: 32px; bottom: 28px; width: 24px; height: 24px; }
}

/* ============================================================
   "See also" carousel
   ============================================================ */
.dm-rel {
	position: relative;
	width: 100%;
	font-family: var(--dm-font, 'CF ModGrotesk'), 'Helvetica Neue', Helvetica, Arial, sans-serif;
	color: #000;
}
.dm-rel *, .dm-rel *::before, .dm-rel *::after { box-sizing: border-box; }
.elementor-widget:has(> .elementor-widget-container > .elementor-shortcode > .dm-rel),
.elementor-widget:has(> .elementor-shortcode > .dm-rel) { flex: 1 1 100% !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; }
.dm-rel button,
.dm-rel button:hover,
.dm-rel button:focus,
.dm-rel button:active {
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: none !important;
	box-shadow: none !important;
	color: #000 !important;
	font: inherit !important;
	min-height: 0 !important;
	min-width: 0 !important;
	cursor: pointer;
	outline: none;
}
.dm-rel button:focus-visible { outline: 1px solid #000 !important; outline-offset: 3px; }
.dm-rel p { margin: 0; padding: 0; }
.dm-rel svg { display: block; flex: none; }

/* Head: label left, arrows right (14 under the label top); cards 56 under the label */
.dm-rel__head { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 42px; }
.dm-rel .dm-rel__label { display: flex; align-items: center; gap: 3px; font-size: 13px; line-height: 1; text-transform: uppercase; }
.dm-rel__label svg { width: 9px; height: 9px; }
.dm-rel__label span { line-height: 1; text-box: trim-both cap alphabetic; }
.dm-rel__arrows { display: flex; gap: 21px; margin-top: 14px; }
.dm-rel__arrows button { display: block; width: 24px; height: 23px; }
.dm-rel__arrows svg { width: 24px; height: 23px; }
.dm-rel__arrows .dm-rel__prev svg { transform: rotate(180deg); }

.dm-rel__viewport {
	position: relative;
	width: calc(100vw - var(--dm-sbw, 0px));
	margin-left: calc(50% - (100vw - var(--dm-sbw, 0px)) / 2);
	overflow: hidden;
	touch-action: pan-y;
	cursor: grab;
}
.dm-rel__viewport.is-dragging { cursor: grabbing; }
.dm-rel__viewport.is-dragging .dm-card { pointer-events: none; }
.dm-rel__track { display: flex; gap: 44px; width: max-content; will-change: transform; }
.dm-rel__track .dm-card { flex: none; }
html:not(.dm-js) .dm-rel__viewport { overflow-x: auto; }

.dm-rel__nav { display: none; }

@media (max-width: 767px) {
	.dm-rel__head { margin-bottom: 34px; }
	.dm-rel__arrows { display: none; }
	.dm-rel__viewport { cursor: auto; }
	.dm-rel__track { gap: 7px; }
	.dm-rel__track .dm-card { width: calc(100vw - var(--dm-sbw, 0px) - var(--dm-side, 15px) * 2); }
	.dm-rel__nav { display: flex; align-items: center; justify-content: space-between; margin-top: 17px; }
	.dm-rel .dm-rel__nav button,
	.dm-rel .dm-rel__nav button:hover {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 38px;
		height: 38px;
		border: 1px solid #ddd !important;
		border-radius: 50%;
		background: #fff !important;
	}
	.dm-rel__nav svg { width: 16px; height: 16px; }
	.dm-rel__nav .dm-rel__prev svg { transform: rotate(180deg); }
	.dm-rel__count { font-size: 16px; letter-spacing: .02em; line-height: 1; text-box: trim-both cap alphabetic; }
}