/* ==========================================================================
   Atelier — Kamerpagina (single room) and 1920
   ========================================================================== */

/* --------------------------------------------------------------------------
   Room — intro
   -------------------------------------------------------------------------- */

.room-intro {
	display: grid;
	grid-template-columns: calc(504 * var(--u)) 1fr;
	grid-template-areas:
		"label title"
		"side  text";
	align-items: start;
	margin-top: calc(195 * var(--u));
	padding: 0 var(--m);
}

.room-intro__label { grid-area: label; }

.room-intro__title {
	grid-area: title;
	margin-top: calc(-13 * var(--u));
}

.room-intro__side {
	grid-area: side;
	margin-top: calc(40 * var(--u));
}

.room-intro__cta {
	margin-top: calc(12 * var(--u));
}

.room-intro__text {
	grid-area: text;
	width: calc(600 * var(--u));
	max-width: 100%;
	margin-top: calc(40 * var(--u));
}

/* --------------------------------------------------------------------------
   Room — gallery strip
   -------------------------------------------------------------------------- */

.gallery {
	margin-top: calc(192 * var(--u));
}

.gallery__track {
	display: flex;
	gap: var(--gap);
	padding: 0 var(--m);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-padding-left: var(--m);
	scrollbar-width: none;
	cursor: grab;
}

.gallery__track::-webkit-scrollbar {
	display: none;
}

.gallery__track:focus-visible {
	outline-offset: -2px;
}

.gallery__item {
	flex: 0 0 calc(480 * var(--u));
	aspect-ratio: 480 / 481;
	scroll-snap-align: start;
}

.gallery__foot {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	margin: calc(50 * var(--u)) var(--m) 0;
}

.gallery__count {
	font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   Room — specs
   -------------------------------------------------------------------------- */

.specs {
	margin-top: calc(164 * var(--u));
	padding: 0 var(--m);
}

.specs .display {
	text-align: right;
}

.specs__list {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: var(--gap);
	margin-top: calc(85 * var(--u));
}

.spec {
	position: relative;
	height: calc(151 * var(--u));
	text-transform: uppercase;
}

.spec__icon {
	width: calc(40 * var(--u));
	height: calc(40 * var(--u));
	min-width: 24px;
	min-height: 24px;
}

.spec__label {
	position: absolute;
	left: 0;
	top: calc(64 * var(--u));
	white-space: nowrap;
}

.spec__value {
	position: absolute;
	left: 0;
	right: 0;
	top: calc(96 * var(--u));
	opacity: .7;
	text-transform: none;
}

.spec::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 1px;
	background: var(--line);
	transform-origin: left center;
}

/* --------------------------------------------------------------------------
   Room — story
   -------------------------------------------------------------------------- */

.story {
	position: relative;
	display: grid;
	grid-template-columns: calc(504 * var(--u)) 1fr;
	grid-template-areas:
		"label title"
		"media body";
	align-items: start;
	margin-top: calc(301 * var(--u));
	padding: 0 var(--m);
}

.story__label { grid-area: label; }

.story__title {
	grid-area: title;
	margin-top: calc(-13 * var(--u));
}

.story__media {
	grid-area: media;
	width: calc(735 * var(--u));
	margin-top: calc(100 * var(--u));
}

.story__photo {
	aspect-ratio: 735 / 575;
}

.story__body {
	grid-area: body;
	margin-top: calc(231 * var(--u));
	padding-left: calc(366 * var(--u));
}

.story__quote {
	margin: 0;
	max-width: calc(600 * var(--u));
	font-size: max(16px, calc(24 * var(--u)));
	line-height: calc(34 / 24);
}

.story__body p {
	max-width: calc(560 * var(--u));
	margin-top: calc(16 * var(--u));
}

.story__body p + p {
	margin-top: calc(56 * var(--u));
}

.ghost--story {
	top: calc(-140 * var(--u));
	left: calc(942 * var(--u));
}

/* --------------------------------------------------------------------------
   Room — availability + booking
   -------------------------------------------------------------------------- */

.booking {
	margin-top: calc(182 * var(--u));
	padding: 0 var(--m);
}

.booking__title {
	margin-left: calc(-3 * var(--u));
}

.booking__grid {
	display: grid;
	grid-template-columns: calc(735 * var(--u)) calc(633 * var(--u));
	justify-content: space-between;
	align-items: start;
	margin-top: calc(87 * var(--u));
}

.calendar__head {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	height: calc(48 * var(--u));
}

.calendar__month,
.calendar__arrow,
.booking-form__price {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: calc(40 * var(--u));
	line-height: calc(48 / 40);
	text-transform: uppercase;
}

.calendar__month {
	color: var(--red);
}

.calendar__nav {
	display: flex;
	gap: calc(26 * var(--u));
	margin-right: calc(5 * var(--u));
}

.calendar__arrow {
	padding: 0;
	border: 0;
	background: none;
	color: var(--ink);
	cursor: pointer;
	transition: translate .4s var(--ease), opacity .3s ease;
}

.calendar__arrow:hover {
	translate: 0 calc(-2 * var(--u));
}

