/* Rooms (Tiny House Dubai): mosaic on the warm background. Header and the large top photo with its plate, then the
   bathroom photo and the dark tile below; light plates overlap the photos. Which room goes where is content: the
   slots are "top", "tile" and "bathroom". Mobile-first. */

.iw-rooms {
	--iw-rooms-overlap: 64px; /* how far a plate reaches past its column (desktop) */
	--iw-rooms-hang: var(--iw-space-12); /* how far a plate hangs under its photo */
	--iw-rooms-drift: 56px; /* photo parallax travel, see script.js */
	background: var(--iw-color-surface);
	padding-bottom: calc(var(--iw-space-16) + var(--iw-rooms-hang));
}

/* Right before the closing section the mosaic runs straight into its photo, without a light band, and the
   bathroom plate overlaps the seam. The widget is lifted so the plate paints over the next section. */
.elementor-widget-iw-rooms:has(+ .elementor-widget-iw-page-cta) {
	position: relative;
	z-index: 1;
}

.elementor-widget-iw-rooms:has(+ .elementor-widget-iw-page-cta) .iw-rooms {
	padding-bottom: 0;
}

@media (max-width: 1023px) {
	.elementor-widget-iw-rooms:has(+ .elementor-widget-iw-page-cta) .iw-rooms__room--bathroom .iw-rooms__plate {
		margin-bottom: calc(var(--iw-space-6) * -1);
	}
}

/* Header */
.iw-rooms__header {
	display: grid;
	gap: var(--iw-space-4);
	padding: var(--iw-space-16) var(--iw-gutter) var(--iw-space-12);
}

.iw-rooms__kicker {
	display: flex;
	align-items: center;
	gap: var(--iw-space-4);
	margin: 0;
	color: var(--iw-color-ink-muted);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
}

.iw-rooms__kicker::before {
	content: "";
	flex: none;
	width: 40px;
	height: 2px;
	background: var(--iw-color-primary);
}

.iw-rooms__title {
	margin: 0;
	color: var(--iw-color-brown);
	font-size: var(--iw-text-h2);
	line-height: var(--iw-leading-tight);
}

.iw-rooms__title-accent {
	display: block;
	color: var(--iw-color-taupe);
}

.iw-rooms__intro {
	max-width: 36rem;
	margin: 0;
	color: var(--iw-color-ink-soft);
	font-size: var(--iw-text-lg);
}

/* Rooms */
.iw-rooms__room {
	position: relative;
}

.iw-rooms__media {
	position: relative;
	overflow: hidden;
	aspect-ratio: 4 / 3;
	background: var(--iw-color-taupe);
}

.iw-rooms__media img {
	display: block;
	width: 100%;
	height: calc(100% + var(--iw-rooms-drift));
	object-fit: cover;
	transform: translate3d(0, var(--iw-shift, calc(var(--iw-rooms-drift) / -2)), 0);
	will-change: transform;
}

.iw-rooms__room--top .iw-rooms__media img {
	object-position: 30% center; /* the left part of the photo (the kitchen) stays in frame */
}

.iw-rooms__room--bathroom .iw-rooms__media img {
	object-position: 30% center; /* the shower stays in frame, the washing machine goes behind the plate */
}

.iw-rooms__plate {
	position: relative;
	z-index: 1;
	display: grid;
	justify-items: start;
	gap: var(--iw-space-2);
	margin: calc(var(--iw-space-12) * -1) var(--iw-gutter) 0;
	padding: var(--iw-space-6);
	background: var(--iw-color-bg);
	box-shadow: var(--iw-shadow-md);
}

