/*
 * collection_head (11c): the first screen of a collection / destination page. A cream band with the H1, one line and a live
 * ledger of what's on the page; from 768 px a photo on the right that overlaps the band's edge into the cards below.
 * Tokens: rmh-landing.css (--l-*). px only (html is 10px). Motion: none of its own.
 */
#rmh-landing .rmh-ch { position: relative; background: var(--l-cream); padding-block: 28px 32px; }
#rmh-landing .rmh-ch__grid { display: grid; gap: 40px; align-items: end; }
#rmh-landing .rmh-ch .rmh-l__label { margin-bottom: 14px; }
#rmh-landing h1.rmh-ch__title:not(#_) {
	font-family: var(--l-serif) !important; font-weight: 400; text-transform: none; letter-spacing: -.005em; color: var(--l-ink);
	font-size: clamp(32px, 18px + 3.1vw, 60px); line-height: 1.06; max-width: 17ch; text-wrap: balance;
}
#rmh-landing .rmh-ch__line { margin-top: 16px; max-width: 46ch; font-size: 17px; line-height: 1.55; color: var(--l-ink-soft); text-wrap: pretty; }

/* The ledger: what is on this page, in numbers that update themselves (counts, then the lowest nightly price) */
#rmh-landing .rmh-ch__ledger { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 28px; margin-top: 24px; }
#rmh-landing .rmh-ch__ledger ul { display: flex; flex-wrap: wrap; gap: 10px 0; }
#rmh-landing .rmh-ch__ledger li {
	display: flex; align-items: baseline; gap: 7px; padding-right: 16px; margin-right: 16px; border-right: 1px solid var(--l-sand);
	font-size: 14px; line-height: 1.2; color: var(--l-ink-soft); white-space: nowrap;
}
#rmh-landing .rmh-ch__ledger li:last-child { border-right: 0; margin-right: 0; padding-right: 0; }
#rmh-landing .rmh-ch__ledger strong { font: 400 clamp(26px, 18px + 1vw, 34px)/1 var(--l-serif); color: var(--l-ink); }
#rmh-landing .rmh-ch__from { display: flex; align-items: baseline; gap: 7px; font-size: 14px; line-height: 1.2; color: var(--l-ink-soft); white-space: nowrap; }

/* Condos, dates first: a quiet form inside the head */
#rmh-landing .rmh-ch__door {
	display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 24px; padding: 12px; max-width: 640px;
	background: var(--l-white); border: 1px solid var(--l-sand); border-radius: 12px;
}
#rmh-landing .rmh-ch__door label { display: grid; gap: 4px; padding: 6px 10px; border-radius: 6px; background: var(--l-cream); }
#rmh-landing .rmh-ch__door label span { font: 600 12px/1.3 var(--l-sans); letter-spacing: .06em; color: var(--l-ink-soft); }
#rmh-landing .rmh-ch__door input:not(#_) {
	width: 100%; min-height: 32px; padding: 0; border: 0; background: transparent; font: 500 16px/1.2 var(--l-sans); color: var(--l-ink); box-shadow: none;
}
#rmh-landing .rmh-ch__door input:focus-visible { outline: 2px solid var(--l-ink); outline-offset: 4px; }
/* phones: the two dates on one row, then guests (narrow) + the button (wide enough never to wrap at 320) */
#rmh-landing .rmh-ch__door { grid-template-columns: repeat(6, minmax(0, 1fr)); }
#rmh-landing .rmh-ch__door label { padding: 4px 10px; grid-column: span 3; }
#rmh-landing .rmh-ch__door label:last-of-type { grid-column: span 2; }
#rmh-landing .rmh-ch__door .rmh-l-btn { grid-column: span 4; min-height: 48px; width: 100%; padding: 0 16px; white-space: nowrap; }

#rmh-landing .rmh-ch__figure { display: none; }

@media (min-width: 768px) {
	#rmh-landing .rmh-ch { padding-block: 48px 0; }
	#rmh-landing .rmh-ch__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: clamp(32px, 5vw, 88px); }
	#rmh-landing .rmh-ch__copy { padding-bottom: 48px; }
	#rmh-landing .rmh-ch__figure { display: block; position: relative; z-index: 1; margin-bottom: -40px; }
	#rmh-landing .rmh-ch__img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 2px; box-shadow: 0 40px 60px -40px rgba(35, 31, 32, .45); }
	#rmh-landing .rmh-ch__figure .rmh-l__caption { position: absolute; left: 0; top: 100%; margin-top: 12px; }
	#rmh-landing .rmh-ch__door { grid-template-columns: 1fr 1fr .7fr auto; align-items: stretch; }
	#rmh-landing .rmh-ch__door :is(label, label:last-of-type, .rmh-l-btn) { grid-column: auto; }
		#rmh-landing .rmh-ch__door .rmh-l-btn { width: auto; min-height: 0; }
	#rmh-landing .rmh-ch--text .rmh-ch__grid { grid-template-columns: minmax(0, 1fr); }
	/* the next section (cards, houses…) starts under the photo's overlap */
	#rmh-landing .rmh-ch:not(.rmh-ch--text) + .rmh-l__band { padding-top: 88px; }
}
@media (min-width: 1200px) {
	#rmh-landing .rmh-ch__grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
}