/* ============================================================================
   Rooms page.

   Loaded only on /rooms/, after base.css and home.css, and it borrows from
   both: the buttons, the arch, the swipe rails, the enquiry form, the closing
   band and the lightbox are the homepage's own. What is new here is the
   tariff board and the room entry.
   ========================================================================== */

/* ── Hero ─────────────────────────────────────────────────────────────────── */
.rhero { padding-block: clamp(2.5rem, 5vw, 4.5rem) clamp(3rem, 6vw, 5rem); }
.rhero__in {
	display: grid;
	grid-template-columns: 1.14fr .86fr;
	gap: clamp(2rem, 5vw, 4.5rem);
	align-items: center;
}
.rhero__say h1 { margin-bottom: 0; }
.rhero__say h1::after {
	content: ''; display: block; width: 58px; height: 2px;
	background: var(--gold); margin: .9rem 0 0;
}
.rhero__say .lede { margin-top: 1.2rem; max-width: 46ch; }

.rhero__acts {
	display: flex; flex-wrap: wrap; align-items: center;
	gap: .9rem 1.2rem; margin-top: 1.6rem;
}

.rhero__pic .arch__frame { aspect-ratio: 4 / 4.9; --cap: 60px; }

/* ── Tariff board ─────────────────────────────────────────────────────────── */
/* The rate card a guest reads at reception, a dotted leader running from each
   room to its rate the way a painted board sets them. Same skin as the
   homepage enquiry strip -- paper, a brand rule on top -- so the two places a
   booking starts look like one thing. Each row jumps to its room below. */
.tariff {
	margin-top: clamp(1.6rem, 3vw, 2.1rem);
	background: var(--paper);
	border: 1px solid var(--line);
	border-top: 2px solid var(--brand);
	padding: .35rem clamp(1rem, 2.4vw, 1.5rem) 1.05rem;
}
.tariff__list { list-style: none; margin: 0; padding: 0; }
.tariff__list li + li { border-top: 1px solid var(--line); }
.tariff__list a {
	display: grid;
	grid-template-columns: auto minmax(1.5rem, 1fr) auto 4.6rem;
	align-items: baseline;
	column-gap: .8rem;
	padding: .95rem 0 .85rem;
	color: var(--ink); text-decoration: none;
}
.tariff__name {
	font-family: var(--disp); font-size: var(--t-lg); line-height: 1.15;
	letter-spacing: -.01em; font-variation-settings: 'opsz' 32, 'SOFT' 10;
	transition: color .18s var(--ease);
}
/* An empty span has no text baseline, so the grid aligns its bottom edge to
   the row's baseline -- the dots sit where the full stops of a leader would. */
.tariff__dots {
	align-self: baseline;
	height: 1px;
	border-bottom: 2px dotted var(--line-2);
	transition: border-color .18s var(--ease);
}
.tariff__per { font: 500 var(--t-xs)/1 var(--ui); color: var(--ink-70); white-space: nowrap; }
.tariff__rate { font: 600 var(--t-md)/1 var(--ui); color: var(--brand-ink); text-align: right; }
.tariff__list a:hover .tariff__name { color: var(--brand-ink); }
.tariff__list a:hover .tariff__dots { border-bottom-color: var(--gold); }
.tariff__note { margin: .75rem 0 0; font-size: var(--t-xs); color: var(--ink-70); }

/* ── Room entries ─────────────────────────────────────────────────────────── */
/* Text left and photographs right for every room, never alternating: the
   rate and the spec rows land in the same place four times, which is what
   makes the rooms comparable by scrolling. */
.rm {
	display: grid;
	grid-template-columns: .8fr 1.2fr;
	gap: clamp(2rem, 4.5vw, 4rem);
	align-items: start;
	padding-block: clamp(2.8rem, 5.5vw, 4.4rem);
	border-top: 1px solid var(--line-2);
}
.rm:first-child { padding-top: 0; border-top: 0; }
.rm:last-child { padding-bottom: 0; }

.rm__head {
	display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
	padding-bottom: .8rem;
	border-bottom: 1px solid var(--line-2);
}
.rm__head h2 {
	margin: 0; font-size: var(--t-xl);
	letter-spacing: -.012em; font-variation-settings: 'opsz' 48, 'SOFT' 14;
}
.rm__rate {
	margin: 0; flex: none; text-align: right;
	font: 600 var(--t-lg)/1 var(--ui); color: var(--brand-ink);
}
.rm__rate small { display: block; margin-top: .4rem; font-size: var(--t-xs); font-weight: 500; color: var(--ink-70); }

.rm__desc { margin: 1.15rem 0 1.4rem; color: var(--ink-70); max-width: 52ch; }

/* The spec rows. Same five terms, same order, in every room. */
.rm__spec { margin: 0 0 1.7rem; }
.rm__spec div {
	display: grid; grid-template-columns: 7rem 1fr; gap: 1rem;
	padding: .62rem 0;
	border-bottom: 1px solid var(--line-2);
	font-size: var(--t-sm); line-height: 1.45;
}
.rm__spec dt { color: var(--ink-70); }
.rm__spec dd { margin: 0; color: var(--ink); font-weight: 600; }

/* ── Room photographs ─────────────────────────────────────────────────────── */
/* The lead wears the arch; the rest are plain, as in the homepage gallery,
   so each room has one cover. Past the third, photos are hidden here but
   still in the markup: the lightbox steps through all of them. */
