/*
 * listing_grid (11c, specs/11 §3 S3): filter bar, cards, the contact line after the first row, "Show more", empty state.
 * One card grammar with card_rail: photo → place → serif name → facts → price; the whole card is one link (the name's
 * ::after). Tokens: rmh-landing.css (--l-*). px only. Motion: transform only, none under reduced motion.
 */
#rmh-landing .rmh-lg { padding-top: 32px; }
#rmh-landing .rmh-lg [hidden] { display: none !important; }

/* ---------- Filter bar ---------- */
#rmh-landing .rmh-lg-bar { display: grid; gap: 12px; margin-bottom: 32px; min-height: 44px; }
#rmh-landing .rmh-lg-bar:not(.is-ready) { visibility: hidden; } /* keeps its space until the script runs: no shift */
#rmh-landing .rmh-lg-seg, #rmh-landing .rmh-lg-bar__pills {
	display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-block: 2px;
	margin-right: calc(-1 * var(--l-gutter)); padding-right: var(--l-gutter);
}
#rmh-landing :is(.rmh-lg-seg, .rmh-lg-bar__pills)::-webkit-scrollbar { display: none; }
#rmh-landing .rmh-lg-seg button {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 18px; flex: none; cursor: pointer;
	border: 1px solid #CFC4B8; border-radius: 999px; background: var(--l-white); color: var(--l-ink); font: 500 15px/1 var(--l-sans);
	transition: background-color .2s, color .2s, border-color .2s;
}
#rmh-landing .rmh-lg-seg button span { font-size: 13px; color: var(--l-ink-soft); }
#rmh-landing .rmh-lg-seg button:hover { border-color: var(--l-ink); }
#rmh-landing .rmh-lg-seg button[aria-pressed="true"] { background: var(--l-ink); border-color: var(--l-ink); color: var(--l-white); }
#rmh-landing .rmh-lg-seg button[aria-pressed="true"] span { color: rgba(255, 255, 255, .72); }
#rmh-landing .rmh-lg-pill {
	position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: 48px; padding: 0 34px 0 16px; flex: none;
	border: 1px solid #CFC4B8; border-radius: 999px; background: var(--l-white); cursor: pointer;
}
#rmh-landing .rmh-lg-pill::after {
	content: ""; position: absolute; right: 16px; top: 50%; width: 7px; height: 7px; margin-top: -5px; pointer-events: none;
	border-right: 1.5px solid var(--l-ink); border-bottom: 1.5px solid var(--l-ink); transform: rotate(45deg);
}
#rmh-landing .rmh-lg-pill:focus-within { outline: 2px solid var(--l-ink); outline-offset: 3px; }
#rmh-landing .rmh-lg-pill__k { font: 500 13px/1 var(--l-sans); color: var(--l-ink-soft); }
#rmh-landing .rmh-lg-pill select:not(#_) {
	appearance: none; -webkit-appearance: none; height: auto; min-height: 0; border: 0; background: transparent;
	/* the whole pill is the tap target (44 px): the select reaches the pill's edges, the layout stays the same */
	margin: -14px -34px -14px 0; padding: 14px 34px 14px 0;
	box-shadow: none; font: 600 15px/1.2 var(--l-sans); color: var(--l-ink); cursor: pointer;
}
#rmh-landing .rmh-lg-pill select:focus { outline: none; }
#rmh-landing .rmh-lg-bar__count { font-size: 14px; color: var(--l-ink-soft); min-height: 20px; }
#rmh-landing .rmh-lg-bar__row { display: flex; align-items: center; gap: 16px; }
#rmh-landing .rmh-lg-bar__toggle { display: none; }
@media (max-width: 767px) {
	/* the ledger above already says how many: the count shows on phones once a filter narrows the list */
	#rmh-landing .rmh-lg-bar:not(.is-filtered) .rmh-lg-bar__count { display: none; }
	/* phones (design walk 10-16): the type buttons wrap and fill the row (2 × 2 when there are four), nothing runs off the edge;
	   the selects open under one "Filters & sort" button, one per row, 48 px */
	#rmh-landing .rmh-lg-seg { flex-wrap: wrap; overflow: visible; margin-right: 0; padding-right: 0; }
	#rmh-landing .rmh-lg-seg button { flex: 1 1 auto; padding: 0 14px; }
	#rmh-landing .rmh-lg-seg:has(> button:nth-child(4)) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
	#rmh-landing .rmh-lg-bar.is-ready .rmh-lg-bar__toggle {
		display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 44px 0 20px; position: relative; flex: none;
		border: 1px solid var(--l-ink); border-radius: 999px; background: var(--l-white); color: var(--l-ink); cursor: pointer;
		font: 600 15px/1 var(--l-sans);
	}
	#rmh-landing .rmh-lg-bar__toggle::after {
		content: ""; position: absolute; right: 20px; top: 50%; width: 7px; height: 7px; margin-top: -6px;
		border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); transition: transform .2s;
	}
	#rmh-landing .rmh-lg-bar__toggle[aria-expanded="true"]::after { transform: translateY(3px) rotate(-135deg); }
	#rmh-landing .rmh-lg-bar__n {
		display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px;
		background: var(--l-ink); color: var(--l-white); font: 600 12px/1 var(--l-sans);
	}
	#rmh-landing .rmh-lg-bar__n[hidden] { display: none; }
	#rmh-landing .rmh-lg-bar.is-ready:not(.is-open) .rmh-lg-bar__pills { display: none; }
	#rmh-landing .rmh-lg-bar__pills { display: grid; gap: 8px; }
	#rmh-landing .rmh-lg-pill { display: flex; justify-content: space-between; }
	#rmh-landing .rmh-lg-pill select:not(#_) { flex: 1; text-align: right; text-align-last: right; }
}
@media (min-width: 768px) {
	#rmh-landing .rmh-lg-bar__row { order: 3; }
	/* tablets: the pills wrap instead of running off the edge (Sort was cut at 768) */
	#rmh-landing .rmh-lg-seg, #rmh-landing .rmh-lg-bar__pills { flex-wrap: wrap; overflow: visible; margin-right: 0; padding-right: 0; }
}
@media (min-width: 900px) {
	#rmh-landing .rmh-lg-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-bottom: 44px; }
	#rmh-landing .rmh-lg-seg, #rmh-landing .rmh-lg-bar__pills { margin-right: 0; padding-right: 0; overflow: visible; flex-wrap: wrap; }
	#rmh-landing .rmh-lg-seg { padding-right: 16px; border-right: 1px solid var(--l-sand); }
	#rmh-landing .rmh-lg-bar__row { margin-left: auto; }
}