.calendar__arrow[disabled] {
	opacity: .25;
	cursor: default;
	translate: none;
}

.calendar__weekdays,
.calendar__days {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
}

.calendar__weekdays {
	margin-top: calc(32 * var(--u));
	padding-bottom: calc(10 * var(--u));
	border-bottom: 1px solid var(--line);
	font-size: max(11px, calc(14 * var(--u)));
	line-height: calc(20 / 14);
	text-align: center;
	text-transform: uppercase;
	opacity: .6;
}

.calendar__days {
	grid-auto-rows: calc(64 * var(--u));
	padding: calc(11 * var(--u)) 0 calc(8 * var(--u));
	border-bottom: 1px solid var(--line);
}

.calendar__day {
	position: relative;
	display: grid;
	place-items: center;
	height: 100%;
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	line-height: calc(28 / 18);
	color: var(--ink);
	cursor: pointer;
	font-variant-numeric: tabular-nums;
}

.calendar__day::before {
	content: "";
	position: absolute;
	inset: calc(8 * var(--u)) calc(4 * var(--u));
	border: 1px solid transparent;
	transition: border-color .3s ease;
}

.calendar__day:hover::before,
.calendar__day:focus-visible::before {
	border-color: var(--line);
}

.calendar__day.is-selected::before,
.calendar__day.is-selected:hover::before {
	border-color: var(--red);
}

.calendar__day.is-booked,
.calendar__day.is-past {
	opacity: .3;
	cursor: default;
}

.calendar__day.is-booked {
	text-decoration: line-through;
}

.calendar__day.is-booked::before,
.calendar__day.is-past::before,
.calendar__day.is-empty::before {
	display: none;
}

.calendar__day.is-empty {
	cursor: default;
}

.calendar__legend {
	margin-top: calc(20 * var(--u));
	font-size: max(11px, calc(14 * var(--u)));
	line-height: calc(20 / 14);
	opacity: .6;
}

.booking-form {
	padding-top: calc(45 * var(--u));
}

.field {
	display: block;
	margin-bottom: calc(36 * var(--u));
}

.field__label {
	display: block;
	font-size: max(11px, calc(14 * var(--u)));
	line-height: calc(20 / 14);
	text-transform: uppercase;
}

.field__input {
	display: block;
	width: 100%;
	margin-top: calc(8 * var(--u));
	padding: 0 0 calc(8 * var(--u));
	border: 0;
	border-bottom: 1px solid var(--ink);
	border-radius: 0;
	background: none;
	font: inherit;
	line-height: calc(28 / 18);
	color: var(--ink);
	transition: border-color .3s ease;
}

.field__input::placeholder {
	color: var(--ink);
	opacity: .45;
}

.field__input:focus {
	outline: none;
	border-bottom-color: var(--red);
}

select.field__input {
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23202020' stroke-width='1.2'/%3E%3C/svg%3E") right calc(6 * var(--u)) no-repeat;
}

.booking-form__summary {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: calc(-10 * var(--u));
	padding-bottom: calc(6 * var(--u));
	border-bottom: 1px solid var(--line);
}

.booking-form__price {
	color: var(--red);
	white-space: nowrap;
}

.booking-form__note {
	max-width: calc(560 * var(--u));
	margin-top: calc(20 * var(--u));
	opacity: .7;
}

.booking-form__actions {
	display: flex;
	align-items: center;
	gap: calc(32 * var(--u));
	margin-top: calc(38 * var(--u));
}

.button {
	display: inline-block;
	padding: calc(10 * var(--u)) calc(24 * var(--u));
	border: 1px solid var(--ink);
	background: none;
	font: inherit;
	line-height: calc(28 / 18);
	color: var(--ink);
	cursor: pointer;
	transition: background-color .4s ease, color .4s ease, border-color .4s ease;
}

.button:hover,
.button:focus-visible {
	background: var(--red);
	border-color: var(--red);
	color: var(--beige);
}

/* --------------------------------------------------------------------------
   Room — other rooms
   -------------------------------------------------------------------------- */

.others {
	position: relative;
	margin-top: calc(216 * var(--u));
	padding: 0 var(--m);
}

.others__head {
	display: grid;
	grid-template-columns: calc(504 * var(--u)) 1fr;
	align-items: start;
}

.others__title {
	margin-top: calc(-13 * var(--u));
}

.others__cta {
	position: absolute;
	right: var(--m);
	top: calc(235 * var(--u));
}

.others .duo {
	margin-top: calc(86 * var(--u));
}

main.page-room ~ .site-footer {
	margin-top: calc(199 * var(--u));
}

/* --------------------------------------------------------------------------
   1920
   -------------------------------------------------------------------------- */

.keyhole--page .keyhole__link {
	right: calc(110 * var(--u));
}

.intro-split {
	display: grid;
	grid-template-columns: calc(504 * var(--u)) 1fr;
	align-items: start;
	margin-top: calc(201 * var(--u));
	padding: 0 var(--m);
}

.intro-split__body .display {
	margin-top: calc(-13 * var(--u));
}

