/* ============================================================================
   Homepage sections.

   The layout is left-hung and asymmetric throughout: no section centres its
   own heading, and no two-column split is 50/50. The page should read as a
   column of text with photographs hung off it, which is roughly what a
   guesthouse is.
   ========================================================================== */

/* ── Hero ─────────────────────────────────────────────────────────────────── */
.hero { padding-block: clamp(2.5rem, 5vw, 4.5rem) clamp(2rem, 4vw, 3.2rem); }
.hero__in {
	display: grid;
	grid-template-columns: 1.08fr .92fr;
	gap: clamp(2rem, 5vw, 4.5rem);
	align-items: center;
}
.hero__say h1 { margin-bottom: .34em; }
.hero__say .lede { max-width: 38ch; }

.hero__acts { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.9rem; }

.hero__rating { margin: 1.6rem 0 0; }

/* Two facts, two columns, each icon holding its own column so wrapped text
   stays aligned under itself rather than under the glyph. */
.hero__proof {
	display: grid; grid-template-columns: 1fr 1fr;
	gap: .85rem 1.4rem;
	list-style: none; margin: 1.5rem 0 0; padding: 0;
	font-size: var(--t-sm); color: var(--ink-70);
}
.hero__proof li {
	display: grid; grid-template-columns: auto 1fr;
	gap: .55em; align-items: start;
	line-height: 1.45;
}
.hero__proof svg {
	width: 1.15em; height: 1.15em; fill: var(--brand);
	margin-top: .1em;
}
/* A hairline between claims rather than a middle dot: the rule is the same
   width at every zoom and does not get read out as punctuation. */


.hero__pic .arch__frame { aspect-ratio: 4 / 4.05; --cap: 62px; }
@media (max-width: 560px) {
	.hero__acts .btn, .close__acts .btn { flex: 1 1 100%; justify-content: center; }
	.hero__rating { display: flex; justify-content: center; }
	.hero__proof { gap: .8rem 1rem; }
}

@media (max-width: 900px) {
	.hero__in { grid-template-columns: 1fr; gap: 2rem; }
	.hero__say .lede { max-width: 46ch; }

	/* The photograph leads on a narrow screen. Ordering it visually rather
	   than moving it in the markup keeps the h1 first in the document, which
	   is what the heading outline and the LCP measurement both want. */
	.hero__pic { order: -1; max-width: 26rem; margin-inline: auto; }
	.hero__pic .arch__frame { aspect-ratio: 4 / 3.4; --cap: 50px; }
}

@media (max-width: 560px) {
	.hero__pic { max-width: 20rem; }
	.hero__pic .arch__frame { aspect-ratio: 4 / 3.4; --cap: 42px; }
}

/* ── Enquiry strip ────────────────────────────────────────────────────────── */
.ask { padding-bottom: 0; }
.ask + .band { padding-top: clamp(3.5rem, 6vw, 5.5rem); }
.ask__form {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
	gap: .9rem;
	align-items: end;
	background: var(--paper);
	border: 1px solid var(--line);
	border-top: 2px solid var(--brand);
	padding: 1.35rem;
}
.ask__f { display: flex; flex-direction: column; gap: .38rem; min-width: 0; }
.ask__f label { font: 600 var(--t-xs)/1 var(--ui); color: var(--ink-70); }
.ask__f input, .ask__f select {
	font: 500 var(--t-sm)/1 var(--ui);
	color: var(--ink);
	padding: .78rem .7rem;
	border: 1px solid var(--line-2);
	border-radius: 2px;
	background: var(--sand);
	min-width: 0; width: 100%;
	appearance: none;
}
.ask__f select {
	background-image: linear-gradient(45deg, transparent 50%, var(--ink-70) 50%), linear-gradient(135deg, var(--ink-70) 50%, transparent 50%);
	background-position: calc(100% - 17px) 50%, calc(100% - 12px) 50%;
	background-size: 5px 5px, 5px 5px;
	background-repeat: no-repeat;
	padding-right: 2rem;
}
.ask__form .btn { height: 43px; justify-content: center; }

@media (max-width: 860px) {
	.ask__form { grid-template-columns: 1fr 1fr; }
	.ask__form .btn { grid-column: 1 / -1; }
}
@media (max-width: 460px) { .ask__form { grid-template-columns: 1fr; } }

