/* ============================================================================
   A room page.

   The homepage room card, opened up. Name and rate share one ruled line the
   way they do on the card; the photographs stand in a row of arches like the
   front of a haveli; a paper tariff slip beside the details works out the
   bill. Loaded after home.css and borrows from it rather than restyling:
   .facts, the .ask__f fields, the .room card, the .rail controls and the
   lightbox are the homepage's own.
   ========================================================================== */

/* ── Title ────────────────────────────────────────────────────────────────── */
.rtop { padding-top: clamp(1.1rem, 2.4vw, 1.8rem); }

.crumbs ol {
	display: flex; flex-wrap: wrap; gap: .45rem;
	list-style: none; margin: 0 0 clamp(.9rem, 2vw, 1.4rem); padding: 0;
	font-size: var(--t-xs); color: var(--ink-70);
}
/* A slash drawn by the list, so it is never read out as a word. */
.crumbs li + li::before { content: '/'; margin-right: .45rem; color: var(--line-2); }
.crumbs a { color: var(--ink-70); text-decoration: none; }
.crumbs a:hover { color: var(--brand-ink); text-decoration: underline; }

/* The card's head at page scale: name left, rate hung right, one rule. */
.rhead {
	display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
	gap: .8rem 2.5rem;
	padding-bottom: clamp(.9rem, 1.8vw, 1.2rem);
	border-bottom: 1px solid var(--line-2);
}
.rhead h1 { margin: 0; }
.rhead__rate { text-align: right; padding-bottom: .3rem; }
.rhead__rs { margin: 0; font: 600 clamp(1.6rem, 2.6vw, 2.1rem)/1 var(--ui); color: var(--brand-ink); }
.rhead__per { margin: .5rem 0 0; font-size: var(--t-sm); color: var(--ink-70); }

/* ── The facade ───────────────────────────────────────────────────────────── */
/* Every opening wears the arch at a fixed cap, so the row reads as one front:
   a big gateway, then windows. Four photos put the portrait one in a tall
   narrow opening; five set a 2 x 2 of windows beside the gateway. */
.facade-band { padding-top: clamp(1.2rem, 2.4vw, 1.8rem); }
.facade {
	display: grid;
	grid-template-columns: 1.5fr 1fr 1fr;
	grid-template-rows: repeat(2, clamp(9.5rem, 16vw, 14.5rem));
	gap: .65rem;
	list-style: none; margin: 0; padding: 0;
}
.facade__i { min-width: 0; min-height: 0; }
.facade__i:first-child { grid-row: 1 / span 2; }

.facade--4 { grid-template-columns: 1.55fr .78fr 1fr; }
.facade--4 .facade__i:nth-child(2) { grid-row: 1 / span 2; }
.facade--3 { grid-template-columns: 1.6fr 1fr; }
.facade--2 { grid-template-columns: 1.4fr 1fr; grid-template-rows: clamp(18rem, 30vw, 28rem); }
.facade--2 .facade__i:first-child { grid-row: auto; }

.facade__i a { display: block; height: 100%; cursor: zoom-in; }
.facade__i a:focus-visible { outline-offset: 4px; }
.facade .arch__frame { height: 100%; --cap: 34px; }
.facade__i:first-child .arch__frame { --cap: 62px; }
.facade--4 .facade__i:nth-child(2) .arch__frame { --cap: 44px; }
.facade img {
	width: 100%; height: 100%;
	object-fit: cover; object-position: var(--pos, 50% 50%);
	transition: transform .55s var(--ease);
}
.facade__i a:hover img { transform: scale(1.035); }

/* One photograph: a single tall arch with the intro hung beside it, the way
   the homepage hero sets its photograph against its headline. Portrait at
   the photograph's own proportions, so nothing is cropped or scaled up.
   After the rules above, and one class heavier, so it wins over both the
   height and the first-child cap. */
.solo {
	display: grid; grid-template-columns: minmax(0, 26rem) minmax(0, 1fr);
	gap: clamp(2rem, 5vw, 4.5rem); align-items: center;
}
.facade.facade--1 { display: block; }
.facade.facade--1 .facade__i .arch__frame { aspect-ratio: 3 / 4; height: auto; --cap: 58px; }
.solo .rintro .facts { grid-template-columns: 1fr 1fr; row-gap: 1.4rem; }

/* ── Details and slip ─────────────────────────────────────────────────────── */
/* Two columns: the room on the left, the slip pinned on the right for as long
   as there is room to read beside it. Below 900 it is one column and the slip
   falls where the markup puts it -- after what is in the room, before the
   house rules. */
