/* =============================================================================
   ngf-destination-view.css — page-scoped fixes for the next-gen destination
   DETAIL page (location/view.php). Kept OUT of the theme bundle: self-contained,
   loads only on this view. Everything is scoped to .ng-landing--location so the
   shared .ngf-overview component (also used by operator-flagship) is untouched.
   ============================================================================= */

/* ── Align the booking band to the content ────────────────────────────────────
   The search band's .container falls through to the legacy `.inner_banner
   .information .container { max-width:1230px }` (+ Bootstrap's 15px padding), so its
   content spanned 40–1240 while every content section's .wrap content spans 80–1200
   — the widget stuck out ~40px each side ("content not aligned left & right"). Match
   the .wrap frame (max-width 1200, 40px side padding), like the listing's bookband. */
.ng-landing--location .ngf-loc-search .information .container {
	max-width: 1200px;
	padding: 0 40px;
}

/* ── Destination Overview: justify the body copy ──────────────────────────────
   Lionel request — the overview lead paragraph reads better justified (it sits in a
   ~48ch measure, so no ugly rivers). Applies to every destination detail page. */
.ng-landing--location .ngf-overview__p { text-align: justify; }

/* ── News/Events widget: line the headlines up ────────────────────────────────
   The date sat in an auto-width column, so variable-length dates ("1 October 2024"
   vs "1-30 November 2026") pushed each headline to a different left edge. Give the
   date a fixed-minimum column so every title starts at the same x. min-width (not a
   fixed width) never truncates — a rare longer/localized date just extends.

   ^ That last sentence stopped being true, and the date OVERLAPPED the title on every
   destination page for any event with a date RANGE. Two individually-reasonable rules
   combined badly: 99-newsevents.css later pinned the column with `flex: 0 0 150px`
   (no grow, no shrink), and because THIS rule sets an explicit min-width it replaces
   the flex item's default `min-width: auto` — which was the CONTENT floor that used to
   let the box "just extend". With the floor gone the box stays 150px while a nowrap
   "19 August 2026 - 6 September 2026" needs 227px, so 63px of date painted over the
   headline. Measured, not guessed. Letting the date WRAP inside its column fixes it
   without giving up the aligned titles the column exists for. */
.ng-landing--location .ngf-ne__date { min-width: 135px; white-space: normal; }
@media (max-width: 480px) { .ng-landing--location .ngf-ne__date { min-width: 108px; } }

/* ── Overview: photo as tall as the copy ──────────────────────────────────────
   The shared overview is a 2-col grid (99-operatorflagship.css) with the photo
   pinned to height:300px and the row centred. On a content-rich destination the
   copy towers over the 300px photo, leaving a large empty gap beside it ("too
   much space"). Let the photo STRETCH to the copy's height, with a 300px floor so
   a sparse record still shows a reasonable photo. Short copy stays vertically
   centred next to the floored photo; long copy and the photo end flush. */
.ng-landing--location .ngf-overview .wrap { align-items: stretch; }
.ng-landing--location .ngf-overview .wrap > :first-child { align-self: center; }

.ng-landing--location .ngf-loc-ovphoto {
	height: auto;
	min-height: 300px;
	align-self: stretch;
	overflow: hidden;
}
.ng-landing--location .ngf-loc-ovphoto img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
/* No photo of its own left (the page never repeats a picture): the copy takes the row. */
.ng-landing--location .ngf-overview--solo .wrap { grid-template-columns: 1fr; }

/* ═══ Batch fixes — justify + dark-mode contrast + CTA alignment ══════════════ */

/* ── Pier/station card teaser: justify the copy like the overview lead ─────────── */
.ng-landing--location .ngf-sta__desc { text-align: justify; }

/* ── Final CTA: restore the sub-line's margins (centring AND vertical rhythm) ───
   .ngf-cta__p is authored `margin: 12px auto 24px` — the `auto` centres its 44ch box,
   the 12/24 give it air above (off the heading) and below (off the button). The global
   `.ngf p { margin:0 }` reset (0,1,1) out-ranks the single-class rule (0,1,0) and zeroed
   ALL of it, so the line hugged the LEFT and also sat flush against the heading and
   button. A two-class selector (0,2,0) beats the reset — restore the full margins (a
   touch more vertical air than stock). */
