/* ==========================================================================
   Travel Hub - Destination page                      (Redesign Phase 1D)
   Markup: taxonomy-thte_destination.php. Loaded on thte_destination only.
   Rhythm: hero -> L2 -> discover (L1) -> guide (L1, surface) -> FAQ (L1)
           -> more places (L2).
   ========================================================================== */

.th-dest { background: var(--th-color-canvas); }

/* --------------------------------------------------------------------------
   Hero - image with a reading gradient; content anchored to the grid's
   start edge and to the bottom of the frame, where the eye lands last.
   -------------------------------------------------------------------------- */
.th-dest-hero {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-block-size: 440px;
	overflow: hidden;
	background: var(--th-color-night);
	color: #fff;
	isolation: isolate;
}
@media (min-width: 768px) { .th-dest-hero { min-block-size: 480px; } }
@media (min-width: 1024px) { .th-dest-hero { min-block-size: min(560px, 42vw); } }

.th-dest-hero__image {
	position: absolute;
	inset: 0;
	z-index: -2;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	object-position: 50% 55%;
}
.th-dest-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(0deg, rgba(5, 28, 51, 0.88) 0%, rgba(5, 28, 51, 0.55) 45%, rgba(5, 28, 51, 0.12) 100%);
}
.th-dest-hero--plain { background: linear-gradient(160deg, #083F78 0%, #051C33 100%); }
.th-dest-hero--plain::after { display: none; }

.th-dest-hero__inner { padding-block: var(--th-section-sm) var(--th-space-9); }

.th-crumbs ol { display: flex; flex-wrap: wrap; gap: var(--th-space-2); margin: 0 0 var(--th-space-6); padding: 0; list-style: none; font-size: var(--th-fs-small); }
.th-crumbs li { display: inline-flex; align-items: center; gap: var(--th-space-2); color: rgba(255, 255, 255, 0.78); }
.th-crumbs li + li::before { content: "/"; opacity: 0.6; }
.th-crumbs a { display: inline-flex; align-items: center; min-block-size: 24px; color: #fff; text-decoration: none; }
.th-crumbs a:hover { text-decoration: underline; text-underline-offset: 3px; }
.th-crumbs a:focus-visible { outline: 2px solid #fff; outline-offset: 2px; border-radius: 2px; }

.th-dest-hero__kicker {
	margin: 0;
	color: var(--th-color-accent);
	font-size: var(--th-fs-micro);
	font-weight: var(--th-fw-heading);
	letter-spacing: var(--th-ls-eyebrow);
	text-transform: uppercase;
}
.th-dest-hero__title {
	margin: var(--th-gap-eyebrow) 0 0;
	color: #fff;
	font-size: var(--th-fs-display);
	font-weight: var(--th-fw-display);
	line-height: var(--th-lh-display);
	letter-spacing: var(--th-ls-display);
}
.th-dest-hero__lede {
	margin: var(--th-gap-title) 0 0;
	max-inline-size: var(--th-measure-lead);
	color: rgba(255, 255, 255, 0.9);
	font-size: var(--th-fs-lead);
	line-height: var(--th-lh-body);
}
.th-dest-hero__facts {
	display: flex;
	flex-wrap: wrap;
	gap: var(--th-space-2) var(--th-space-6);
	margin: var(--th-gap-lead) 0 0;
	padding: 0;
	list-style: none;
	font-size: var(--th-fs-small);
	font-weight: var(--th-fw-ui);
}
.th-dest-hero__facts li { display: inline-flex; align-items: center; gap: var(--th-space-2); }
.th-dest-hero__facts li::before {
	content: "";
	inline-size: 6px;
	block-size: 6px;
	border-radius: 50%;
	background: var(--th-color-accent);
}

/* --------------------------------------------------------------------------
   Discover: category navigation + grid
   -------------------------------------------------------------------------- */
.th-dest .th-head__eyebrow { color: var(--th-color-action); }
.th-dest .th-head__title { color: var(--th-color-ink); }

.th-filter { margin: calc(-1 * var(--th-space-2)) 0 var(--th-group); }
.th-filter__list {
	display: flex;
	gap: var(--th-space-2);
	margin: 0;
	padding: 0 0 var(--th-space-1);
	list-style: none;
	overflow-x: auto;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}
.th-filter__list::-webkit-scrollbar { display: none; }
@media (min-width: 768px) { .th-filter__list { flex-wrap: wrap; overflow: visible; } }

.th-filter__chip {
	display: inline-flex;
	align-items: center;
	gap: var(--th-space-2);
	min-block-size: 44px;
	padding-inline: var(--th-space-4);
	border: 1px solid var(--th-border-color-strong);
	border-radius: var(--th-radius-pill);
	background: var(--th-color-surface);
	color: var(--th-color-ink);
	font-size: var(--th-fs-small);
	font-weight: var(--th-fw-ui);
	text-decoration: none;
	white-space: nowrap;
	transition: border-color var(--th-dur) var(--th-ease), background-color var(--th-dur) var(--th-ease);
}
.th-filter__chip:hover { border-color: var(--th-color-ink); }
.th-filter__chip:focus-visible { outline: none; box-shadow: var(--th-focus-ring); }
.th-filter__chip[aria-current="page"] { border-color: var(--th-color-ink); background: var(--th-color-ink); color: #fff; }
.th-filter__count { color: var(--th-color-muted); font-size: var(--th-fs-micro); font-weight: var(--th-fw-heading); }
.th-filter__chip[aria-current="page"] .th-filter__count { color: rgba(255, 255, 255, 0.75); }

.th-pager {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--th-space-3);
	margin-block-start: var(--th-group);
}
.th-pager__list { display: flex; flex-wrap: wrap; gap: var(--th-space-1); margin: 0; padding: 0; list-style: none; }
.th-pager__page {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-inline-size: 44px;
	min-block-size: 44px;
	border-radius: var(--th-radius-pill);
	color: var(--th-color-ink);
	font-weight: var(--th-fw-ui);
	text-decoration: none;
}
.th-pager__page:hover { background: var(--th-color-subtle); }
.th-pager__page[aria-current="page"] { background: var(--th-color-ink); color: #fff; }
.th-pager__page:focus-visible { outline: none; box-shadow: var(--th-focus-ring); }

.th-dest-empty {
	max-inline-size: var(--th-measure-lead);
	padding: var(--th-space-7);
	border: var(--th-border);
	border-radius: var(--th-radius-card);
	background: var(--th-color-surface);
}
.th-dest-empty h3 { margin: 0; color: var(--th-color-ink); font-size: var(--th-fs-h3); }
.th-dest-empty p { margin: var(--th-gap-h3) 0 var(--th-space-6); color: var(--th-color-muted); }

/* --------------------------------------------------------------------------
   Good to know
   -------------------------------------------------------------------------- */
.th-dest-guide__list { margin: 0; padding: 0; list-style: none; }
.th-guide {
	padding: var(--th-space-6);
	border: var(--th-border);
	border-radius: var(--th-radius-card);
	background: var(--th-color-canvas);
}
.th-guide__title { margin: 0; color: var(--th-color-ink); font-size: var(--th-fs-h4); font-weight: var(--th-fw-heading); line-height: var(--th-lh-snug); }
.th-guide__body { margin: var(--th-gap-h3) 0 0; color: var(--th-color-muted); line-height: var(--th-lh-body); }

.th-dest-services {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--th-space-4) var(--th-space-6);
	margin-block-start: var(--th-group);
	padding-block-start: var(--th-space-7);
	border-block-start: var(--th-divider);
}
.th-dest-services__label { margin: 0; color: var(--th-color-ink); font-weight: var(--th-fw-heading); }

/* --------------------------------------------------------------------------
   FAQ - one reading column on the grid's start edge
   -------------------------------------------------------------------------- */
.th-faq { max-inline-size: var(--th-measure-overview); border-block-start: var(--th-divider); }
.th-faq__item { border-block-end: var(--th-divider); }
.th-faq__q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--th-space-4);
	min-block-size: 64px;
	padding-block: var(--th-space-4);
	color: var(--th-color-ink);
	font-size: var(--th-fs-h4);
	font-weight: var(--th-fw-heading);
	line-height: var(--th-lh-snug);
	list-style: none;
	cursor: pointer;
}
.th-faq__q::-webkit-details-marker { display: none; }
.th-faq__q::after {
	content: "";
	flex: 0 0 auto;
	inline-size: 12px;
	block-size: 12px;
	/* Physical borders: the chevron is drawn by rotation, which does not mirror. */
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg) translateY(-3px);
	transition: transform var(--th-dur) var(--th-ease);
}
.th-faq__item[open] .th-faq__q::after { transform: rotate(-135deg) translateY(-3px); }
.th-faq__q:focus-visible { outline: none; box-shadow: var(--th-focus-ring); border-radius: var(--th-radius-sm); }
.th-faq__a { margin: 0; padding-block-end: var(--th-space-6); max-inline-size: var(--th-measure); color: var(--th-color-text); line-height: var(--th-lh-body); }

/* More places: the place card lives in cards.css (shared with the Home, 1F). */

@media (prefers-reduced-motion: reduce) {
	.th-filter__chip,
	.th-faq__q::after { transition: none; }
}

/* FAQ on desktop: heading in the first third, questions in the reading column,
   so the section fills the grid instead of leaving the right half empty. */
@media (min-width: 1024px) {
	.th-dest-faq__inner { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--th-grid-gap-lg); align-items: start; }
	.th-dest-faq__inner > .th-head { grid-column: 1 / span 4; margin-block-end: 0; }
	.th-dest-faq__inner > .th-faq { grid-column: 5 / span 8; }
}
/* Consecutive sections on the same surface share one gap, not two. */
.th-dest-faq + .th-dest-more-places { padding-block-start: 0; }