/* =============================================================================
   ngf-destination-list.css — page-scoped enhancements for the next-gen
   Destinations LISTING (location/list.php). Kept OUT of the theme bundle:
   self-contained, loads only on this index (companion to ngf-destination-list.js
   and ngf-destination-suggest.*). All rules under .ngf; colours are .ngf tokens
   so they flip in dark mode.
   ============================================================================= */

/* ── Centre the grid tracks ───────────────────────────────────────────────────
   The bundle grid is `repeat(3, 1fr)`, which left-packs any row that isn't full —
   so a search that narrows to 1–2 results (or the final partial row) clusters at
   the left. Use fixed-max tracks + justify-content:center so partial rows and
   filtered results stay centred. Breakpoints mirror the bundle (992 → 2, 620 → 1).
   360px keeps three tracks inside the 1120px wrap content-box exactly (= today's
   full-grid look), so only the under-filled rows change. */
.ngf .ngf-dl-grid { grid-template-columns: repeat(3, minmax(0, 360px)); justify-content: center; }
/* 992px is a MIN-width breakpoint everywhere else (Bootstrap's, and the tab bar flips there),
   so max-width:992px overlapped it and 992 itself matched BOTH. Measured on
   /chalong-pier-phuket.html 2026-09-05: at 992 the container was already desktop and the tab
   bar already gone, while .zv-hero__inner was still a single 912px column; it split into two
   at 993. 991.98px is the house value (Bootstrap's, already in the estate's width census). */
@media (max-width: 991.98px) { .ngf .ngf-dl-grid { grid-template-columns: repeat(2, minmax(0, 360px)); } }
@media (max-width: 620px) { .ngf .ngf-dl-grid { grid-template-columns: minmax(0, 420px); } }

/* ── Photo IS the destination link ───────────────────────────────────────────
   The card media became an <a> (was a <div>); restore the block box the media
   styles assume, and strip the anchor underline/colour. */
.ngf a.ngf-dl-card__media { display: block; text-decoration: none; color: inherit; }

/* Real destination photo, now a crawlable <img> (was a CSS background). Fill the media box
   over the brand-gradient fallback; the caption/overlay/badge sit above it by DOM order. */
.ngf .ngf-dl-card__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	border: 0;
	z-index: 0;
}

/* ── Gap under the sticky toolbar ─────────────────────────────────────────────
   .ngf-dl-results sets padding-top:26px, but the element is also .wrap, and
   `.ngf .wrap { padding: 0 40px }` (shorthand, later in the bundle, equal
   specificity) resets padding-top to 0 — so the "N Destinations" heading sat flush
   against the sticky search toolbar. Restore a comfortable gap. */
.ngf .ngf-dl-results { padding-top: 28px; }

/* ── Toolbar controls now LIVE (were disabled "preview" selects) ──────────────
   Restore the interactive look the bundle's .ngf-dl-toolbar__select removed for the
   old inert preview (cursor:not-allowed; opacity:.75). */
.ngf .ngf-dl-toolbar__select { cursor: pointer; opacity: 1; color: var(--ink); }
.ngf .ngf-dl-toolbar__select:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

/* ── Stations "+N more" → inline expand ───────────────────────────────────────
   Every pier row is rendered (all crawlable), but the 4th onward stay hidden until
   the "+N more" BUTTON reveals them in place (ngf-destination-list.js) — no jump to
   the destination page. Reset the button to look like the old text link. */
.ngf .ngf-dl-card__onward.is-collapsed .ngf-dl-mini--extra { display: none; }
.ngf button.ngf-dl-card__onwardmore {
	align-self: flex-start;
	background: none; border: 0; padding: 0; margin: 0;
	font: inherit; font-size: 12px; font-weight: 700; line-height: 1.2;
	color: var(--blue-d); cursor: pointer;
}
.ngf button.ngf-dl-card__onwardmore:hover { color: var(--blue-dd); text-decoration: underline; }
.ngf button.ngf-dl-card__onwardmore:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.ngf button.ngf-dl-card__onwardmore[hidden] { display: none; }

/* ── Breathing room above "Piers & terminals" ─────────────────────────────────
   The stat strip (.ngf-dl-card__stats) has no bottom margin and the piers block no
   top margin, so the "Piers & terminals" heading butts right against the operators/
   vehicles/destinations line. Add a top margin so the two groups read as separate. */
.ngf .ngf-dl-card__onward { margin-top: 16px; }

/* Region filter hides non-matching cards WITHOUT the [hidden] attr the search filter
   owns, so the two compose (a card shows only when it passes BOTH). */
.ngf .ngf-dl-card.is-region-hidden { display: none !important; }

/* ── Show 20, then expand ─────────────────────────────────────────────────────
   The catalogue ships every destination for instant client-side search. By
   default we only PAINT the first 20 cards; the rest stay in the DOM (so search
   still finds them) but are hidden until the customer expands. */
.ngf .ngf-dl-grid.is-collapsed .ngf-dl-card:nth-child(n+21) { display: none; }

.ngf .ngf-dl-more { display: flex; justify-content: center; margin-top: 26px; }
.ngf .ngf-dl-more[hidden] { display: none; }
.ngf .ngf-dl-more__btn {
	display: inline-flex; align-items: center; gap: 9px;
	padding: 12px 26px;
	border: 1px solid var(--line-2);
	border-radius: var(--r-pill);
	background: var(--bg);
	color: var(--ink);
	font-weight: 700; font-size: 14px;
	cursor: pointer;
	transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.ngf .ngf-dl-more__btn:hover { background: var(--bg-2); border-color: var(--blue-text); box-shadow: var(--sh-sm); }
.ngf .ngf-dl-more__btn:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.ngf .ngf-dl-more__btn .fa { color: var(--blue-text); }
.ngf .ngf-dl-more__count { color: var(--ink-3); font-weight: 600; }

/* a11y safety net: primary CTA stays white on the orange button (see theme .ngf a fix). */
.ng-index--location .ngf-btn--primary, .ng-index--location .ngf-btn--primary:hover { color: #fff; }