/* ── Welcome ──────────────────────────────────────────────────────────────── */
.welcome { overflow: hidden; }

/* Text left, emblem right. Grid placement rather than DOM order, so the
   markup can keep the emblem first and let it lead on a narrow screen. */
.welcome__in {
	display: grid; grid-template-columns: 1.02fr .98fr;
	gap: clamp(2rem, 4.5vw, 4rem); align-items: center;
}
.welcome__crest {
	grid-column: 2; grid-row: 1;
	width: 100%; max-width: 380px; height: auto; margin-inline: auto;
}
.welcome__say { grid-column: 1; grid-row: 1; }

/* Its own row across both columns. Four items squeezed into the text column
   were wrapping onto two lines each; across the full width they sit on one. */
.welcome .facts { grid-column: 1 / -1; grid-row: 2; margin-top: 0; }
.welcome__say h2 { margin-bottom: 0; }
.welcome__say h2::after {
	content: ''; display: block; width: 58px; height: 2px;
	background: var(--gold); margin: .7rem 0 1.15rem;
}

.facts {
	display: grid; grid-template-columns: repeat(4, 1fr);
	gap: 1.2rem; list-style: none; margin: 2.4rem 0 0; padding: 2rem 0 0;
	border-top: 1px solid var(--line-2);
}
.facts li { display: flex; flex-direction: column; gap: .3rem; }
.facts b {
	font-family: var(--disp); font-weight: 500; font-size: var(--t-lg);
	color: var(--brand-ink); line-height: 1;
	font-variation-settings: 'opsz' 30, 'SOFT' 10;
}
.facts span { font-size: var(--t-sm); color: var(--ink-70); line-height: 1.4; }

/* One column below 900: the emblem leads, larger, and this section -- and only
   this section -- centres its text. It is the greeting, so it is allowed to
   behave like one. */
@media (max-width: 900px) {
	.welcome__in { grid-template-columns: 1fr; gap: 1.8rem; text-align: center; }
	.welcome__crest { grid-column: 1; grid-row: 1; max-width: 230px; }
	.welcome__say { grid-column: 1; grid-row: 2; }
	.welcome .facts { grid-column: 1; grid-row: 3; }
	.welcome__say h2::after { margin-inline: auto; }
	.welcome__say .lede { margin-inline: auto; }
	.welcome__say p { margin-inline: auto; }
	.facts { grid-template-columns: 1fr 1fr; }
	.facts li { align-items: center; }
}

/* ── Rooms ────────────────────────────────────────────────────────────────── */
/* Not cards. Each room is a photograph in the arch with a rule under it and a
   rate hung right, which is how a tariff board reads. No boxes, no shadows. */
.rooms__grid {
	display: grid; grid-template-columns: repeat(4, 1fr);
	gap: clamp(1.4rem, 3vw, 2.4rem);
	list-style: none; margin: 0; padding: 0;
}
.room { display: flex; flex-direction: column; }
.room__pic { display: block; }
.room__pic .arch__frame { aspect-ratio: 3 / 3.5; --cap: 36px; }
.room__pic img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.room:hover .room__pic img { transform: scale(1.035); }

.room__head {
	display: flex; align-items: baseline; justify-content: space-between; gap: .8rem;
	margin-top: 1.15rem; padding-bottom: .7rem;
	border-bottom: 1px solid var(--line-2);
}
.room__head h3 { margin: 0; font-size: var(--t-md); letter-spacing: -.01em; }
.room__head h3 a { color: var(--ink); text-decoration: none; }
.room__head h3 a:hover { color: var(--brand-ink); }
.room__rate {
	margin: 0; text-align: right; flex: none;
	font: 600 var(--t-md)/1 var(--ui); color: var(--brand-ink);
}
.room__rate small { display: block; margin-top: .35rem; font-size: var(--t-xs); font-weight: 500; color: var(--ink-50); }

/* The descriptions are not the same length, so left alone the chip row landed
   at a different height on every card. The description takes the slack and
   centres itself in it, which pins the chips and the button to a common line
   across all four without capping how much any one card can say. */