.rbody-band { padding-block: clamp(2.4rem, 4.5vw, 3.6rem) var(--band); }
.rbody {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 22.5rem;
	column-gap: clamp(2rem, 5.5vw, 5rem);
	align-items: start;
}
.rbody > * { grid-column: 1; min-width: 0; }
.rbody > .slip {
	grid-column: 2; grid-row: 1 / span 4;
	position: sticky; top: calc(var(--mast-h) + 1.5rem);
}
.rsec + .rsec,
.slip + .rsec { margin-top: clamp(2.8rem, 5vw, 3.8rem); }

.rsec h2 { font-size: var(--t-xl); margin-bottom: 0; }
.rsec h2::after {
	content: ''; display: block; width: 58px; height: 2px;
	background: var(--gold); margin: .7rem 0 1.2rem;
}
.rsec > p { max-width: 62ch; }

.rintro .lede { max-width: 46ch; }
.rintro .facts { margin-top: 1.9rem; padding-top: 1.7rem; }

/* ── The alcove ───────────────────────────────────────────────────────────── */
/* Set into the room text on the tint, like the alcove set into the wall. */
.nook {
	display: grid; grid-template-columns: 12.5rem minmax(0, 1fr);
	gap: clamp(1.3rem, 3vw, 2.2rem); align-items: center;
	margin-top: 2.1rem;
	padding: clamp(1.1rem, 2.4vw, 1.6rem);
	background: var(--sand-2);
}
.nook__pic { aspect-ratio: 3 / 4; --cap: 38px; }
.nook__pic img { object-position: var(--pos, 50% 50%); }
.nook h3 { font-size: var(--t-lg); margin-bottom: .45em; }
.nook p { font-size: var(--t-sm); color: var(--ink-70); }

/* ── In the room ──────────────────────────────────────────────────────────── */
.kit {
	display: grid; grid-template-columns: 1fr 1fr;
	column-gap: clamp(1.2rem, 3vw, 2.4rem);
	list-style: none; margin: 0; padding: 0;
}
.kit li { padding: .66rem 0; border-top: 1px solid var(--line-2); font-size: var(--t-sm); }

/* ── Good to know ─────────────────────────────────────────────────────────── */
/* The same rows as "Before you arrive" on the rooms page. */
.know {
	display: grid; grid-template-columns: 1fr 1fr;
	column-gap: clamp(1.2rem, 3vw, 2.4rem);
	margin: 0;
}
.know div { padding: .9rem 0 1rem; border-top: 1px solid var(--line-2); }
.know dt { font: 600 var(--t-sm)/1.3 var(--ui); color: var(--ink); margin-bottom: .3rem; }
.know dd { margin: 0; font-size: var(--t-sm); line-height: 1.55; color: var(--ink-70); }

/* ── Tariff slip ──────────────────────────────────────────────────────────── */
/* Same skin as the homepage enquiry strip and the rooms page tariff board --
   paper, a brand rule on top -- so every place a booking starts looks like
   the same thing. */
.slip {
	background: var(--paper);
	border: 1px solid var(--line);
	border-top: 2px solid var(--brand);
	padding: 1.35rem 1.5rem 1.25rem;
}
.slip__h {
	margin: 0 0 1.2rem;
	font: 600 var(--t-xl)/1 var(--ui); letter-spacing: 0; color: var(--brand-ink);
	font-variation-settings: normal;
}
.slip__h small { display: block; margin-top: .45rem; font-size: var(--t-xs); font-weight: 500; color: var(--ink-70); }

.slip__dates { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }
.slip .ask__f { margin-bottom: .85rem; }
.slip__more { margin: -.15rem 0 1.1rem; font-size: var(--t-xs); color: var(--ink-70); }

.slip__sum {
	display: flex; align-items: center; min-height: 3.6rem;
	margin: 0 0 1rem; padding-top: .9rem;
	border-top: 1px solid var(--line);
}
.slip__sum > p { width: 100%; }
.slip__hint { margin: 0; font-size: var(--t-sm); color: var(--ink-70); }
.slip__total {
	display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
	margin: 0;
}
.slip__total > span { font-size: var(--t-sm); color: var(--ink-70); }
.slip__total b {
	display: inline-block;
	font-family: var(--disp); font-weight: 400; font-size: 2.2rem; line-height: 1;
	letter-spacing: -.02em; color: var(--ink);
	font-variation-settings: 'opsz' 72, 'SOFT' 16;
}
.slip__total b.is-new { animation: settle .5s var(--ease); }
@keyframes settle {
	from { opacity: .3; transform: translateY(5px); }
	to   { opacity: 1;  transform: none; }
}
/* display: flex above would otherwise beat the hidden attribute. */
.slip__sum[hidden], .slip__total[hidden] { display: none; }