.iw-rooms__label {
	margin: 0;
	color: var(--iw-color-ink-muted);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

.iw-rooms__name {
	margin: 0;
	color: var(--iw-color-brown);
	font-size: var(--iw-text-h4);
	line-height: var(--iw-leading-tight);
}

.iw-rooms__text {
	margin: 0;
	color: var(--iw-color-ink-soft);
}

/* Dark tile: text on top, the photo under it runs to the edges of the tile */
.iw-rooms__tile {
	position: relative;
	display: grid;
	justify-items: start;
	gap: var(--iw-space-3);
	margin-block: var(--iw-space-12);
	padding: var(--iw-space-12) var(--iw-gutter);
	background: var(--iw-color-brown);
	color: var(--iw-color-on-ink);
}

.iw-rooms__tile .iw-rooms__label {
	color: var(--iw-color-taupe-light);
}

.iw-rooms__tile .iw-rooms__name {
	color: var(--iw-color-on-ink);
	font-size: var(--iw-text-h3);
}

.iw-rooms__tile .iw-rooms__text {
	max-width: 30rem;
	color: rgb(255 255 255 / 75%);
}

.iw-rooms__tile--photo {
	padding-bottom: 0;
}

.iw-rooms__tile .iw-rooms__media--tile {
	justify-self: stretch;
	margin: var(--iw-space-6) calc(var(--iw-gutter) * -1) 0;
	background: var(--iw-color-espresso);
}

/* List and link: light on the dark tile, dark on a white plate */
.iw-rooms__features {
	justify-self: stretch;
	margin: var(--iw-space-3) 0;
	padding: 0;
	list-style: none;
}

.iw-rooms__features li {
	padding: var(--iw-space-3) 0;
	border-top: 1px solid rgb(255 255 255 / 18%);
	font-weight: 600;
}

.iw-rooms__features li:last-child {
	border-bottom: 1px solid rgb(255 255 255 / 18%);
}

.iw-rooms__plate .iw-rooms__features {
	margin: var(--iw-space-2) 0;
}

.iw-rooms__plate .iw-rooms__features li {
	padding: var(--iw-space-2) 0;
	border-color: var(--iw-color-line);
	color: var(--iw-color-brown);
}

/* Scoped so Elementor's ".elementor a" rule does not remove the underline */
.iw-rooms .iw-rooms__link {
	padding: var(--iw-space-1) 0;
	color: var(--iw-color-on-ink);
	font-size: var(--iw-text-sm);
	font-weight: 600;
	text-decoration: underline;
	text-decoration-color: rgb(255 255 255 / 45%);
	text-decoration-thickness: 1px;
	text-underline-offset: 6px;
	transition: text-decoration-color 0.15s ease;
}

.iw-rooms .iw-rooms__link:hover {
	text-decoration-color: var(--iw-color-on-ink);
}

.iw-rooms .iw-rooms__plate .iw-rooms__link {
	color: var(--iw-color-brown);
	text-decoration-color: var(--iw-color-taupe);
}

.iw-rooms .iw-rooms__plate .iw-rooms__link:hover {
	text-decoration-color: var(--iw-color-primary);
}

/* Reveal (script.js adds is-armed to the section and is-in to the header, photos, plates and the tile as they
   come into view). A cover in the section colour shrinks off the photo; the image itself only drifts. */
@media (prefers-reduced-motion: no-preference) {
	.iw-rooms.is-armed .iw-rooms__header > *,
	.iw-rooms.is-armed .iw-rooms__tile > * {
		opacity: 0;
		transform: translateY(16px);
		transition: opacity 0.8s ease, transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1);
	}

	.iw-rooms.is-armed .iw-rooms__plate {
		opacity: 0;
		transform: translateY(24px);
		transition: opacity 0.7s ease 0.5s, transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) 0.5s;
	}

	.iw-rooms.is-armed .iw-rooms__media::after {
		content: "";
		position: absolute;
		inset: 0;
		background: var(--iw-color-surface);
		transform-origin: right center;
		transition: transform 1.1s cubic-bezier(0.7, 0, 0.2, 1);
	}

	.iw-rooms.is-armed .iw-rooms__room--bathroom .iw-rooms__media::after {
		transform-origin: left center;
	}

	.iw-rooms.is-armed .iw-rooms__media--tile::after {
		background: var(--iw-color-brown);
	}

	.iw-rooms.is-armed .iw-rooms__header.is-in > *,
	.iw-rooms.is-armed .iw-rooms__tile.is-in > *,
	.iw-rooms.is-armed .iw-rooms__plate.is-in {
		opacity: 1;
		transform: none;
	}

	.iw-rooms.is-armed .iw-rooms__media.is-in::after {
		transform: scaleX(0);
	}

	.iw-rooms__header.is-in > :nth-child(2) { transition-delay: 0.1s; }
	.iw-rooms__header.is-in > :nth-child(3) { transition-delay: 0.2s; }
	.iw-rooms__tile.is-in > :nth-child(2) { transition-delay: 0.1s; }
	.iw-rooms__tile.is-in > :nth-child(3) { transition-delay: 0.2s; }
	.iw-rooms__tile.is-in > :nth-child(4) { transition-delay: 0.3s; }
	.iw-rooms__tile.is-in > :nth-child(5) { transition-delay: 0.4s; }
}