.rm__look { min-width: 0; }
.rm__pics {
	display: grid;
	grid-template-columns: 1.5fr 1fr;
	grid-template-rows: 1fr 1fr;
	gap: .65rem;
	aspect-ratio: 16 / 11.6;
	list-style: none; margin: 0; padding: 0;
}
.rm__pic { position: relative; min-width: 0; min-height: 0; }
.rm__pic--lead { grid-row: 1 / span 2; }
.rm__pic:nth-child(n+4) { display: none; }

.rm__pic a { display: block; height: 100%; cursor: zoom-in; }
.rm__pic .arch__frame { height: 100%; --cap: 48px; }
.rm__frame {
	display: block; height: 100%;
	position: relative; overflow: hidden;
	background: var(--sand-3);
}
.rm__pic img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.rm__pic a:hover img { transform: scale(1.035); }

.rm__more {
	position: absolute; left: .7rem; bottom: .7rem;
	padding: .55em .8em;
	background: var(--paper); color: var(--ink);
	font: 600 var(--t-xs)/1 var(--ui);
	border-radius: 2px;
	box-shadow: 0 6px 18px -10px rgba(25, 42, 68, .6);
}
.rm__pic a:hover .rm__more { color: var(--brand-ink); }

.rm__pics--2 { grid-template-columns: 1.3fr 1fr; grid-template-rows: 1fr; }
.rm__pics--2 .rm__pic--lead { grid-row: auto; }

/* One photograph: it takes the whole cluster rather than leaving a hole. */
.rm__pics--1 { grid-template-columns: 1fr; grid-template-rows: 1fr; aspect-ratio: 4 / 3.3; }
.rm__pics--1 .rm__pic--lead { grid-row: auto; }
.rm__pics--1 img { object-position: 50% 62%; }

/* ── Before you arrive ────────────────────────────────────────────────────── */
.stay__in {
	display: grid; grid-template-columns: .8fr 1.2fr;
	gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start;
}
.stay__in .lead { margin-bottom: 0; }
.stay__list {
	display: grid; grid-template-columns: 1fr 1fr;
	column-gap: clamp(1.2rem, 3vw, 2.4rem);
	margin: 0;
}
.stay__list div { padding: .95rem 0 1.05rem; border-top: 1px solid var(--line-2); }
.stay__list dt { font: 600 var(--t-sm)/1.3 var(--ui); color: var(--ink); margin-bottom: .3rem; }
.stay__list dd { margin: 0; font-size: var(--t-sm); line-height: 1.55; color: var(--ink-70); }

/* ── Close: dates ─────────────────────────────────────────────────────────── */
/* The homepage's closing band, carrying the homepage's enquiry form. The band
   centres its text; the form's labels stay hung left over their fields. */
.rclose p { text-wrap: balance; }
.rclose .ask__form { margin: 2.2rem auto 0; max-width: 62rem; text-align: left; }
.rclose .rclose__tel { margin-top: 1.4rem; font-size: var(--t-sm); }
.rclose__tel a { font-weight: 600; }

/* ── Narrower screens ─────────────────────────────────────────────────────── */
@media (max-width: 900px) {
	.rhero__in { grid-template-columns: 1fr; gap: 2rem; }
	/* The photograph leads on a narrow screen, as on the homepage, while the
	   h1 stays first in the document. */
	.rhero__pic { order: -1; width: 100%; max-width: 26rem; margin-inline: auto; }
	.rhero__pic .arch__frame { aspect-ratio: 4 / 3.4; --cap: 50px; }

	.rm { grid-template-columns: 1fr; gap: 1.5rem; }
	.rm__look { order: -1; }
	.rm__desc { max-width: 60ch; }
}

@media (max-width: 800px) {
	.stay__in { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
	.rhero__pic { max-width: 20rem; }
	.rhero__pic .arch__frame { --cap: 42px; }
	.rhero__acts .btn { flex: 1 1 100%; justify-content: center; }
	.rhero__acts .gchip { margin-inline: auto; }

	/* Name and dots on one line, what the room holds tucked under the name,
	   the rate hung right across both. */
	.tariff__list a {
		grid-template-columns: auto minmax(1rem, 1fr) auto;
		grid-template-areas: 'name dots rate' 'per per .';
		row-gap: .35rem;
	}
	.tariff__name { grid-area: name; font-size: var(--t-md); }
	.tariff__dots { grid-area: dots; }
	.tariff__rate { grid-area: rate; }
	.tariff__per  { grid-area: per; }

	.rm__spec div { grid-template-columns: 6.2rem 1fr; }
	.rm__book { width: 100%; justify-content: center; }

	.stay__list { grid-template-columns: 1fr; }
}

/* ── Swipe rails on small screens ─────────────────────────────────────────── */
/* Deliberately last, for the reason home.css gives: these override the grid
   above, and a media query adds no specificity, so source order decides.
   The hidden-past-three rule is repeated in the selector because
   :nth-child() outranks a bare class. */
@media (max-width: 760px) {
	.rm__pics {
		display: flex;
		grid-template-columns: none; grid-template-rows: none;
		aspect-ratio: auto;
		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;
	}
	.rm__pics::-webkit-scrollbar { display: none; }
	.rm__pic,
	.rm__pic:nth-child(n+4) {
		display: block;
		flex: 0 0 min(19rem, 84%);
		aspect-ratio: 4 / 3.4;
		scroll-snap-align: start;
	}
	.rm__pics--1 .rm__pic { flex-basis: 100%; }
	.rm__pic .arch__frame { --cap: 44px; }
	.rm__more { display: none; }
}