.room__desc {
	flex: 1 1 auto;
	display: flex; align-items: center;
	margin: .9rem 0 1rem;
	font-size: var(--t-sm); color: var(--ink-70);
}

.chips { display: flex; flex-wrap: wrap; gap: .35rem; list-style: none; margin: 0 0 1.1rem; padding: 0; }
.room .chips { margin-top: 0; }
.chips li {
	font: 500 var(--t-xs)/1 var(--ui); color: var(--ink-70);
	padding: .42em .62em; background: var(--sand); border: 1px solid var(--line);
}
.band--tint .chips li { background: var(--paper); }

/* A button, not an underlined link. It is the card's only action and it opens
   a booking thread, so it should look like the thing it is. Full width of the
   card so all four line up whatever their copy length. */
.room__book { justify-content: center; width: 100%; }

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

/* ── Rail controls ────────────────────────────────────────────────────────── */
.rail {
	display: none;
	align-items: center; justify-content: center; gap: 1rem;
	margin-top: 1.6rem;
}
.rail__btn {
	display: inline-flex; align-items: center; justify-content: center;
	width: 42px; height: 42px; padding: 0;
	background: var(--paper); color: var(--ink);
	border: 1px solid var(--line-2); border-radius: 50%;
	cursor: pointer;
	transition: border-color .18s var(--ease), color .18s var(--ease), opacity .18s var(--ease);
}
.rail__btn svg { width: 19px; height: 19px; }
.rail__btn:hover:not(:disabled) { border-color: var(--brand); color: var(--brand-ink); }
.rail__btn:disabled { opacity: .3; cursor: default; }

.rail__dots { display: flex; align-items: center; gap: .45rem; list-style: none; margin: 0; padding: 0; }
.rail__dots li {
	width: 7px; height: 7px; border-radius: 50%;
	background: var(--line-2);
	transition: background-color .2s var(--ease), width .2s var(--ease);
}
.rail__dots li.is-on { background: var(--brand); width: 20px; border-radius: 4px; }

/* ── Rooftop ──────────────────────────────────────────────────────────────── */
.roof__in {
	display: grid; grid-template-columns: .95fr 1.05fr;
	gap: clamp(2rem, 5vw, 4.5rem); align-items: center;
}
.arch--a .arch__frame { aspect-ratio: 4 / 3.35; --cap: 56px; }
.roof__say h2 { margin-bottom: 0; }
.roof__say h2::after {
	content: ''; display: block; width: 58px; height: 2px;
	background: var(--gold); margin: .7rem 0 1.15rem;
}
.roof__say .btn { margin-top: 1.7rem; }

@media (max-width: 900px) {
	.roof__in { grid-template-columns: 1fr; gap: 2.5rem; }
}

/* ── Safari ───────────────────────────────────────────────────────────────── */
/* Warm sand, not a dark band -- the desert at four in the afternoon is the
   brightest thing in this whole story. */
.safari { background: var(--sand-3); }
.lead--wide p { max-width: 68ch; }

.safari__grid {
	display: grid; grid-template-columns: repeat(3, 1fr);
	gap: clamp(1.6rem, 3.5vw, 3rem);
	list-style: none; margin: 0; padding: 0;
}
.trip { display: flex; flex-direction: column; }
.trip__pic { aspect-ratio: 4 / 3.3; margin-bottom: 1.25rem; --cap: 44px; }
.trip__pic img { width: 100%; height: 100%; object-fit: cover; }
.trip h3 { margin-bottom: .45em; }
.trip p { font-size: var(--t-sm); color: var(--ink-70); }
.trip p { margin-bottom: 0; }

.safari__foot { display: flex; flex-wrap: wrap; justify-content: center; gap: .8rem; margin-top: clamp(2rem, 3.5vw, 3rem); }

/* Single column only in the band between the rail breakpoint and 860 --
   below 760 this grid becomes a scroll rail, and an unscoped max-width here
   would win on source order and undo it. */
@media (min-width: 761px) and (max-width: 860px) { .safari__grid { grid-template-columns: 1fr; max-width: 32rem; } }

