/* ============================================================
   Domus — home: selected projects  [domus_home_work]
   Figma: Homepage 122:280 (desktop, y 3750) / 737:1538 (mobile, y 4629). Black, full width.

   Head: "Selected Projects" 32/28 (mobile 30) · intro 13/17 caps at 812/1376 (564 wide; mobile under the title) ·
   a 1px rgba(255,255,255,.3) rule 50 below, running out to the right edge of the screen.
   Desktop: the counter "01 / 06" 48 (the total at 40%) at the left, "VIEW ALL OUR WORK" under it; the projects from
   348/1376 to the screen's right edge: the current one 680×470 at 580, the ones beside it narrow windows (205) onto
   their own 680 picture — the one before shows its right part; the next ones are full size, cut off by the screen's
   right edge (a bigger screen shows more of them) — 27 apart. Choosing
   another one widens its window to 680 and the row moves (clip-path + transform, CSS transitions).
   Captions 13 caps, 6 under the picture: year · name (centred) · category.
   Mobile (375): the counter 21 with arrows on the right; the projects 276×434, 21 apart, the current one centred;
   caption: year + category, the name under; "VIEW ALL OUR WORK" under the row.
   All sizes are design px (--u = 1px of the 1376 content / of the 375 frame), so it scales like the design.
   ============================================================ */

