/* ============================================================
   Destination hub — /destinations/{slug}/
   The tier above route + airport. Same "facts rail" skeleton as
   the airport guide so the two read as one system, but the
   editorial column leads with cost (the first question on every
   competitor hub that ranks) and closes by handing off DOWN to
   the route and airport pages.
   Tokens only. Enqueued conditionally on
   is_singular('destination') — stays out of the inlined
   critical-CSS budget (D-26).
   ============================================================ */

.destination-hub {
	padding-block: var(--s-8) var(--s-9);
}

.destination-hub__grid {
	display: grid;
	grid-template-columns: var(--grid-12);
	gap: var(--s-8) var(--grid-gap);
	align-items: start;
}

.destination-hub__main {
	grid-column: 1 / 9;
	display: flex;
	flex-direction: column;
	gap: var(--s-8);
}

.destination-hub__rail {
	grid-column: 9 / 13;
	position: sticky;
	top: var(--s-6);
}

/* ---- Head ---- */
.destination-hub__head .eyebrow {
	display: block;
	margin-bottom: var(--s-4);
}

.destination-hub__title {
	font-size: var(--fs-h1);
	margin-bottom: var(--s-5);
}

.destination-hub__stand {
	font-size: var(--fs-h5);
	line-height: var(--lh-base);
	max-width: 56ch;
	margin-bottom: 0;
}

/* ---- Shared section heading ---- */
.destination-hub__h2 {
	font-size: var(--fs-h3);
	margin: 0 0 var(--s-5);
}

/* ---- Editorial (the_content) ---- */
.destination-hub__content h2 {
	font-size: var(--fs-h3);
	margin: 0 0 var(--s-4);
}

.destination-hub__content h2:not(:first-child) {
	margin-top: var(--s-7);
}

.destination-hub__content h3 {
	font-size: var(--fs-h5);
	margin: var(--s-6) 0 var(--s-3);
}

.destination-hub__content p {
	max-width: 68ch;
}

/* ---- Price table ---- */
.destination-hub__price-table {
	width: 100%;
	border-collapse: collapse;
	font-feature-settings: "tnum" 1, "lnum" 1;
}

.destination-hub__price-table th,
.destination-hub__price-table td {
	text-align: left;
	padding: var(--s-4) var(--s-4) var(--s-4) 0;
	border-bottom: var(--bw-hair) solid var(--c-rule);
	vertical-align: baseline;
}

.destination-hub__price-table thead th {
	font-size: var(--fs-small);
	letter-spacing: var(--tr-luxe);
	text-transform: uppercase;
	color: var(--c-text-soft);
	font-weight: var(--fw-medium);
}

.destination-hub__price-table tbody th {
	font-weight: var(--fw-medium);
}

.destination-hub__price-note {
	margin-top: var(--s-4);
	font-size: var(--fs-small);
	color: var(--c-text-soft);
	max-width: 62ch;
}

/* ---- Airports + routes hand-off bands ---- */
.destination-hub__airport-list,
.destination-hub__route-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
}

.destination-hub__airport,
.destination-hub__route {
	padding-block: var(--s-4);
	border-bottom: var(--bw-hair) solid var(--c-rule);
}

.destination-hub__airport a,
.destination-hub__route a {
	font-size: var(--fs-h5);
	text-decoration: none;
	border-bottom: var(--bw-hair) solid transparent;
	transition: border-color var(--dur-base) var(--ease-quiet);
}

.destination-hub__airport a:hover,
.destination-hub__airport a:focus-visible,
.destination-hub__route a:hover,
.destination-hub__route a:focus-visible {
	border-bottom-color: currentColor;
}

.destination-hub__airport--primary a {
	font-weight: var(--fw-medium);
}

.destination-hub__airport-note {
	display: block;
	margin-top: var(--s-2);
	font-size: var(--fs-small);
	color: var(--c-text-soft);
	max-width: 62ch;
}

/* ---- FAQ ---- */
.destination-hub__faq-item + .destination-hub__faq-item {
	margin-top: var(--s-6);
}

.destination-hub__faq-q {
	font-size: var(--fs-h5);
	margin: 0 0 var(--s-3);
}

.destination-hub__faq-a {
	max-width: 68ch;
	margin: 0;
}

/* ---- At-a-glance rail ---- */
.destination-hub__glance {
	position: relative;
	background: var(--c-paper);
	border: var(--bw-hair) solid var(--c-rule);
	border-radius: var(--r-lg);
	box-shadow: var(--sh-base);
	padding: var(--s-7) var(--s-6);
}

/* 2px silver top accent, inset — matches the airport glance card. */
.destination-hub__glance::before {
	content: "";
	position: absolute;
	top: 0;
	left: var(--s-6);
	right: var(--s-6);
	height: 2px;
	background: var(--c-silver);
}

.destination-hub__glance-heading {
	font-size: var(--fs-h5);
	margin: 0 0 var(--s-5);
}

.destination-hub__glance-list {
	margin: 0 0 var(--s-6);
	font-feature-settings: "tnum" 1, "lnum" 1;
}

.destination-hub__glance-row {
	display: flex;
	justify-content: space-between;
	gap: var(--s-4);
	padding-block: var(--s-3);
	border-bottom: var(--bw-hair) solid var(--c-rule);
}

.destination-hub__glance-row:last-child {
	border-bottom: 0;
}

.destination-hub__glance-row dt {
	font-size: var(--fs-small);
	color: var(--c-text-soft);
	margin: 0;
}

.destination-hub__glance-row dd {
	margin: 0;
	text-align: right;
	font-weight: var(--fw-medium);
}

.destination-hub__glance-cta {
	width: 100%;
	text-align: center;
}

/* ============ ≤1000px — one column, glance card follows the hero ============ */
@media (max-width: 1000px) {
	.destination-hub__grid {
		grid-template-columns: 1fr;
	}

	.destination-hub__main {
		grid-column: 1 / -1;
		display: contents;
	}

	.destination-hub__rail {
		grid-column: 1 / -1;
		position: static;
		order: 2;
	}

	.destination-hub__head { order: 1; }
	.destination-hub__content { order: 3; }
	.destination-hub__prices { order: 4; }
	.destination-hub__aircraft { order: 5; }
	.destination-hub__airports { order: 6; }
	.destination-hub__routes { order: 7; }
	.destination-hub__faq { order: 8; }
}

/* ============ ≤640px ============ */
@media (max-width: 640px) {
	.destination-hub {
		padding-block: var(--s-7) var(--s-8);
	}

	.destination-hub__glance {
		padding: var(--s-6) var(--s-5);
	}

	/* The price table's third column is the one that matters; let the row
	   wrap rather than scroll the page body. */
	.destination-hub__price-table th,
	.destination-hub__price-table td {
		padding: var(--s-3) var(--s-3) var(--s-3) 0;
	}
}