/* ==========================================================================
   Rooms — room tabs on the left, the chosen room's photos and card on the right.
   ========================================================================== */

.mro-rooms {
	padding-block: var(--wp--preset--spacing--110);
}

.mro-rooms__head {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
	gap: var(--wp--preset--spacing--60) var(--wp--preset--spacing--80);
	align-items: end;
	margin-bottom: var(--wp--preset--spacing--80);
}

.mro-rooms__intro p + p {
	margin-top: var(--wp--preset--spacing--40);
}

.mro-rooms__direct {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--40);
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--mint-soft);
	color: var(--wp--preset--color--accent-stronger);
	font-weight: var(--wp--custom--weight--bold);
}

.mro-rooms__direct .mro-icon {
	color: var(--wp--preset--color--accent-strong);
}

.mro-rooms__layout {
	display: grid;
	grid-template-columns: 17rem minmax(0, 1fr);
	gap: var(--wp--preset--spacing--70);
	align-items: start;
}

.mro-rooms__tabs {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--30);
	position: sticky;
	top: calc(var(--wp--custom--header--height) + var(--wp--preset--spacing--50) + var(--wp-admin--admin-bar--height, 0px));
}

.mro-room-tab {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--10);
	width: 100%;
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50);
	border: var(--wp--custom--stroke--hand) solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--note);
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	font: inherit;
	text-align: left;
	cursor: pointer;
	transition:
		background-color var(--wp--custom--duration--base) var(--wp--custom--ease--gentle),
		border-color var(--wp--custom--duration--base) var(--wp--custom--ease--gentle),
		transform var(--wp--custom--duration--base) var(--wp--custom--ease--gentle);
}

.mro-room-tab:hover {
	background: var(--wp--preset--color--mint-faint);
	border-color: var(--wp--preset--color--mint);
}

.mro-room-tab[aria-selected="true"] {
	background: var(--wp--preset--color--accent-strong);
	border-color: var(--wp--preset--color--accent-strong);
	color: var(--wp--preset--color--base);
	transform: translateX(var(--wp--preset--spacing--20));
}

.mro-room-tab__name {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--lg);
	line-height: var(--wp--custom--leading--snug);
	text-transform: lowercase;
	letter-spacing: var(--wp--custom--tracking--display);
}

.mro-room-tab__meta {
	font-size: var(--wp--preset--font-size--sm);
}

.mro-room-panel {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	align-items: center;
}

.mro-room-panel[hidden] {
	display: none;
}

.mro-room-panel:focus-visible {
	outline-offset: 8px;
}

.mro-js .mro-room-panel:not([hidden]) {
	animation: mro-settle var(--wp--custom--duration--base) var(--wp--custom--ease--gentle) both;
}

.mro-room-panel__photo {
	grid-column: 1 / 9;
	grid-row: 1;
	aspect-ratio: 5 / 4;
	border-radius: var(--wp--custom--radius--arch);
	overflow: hidden;
	box-shadow: var(--wp--preset--shadow--soft);
}

.mro-room-panel__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.mro-room-panel__detail {
	grid-column: 1 / 4;
	grid-row: 2;
	z-index: var(--wp--custom--layer--raised);
	width: 100%;
	aspect-ratio: 1;
	margin: -6rem 0 0 calc(var(--wp--preset--spacing--50) * -1);
	border: 6px solid var(--wp--preset--color--base);
	border-radius: var(--wp--custom--radius--blob--a);
	overflow: hidden;
	box-shadow: var(--wp--preset--shadow--soft);
}

.mro-room-panel__detail img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.mro-room-panel__card {
	grid-column: 7 / 13;
	grid-row: 1 / 3;
	align-self: center;
	z-index: var(--wp--custom--layer--raised);
	padding: var(--wp--preset--spacing--60);
	border-radius: var(--wp--custom--radius--note);
	background: var(--wp--preset--color--base);
	box-shadow: var(--wp--preset--shadow--lift);
}

.mro-room-panel__card > * + * {
	margin-top: var(--wp--preset--spacing--40);
}

.mro-room-panel__title {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--xl);
	font-weight: 400;
	line-height: var(--wp--custom--leading--snug);
	text-transform: lowercase;
	letter-spacing: var(--wp--custom--tracking--display);
}

.mro-features {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--20) var(--wp--preset--spacing--40);
	font-size: var(--wp--preset--font-size--sm);
}

.mro-features li {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
	line-height: var(--wp--custom--leading--snug);
}

.mro-features .mro-icon {
	flex: none;
	color: var(--wp--preset--color--accent-strong);
}

.mro-price {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--wp--preset--spacing--10) var(--wp--preset--spacing--20);
	padding-top: var(--wp--preset--spacing--40);
	border-top: var(--wp--custom--stroke--hand) dashed var(--wp--preset--color--line);
}

.mro-price__from {
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--muted);
}

.mro-price__amount {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--xl);
	line-height: 1.1;
	color: var(--wp--preset--color--accent-stronger);
}

.mro-price__amount.mro-to-confirm {
	font-size: var(--wp--preset--font-size--md);
}

.mro-price__unit {
	width: 100%;
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--muted);
}

@media (max-width: 1024px) {
	.mro-rooms__layout {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--wp--preset--spacing--60);
	}

	.mro-rooms__tabs {
		position: static;
		flex-direction: row;
		overflow-x: auto;
		padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--10) var(--wp--preset--spacing--30);
		scroll-snap-type: x proximity;
	}

	.mro-room-tab {
		flex: 0 0 auto;
		width: auto;
		scroll-snap-align: start;
	}

	.mro-room-tab[aria-selected="true"] {
		transform: none;
	}
}

@media (max-width: 860px) {
	.mro-rooms__head {
		grid-template-columns: minmax(0, 1fr);
		margin-bottom: var(--wp--preset--spacing--60);
	}

	.mro-room-panel {
		grid-template-columns: minmax(0, 1fr);
	}

	.mro-room-panel__photo {
		grid-column: 1;
		grid-row: 1;
	}

	.mro-room-panel__detail {
		display: none;
	}

	.mro-room-panel__card {
		grid-column: 1;
		grid-row: 2;
		margin: calc(var(--wp--preset--spacing--80) * -1) var(--wp--preset--spacing--30) 0;
		padding: var(--wp--preset--spacing--50);
	}
}

@media (max-width: 640px) {
	.mro-features {
		grid-template-columns: minmax(0, 1fr);
	}
}