.slip__go { width: 100%; justify-content: center; }
.slip__note { margin: .75rem 0 0; max-width: none; text-align: center; font-size: var(--t-xs); color: var(--ink-70); }
.slip__tel {
	margin: 1rem 0 0; padding-top: .9rem; max-width: none;
	border-top: 1px solid var(--line);
	font-size: var(--t-sm); color: var(--ink-70);
}
.slip__tel a { font-weight: 600; white-space: nowrap; }

/* ── Other ways to stay ───────────────────────────────────────────────────── */
/* Three of the homepage's cards. Scoped to wide screens so it cannot undo the
   two-column step or the swipe rail that home.css sets for .rooms__grid. */
@media (min-width: 1041px) {
	.rooms__grid--3 { grid-template-columns: repeat(3, 1fr); }
	.rooms__grid--3 .room__pic .arch__frame { aspect-ratio: 4 / 3.3; --cap: 44px; }
}

/* ── Booking bar ──────────────────────────────────────────────────────────── */
.bookbar { display: none; }

/* ── Narrower screens ─────────────────────────────────────────────────────── */
@media (max-width: 900px) {
	.rbody { grid-template-columns: minmax(0, 1fr); }
	.rbody > .slip {
		grid-column: 1; grid-row: auto;
		position: static;
		margin-top: clamp(2.8rem, 5vw, 3.8rem);
		max-width: 30rem;
	}
	/* home.css centres .facts items below 900 for the welcome band. */
	.rintro .facts li { align-items: flex-start; }

	.solo { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
	.solo .facade { max-width: 24rem; }

	/* The floating call and WhatsApp buttons give way to the bar, which
	   carries the call button itself. */
	.is-room .fabs { display: none; }
	body.is-room { padding-bottom: calc(4.6rem + env(safe-area-inset-bottom)); }
	.bookbar {
		position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
		display: flex; align-items: center; gap: .7rem;
		padding: .7rem var(--gut) calc(.7rem + env(safe-area-inset-bottom));
		background: var(--sand);
		border-top: 1px solid var(--line);
		box-shadow: 0 -12px 28px -24px rgba(25, 42, 68, .55);
		transition: transform .28s var(--ease);
	}
	.bookbar.is-away { transform: translateY(110%); }
	.bookbar__rate { margin: 0 auto 0 0; font: 600 var(--t-md)/1 var(--ui); color: var(--brand-ink); }
	.bookbar__rate small { display: block; margin-top: .3rem; font-size: var(--t-xs); font-weight: 500; color: var(--ink-70); }
	.bookbar__tel {
		display: inline-flex; align-items: center; justify-content: center; flex: none;
		width: 44px; height: 44px;
		border: 1px solid var(--line-2); border-radius: 2px 2px 0 0;
		color: var(--brand-ink);
	}
	.bookbar__tel svg { width: 1.1rem; height: 1.1rem; fill: currentColor; }
	.bookbar__go { padding-block: .9em; }
}

@media (max-width: 560px) {
	.rhead { flex-direction: column; align-items: flex-start; }
	.rhead__rate { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .7rem; text-align: left; padding-bottom: 0; }
	.rhead__per { margin: 0; }

	.nook { grid-template-columns: 1fr; }
	.nook__pic { aspect-ratio: 4 / 3.4; max-width: 18rem; --cap: 42px; }

	/* The kit items are two or three words each, so they keep two columns
	   until the screen is genuinely narrow; the house rules are sentences. */
	.know { grid-template-columns: 1fr; }
}
@media (max-width: 359px) { .kit { grid-template-columns: 1fr; } }

/* ── Swipe rail on small screens ──────────────────────────────────────────── */
/* Deliberately last, for the reason home.css gives: this overrides the grid
   above, a media query adds no specificity, and source order decides. */
@media (max-width: 760px) {
	.facade {
		display: flex;
		grid-template-columns: none; grid-template-rows: none;
		gap: .65rem;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		scroll-padding-inline: var(--gut);
		margin-inline: calc(var(--gut) * -1);
		padding-inline: var(--gut);
		padding-bottom: .3rem;
		scrollbar-width: none;
		-ms-overflow-style: none;
	}
	.facade::-webkit-scrollbar { display: none; }
	.facade__i { flex: 0 0 min(21rem, 86%); aspect-ratio: 4 / 3.4; scroll-snap-align: start; }
	.facade .arch__frame,
	.facade__i:first-child .arch__frame,
	.facade--4 .facade__i:nth-child(2) .arch__frame { --cap: 46px; }

	/* A single photograph has nothing to swipe to. */
	.facade.facade--1 {
		display: block; overflow: visible;
		margin-inline: 0; padding: 0;
	}
	.facade.facade--1 .facade__i { aspect-ratio: auto; }
	.facade.facade--1 .facade__i .arch__frame { aspect-ratio: 4 / 4.3; --cap: 50px; }
}