/* ---------- Cards ---------- */
#rmh-landing .rmh-lg__list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 44px 28px; }
#rmh-landing .rmh-lg-card { position: relative; display: flex; flex-direction: column; }
#rmh-landing .rmh-lg-card__media { overflow: hidden; aspect-ratio: 4 / 3; border-radius: 2px; background: var(--l-sand); }
#rmh-landing .rmh-lg-card__img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--l-ease); }
#rmh-landing .rmh-lg-card:hover .rmh-lg-card__img { transform: scale(1.03); }
#rmh-landing .rmh-lg-card:focus-within { outline: 2px solid var(--l-ink); outline-offset: 8px; }
/* one line, always (card contract): "Condo · Villas del Mar · Puerto Aventuras" ends in an ellipsis at 320/768 instead of
   wrapping the row out of line (ui-audit 10-04) */
#rmh-landing .rmh-lg-card__place {
	margin-top: 18px; font: 600 12px/1.4 var(--l-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--l-taupe-deep);
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#rmh-landing .rmh-lg-card__place span { margin-right: .45em; color: var(--l-ink); }
/* a hacienda carries its own façade (brand book "portales") as a small mark */
#rmh-landing .rmh-lg-card__mark {
	display: inline-block; width: 11px; height: 18px; margin: -2px 9px -2px 0; vertical-align: -4px; background: var(--l-taupe-deep);
	-webkit-mask: var(--facade) center / 100% 100% no-repeat; mask: var(--facade) center / 100% 100% no-repeat;
}
#rmh-landing h3.rmh-lg-card__name:not(#_) {
	margin-top: 8px; font-family: var(--l-serif) !important; font-size: 25px; font-weight: 400; line-height: 1.15; letter-spacing: 0;
	text-transform: none; color: var(--l-ink);
}
#rmh-landing .rmh-lg-card__name a { text-decoration: none; }
#rmh-landing .rmh-lg-card__name a::after { content: ""; position: absolute; inset: 0; }
#rmh-landing .rmh-lg-card__facts { margin-top: 6px; font-size: 15px; line-height: 1.45; color: var(--l-ink-soft); }
#rmh-landing .rmh-lg-card__price { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--l-sand); font-size: 15px; color: var(--l-ink-soft); white-space: nowrap; }
#rmh-landing .rmh-lg-card__price strong { font-weight: 600; color: var(--l-ink); }
#rmh-landing .rmh-lg-card__go { display: none; }

@media (min-width: 600px) {
	#rmh-landing .rmh-lg__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
	#rmh-landing .rmh-lg__list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 56px 32px; }
	#rmh-landing :is(.rmh-lg--n2, .rmh-lg--n4) .rmh-lg__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px 40px; }
	#rmh-landing :is(.rmh-lg--n2, .rmh-lg--n4) .rmh-lg-card__media { aspect-ratio: 3 / 2; }
}