.intro-split__text {
	width: calc(600 * var(--u));
	max-width: 100%;
	margin-top: calc(40 * var(--u));
}

.intro-split__cta {
	margin-top: calc(12 * var(--u));
}

.why-sleep--1920 {
	margin-top: calc(213 * var(--u));
}

.why-row--flow {
	justify-content: flex-start;
	gap: calc(65 * var(--u));
}

.why-row--flow .why-row__title {
	line-height: calc(60 / 50);
}

.why-row--flow .why-row__text {
	flex: 1 1 auto;
	max-width: calc(989 * var(--u));
}

.why--static {
	margin-top: calc(200 * var(--u));
}

.why--static .why__chips {
	justify-content: flex-start;
}

.why--static .chip {
	cursor: default;
}

.closing {
	position: relative;
	margin-top: calc(200 * var(--u));
	padding: 0 var(--m) 0 calc(554 * var(--u));
}

.closing__cta {
	margin-top: calc(50 * var(--u));
}

.ghost--closing {
	top: calc(-94 * var(--u));
	right: calc(950 * var(--u));
}

main.page-1920 ~ .site-footer {
	margin-top: calc(200 * var(--u));
}

/* --------------------------------------------------------------------------
   Mobile
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
	.room-intro,
	.story,
	.others__head,
	.intro-split {
		display: block;
	}

	.room-intro {
		margin-top: calc(90 * var(--u));
	}

	.room-intro__title,
	.story__title,
	.others__title,
	.intro-split__body .display {
		margin-top: calc(14 * var(--u));
	}

	.room-intro__text,
	.intro-split__text {
		width: auto;
		margin-top: calc(20 * var(--u));
	}

	.room-intro__side {
		margin-top: calc(24 * var(--u));
	}

	.room-intro__cta,
	.intro-split__cta {
		margin-top: calc(12 * var(--u));
	}

	.gallery {
		margin-top: calc(80 * var(--u));
	}

	.gallery__item {
		flex-basis: 78%;
	}

	.gallery__foot {
		margin-top: calc(22 * var(--u));
	}

	.specs {
		margin-top: calc(90 * var(--u));
	}

	.specs .display {
		text-align: left;
	}

	.specs__list {
		grid-template-columns: 1fr 1fr;
		gap: calc(24 * var(--u)) calc(16 * var(--u));
		margin-top: calc(30 * var(--u));
	}

	.spec {
		height: calc(130 * var(--u));
	}

	.spec__label { top: calc(54 * var(--u)); }
	.spec__value { top: calc(80 * var(--u)); font-size: calc(13 * var(--u)); }

	.story {
		margin-top: calc(100 * var(--u));
	}

	.story__media {
		width: auto;
		margin-top: calc(28 * var(--u));
	}

	.story__body {
		margin-top: calc(28 * var(--u));
		padding-left: 0;
	}

	.story__quote,
	.story__body p {
		max-width: none;
	}

	.story__body p + p {
		margin-top: calc(20 * var(--u));
	}

	.ghost--story {
		top: calc(-40 * var(--u));
		left: 30%;
	}

	.booking {
		margin-top: calc(100 * var(--u));
	}

	.booking__grid {
		grid-template-columns: 1fr;
		gap: calc(40 * var(--u));
		margin-top: calc(28 * var(--u));
	}

	.calendar__month,
	.calendar__arrow,
	.booking-form__price {
		font-size: calc(30 * var(--u));
		line-height: 1.2;
	}

	.calendar__head {
		height: auto;
	}

	.calendar__weekdays {
		margin-top: calc(20 * var(--u));
	}

	.calendar__days {
		grid-auto-rows: calc(48 * var(--u));
	}

	.calendar__day::before {
		inset: calc(5 * var(--u)) calc(3 * var(--u));
	}

	.booking-form {
		padding-top: 0;
	}

	.field {
		margin-bottom: calc(26 * var(--u));
	}

	.booking-form__actions {
		flex-wrap: wrap;
		gap: calc(18 * var(--u));
		margin-top: calc(26 * var(--u));
	}

	.others {
		margin-top: calc(100 * var(--u));
	}

	.others__cta {
		position: static;
		display: table;
		margin: calc(22 * var(--u)) 0 0 auto;
	}

	.others .duo {
		margin-top: calc(28 * var(--u));
	}

	/* 1920 */
	.keyhole--page {
		margin-top: calc(80 * var(--u));
	}

	.keyhole--page .keyhole__link {
		right: calc(20 * var(--u));
	}

	.intro-split,
	.why-sleep--1920,
	.why--static,
	.closing {
		margin-top: calc(100 * var(--u));
	}

	.why-row--flow {
		gap: 0;
	}

	.why-row--flow .why-row__text {
		max-width: none;
	}

	.closing {
		padding-left: var(--m);
	}

	.closing__cta {
		margin-top: calc(22 * var(--u));
	}

	.ghost--closing {
		top: calc(-50 * var(--u));
		right: 30%;
	}

	main.page-room ~ .site-footer,
	main.page-1920 ~ .site-footer {
		margin-top: calc(100 * var(--u));
	}
}