/*!
 * AAAtrails — Product detail layer (gallery mosaic + facts strip).
 * Loads after style.css + detail-polish.css on single Tour / Activity views.
 * Uses the brand tokens (style.css :root) throughout.
 *
 * @since 1.15.0
 */

/* -------------------------------------------------------------------------
 * Gallery mosaic — thumbnail rail + big lead photo.
 * ---------------------------------------------------------------------- */
.vmosaic {
	position: relative;
	display: grid;
	grid-template-columns: 104px 1fr;
	gap: 12px;
	margin: 0;
}

/* Big lead photo — the anchor of the page. */
.vmosaic__main {
	position: relative;
	display: block;
	margin: 0;
	padding: 0;
	border: 0;
	cursor: zoom-in;
	border-radius: var(--radius);
	overflow: hidden;
	aspect-ratio: 3 / 2;
	background: var(--paper-2);
	box-shadow: var(--aaa-frame, inset 0 0 0 1px rgba(255,248,230,.55)), var(--aaa-elev-2, 0 20px 44px -26px rgba(24,11,2,.48));
}
.vmosaic__main img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .5s ease;
}
.vmosaic__main:hover img { transform: scale(1.03); }

/* Single-photo listings: no rail, so the lead photo takes the full width
   and gets a wider aspect ratio instead of the 2-column crop. */
.vmosaic--solo {
	grid-template-columns: 1fr;
}
.vmosaic--solo .vmosaic__mainwrap { grid-column: 1; }
.vmosaic--solo .vmosaic__main {
	aspect-ratio: 16 / 9;
}

/* Thumbnail rail — stacked, matching the lead photo's height. */
.vmosaic__rail {
	display: grid;
	grid-column: 1;
	grid-row: 1;
	grid-template-rows: repeat(4, 1fr);
	gap: 12px;
	min-width: 0;
}
.vmosaic__thumb {
	position: relative;
	display: block;
	margin: 0;
	padding: 0;
	border: 0;
	cursor: pointer;
	border-radius: var(--radius-sm);
	overflow: hidden;
	background: var(--paper-2);
	box-shadow: var(--aaa-frame, inset 0 0 0 1px rgba(255,248,230,.5)), var(--aaa-elev-1, 0 8px 22px -18px rgba(24,11,2,.4));
}
.vmosaic__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .4s ease;
}
.vmosaic__thumb:hover img { transform: scale(1.05); }

/* "See all" tile — the last thumb when more photos exist. */
.vmosaic__more {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	background: rgba(24, 11, 2, .58);
	color: #fff;
	backdrop-filter: blur(1px);
	-webkit-backdrop-filter: blur(1px);
}
.vmosaic__more strong { font-family: var(--font-display); font-size: 1.35rem; line-height: 1; }
.vmosaic__more em { font-style: normal; font-size: .72rem; letter-spacing: .04em; }