/* ── Gallery ──────────────────────────────────────────────────────────────── */
.gal__grid {
	display: grid; grid-template-columns: repeat(4, 1fr);
	grid-auto-rows: clamp(8rem, 12.5vw, 12rem);
	gap: .65rem; list-style: none; margin: 0; padding: 0;
}
.gal__i--big { grid-column: span 2; grid-row: span 2; }
.gal__i button {
	display: block; width: 100%; height: 100%; padding: 0;
	border: 0; background: var(--sand-3); cursor: pointer; overflow: hidden;
}
.gal__i img { width: 100%; height: 100%; object-fit: cover; transition: transform .55s var(--ease), filter .3s var(--ease); }
.gal__i button:hover img { transform: scale(1.05); }
/* max-width: 66ch on p would otherwise cap this block and centre the button
   inside a narrow column sitting at the left edge. */
.gal__more { margin: 2rem 0 0; max-width: none; text-align: center; }

@media (max-width: 640px) {
	.gal__grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 9rem; }
}

/* ── Where ────────────────────────────────────────────────────────────────── */
.where__in { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.where__say h2 { margin-bottom: 0; }
.where__say h2::after {
	content: ''; display: block; width: 58px; height: 2px;
	background: var(--gold); margin: .7rem 0 1.15rem;
}
.dist { list-style: none; margin: 2rem 0; padding: 0; max-width: 26rem; }
.dist li {
	display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
	padding: .72rem 0; border-bottom: 1px solid var(--line);
	font-size: var(--t-sm);
}
.dist li:first-child { border-top: 1px solid var(--line); }
.dist b { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink); }
.dist span { color: var(--ink-70); }

.where__addr { font-style: normal; font-size: var(--t-sm); color: var(--ink-70); line-height: 1.7; }

.where__map {
	background: var(--sand-3);
	border: 1px solid var(--line-2);
	aspect-ratio: 4 / 3.1;
}
.where__map iframe { width: 100%; height: 100%; border: 0; display: block; filter: saturate(.72) contrast(1.02); }

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