@media (min-width: 768px) {
	.iw-rooms__plate {
		max-width: 30rem;
		margin-left: auto;
	}

	.iw-rooms__room--top .iw-rooms__plate {
		margin-right: auto;
		margin-left: var(--iw-gutter);
	}
}

/* 12-column mosaic without gaps, so photos and the tile can reach the screen edges. The room wrappers dissolve
   (display: contents): their photo and plate are placed on the mosaic grid directly. */
@media (min-width: 1024px) {
	.iw-rooms {
		--iw-rooms-edge: max(var(--iw-gutter), calc((100vw - var(--iw-container)) / 2 + var(--iw-gutter)));
		--iw-rooms-row-gap: var(--iw-space-24);
		padding-top: var(--iw-space-24);
		padding-bottom: calc(var(--iw-space-24) + var(--iw-rooms-hang));
	}

	.iw-rooms__mosaic {
		display: grid;
		grid-template-columns: repeat(12, minmax(0, 1fr));
		grid-template-rows: auto auto minmax(600px, auto);
	}

	.iw-rooms__room {
		display: contents;
	}

	.iw-rooms__header {
		grid-column: 1 / 6;
		grid-row: 1;
		align-content: start;
		padding: 0 var(--iw-space-16) var(--iw-space-12) var(--iw-rooms-edge);
	}

	.iw-rooms__media {
		aspect-ratio: auto;
		min-height: 600px;
	}

	.iw-rooms__media img {
		position: absolute;
		inset: 0;
	}

	.iw-rooms__room--top .iw-rooms__media {
		grid-column: 6 / -1;
		grid-row: 1 / 3;
	}

	.iw-rooms__room--top .iw-rooms__plate {
		grid-column: 1 / 6;
		grid-row: 2;
		align-self: end;
		max-width: none;
		margin: 0 calc(var(--iw-rooms-overlap) * -1) calc(var(--iw-rooms-hang) * -1) var(--iw-rooms-edge);
		padding: var(--iw-space-8);
	}

	.iw-rooms__room--bathroom .iw-rooms__media {
		grid-column: 1 / 8;
		grid-row: 3;
		margin-top: var(--iw-rooms-row-gap);
	}

	.iw-rooms__room--bathroom .iw-rooms__plate {
		grid-column: 5 / 8;
		grid-row: 3;
		align-self: end;
		max-width: none;
		margin: 0 calc(var(--iw-rooms-overlap) * -1) calc(var(--iw-rooms-hang) * -1) 0;
		padding: var(--iw-space-8);
	}

	/* The tile rises over the bottom of the top photo */
	.iw-rooms__tile {
		grid-column: 8 / -1;
		grid-row: 3;
		align-content: start;
		margin: calc(var(--iw-space-12) * -1) 0 0;
		padding: var(--iw-space-12) var(--iw-rooms-edge) var(--iw-space-12) calc(var(--iw-rooms-overlap) + var(--iw-space-8));
	}

	/* With a photo the tile is a column: text on top, the photo fills the rest down to the tile bottom; the
	   bathroom plate overlaps its lower left corner */
	.iw-rooms__tile--photo {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		padding-bottom: 0;
	}

	.iw-rooms__tile .iw-rooms__media--tile {
		flex: 1 1 auto;
		align-self: stretch;
		min-height: 380px;
		margin: var(--iw-space-3) calc(var(--iw-rooms-edge) * -1) 0 calc((var(--iw-rooms-overlap) + var(--iw-space-8)) * -1);
	}

	.iw-rooms__tile--photo .iw-rooms__features {
		align-self: stretch;
	}
}