/* LHR redesign — destinations (see research/notes/redesign-2026-07-contract.md)
 *
 * Scope: destinations landing (page-templates/template-destinations.php) and
 * the sym_destination term archive (taxonomy-sym_destination.php).
 * Shared primitives (.lhr-btn, .lhr-eyebrow, .lhr-container, …) live in
 * base.css; every rule here is page-scoped, with token fallbacks so the page
 * reads correctly even before/without base.css in the cascade.
 */

/* ---- Page-scoped token fallbacks ---------------------------------------- */

.lhr-dest-landing,
.lhr-dest-hero,
.lhr-dest-archive {
	--lhrd-serif: "Playfair Display", "PT Serif", Georgia, serif;
	--lhrd-sans: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
}

/* Belt-and-braces: the landing must never scroll sideways. `clip` (not
   `hidden`) so the main never becomes a scroll container — it only severs
   any future stray box from the document's scrollable overflow. */
.lhr-dest-landing {
	overflow-x: clip;
}

/* Container fallback (matches the base.css contract: 1280px / 40px gutters). */
.lhr-dest-landing .lhr-container,
.lhr-dest-hero .lhr-container,
.lhr-container.lhr-dest-archive,
.lhr-container.lhr-dest-filterwrap,
.lhr-container.lhr-dest-row-clip {
	width: 100%;
	max-width: 1280px;
	margin-inline: auto;
	padding-inline: 40px;
}

/* Landing closes with its own light band — belt-and-braces hide of the legacy
   dark Blackbook band until the chrome filter seam is wired everywhere. */
.lhr-redesign.page-template-template-destinations .m-blackbook {
	display: none;
}

/* Landing renders no legacy page header/title. */
.lhr-redesign.page-template-template-destinations .m-page-header {
	display: none;
}

/* ---- Small-caps + button fallbacks (contract token values) --------------- */

.lhr-dest-landing .lhr-eyebrow,
.lhr-dest-archive .lhr-eyebrow {
	display: block;
	margin: 0;
	font-family: var(--lhrd-sans);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--lhr-ink, #22201c);
}

.lhr-dest-landing .lhr-eyebrow--gold {
	color: var(--lhr-gold, #a9885a);
}

.lhr-dest-landing .lhr-label,
.lhr-dest-archive .lhr-label {
	display: block;
	margin: 0 0 8px;
	font-family: var(--lhrd-sans);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--lhr-ink-faint, #98917f);
}

.lhr-dest-landing .lhr-btn,
.lhr-dest-archive .lhr-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	border: 0;
	border-radius: 0;
	cursor: pointer;
	text-decoration: none;
	font-family: var(--lhrd-sans);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	transition: background-color 0.25s ease, color 0.25s ease;
}