/* ── Reviews ──────────────────────────────────────────────────────────────── */
.revs__in { display: grid; grid-template-columns: .7fr 1.3fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.revs__score {
	border-top: 3px solid var(--gold);
	padding-top: 1.6rem;
}
.revs__num {
	font-family: var(--disp); font-size: clamp(3.6rem, 8vw, 5.4rem); line-height: .88;
	margin: 0; letter-spacing: -.04em; font-variation-settings: 'opsz' 144, 'SOFT' 20;
}
.revs__stars { color: var(--gold); font-size: 1.15rem; letter-spacing: .12em; margin: .5rem 0 .7rem; }
.revs__of { font-size: var(--t-sm); color: var(--ink-70); max-width: 20ch; }
.revs__link { font: 600 var(--t-sm)/1 var(--ui); }

.revs__body h2 { margin-bottom: .7em; }
.tags { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; margin: 0; padding: 0; }
.tags li {
	display: inline-flex; align-items: center; gap: .5em;
	font: 500 var(--t-sm)/1 var(--ui);
	padding: .55em .8em; background: var(--paper); border: 1px solid var(--line);
}
.tags b {
	font-weight: 700; font-size: var(--t-xs); color: var(--brand-ink);
	font-variant-numeric: tabular-nums;
}
.tags__note { margin: .9rem 0 2rem; font-size: var(--t-xs); color: var(--ink-50); }

.revs__body blockquote {
	margin: 0 0 1.5rem; padding-left: 1.3rem;
	border-left: 2px solid var(--line-2);
}
.revs__body blockquote p {
	font-family: var(--disp); font-size: var(--t-md); line-height: 1.5;
	font-variation-settings: 'opsz' 28, 'SOFT' 16;
	margin-bottom: .5rem; max-width: 52ch;
}
.revs__body cite { font-style: normal; font-size: var(--t-xs); color: var(--ink-50); }

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

/* ── Questions ────────────────────────────────────────────────────────────── */
.faq__in { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; }
.faq__in .lead { margin-bottom: 0; }
.qa { border-bottom: 1px solid var(--line-2); }
.qa:first-child { border-top: 1px solid var(--line-2); }
.qa summary {
	display: flex; align-items: baseline; gap: 1rem;
	padding: 1.15rem 0; cursor: pointer; list-style: none;
	font: 600 var(--t-base)/1.4 var(--ui);
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after {
	content: ''; flex: none; margin-left: auto; margin-top: .35em;
	width: .58rem; height: .58rem;
	border-right: 1.6px solid var(--brand); border-bottom: 1.6px solid var(--brand);
	transform: rotate(45deg); transition: transform .22s var(--ease);
}
.qa[open] summary::after { transform: rotate(-135deg); }
.qa summary:hover { color: var(--brand-ink); }
.qa__a { padding: 0 0 1.3rem; }
.qa__a p { font-size: var(--t-sm); color: var(--ink-70); max-width: 58ch; }

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

/* ── Close ────────────────────────────────────────────────────────────────── */
.close {
	background: var(--sand-2);
	padding-block: clamp(3.5rem, 7vw, 6rem);
	text-align: center;
	position: relative; overflow: hidden;
}
.close::before {
	content: ''; position: absolute; inset: auto 50% -42% auto;
	transform: translateX(50%);
	width: min(34rem, 80vw); aspect-ratio: 1;
	background: url('../img/mandala.webp') no-repeat center/contain;
	opacity: .1; pointer-events: none;
}
.close__in { position: relative; z-index: 1; }
.close h2 { margin-bottom: .35em; }
.close p { margin-inline: auto; color: var(--ink-70); }
.close__acts { display: flex; flex-wrap: wrap; gap: .8rem; justify-content: center; margin-top: 2rem; }

/* ── Lightbox ─────────────────────────────────────────────────────────────── */
.lb {
	border: 0; padding: 0; background: transparent;
	max-width: min(94vw, 1100px); max-height: 92vh;
	overflow: visible;
}
.lb::backdrop { background: rgba(25, 42, 68, .9); }
.lb img { max-height: 82vh; width: auto; margin-inline: auto; }
.lb__cap { margin: .9rem 0 0; color: var(--sand); font-size: var(--t-sm); text-align: center; }
.lb__x {
	position: absolute; top: -2.6rem; right: 0;
	width: 2.2rem; height: 2.2rem; padding: 0;
	background: none; border: 0; color: var(--sand);
	font-size: 1.15rem; cursor: pointer; line-height: 1;
}
.lb__x:hover { color: var(--gold-lt); }

/* ── Waiting on the client ────────────────────────────────────────────────── */
/* Marked rather than invented. These read as pending in the page instead of
   as facts nobody checked. */
[data-todo] {
	display: inline-block;
	color: var(--ink-50);
	border-bottom: 1px dashed var(--line-2);
	font-style: italic;
}

/* ── Generic page ─────────────────────────────────────────────────────────── */
.page__in { max-width: 46rem; }
.page__in h1 { font-size: var(--t-2xl); margin-bottom: .5em; }
.page__in h1::after {
	content: ''; display: block; width: 58px; height: 2px;
	background: var(--gold); margin-top: .5em;
}
.page__body { font-size: var(--t-md); color: var(--ink-70); }
.page__body a { font-weight: 600; }
.page__back { margin-top: 2.2rem; }

/* ── Swipe rails on small screens ─────────────────────────────────────────── */
/* Deliberately last in the file. These override the base grid layouts of
   .rooms__grid and .safari__grid, and a media query carries no extra
   specificity -- source order is the whole argument. Placed earlier, the base
   .safari__grid { display: grid } further down won and the rail silently
   stopped scrolling. */
/* Native scroll-snap does the swiping: no library, and momentum, trackpads and
   keyboard scrolling all keep working. The arrows drive the same scroller, so
   swipe and buttons can never disagree about where you are. */
@media (max-width: 760px) {
	.rooms__grid {
		display: flex;
		grid-template-columns: none;
		gap: .9rem;
		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;
	}
	.rooms__grid::-webkit-scrollbar { display: none; }
	.room { flex: 0 0 min(19rem, 80%); scroll-snap-align: start; }
	.room__pic .arch__frame { aspect-ratio: 4 / 3.4; --cap: 46px; }

	.safari__grid {
		display: flex;
		grid-template-columns: none;
		max-width: none;
		gap: .9rem;
		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;
	}
	.safari__grid::-webkit-scrollbar { display: none; }
	.trip { flex: 0 0 min(19rem, 80%); scroll-snap-align: start; }

	.rail { display: flex; }
}