/* Overlaid tools (Share + Wishlist), top-right of the lead photo. */
.vmosaic__tools {
	position: absolute;
	top: 14px;
	right: 14px;
	display: flex;
	gap: 8px;
	z-index: 2;
}
.vmosaic__tool,
.vmosaic .wishlist-btn,
.vmosaic .booking__save {
	position: static;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	height: 40px;
	padding: 0 14px;
	border-radius: 100px;
	border: 1px solid rgba(255, 255, 255, .7);
	background: rgba(255, 255, 255, .94);
	color: var(--ink);
	font: 600 .84rem/1 var(--font-body);
	cursor: pointer;
	box-shadow: 0 8px 22px -12px rgba(24, 11, 2, .6);
	transition: transform .15s ease, background .15s ease;
}
/* The wishlist heart button is icon-only and circular. */
.vmosaic .wishlist-btn,
.vmosaic .booking__save { width: 40px; padding: 0; justify-content: center; }
.vmosaic__tool:hover,
.vmosaic .wishlist-btn:hover { transform: translateY(-1px); background: #fff; }
.vmosaic__tool svg { width: 17px; height: 17px; fill: none; stroke: var(--ink); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.vmosaic__tool.is-copied span { color: var(--forest); }
.vmosaic__tool.is-copied::after { content: " ✓"; color: var(--forest); }

/* "View all N photos" pill, bottom-right of the lead photo. */
.vmosaic__seeall {
	position: absolute;
	right: 14px;
	bottom: 14px;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 15px;
	border-radius: 100px;
	border: 1px solid rgba(255, 255, 255, .6);
	background: rgba(255, 255, 255, .94);
	color: var(--ink);
	font: 600 .84rem/1 var(--font-body);
	cursor: pointer;
	box-shadow: 0 8px 22px -12px rgba(24, 11, 2, .6);
	transition: transform .15s ease, background .15s ease;
}
.vmosaic__seeall:hover { background: #fff; transform: translateY(-1px); }
.vmosaic__seeall svg { width: 17px; height: 17px; }

/* Wrapper around the lead photo — the positioning context for the
   prev/next arrows, kept separate from .vmosaic__main so an arrow click
   never bubbles into the "open lightbox" button underneath it. */
.vmosaic__mainwrap {
	position: relative;
	grid-column: 2;
	grid-row: 1;
}

/* Prev/next arrows over the lead photo — same white pill language as the
   Share/Wishlist tools, so the whole photo reads as one coherent surface. */
.vmosaic__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, .7);
	background: rgba(255, 255, 255, .94);
	cursor: pointer;
	box-shadow: 0 8px 22px -12px rgba(24, 11, 2, .6);
	transition: transform .15s ease, background .15s ease;
}
.vmosaic__nav--prev { left: 14px; }
.vmosaic__nav--next { right: 14px; }
.vmosaic__nav:hover { background: #fff; transform: translateY(-50%) scale(1.06); }
.vmosaic__nav svg {
	width: 18px;
	height: 18px;
	fill: none;
	stroke: var(--ink);
	stroke-width: 2.2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* Active-state ring on whichever rail thumb matches the photo currently
   shown as the lead image — the "you are here" cue a filmstrip needs. */
.vmosaic__thumb.is-active {
	box-shadow: 0 0 0 3px var(--card), 0 0 0 5px var(--gold-deep);
}

/* -------------------------------------------------------------------------
 * Facts strip — duration, pickup, group, mobile ticket, languages.
 * ---------------------------------------------------------------------- */
.vfacts {
	list-style: none;
	margin: 18px 0 0;
	padding: 16px 4px 0;
	border-top: 1px solid var(--line);
	display: flex;
	flex-wrap: wrap;
	gap: 12px 26px;
}
.vfacts li {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-size: .92rem;
	color: var(--ink);
}
.vfacts svg {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	fill: none;
	stroke: var(--forest);
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.vfacts span { line-height: 1.3; }

/* -------------------------------------------------------------------------
 * Focus visibility.
 * ---------------------------------------------------------------------- */
.vmosaic__main:focus-visible,
.vmosaic__thumb:focus-visible,
.vmosaic__tool:focus-visible,
.vmosaic__nav:focus-visible,
.vmosaic__seeall:focus-visible {
	outline: 2px solid var(--gold-deep);
	outline-offset: 2px;
}

/* -------------------------------------------------------------------------
 * Responsive — collapse the rail to a horizontal strip under the photo.
 * ---------------------------------------------------------------------- */
@media (max-width: 760px) {
	.vmosaic {
		grid-template-columns: 1fr;
		gap: 10px;
	}
	.vmosaic__mainwrap { grid-column: 1; grid-row: auto; order: 1; }
	.vmosaic__main { aspect-ratio: 16 / 10; }
	.vmosaic__rail {
		grid-column: 1;
		grid-row: auto;
		order: 2;
		grid-template-rows: none;
		grid-auto-flow: column;
		grid-auto-columns: 116px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-ms-overflow-style: none;
		scrollbar-width: none;
	}
	.vmosaic__rail::-webkit-scrollbar { display: none; }
	.vmosaic__thumb { aspect-ratio: 4 / 3; scroll-snap-align: start; }
	.vmosaic__tools { top: 10px; right: 10px; }
	.vmosaic__seeall { right: 10px; bottom: 10px; }
	.vmosaic__nav { width: 34px; height: 34px; }
	.vmosaic__nav--prev { left: 8px; }
	.vmosaic__nav--next { right: 8px; }
	.vfacts { gap: 10px 20px; }
}

@media (prefers-reduced-motion: reduce) {
	.vmosaic__main img,
	.vmosaic__thumb img,
	.vmosaic__tool,
	.vmosaic__nav,
	.vmosaic__seeall { transition: none; }
	.vmosaic__main:hover img,
	.vmosaic__thumb:hover img { transform: none; }
}

/* -------------------------------------------------------------------------
 * 1.21.0 — Product head: plain title + trust row above the gallery,
 * replacing the old full-bleed dark hero on single Tour/Activity. The photo
 * now does its work once, in the gallery, instead of twice (hero + mosaic).
 * ---------------------------------------------------------------------- */
.phead {
	margin-bottom: 18px;
}
.phead h1 {
	margin-bottom: .32em;
	font-size: clamp(1.55rem, 2.6vw, 2.15rem);
	letter-spacing: -0.01em;
}
.phead__hook {
	margin: 0 0 .7em;
	max-width: 62ch;
	font-size: clamp(1.02rem, 1.3vw, 1.16rem);
	line-height: 1.5;
	color: var(--ink-soft);
}
.phead__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	row-gap: 6px;
	font-size: .92rem;
	color: var(--ink-soft);
}
.phead__sep {
	display: inline-block;
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: var(--line);
	margin: 0 12px;
}
.phead__rating {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--ink);
}
.phead__rating:hover { color: var(--forest); }
.phead__reviews-link {
	color: var(--ink-soft);
	font-weight: 500;
	text-decoration: underline;
	text-underline-offset: 2px;
}
.phead__stat,
.phead__badge,
.phead__loc {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
.phead__stat svg,
.phead__badge svg,
.phead__loc svg {
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.phead__stat { color: #2f7d4f; font-weight: 600; }
.phead__badge { color: var(--gold-deep); font-weight: 700; }
.phead__badge svg { fill: var(--gold); stroke: var(--gold-deep); }
.phead__loc { color: var(--ink-soft); }

/* Route + at-a-glance meta line, kept from the old hero but now sitting
   quietly under the facts strip instead of stamped over a dark photo. */
.phead__route {
	margin: 14px 0 0;
	font-size: .95rem;
	color: var(--ink-soft);
}

/* No-gallery fallback: a single framed placeholder, matching the mosaic's
   lead-photo treatment so an empty gallery still looks finished. */
.phead__placeholder {
	border-radius: var(--radius);
	overflow: hidden;
	aspect-ratio: 16 / 9;
	background: var(--paper-2);
	box-shadow: var(--aaa-frame, inset 0 0 0 1px rgba(255,248,230,.55)), var(--aaa-elev-2, 0 20px 44px -26px rgba(24,11,2,.48));
}
.phead__placeholder img { width: 100%; height: 100%; object-fit: cover; }

/* Promoted-experiences cross-sell row, sitting inside the (narrower) main
   column above Overview — its own card-grid tuned down to two columns since
   it no longer has the full page width to work with. */
.promo-row {
	margin: 34px 0 6px;
}
.promo-row h2 {
	margin-bottom: 16px;
}
.promo-row__grid {
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}

@media (max-width: 900px) {
	.phead__sep { margin: 0 9px; }
}

/* -------------------------------------------------------------------------
 * Lowest Price Guarantee ribbon — sits above the price card, right-aligned,
 * a featured trust badge rather than a line item in the checklist below.
 * ---------------------------------------------------------------------- */
.lp-ribbon {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 0 0 10px auto;
	padding: 6px 12px 6px 10px;
	border-radius: 100px;
	background: #e7f5ec;
	border: 1px solid #bfe3cc;
	color: #206b41;
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .01em;
	white-space: nowrap;
}
#booking-panel {
	display: flex;
	flex-direction: column;
}
.lp-ribbon__icon {
	display: inline-flex;
	flex: 0 0 auto;
}
.lp-ribbon__icon svg {
	width: 15px;
	height: 15px;
	fill: none;
	stroke: #206b41;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

@media (max-width: 900px) {
	.lp-ribbon { margin-left: 0; }
}

/* Booking-card trust line: "Recommended by N% of travellers". */
.booking__recommended {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 14px;
	font-size: .86rem;
	font-weight: 600;
	color: #2f7d4f;
}
.booking__recommended svg {
	flex: 0 0 auto;
	width: 17px;
	height: 17px;
	fill: none;
	stroke: #2f7d4f;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}