.lhr-dest-landing .lhr-btn--gold {
	background: var(--lhr-gold, #a9885a);
	color: #fff;
	padding: 16px 28px;
}

.lhr-dest-landing .lhr-btn--gold:hover {
	background: var(--lhr-gold-deep, #8d6f44);
	color: #fff;
}

.lhr-dest-landing .lhr-btn--dark {
	background: var(--lhr-dark, #191713);
	color: #fff;
	padding: 16px 28px;
}

.lhr-dest-landing .lhr-btn--dark:hover {
	background: var(--lhr-gold-deep, #8d6f44);
	color: #fff;
}

.lhr-dest-landing .lhr-btn--text,
.lhr-dest-archive .lhr-btn--text {
	background: transparent;
	padding: 0;
	color: var(--lhr-ink, #22201c);
}

.lhr-dest-landing .lhr-btn--text:hover,
.lhr-dest-archive .lhr-btn--text:hover {
	color: var(--lhr-gold, #a9885a);
}

.lhr-dest-landing :focus-visible,
.lhr-dest-archive :focus-visible,
.lhr-dest-hero :focus-visible {
	outline: 2px solid var(--lhr-gold-soft, #cbb48d);
	outline-offset: 2px;
}

/* Section rhythm — contract: ~96px between sections. base.css .lhr-section
   also carries padding-block calc(var(--lhr-section)/2) (~48px each side),
   which stacked with these margins into ~184px dead gaps; zero the padding
   here so the single 96px margin is the whole story. */
.lhr-dest-landing .lhr-section {
	margin-block: 96px 0;
	padding-block: 0;
}

.lhr-dest-landing .lhr-dest-popular {
	margin-top: 72px;
}

.lhr-dest-landing .lhr-dest-newsband {
	margin-bottom: 96px;
}

.lhr-dest-landing .lhr-section-head,
.lhr-dest-archive .lhr-section-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 24px;
	margin: 0 0 28px;
}

/* ====================================================================== */
/* Hero (landing + term archive)                                          */
/* ====================================================================== */

.lhr-dest-hero {
	position: relative;
	display: flex;
	align-items: center;
	overflow: hidden;
	background: var(--lhr-dark, #191713);
	min-height: clamp(440px, 46vw, 600px);
}

.lhr-dest-hero--term {
	min-height: clamp(340px, 34vw, 460px);
}

/* Paint order mirrors the review hero (the pattern proven to first-paint
   reliably in Chromium): hero bg → img → scrim in plain DOM order with NO
   z-index and NO isolation on the media layers — z-indexed/isolated variants
   of this hero skipped the image's first paint until a style invalidation.
   Only the content lifts above, on a positive z. Never use negative z here:
   without a stacking context it would bury the image behind the hero bg. */
.lhr-dest-hero__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Bias the letterbox crop toward the upper image band — skylines and
	   horizons live there; dead center often lands on foreground furniture. */
	object-position: 50% 32%;
}

.lhr-dest-hero__scrim {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		linear-gradient(180deg, rgba(15, 13, 10, 0.3) 0%, rgba(15, 13, 10, 0) 30%, rgba(15, 13, 10, 0.5) 100%),
		linear-gradient(90deg, rgba(15, 13, 10, 0.66) 0%, rgba(15, 13, 10, 0.34) 46%, rgba(15, 13, 10, 0.04) 82%);
}

.lhr-dest-hero__inner {
	position: relative;
	z-index: 2;
	padding-block: 72px 120px;
}

.lhr-dest-hero--term .lhr-dest-hero__inner {
	padding-block: 64px 56px;
}

.lhr-dest-hero__eyebrow {
	margin: 0 0 20px;
	letter-spacing: 0.3em;
}

.lhr-dest-hero__title {
	margin: 0;
	font-family: var(--lhrd-serif);
	font-weight: 400;
	font-size: clamp(40px, 5vw, 64px);
	line-height: 1.08;
	letter-spacing: -0.01em;
	color: #fff;
	max-width: 14em;
}

.lhr-dest-hero--term .lhr-dest-hero__title {
	font-size: clamp(34px, 4.2vw, 54px);
}

.lhr-dest-hero__sub {
	margin: 22px 0 0;
	max-width: 470px;
	font-family: var(--lhrd-sans);
	font-size: 15px;
	line-height: 1.75;
	color: rgba(255, 255, 255, 0.85);
}

.lhr-dest-hero--term .lhr-dest-hero__sub {
	max-width: 640px;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.lhr-dest-hero__crumb {
	margin: 0 0 22px;
	font-family: var(--lhrd-sans);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.7);
}

.lhr-dest-hero__crumb a {
	color: rgba(255, 255, 255, 0.7);
	text-decoration: none;
	transition: color 0.2s ease;
}

.lhr-dest-hero__crumb a:hover {
	color: var(--lhr-gold-soft, #cbb48d);
}

.lhr-dest-hero__crumb-sep {
	margin-inline: 8px;
	color: rgba(255, 255, 255, 0.45);
}

.lhr-dest-hero__crumb [aria-current="page"] {
	color: #fff;
}

/* ====================================================================== */
/* Overlapping filter bar (landing)                                       */
/* ====================================================================== */

.lhr-dest-filterwrap {
	position: relative;
	z-index: 5;
	margin-top: -64px;
}

.lhr-filterbar {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr)) auto;
	gap: 20px;
	align-items: end;
	background: var(--lhr-card, #fff);
	border: 1px solid var(--lhr-hairline, #e5dfd2);
	box-shadow: var(--lhr-shadow, 0 18px 50px rgba(34, 32, 28, 0.1));
	padding: 24px 28px;
}

.lhr-filterbar .lhr-select {
	width: 100%;
	height: 46px;
	padding: 0 34px 0 14px;
	border: 1px solid var(--lhr-hairline, #e5dfd2);
	border-radius: 0;
	background-color: #fff;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%236E675C' stroke-width='1.4'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	appearance: none;
	-webkit-appearance: none;
	font-family: var(--lhrd-sans);
	font-size: 14px;
	color: var(--lhr-ink, #22201c);
	cursor: pointer;
	transition: border-color 0.2s ease;
}

.lhr-filterbar .lhr-select:hover {
	border-color: var(--lhr-gold-soft, #cbb48d);
}

.lhr-filterbar__field--season .lhr-select {
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236E675C' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 2v4M16 2v4'/%3E%3Crect width='18' height='18' x='3' y='4'/%3E%3Cpath d='M3 10h18'/%3E%3C/svg%3E");
	background-position: right 12px center;
}

.lhr-filterbar__actions {
	display: flex;
	align-items: center;
	gap: 18px;
	padding-bottom: 1px;
}

.lhr-filterbar__submit {
	white-space: nowrap;
	padding: 15px 22px;
}

.lhr-filterbar__reset {
	border: 0;
	background: transparent;
	padding: 0;
	cursor: pointer;
	font-family: var(--lhrd-sans);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--lhr-ink-faint, #98917f);
	transition: color 0.2s ease;
}

.lhr-filterbar__reset:hover {
	color: var(--lhr-ink, #22201c);
}

/* ====================================================================== */
/* Popular destinations — scrollable card row                             */
/* ====================================================================== */

/* Full-bleed scroller (QA 2026-07: the row used to cut the 4th card dead at
   the container edge with no affordance). The clip wrapper spans the whole
   viewport; the row's own left padding re-creates the container's content
   origin — `50% - 600px` of a full-width box == (viewport - 1280px)/2 + 40px
   gutter, exactly where the 1280px container's content starts. Percentages,
   not vw, so scrollbar width can never reintroduce sideways overflow. Cards
   now run under the viewport's right edge (partial-card peek) beneath a
   cream fade. */
.lhr-dest-landing .lhr-container.lhr-dest-row-clip {
	position: relative;
	max-width: none;
	padding-inline: 0;
}

/* Right cream fade over the bleeding cards — pointer-events: none, so wheel
   and drag pass straight through to the row / page. Stops above the 10px
   scrollbar lane so the thin scrollbar stays visible as a second affordance. */
.lhr-dest-row-clip::after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 10px;
	width: 88px;
	pointer-events: none;
	background: linear-gradient(90deg, rgba(247, 244, 238, 0) 0%, var(--lhr-cream, #f7f4ee) 92%);
}

/* NO scroll-snap here: Chromium consumes vertical wheel events over an
   x-axis snap container instead of chaining them to the page, freezing page
   scroll while the cursor is over the row. Plain overflow-x keeps horizontal
   scrolling on trackpad/drag/scrollbar while vertical wheel scrolls the page. */
.lhr-dest-row {
	list-style: none;
	margin: 0;
	padding: 0 48px 10px max(40px, calc(50% - 600px));
	display: flex;
	gap: 24px;
	overflow-x: auto;
	scrollbar-width: thin;
	scrollbar-color: var(--lhr-hairline, #e5dfd2) transparent;
}

.lhr-dest-row__item {
	flex: 0 0 clamp(240px, 21vw, 292px);
	display: flex;
}

.lhr-dest-card {
	display: flex;
	flex-direction: column;
	width: 100%;
	background: var(--lhr-card, #fff);
	border: 1px solid var(--lhr-hairline, #e5dfd2);
}

.lhr-dest-card__media {
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
}

.lhr-dest-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.lhr-dest-card__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 18px 20px 20px;
}

.lhr-dest-card__cat {
	margin: 0 0 10px;
	font-family: var(--lhrd-sans);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--lhr-gold, #a9885a);
}

.lhr-dest-card__name {
	margin: 0;
	font-family: var(--lhrd-serif);
	font-weight: 500;
	font-size: 22px;
	line-height: 1.2;
	letter-spacing: 0;
}

.lhr-dest-card__name a {
	color: var(--lhr-ink, #22201c);
	text-decoration: none;
	transition: color 0.2s ease;
}

.lhr-dest-card__name a:hover {
	color: var(--lhr-gold, #a9885a);
}

.lhr-dest-card__desc {
	margin: 10px 0 0;
	font-family: var(--lhrd-sans);
	font-size: 13.5px;
	line-height: 1.6;
	color: var(--lhr-ink-soft, #6e675c);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.lhr-dest-card__count {
	margin: 0;
	margin-top: auto;
	padding-top: 16px;
	font-family: var(--lhrd-sans);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--lhr-ink-faint, #98917f);
}

/* ====================================================================== */
/* Featured collections                                                   */
/* ====================================================================== */

.lhr-collection-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
}

.lhr-collection-card {
	position: relative;
	display: block;
	overflow: hidden;
	aspect-ratio: 16 / 7;
	background: var(--lhr-dark, #191713);
	text-decoration: none;
}

/* Same DOM-order paint as the hero (see note there): img → scrim un-indexed,
   only the body lifts on a positive z. */
.lhr-collection-card img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.lhr-collection-card__scrim {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		linear-gradient(180deg, rgba(15, 13, 10, 0) 26%, rgba(15, 13, 10, 0.42) 60%, rgba(15, 13, 10, 0.86) 100%),
		linear-gradient(90deg, rgba(15, 13, 10, 0.26) 0%, rgba(15, 13, 10, 0) 55%);
}

.lhr-collection-card__body {
	position: absolute;
	left: 26px;
	right: 26px;
	bottom: 22px;
	z-index: 2;
	display: flex;
	flex-direction: column;
}

.lhr-collection-card__title {
	font-family: var(--lhrd-serif, "Playfair Display", Georgia, serif);
	font-weight: 400;
	font-size: 25px;
	line-height: 1.15;
	color: #fff;
}

.lhr-collection-card__sub {
	margin-top: 7px;
	font-family: var(--lhrd-sans, "Hanken Grotesk", Arial, sans-serif);
	font-size: 13px;
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.85);
	max-width: 34ch;
}

.lhr-collection-card__cta {
	margin-top: 15px;
	font-family: var(--lhrd-sans, "Hanken Grotesk", Arial, sans-serif);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: #fff;
	transition: color 0.2s ease;
}

.lhr-collection-card:hover .lhr-collection-card__cta {
	color: var(--lhr-gold-soft, #cbb48d);
}

/* archive.css (loads AFTER this file) re-declares unscoped
   .lhr-collection-card__* rules for /experiences/ — including a ::after
   arrow that doubled up with this template's inline arrow, a weaker
   scrim, aspect-ratio 16/9 (and 4/3 under 768px — QA 2026-07: that's what
   turned these banners into giant near-square slabs at 1024/768), and its
   own body geometry/type sizes. Re-assert this page's whole card system at
   .lhr-dest-landing scope (0,2,0) so the later file cannot override it. */
.lhr-dest-landing .lhr-collection-card {
	aspect-ratio: 16 / 7;
}

.lhr-dest-landing .lhr-collection-card img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
}

.lhr-dest-landing .lhr-collection-card__scrim {
	z-index: 1;
	background:
		linear-gradient(180deg, rgba(15, 13, 10, 0) 26%, rgba(15, 13, 10, 0.42) 60%, rgba(15, 13, 10, 0.86) 100%),
		linear-gradient(90deg, rgba(15, 13, 10, 0.26) 0%, rgba(15, 13, 10, 0) 55%);
}

.lhr-dest-landing .lhr-collection-card__body {
	position: absolute;
	top: auto;
	left: 26px;
	right: 26px;
	bottom: 22px;
	z-index: 2;
	gap: 0;
	padding: 0;
}

.lhr-dest-landing .lhr-collection-card__title {
	font-size: 25px;
	font-weight: 400;
	letter-spacing: 0;
}

.lhr-dest-landing .lhr-collection-card__sub {
	margin-top: 7px;
	font-size: 13px;
	max-width: 34ch;
}

.lhr-dest-landing .lhr-collection-card__cta {
	margin-top: 15px;
	font-size: 10px;
	letter-spacing: 0.18em;
}

/* One arrow only — the template renders the inline `→` span (the
   .lhr-btn--text convention used across this page's section heads). */
.lhr-dest-landing .lhr-collection-card__cta::after {
	content: none;
}

/* ====================================================================== */
/* Featured hotel brands — typographic wordmark strip                     */
/* ====================================================================== */

.lhr-brand-strip {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(8, minmax(0, 1fr));
	gap: 1px;
	background: var(--lhr-hairline, #e5dfd2);
	border: 1px solid var(--lhr-hairline, #e5dfd2);
}

.lhr-brand-strip__cell {
	display: flex;
	background: var(--lhr-card, #fff);
}

.lhr-wordmark {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 92px;
	padding: 18px 10px;
	text-align: center;
	text-decoration: none;
	font-family: var(--lhrd-serif, "Playfair Display", Georgia, serif);
	font-weight: 400;
	font-size: 15px;
	line-height: 1.5;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: rgba(34, 32, 28, 0.7);
	transition: color 0.25s ease;
}

.lhr-wordmark--alt {
	font-family: var(--lhrd-sans, "Hanken Grotesk", Arial, sans-serif);
	font-weight: 600;
	font-size: 11px;
	letter-spacing: 0.3em;
}

.lhr-wordmark:hover {
	color: var(--lhr-gold, #a9885a);
}

/* ====================================================================== */
/* Light newsletter band (landing)                                        */
/* ====================================================================== */

.lhr-newsband {
	display: flex;
	align-items: center;
	gap: 36px;
	background: var(--lhr-card, #fff);
	border: 1px solid var(--lhr-hairline, #e5dfd2);
	padding: 22px 32px 22px 22px;
}

.lhr-newsband__media {
	flex: 0 0 250px;
	aspect-ratio: 16 / 10;
	overflow: hidden;
}

.lhr-newsband__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.lhr-newsband__copy {
	flex: 1 1 auto;
	min-width: 0;
}

.lhr-newsband__title {
	margin: 0;
	font-family: var(--lhrd-serif, "Playfair Display", Georgia, serif);
	font-weight: 500;
	font-size: clamp(20px, 2vw, 25px);
	line-height: 1.25;
	color: var(--lhr-ink, #22201c);
}

.lhr-newsband__sub {
	margin: 8px 0 0;
	font-family: var(--lhrd-sans, "Hanken Grotesk", Arial, sans-serif);
	font-size: 13.5px;
	line-height: 1.6;
	color: var(--lhr-ink-soft, #6e675c);
}

/* Flex row with a gap: input flexes, button keeps its natural width, so the
   gold button can never overlap the input's right edge. Stacks at mobile. */
.lhr-newsband__form {
	display: flex;
	flex: 0 0 auto;
	align-items: stretch;
	gap: 12px;
	min-width: 0;
}

/* Two class levels, not one (QA 2026-07): legacy style.css and
   editorial-overhaul.css style `input[type='email']` at (0,1,1) —
   underline-only border, transparent bg, width:100%, height 50, 16px text,
   2px inline padding — which out-ranked the old single-class rule and left
   this field as a bare hairline underline with a clipped placeholder
   ("Enter your email addres"). Every property the legacy rules touch is
   re-asserted here at (0,2,0): boxed hairline field, 300px wide, 14px text
   with 16px padding, so the full placeholder fits. */
.lhr-newsband .lhr-newsband__input {
	flex: 1 1 auto;
	height: 52px;
	width: 300px;
	min-width: 0;
	border: 1px solid var(--lhr-hairline, #e5dfd2);
	border-radius: 0;
	background: #fff;
	padding: 0 16px;
	font-family: var(--lhrd-sans, "Hanken Grotesk", Arial, sans-serif);
	font-size: 14px;
	color: var(--lhr-ink, #22201c);
}

.lhr-newsband .lhr-newsband__input::placeholder {
	color: var(--lhr-ink-faint, #98917f);
}

.lhr-newsband__submit {
	flex: 0 0 auto;
	white-space: nowrap;
}

/* Honeypot. ROOT CAUSE of the page-wide horizontal overflow (QA 2026-07):
   legacy style.css `input[type='text']` is (0,1,1) and set width:100% /
   height:50px over the old single-class .lhr-hp (0,1,0). Because the field
   is position:absolute with left:auto and NO positioned ancestor, it kept
   its static position (the newsletter form's x-offset) and then spanned a
   full containing-block width to the RIGHT of it — an invisible (clipped
   paint, but real layout) box reaching form-x + 100vw, which widened
   document scrollWidth at every viewport (form-x 911px → 2351px @1440;
   62px → 1086/830 @1024/768; 40px → 430 @390). Two class levels out-rank
   the legacy attribute selector, and pinning it off-canvas LEFT means no
   future width override can ever extend rightward scroll again. */
.lhr-newsband__form .lhr-hp {
	position: absolute !important;
	left: -9999px !important;
	top: auto !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	border: 0;
	padding: 0;
	margin: 0;
}

/* ====================================================================== */
/* Term archive — chips, filters, card grid                               */
/* ====================================================================== */

.lhr-container.lhr-dest-archive {
	padding-top: 48px;
	padding-bottom: 96px;
}

/* Child-destination chips. */
.lhr-dest-chips {
	margin: 0 0 40px;
}

.lhr-dest-chips__label {
	display: block;
	margin: 0 0 14px;
	font-family: var(--lhrd-sans);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--lhr-ink-faint, #98917f);
}

.lhr-dest-chips__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.lhr-dest-chips__chip {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 11px 18px;
	background: var(--lhr-card, #fff);
	border: 1px solid var(--lhr-hairline, #e5dfd2);
	text-decoration: none;
	font-family: var(--lhrd-sans);
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--lhr-ink, #22201c);
	transition: border-color 0.2s ease, color 0.2s ease;
}

.lhr-dest-chips__chip:hover {
	border-color: var(--lhr-gold, #a9885a);
	color: var(--lhr-gold-deep, #8d6f44);
}

.lhr-dest-chips__count {
	color: var(--lhr-gold, #a9885a);
}

/* -- Legacy finder filters, re-dressed ------------------------------------ */

.lhr-redesign.tax-sym_destination .m-filters {
	margin: 0 0 36px;
}

.lhr-redesign.tax-sym_destination .m-filters__toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px;
	background: var(--lhr-card, #fff);
	border: 1px solid var(--lhr-hairline, #e5dfd2);
	border-radius: 0;
	box-shadow: none;
	padding: 18px 22px;
}

.lhr-redesign.tax-sym_destination .m-filters__found {
	margin: 0;
	font-family: "Hanken Grotesk", Arial, sans-serif;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--lhr-ink-faint, #98917f);
}

.lhr-redesign.tax-sym_destination .m-filters__found strong {
	color: var(--lhr-ink, #22201c);
	font-weight: 700;
}

.lhr-redesign.tax-sym_destination .m-filters__field--search input[type="search"] {
	height: 44px;
	min-width: 220px;
	border: 1px solid var(--lhr-hairline, #e5dfd2);
	border-radius: 0;
	background: #fff;
	padding: 0 14px;
	font-family: "Hanken Grotesk", Arial, sans-serif;
	font-size: 13.5px;
	color: var(--lhr-ink, #22201c);
	box-shadow: none;
}

.lhr-redesign.tax-sym_destination .m-filters__field--search input[type="search"]::placeholder {
	color: var(--lhr-ink-faint, #98917f);
}

.lhr-redesign.tax-sym_destination .m-filters__pill {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 13px 16px;
	border: 1px solid var(--lhr-hairline, #e5dfd2);
	border-radius: 0;
	background: #fff;
	box-shadow: none;
	cursor: pointer;
	font-family: "Hanken Grotesk", Arial, sans-serif;
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--lhr-ink, #22201c);
	transition: border-color 0.2s ease;
}

.lhr-redesign.tax-sym_destination .m-filters__pill:hover {
	border-color: var(--lhr-gold-soft, #cbb48d);
}

.lhr-redesign.tax-sym_destination .m-filters__group[open] > .m-filters__pill {
	border-color: var(--lhr-gold, #a9885a);
}

.lhr-redesign.tax-sym_destination .m-filters__panel {
	border: 1px solid var(--lhr-hairline, #e5dfd2);
	border-radius: 0;
	background: #fff;
	box-shadow: 0 18px 50px rgba(34, 32, 28, 0.1);
	padding: 18px;
}

.lhr-redesign.tax-sym_destination .m-facet__option {
	font-family: "Hanken Grotesk", Arial, sans-serif;
	font-size: 13.5px;
	color: var(--lhr-ink-soft, #6e675c);
}

.lhr-redesign.tax-sym_destination .m-facet__option input[type="radio"],
.lhr-redesign.tax-sym_destination .m-facet__option input[type="checkbox"] {
	accent-color: var(--lhr-gold, #a9885a);
}

.lhr-redesign.tax-sym_destination .m-facet__count {
	color: var(--lhr-ink-faint, #98917f);
	font-size: 12px;
}

.lhr-redesign.tax-sym_destination .m-filters__sort {
	height: 44px;
	border: 1px solid var(--lhr-hairline, #e5dfd2);
	border-radius: 0;
	background-color: #fff;
	padding: 0 32px 0 14px;
	font-family: "Hanken Grotesk", Arial, sans-serif;
	font-size: 13px;
	color: var(--lhr-ink, #22201c);
}

.lhr-redesign.tax-sym_destination .m-filters__apply,
.lhr-redesign.tax-sym_destination .m-btn.m-filters__apply {
	border: 0;
	border-radius: 0;
	background: var(--lhr-dark, #191713);
	color: #fff;
	padding: 15px 22px;
	font-family: "Hanken Grotesk", Arial, sans-serif;
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color 0.25s ease;
}

.lhr-redesign.tax-sym_destination .m-filters__apply:hover {
	background: var(--lhr-gold-deep, #8d6f44);
}

.lhr-redesign.tax-sym_destination .m-filters__toggle {
	border-radius: 0;
	font-family: "Hanken Grotesk", Arial, sans-serif;
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	border: 1px solid var(--lhr-hairline, #e5dfd2);
	background: #fff;
	color: var(--lhr-ink, #22201c);
}

/* -- Hotel cards → Latest Reviews pattern ---------------------------------- */

.lhr-redesign.tax-sym_destination .sym-hotel-card {
	display: flex;
	flex-direction: column;
	background: var(--lhr-card, #fff);
	border: 1px solid var(--lhr-hairline, #e5dfd2);
	border-radius: 0;
	overflow: hidden;
	box-shadow: none;
}

.lhr-redesign.tax-sym_destination .m-card__media {
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: 0;
}

.lhr-redesign.tax-sym_destination .m-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 0;
}

.lhr-redesign.tax-sym_destination .m-card__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 20px 20px 22px;
}

.lhr-redesign.tax-sym_destination .m-card__eyebrow {
	order: -1;
	margin: 0 0 10px;
	font-family: "Hanken Grotesk", Arial, sans-serif;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--lhr-gold, #a9885a);
}

.lhr-redesign.tax-sym_destination .m-card__title {
	margin: 0;
	font-family: "Playfair Display", Georgia, serif;
	font-weight: 500;
	font-size: 21px;
	line-height: 1.25;
	letter-spacing: 0;
}

.lhr-redesign.tax-sym_destination .m-card__title a {
	color: var(--lhr-ink, #22201c);
	text-decoration: none;
	transition: color 0.2s ease;
}

.lhr-redesign.tax-sym_destination .m-card__title a:hover {
	color: var(--lhr-gold, #a9885a);
}

.lhr-redesign.tax-sym_destination .m-card__badge {
	display: inline-block;
	margin-left: 8px;
	padding: 3px 8px;
	border: 1px solid var(--lhr-gold-soft, #cbb48d);
	border-radius: 0;
	background: transparent;
	font-family: "Hanken Grotesk", Arial, sans-serif;
	font-size: 9px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--lhr-gold, #a9885a);
	vertical-align: middle;
}

.lhr-redesign.tax-sym_destination .m-card__excerpt {
	margin: 9px 0 0;
	font-family: "Hanken Grotesk", Arial, sans-serif;
	font-size: 13.5px;
	line-height: 1.6;
	color: var(--lhr-ink-soft, #6e675c);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.lhr-redesign.tax-sym_destination .m-card__meta {
	margin-top: auto;
	padding-top: 16px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	border-top: 1px solid var(--lhr-hairline, #e5dfd2);
	font-family: "Hanken Grotesk", Arial, sans-serif;
	font-size: 12px;
	color: var(--lhr-ink-soft, #6e675c);
}

.lhr-redesign.tax-sym_destination .m-card__price {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--lhr-ink-faint, #98917f);
}

/* Legacy style.css gives .m-results padding-top 64px (48px in
   editorial-overhaul) which stacked onto .m-filters' 36px margin into a
   ~100px dead band between the facet card and the first card row (QA
   2026-07 @768/390). One consistent 36px gap, owned by the filters. */
.lhr-redesign.tax-sym_destination .m-results {
	padding-top: 0;
}

/* Results grid. */
.lhr-redesign.tax-sym_destination .m-results__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 28px;
}

.lhr-redesign.tax-sym_destination .m-results__empty {
	grid-column: 1 / -1;
	padding: 72px 24px;
	text-align: center;
	background: var(--lhr-card, #fff);
	border: 1px solid var(--lhr-hairline, #e5dfd2);
}

.lhr-redesign.tax-sym_destination .m-results__empty-title {
	font-family: "Playfair Display", Georgia, serif;
	font-weight: 500;
	font-size: 24px;
	color: var(--lhr-ink, #22201c);
	margin: 0 0 10px;
}

.lhr-redesign.tax-sym_destination .m-results__empty-text {
	font-family: "Hanken Grotesk", Arial, sans-serif;
	font-size: 14px;
	color: var(--lhr-ink-soft, #6e675c);
	margin: 0 0 22px;
}

/* Pagination + load-more. */
.lhr-redesign.tax-sym_destination .m-pagination {
	margin-top: 48px;
}

.lhr-redesign.tax-sym_destination .m-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 42px;
	height: 42px;
	padding: 0 12px;
	margin: 0 3px;
	border: 1px solid var(--lhr-hairline, #e5dfd2);
	border-radius: 0;
	background: #fff;
	text-decoration: none;
	font-family: "Hanken Grotesk", Arial, sans-serif;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--lhr-ink, #22201c);
	transition: border-color 0.2s ease, color 0.2s ease;
}

.lhr-redesign.tax-sym_destination .m-pagination .page-numbers:hover {
	border-color: var(--lhr-gold, #a9885a);
	color: var(--lhr-gold-deep, #8d6f44);
}

.lhr-redesign.tax-sym_destination .m-pagination .page-numbers.current {
	background: var(--lhr-dark, #191713);
	border-color: var(--lhr-dark, #191713);
	color: #fff;
}

.lhr-redesign.tax-sym_destination .m-loadmore,
.lhr-redesign.tax-sym_destination .m-btn.m-loadmore {
	border: 1px solid var(--lhr-ink, #22201c);
	border-radius: 0;
	background: transparent;
	color: var(--lhr-ink, #22201c);
	padding: 15px 26px;
	font-family: "Hanken Grotesk", Arial, sans-serif;
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color 0.25s ease, color 0.25s ease;
}

.lhr-redesign.tax-sym_destination .m-loadmore:hover {
	background: var(--lhr-dark, #191713);
	color: #fff;
}

/* If any legacy intro box sneaks onto this archive, keep it on-language. */
.lhr-redesign.tax-sym_destination .m-term-intro {
	border: 1px solid var(--lhr-hairline, #e5dfd2);
	background: var(--lhr-card, #fff);
	border-radius: 0;
}

/* ====================================================================== */
/* Motion                                                                 */
/* ====================================================================== */

@media (prefers-reduced-motion: no-preference) {
	.lhr-dest-card__media img,
	.lhr-collection-card img,
	.lhr-redesign.tax-sym_destination .m-card__media img {
		transition: transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
	}

	.lhr-dest-card:hover .lhr-dest-card__media img,
	.lhr-collection-card:hover img,
	.lhr-redesign.tax-sym_destination .sym-hotel-card:hover .m-card__media img {
		transform: scale(1.04);
	}
}

/* ====================================================================== */
/* Responsive                                                             */
/* ====================================================================== */

@media (max-width: 1200px) {
	.lhr-filterbar {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.lhr-filterbar__actions {
		grid-column: 1 / -1;
		justify-content: flex-end;
	}

	.lhr-brand-strip {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.lhr-newsband {
		flex-wrap: wrap;
	}

	.lhr-newsband__form {
		flex: 1 1 100%;
	}

	.lhr-newsband .lhr-newsband__input {
		width: auto;
	}
}

@media (max-width: 1024px) {
	.lhr-collection-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.lhr-redesign.tax-sym_destination .m-results__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 760px) {
	.lhr-dest-landing .lhr-container,
	.lhr-dest-hero .lhr-container,
	.lhr-container.lhr-dest-archive,
	.lhr-container.lhr-dest-filterwrap,
	.lhr-container.lhr-dest-row-clip {
		padding-inline: 20px;
	}

	.lhr-dest-landing .lhr-section {
		margin-block: 64px 0;
	}

	.lhr-dest-landing .lhr-dest-newsband {
		margin-bottom: 72px;
	}

	.lhr-filterbar {
		grid-template-columns: minmax(0, 1fr);
		gap: 16px;
		padding: 20px;
	}

	.lhr-filterbar__actions {
		justify-content: space-between;
	}

	.lhr-filterbar__submit {
		flex: 1 1 auto;
	}

	.lhr-dest-hero__inner {
		padding-block: 56px 104px;
	}

	/* Deeper bottom padding so the (3-line-clamped) dek keeps clear air
	   between itself and the hero's bottom edge / the card block below —
	   the term-page analogue of the brand-hub dek-clearance fix. */
	.lhr-dest-hero--term .lhr-dest-hero__inner {
		padding-block: 48px 56px;
	}

	.lhr-dest-hero__sub {
		font-size: 14px;
	}

	.lhr-dest-landing .lhr-section-head,
	.lhr-dest-archive .lhr-section-head {
		flex-wrap: wrap;
		gap: 12px;
	}

	/* Row keeps its full-bleed right edge at mobile: 20px content inset on
	   the left (matching the tightened gutter), fade + peek on the right. */
	.lhr-dest-row {
		padding: 0 32px 10px 20px;
	}

	.lhr-dest-row-clip::after {
		width: 56px;
	}

	.lhr-dest-row__item {
		flex-basis: min(78vw, 300px);
	}

	/* 16/9 at phone widths (16/7 gets too shallow for the serif overlay). */
	.lhr-dest-landing .lhr-collection-card {
		aspect-ratio: 16 / 9;
	}

	.lhr-dest-landing .lhr-collection-card__body {
		left: 20px;
		right: 20px;
		bottom: 18px;
	}

	.lhr-brand-strip {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.lhr-wordmark {
		min-height: 76px;
	}

	.lhr-newsband {
		padding: 20px;
		gap: 22px;
	}

	.lhr-newsband__media {
		flex: 1 1 100%;
	}

	.lhr-newsband__form {
		flex-wrap: wrap;
	}

	.lhr-newsband .lhr-newsband__input {
		flex: 1 1 100%;
	}

	.lhr-newsband__submit {
		flex: 1 1 100%;
	}

	/* Chip row + facet rhythm at phone widths: one tightened gap system
	   (hero 40 → chips, chips 32 → facet card, card 28 → grid) instead of
	   the desktop 48/40/36 trio, and smaller chips so the row wraps into
	   compact lines. */
	.lhr-container.lhr-dest-archive {
		padding-top: 40px;
	}

	.lhr-dest-chips {
		margin: 0 0 32px;
	}

	.lhr-dest-chips__label {
		margin: 0 0 12px;
	}

	.lhr-dest-chips__list {
		gap: 8px;
	}

	.lhr-dest-chips__chip {
		padding: 9px 14px;
		gap: 8px;
	}

	.lhr-redesign.tax-sym_destination .m-filters {
		margin: 0 0 28px;
	}

	.lhr-redesign.tax-sym_destination .m-results__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 22px;
	}

	.lhr-redesign.tax-sym_destination .m-filters__toolbar {
		padding: 14px 16px;
		gap: 12px;
	}

	.lhr-redesign.tax-sym_destination .m-filters__field--search {
		flex: 1 1 100%;
	}

	.lhr-redesign.tax-sym_destination .m-filters__field--search input[type="search"] {
		min-width: 0;
		width: 100%;
	}

	.lhr-redesign.tax-sym_destination .m-filters__found {
		flex: 1 1 100%;
	}
}