.dm-hw {
	--u: calc(min(100vw - var(--dm-sbw, 0px) - var(--dm-side, 32px) * 2, var(--dm-max, 1440px)) / 1376);
	position: relative;
	width: 100%;
	padding: calc(var(--u) * 55) 0 calc(var(--u) * 140); /* inside the black (the design: title 55 from the top) */
	color: #fff;
	font-family: var(--dm-font, 'CF ModGrotesk'), 'Helvetica Neue', Helvetica, Arial, sans-serif;
	font-weight: 400;
	-webkit-font-smoothing: antialiased;
}
.dm-hw *, .dm-hw *::before, .dm-hw *::after { box-sizing: border-box; }
.elementor-widget:has(> .elementor-widget-container > .elementor-shortcode > .dm-hw),
.elementor-widget:has(> .elementor-shortcode > .dm-hw) { flex: 1 1 100% !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; }
.dm-hw p, .dm-hw h2 { margin: 0; padding: 0; color: inherit; font-family: inherit; font-weight: 400; }
.dm-hw a, .dm-hw a:hover, .dm-hw a:visited, .dm-hw a:focus { color: #fff !important; text-decoration: none !important; }
.dm-hw button, .dm-hw button:hover, .dm-hw button:focus, .dm-hw button:active { margin: 0 !important; padding: 0 !important; border: 0 !important; background: none !important; box-shadow: none !important; color: #fff !important; min-height: 0 !important; cursor: pointer; }
.dm-hw button:focus-visible, .dm-hw a:focus-visible { outline: 1px solid #fff !important; outline-offset: 3px; }
/* black from edge to edge behind the content */
.dm-hw { isolation: isolate; }
.dm-hw::before { content: ''; position: absolute; top: 0; bottom: 0; left: calc(50% - (100vw - var(--dm-sbw, 0px)) / 2); width: calc(100vw - var(--dm-sbw, 0px)); background: #000; z-index: -1; }

/* ---------- head ---------- */
.dm-hw__head { position: relative; display: flex; align-items: flex-start; padding-bottom: calc(var(--u) * 28); }
.dm-hw .dm-hw__title { flex: none; font-size: 32px; line-height: 28px; letter-spacing: -.02em; }
.dm-hw .dm-hw__intro { width: 564px; max-width: 45%; margin-left: auto; /* fixed like the 13px text, so it breaks where the design does */ font-size: 13px; line-height: 17px; letter-spacing: -.02em; text-transform: uppercase; }
.dm-hw__head::after { content: ''; position: absolute; left: 0; bottom: 0; right: calc(50% - (100vw - var(--dm-sbw, 0px)) / 2); height: 1px; background: rgba(255, 255, 255, .3); }

/* ---------- body ---------- */
.dm-hw__body { position: relative; margin-top: calc(var(--u) * 138); height: calc(var(--u) * 470 + 30px); }
.dm-hw__count { position: absolute; left: 0; top: calc(var(--u) * -11); display: flex; align-items: center; gap: 10px; font-size: 48px; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.dm-hw__total { opacity: .4; }
.dm-hw__slash { display: block; width: 23px; height: 37px; opacity: .4; }
.dm-hw__arrows { display: none; }
.dm-hw .dm-hw__all { position: absolute; left: 0; top: calc(var(--u) * 476); display: flex; align-items: center; gap: 9px; font-size: 13px; line-height: 16px; text-transform: uppercase; }
.dm-hw__all svg { display: block; width: 18px; height: 13px; transition: transform .35s ease; }
@media (hover: hover) { .dm-hw .dm-hw__all:hover svg { transform: translateX(3px); } }

/* the row of projects: from 348 to the right edge of the screen */
.dm-hw__view { position: absolute; top: 0; bottom: 0; left: calc(var(--u) * 348); right: calc(50% - (100vw - var(--dm-sbw, 0px)) / 2); overflow: hidden; touch-action: pan-y; cursor: grab; }
.dm-hw__view.is-dragging { cursor: grabbing; }
.dm-hw__item {
	position: absolute;
	left: 0;
	top: 0;
	display: block;
	width: calc(var(--u) * 680);
	will-change: transform, clip-path;
	transition: transform .95s cubic-bezier(.65, 0, .25, 1), clip-path .95s cubic-bezier(.65, 0, .25, 1);
}
.dm-hw__item.is-jump { transition: none; }
.dm-hw__media { position: relative; display: block; height: calc(var(--u) * 470); overflow: hidden; background: #1a1a1a; }
.dm-hw__media img { position: absolute; inset: 0; display: block; width: 100% !important; max-width: none !important; height: 100% !important; object-fit: cover; transition: transform 1.2s cubic-bezier(.2, .7, .2, 1); }
@media (hover: hover) { .dm-hw__item.is-current:hover .dm-hw__media img { transform: scale(1.03); } }
.dm-hw__cap { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; margin-top: 6px; font-size: 13px; line-height: 16px; text-transform: uppercase; white-space: nowrap; }
.dm-hw__cap > :nth-child(2) { text-align: center; }
.dm-hw__cap > :nth-child(3) { text-align: right; }
.dm-hw__item:not(.is-current) { cursor: pointer; }

/* ---------- mobile ---------- */
@media (max-width: 767px) {
	.dm-hw { --u: calc((100vw - var(--dm-sbw, 0px)) / 375); }
	.dm-hw { padding: 65px 0 70px; }
	.dm-hw__head { display: block; padding-bottom: 14px; }
	.dm-hw .dm-hw__title { font-size: 30px; }
	.dm-hw .dm-hw__intro { width: auto; max-width: 317px; margin: 24px 0 0; }
	.dm-hw__body { margin-top: 55px; height: auto; }
	.dm-hw__count { position: relative; top: 0; gap: 5px; font-size: 21px; }
	.dm-hw__slash { width: 8px; height: 15px; }
	.dm-hw__arrows { position: absolute; right: 0; top: 2px; display: flex; gap: 14px; }
	.dm-hw__arrows button { display: block !important; width: 18px; height: 18px; }
	.dm-hw__arrows svg { display: block; width: 17px; height: 17px; }
	.dm-hw__arrows .dm-hw__prev svg { transform: scaleX(-1); }
	.dm-hw__view { position: relative; left: auto; right: auto; width: calc(100vw - var(--dm-sbw, 0px)); margin: 17px 0 0 calc(var(--dm-side, 15px) * -1); height: calc(var(--u) * 434 + 50px); }
	.dm-hw__item { width: calc(var(--u) * 276); }
	.dm-hw__media { height: calc(var(--u) * 434); }
	.dm-hw__cap { grid-template-columns: auto 1fr; gap: 1px 12px; margin-top: 11px; white-space: normal; }
	.dm-hw__cap > :nth-child(1) { grid-row: 1; }
	.dm-hw__cap > :nth-child(3) { grid-row: 1; grid-column: 2; text-align: left; }
	.dm-hw__cap > :nth-child(2) { grid-row: 2; grid-column: 2; text-align: left; }
	.dm-hw .dm-hw__all { position: relative; top: auto; margin-top: 30px; }
}
@media (prefers-reduced-motion: reduce) { .dm-hw__item { transition: none; } }