.ng-landing--location .ngf-cta__p { margin: 16px auto 26px; }

/* ── Dark mode: hero "Transportation" pill ─────────────────────────────────────
   In dark mode .ngf-hero__pill--loc sits on a DARK pill (dark surface + border), but
   its text falls to a dark ink → dark-on-dark, unreadable. Pin the dark pill AND give
   it LIGHT text (the icon inherits it too). Both background and colour are set
   explicitly so the contrast holds regardless of which layer wins the background. */
:root[data-theme="dark"] .ng-landing--location .ngf-hero__pill--loc {
	background: #16202b;
	border-color: #33424f;
	color: #e8eef4;
}

/* ── "Check availability" CTA label: keep it white on the orange pill ──────────
   The orange CTA is `<a class="ngf-loc-trip__cta">`. Its own rule sets color:#fff,
   but the generic `.ngf a { color: var(--blue-d) }` (specificity 0,1,1) out-ranks the
   single-class button rule (0,1,0), so the label takes --blue-d — a mid blue on orange
   in light mode, and a lighter, lower-contrast blue in dark mode (the token remaps).
   A two-class selector (0,2,1) beats `.ngf a` and restores the intended white in BOTH
   modes; -webkit-text-fill-color is pinned too so no inherited fill can re-tint it. */
.ng-landing--location a.ngf-loc-trip__cta,
.ng-landing--location a.ngf-loc-trip__cta:hover {
	color: #fff;
	-webkit-text-fill-color: #fff;
}

/* ── Departures board: the facility icons stacked vertically at 901–1180px ─────
   Bug #353. The fare row (.ngr-fare, 99-result.css) is a five-column grid:
   `150px 210px 210px minmax(0,1fr) max-content` — class | adult | child | AMENITIES |
   CTA — with a 16px gap and 22px side padding. Only the amenities track is flexible,
   so it absorbs every pixel the other four do not use, and below ~1180px there are
   none left to absorb: 150 + 210 + 210 + ~150 (the "Book now" pill's max-content)
   + 4x16 gaps + 44 padding is ~784px, against a ~777px inner width at a 901px
   viewport. The track collapses toward zero, and because .ngr-amen-ico is
   `flex-wrap: wrap` the icon strip then breaks one icon per line — the reported
   vertical stack. It rights itself past ~1180px purely because the row finally has
   slack again, which is why the report brackets the band the way it does.
   The 901px lower edge is the other breakpoint: at <=900px 99-result.css already
   restacks the whole row to a single centred column, so the band is exactly the
   window where the desktop grid applies but does not fit.

   No amount of trimming the price columns closes a ~315px shortfall at 901px, so
   this gives the amenities their own full-width line instead of a starved track:
   row 1 keeps class | adult | child, the CTA spans both rows on the right where it
   already sat, and the amenities get row 2 across the first three columns (~611px
   at 901px wide, against ~308px of icons + "See details"). The two price columns
   become 1fr each rather than a fixed 210px — they hold ~120px of content, so the
   prices stay on one line and the row no longer overflows at the narrow end.
   Scoped to this page and this band: outside it the funnel's own grid is untouched. */
@media (min-width: 901px) and (max-width: 1180px) {
	.ng-landing--location .ngr-fare {
		grid-template-columns: 150px minmax(0, 1fr) minmax(0, 1fr) max-content;
		row-gap: 10px;
	}
	/* explicit placement — the five cells are otherwise auto-placed, and an auto-placed
	   full-width amenity cell would push the CTA onto a third row of its own */
	.ng-landing--location .ngr-fare .ngr-amen {
		grid-column: 1 / 4;
		grid-row: 2;
	}
	.ng-landing--location .ngr-fare .ngr-fare-cta {
		grid-column: 4;
		grid-row: 1 / span 2;
	}
}