/* One home on the page (a town with a single villa): one wide card, photo and facts side by side */
@media (min-width: 768px) {
	#rmh-landing .rmh-lg--n1 .rmh-lg__list { grid-template-columns: minmax(0, 1fr); }
	#rmh-landing .rmh-lg--n1 .rmh-lg-card {
		display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-rows: auto auto auto auto 1fr;
		column-gap: clamp(32px, 5vw, 72px); align-content: start;
	}
	#rmh-landing .rmh-lg--n1 .rmh-lg-card__media { grid-row: 1 / span 6; aspect-ratio: 3 / 2; }
	#rmh-landing .rmh-lg--n1 .rmh-lg-card__place { margin-top: 8px; }
	#rmh-landing .rmh-lg--n1 h3.rmh-lg-card__name:not(#_) { font-size: clamp(30px, 20px + 1.6vw, 44px); }
	#rmh-landing .rmh-lg--n1 .rmh-lg-card__facts { font-size: 17px; }
	#rmh-landing .rmh-lg--n1 .rmh-lg-card__price { align-self: start; font-size: 17px; }
	/* one home: the card says what a tap does (the whole card is the link; this is only its label) */
	#rmh-landing .rmh-lg--n1 .rmh-lg-card__go {
		display: inline-flex; align-self: start; justify-self: start; align-items: center; min-height: 52px; margin-top: 28px; padding: 0 28px;
		border-radius: 999px; background: var(--l-ink); color: var(--l-white); font: 600 16px/1.2 var(--l-sans); transition: background-color .2s;
	}
	#rmh-landing .rmh-lg--n1 .rmh-lg-card:hover .rmh-lg-card__go { background: #000; }
}

/* ---------- First paint: the contact line after the first row, 12 cards on phones / 24 wider (no shift later) ----------
   The script drops [data-limited] on the first filter or "Show more" and takes over with [hidden] and the DOM order. */
#rmh-landing .rmh-lg__list[data-limited] > .rmh-lg-card { order: 2; }
#rmh-landing .rmh-lg__list[data-limited] > .rmh-lg-ask { order: 1; }
#rmh-landing .rmh-lg__list[data-limited] > .rmh-lg-card:nth-child(-n+2 of .rmh-lg-card) { order: 0; }
#rmh-landing .rmh-lg__list[data-limited] > .rmh-lg-card:nth-child(n+13 of .rmh-lg-card) { display: none; }
#rmh-landing :is(.rmh-lg--n1, .rmh-lg--n2) .rmh-lg__list[data-limited] > .rmh-lg-ask { order: 3; }
@media (max-width: 599px) {
	#rmh-landing .rmh-lg__list[data-limited] > .rmh-lg-card:nth-child(2 of .rmh-lg-card) { order: 2; }
}
@media (min-width: 768px) {
	#rmh-landing .rmh-lg__list[data-limited] > .rmh-lg-card:nth-child(n+13 of .rmh-lg-card) { display: flex; }
	#rmh-landing .rmh-lg__list[data-limited] > .rmh-lg-card:nth-child(n+25 of .rmh-lg-card) { display: none; }
}
@media (min-width: 1100px) {
	#rmh-landing .rmh-lg__list[data-limited] > .rmh-lg-card:nth-child(3 of .rmh-lg-card) { order: 0; }
	#rmh-landing :is(.rmh-lg--n2, .rmh-lg--n4) .rmh-lg__list[data-limited] > .rmh-lg-card:nth-child(3 of .rmh-lg-card) { order: 2; }
}

/* ---------- The contact line ---------- */
#rmh-landing .rmh-lg-ask {
	grid-column: 1 / -1; display: grid; gap: 8px; padding: 28px 24px; border-radius: 12px; background: var(--l-shell);
}
#rmh-landing .rmh-lg-ask__title { font: 400 clamp(24px, 18px + 1vw, 32px)/1.15 var(--l-serif); color: var(--l-ink); }
#rmh-landing .rmh-lg-ask__line { font-size: 16px; color: var(--l-ink-soft); max-width: 52ch; }
#rmh-landing .rmh-lg-ask__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; margin-top: 10px; }
@media (min-width: 900px) {
	#rmh-landing .rmh-lg-ask { grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 48px; padding: 36px 44px; }
	#rmh-landing .rmh-lg-ask__actions { grid-column: 2; grid-row: 1 / span 2; margin-top: 0; }
}

/* ---------- Show more, empty ---------- */
#rmh-landing .rmh-lg__more-wrap { margin-top: 48px; text-align: center; }
@media (min-width: 768px) { #rmh-landing .rmh-lg__list[data-limited] ~ .rmh-lg__more-wrap--phone { display: none; } }
#rmh-landing .rmh-lg-empty { padding: 48px 0; text-align: center; }
#rmh-landing .rmh-lg-empty__title { font: 400 clamp(26px, 18px + 1.2vw, 36px)/1.15 var(--l-serif); color: var(--l-ink); }
#rmh-landing .rmh-lg-empty__line { margin: 12px auto 0; max-width: 46ch; color: var(--l-ink-soft); }
#rmh-landing .rmh-lg-empty__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 24px; }

@media (prefers-reduced-motion: reduce) {
	#rmh-landing .rmh-lg-card__img, #rmh-landing .rmh-lg-bar__toggle::after { transition: none; }
	#rmh-landing .rmh-lg-card:hover .rmh-lg-card__img { transform: none; }
}

/* A hacienda's one line, between its name and its facts (design walk 10-16: the four cards read as copies) */
#rmh-landing .rmh-lg-card__line { margin-top: 6px; font-size: 16px; line-height: 1.45; color: var(--l-ink); }
#rmh-landing .rmh-lg--n1 .rmh-lg-card__line { font-size: 18px; }