/*!
 * AAAtrails — Product detail polish layer ("Lamplight on sandstone").
 *
 * A purely additive design-layer refinement for the four listing surfaces —
 * Tours, Activities, Experiences, Destinations — and their single detail
 * views. Refines the design layers the brief asks for: COLOR (brand-derived
 * warm values only), SHAPE (unified radii), SHADOW (warm sandstone elevation
 * scale), LIGHT (hero lamplight + restrained bevels), and the FRAME around
 * PHOTOS (matted-print treatment) and TEXTS (measure + heading rhythm).
 *
 * Loads AFTER style.css and tour-gallery.css (declared as dependencies), so
 * every rule here is a same-specificity refinement that wins cleanly without
 * !important and touches only the intended properties. No template markup
 * changes; disable with the AAATRAILS_DISABLE_DETAIL_POLISH constant.
 *
 * As of 1.20.0 this file also carries the compacting pass — spacing-only
 * density rules for the same four surfaces (see bottom of file). Color,
 * shape, shadow, light and the photo/text frame are untouched by it.
 *
 * @since 1.13.0
 */

/* -------------------------------------------------------------------------
 * Derived tokens — extend the brand palette, never replace it.
 * All values are derived from the existing :root gold + temple-brown set.
 * ---------------------------------------------------------------------- */

/* -------------------------------------------------------------------------
 * THE ONE BOLD MOMENT — hero photo as a lit temple facade.
 * Protect highlight detail (the old flat .8 black scrim crushed sandstone
 * texture) and let warm lamplight rise from the base.
 *
 * NOTE (since 1.21.0): the full-bleed .tour-hero markup was removed from
 * single-tour.php / single-activity.php in favor of template-parts/
 * product-head.php + the .vmosaic gallery (see viator-detail.css). These
 * rules now apply to Destinations only, which kept the original hero. The
 * matted-print frame, elevation and clarity filter carry over to the new
 * mosaic via the .vmosaic__main / .vmosaic__thumb rules further below, so
 * the photo language still reads as one system across all four surfaces.
 * ---------------------------------------------------------------------- */
.tour-hero__media::after {
	background:
		/* top scrim — just enough for the terminal chip + gallery button */
		linear-gradient(180deg, rgba(24, 11, 2, .28) 0%, rgba(24, 11, 2, 0) 22%),
		/* base fade — carries the title, gentler still so more of the photo stays clean and visible */
		linear-gradient(180deg, rgba(24, 11, 2, 0) 50%, rgba(24, 11, 2, .34) 76%, rgba(24, 11, 2, .74) 100%),
		/* lamplight — a warm gold breath along the very bottom edge */
		radial-gradient(120% 62% at 50% 118%, rgba(238, 174, 5, .30) 0%, rgba(238, 174, 5, 0) 60%);
}

/* Matted-print frame + warm elevation on the hero image itself. */
.tour-hero__media img {
	box-shadow: var(--aaa-frame);
}
.tour-hero {
	box-shadow: var(--aaa-elev-2);
}

/* Sharpen the hero title so it holds against the lighter scrim. */
.tour-hero h1 {
	text-shadow: 0 1px 2px rgba(24, 11, 2, .45), 0 12px 40px rgba(24, 11, 2, .35);
	letter-spacing: -0.01em;
}
.tour-hero__meta {
	text-shadow: 0 1px 2px rgba(24, 11, 2, .40);
}

/* Lift the terminal chip a touch — it sits on lit sandstone now. */
.tour-terminal {
	box-shadow: 0 6px 18px -12px rgba(24, 11, 2, .7), inset 0 0 0 1px rgba(238, 174, 5, .12);
}

/* -------------------------------------------------------------------------
 * PHOTO FRAME — one consistent matted-print language across every image
 * on the page, so photos read clean, mounted, and deliberate.
 * ---------------------------------------------------------------------- */
.tourgal__stage {
	box-shadow: var(--aaa-frame), var(--aaa-elev-2);
}

/* In-content photos get the same mount, so body imagery matches the hero. */
.entry-content img {
	box-shadow: var(--aaa-frame), var(--aaa-elev-1);
}

/* Listing-card imagery: a hairline mount inside the media well removes the
   hard photo-meets-card seam without adding weight. Shared by every card
   family — Tours/Activities (.tour-card) and Destinations (.dest-card) —
   so the four grids read as one product-card system. */
.tour-card__media::after,
.dest-card__media::after {
	content: "";
	position: absolute;
	inset: 0;
	box-shadow: var(--aaa-frame);
	pointer-events: none;
	z-index: 1;
}

/* Clean, vivid photo rendering (the "ubereats.com" product-shot feel) — a
   restrained lift in contrast/saturation so listing photos read crisp and
   appetising instead of flat camera-roll flat. Never applied to text. */
.tour-card__media img,
.dest-card__media img,
.tour-hero__media img,
.tourgal__stage img,
.vmosaic__main img,
.vmosaic__thumb img {
	filter: saturate(1.08) contrast(1.03);
}

/* -------------------------------------------------------------------------
 * TEXT FRAME — measure, rhythm, and a quiet heading device.
 * ---------------------------------------------------------------------- */

/* Constrain the reading measure. In the 1fr main column body copy could run
   well past 80ch on wide screens; ~66ch is the comfortable line length. */
.tour-main .entry-content {
	max-width: 66ch;
}
.tour-main .entry-content > * {
	max-width: 100%;
}
/* Let full-bleed media and the itinerary use the whole column width. */
.tour-main .entry-content > figure,
.tour-main .entry-content > .wp-block-image {
	max-width: none;
}

/* Body rhythm: a hair more line-height and a softer ink for long reading. */
.entry-content {
	line-height: 1.72;
	color: #3a2a17;
}
.entry-content p { margin: 0 0 1.15em; }

/* Section headings in the main column get a small gold "temple tick" — the
   same vocabulary as the eyebrow bar, so it reads as a system, not decoration.
   Applied only to real section headings inside .tour-main. */
.tour-main > h2,
.tour-main .entry-content h2 {
	position: relative;
	padding-left: 18px;
	letter-spacing: -0.01em;
}
.tour-main > h2::before,
.tour-main .entry-content h2::before {
	content: "";
	position: absolute;
	left: 0;
	top: .18em;
	width: 5px;
	height: .82em;
	border-radius: 2px;
	background: linear-gradient(180deg, var(--gold), var(--gold-deep));
	box-shadow: 0 0 0 3px var(--aaa-gleam);
}

/* -------------------------------------------------------------------------
 * SHAPE + LIGHT — restrained bevels and unified radii on the supporting
 * frames: chips, itinerary, include/exclude, booking card.
 * ---------------------------------------------------------------------- */

/* Chips: light catching the top edge, warmer resting shadow. */
.chips li {
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), var(--aaa-elev-1);
	transition: transform .15s ease, box-shadow .15s ease;
}
.chips li:hover {
	transform: translateY(-1px);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), var(--aaa-elev-2);
}

/* Itinerary: give the accordion a mounted panel instead of bare rules, so
   the day-by-day plan reads as a clean, self-contained frame. */
.itinerary {
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--card);
	box-shadow: var(--aaa-elev-1);
	overflow: hidden;
	padding: 4px 20px;
}
.itinerary__day { border-bottom: 1px solid var(--line); }
.itinerary__day:last-child { border-bottom: 0; }
.itinerary__num {
	box-shadow: 0 4px 12px -6px rgba(24, 11, 2, .5), inset 0 1px 0 rgba(238, 174, 5, .25);
}
.itinerary__head { transition: color .15s ease; }
.itinerary__head:hover .itinerary__title { color: var(--forest); }

/* Include / exclude: seat each list in its own soft well and swap the flat
   glyphs for tinted tokens, so scanning what's in vs. out is instant. */
.incexc .inc,
.incexc .exc {
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	padding: 20px 22px;
	box-shadow: var(--aaa-elev-1);
}
.incexc .inc { background: linear-gradient(180deg, #f6fbf6, var(--card)); }
.incexc .exc { background: linear-gradient(180deg, #fdf6f3, var(--card)); }
.incexc li:last-child { border-bottom: 0; }
.incexc .inc li::before {
	content: "✓"; left: 2px; top: 8px;
	color: #2f7d4f; font-weight: 800;
}
.incexc .exc li::before {
	content: "✕"; left: 2px; top: 8px;
	color: #b0553f; font-weight: 800;
}

/* Booking / facts card: warmer elevation and a top-edge bevel of light. */
.booking {
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), var(--aaa-elev-3);
}
.booking__price {
	letter-spacing: -0.015em;
}
/* The primary price catches a faint gold underline of light. */
.booking__priceline {
	background: linear-gradient(90deg, var(--aaa-gleam), rgba(238, 174, 5, 0) 62%);
	margin-inline: -24px;
	padding-inline: 24px;
	padding-block: 12px 8px;
	margin-bottom: 12px;
}

/* Map frame joins the matted-print family. */
.tour-map iframe {
	box-shadow: var(--aaa-frame), var(--aaa-elev-2);
}

/* -------------------------------------------------------------------------
 * LISTING SURFACES — Tours / Activities / Experiences / Destinations grids.
 * Keep the polish consistent from listing to detail.
 * ---------------------------------------------------------------------- */
.tour-card,
.dest-card { box-shadow: none; }
.tour-card:hover,
.dest-card:hover { box-shadow: var(--aaa-elev-3); }
.tour-card__media,
.dest-card__media { z-index: 0; }

/* Frosted-glass pill for the one thing still allowed on the photo — the
   photo-count tag — so it sits as light on the image rather than stamped
   over it, ubereats.com-style. Everything else (category, duration,
   country) already lives in the text frame below. */
.tour-card__photos {
	backdrop-filter: blur(6px) saturate(1.4);
	-webkit-backdrop-filter: blur(6px) saturate(1.4);
	box-shadow: inset 0 0 0 1px rgba(238, 174, 5, .22), 0 4px 12px -8px rgba(24, 11, 2, .6);
}

/* Archive / experience header: a warm lamplight wash over the deep panel and
   a gold hairline at its base, tying the listing hero to the detail hero. */
.archive-head {
	position: relative;
	background:
		radial-gradient(90% 120% at 82% -10%, rgba(238, 174, 5, .16), rgba(238, 174, 5, 0) 55%),
		var(--forest-deep);
	border-bottom: 1px solid rgba(238, 174, 5, .35);
}
.archive-head h1 { letter-spacing: -0.015em; }

/* -------------------------------------------------------------------------
 * Quality floor — focus visibility, motion, and mobile.
 * ---------------------------------------------------------------------- */

/* Clear keyboard focus on the interactive frames. */
.itinerary__head:focus-visible,
.tour-hero__gallery:focus-visible,
.chips li:focus-visible {
	outline: 2px solid var(--gold-deep);
	outline-offset: 2px;
	border-radius: var(--radius-sm);
}

@media (max-width: 700px) {
	/* The body measure cap is irrelevant on narrow screens; let it fill. */
	.tour-main .entry-content { max-width: none; }
	/* Ease the base lamplight so small heroes don't over-darken. */
	.tour-hero__media::after {
		background:
			linear-gradient(180deg, rgba(24, 11, 2, .30) 0%, rgba(24, 11, 2, 0) 20%),
			linear-gradient(180deg, rgba(24, 11, 2, 0) 40%, rgba(24, 11, 2, .78) 100%),
			radial-gradient(140% 55% at 50% 116%, rgba(238, 174, 5, .26), rgba(238, 174, 5, 0) 60%);
	}
	.itinerary { padding-inline: 14px; }
	.incexc .inc,
	.incexc .exc { padding: 16px 18px; }
}

@media (prefers-reduced-motion: reduce) {
	.chips li,
	.itinerary__head { transition: none; }
	.chips li:hover { transform: none; }
}

/* -------------------------------------------------------------------------
 * 1.14.0 — Delivery speed + Viator-style price clarity.
 * ---------------------------------------------------------------------- */

/* SPEED: skip rendering work for below-the-fold blocks until they're near the
   viewport. Reserved intrinsic size keeps the scrollbar honest (no CLS). */
#reviews {
	content-visibility: auto;
	contain-intrinsic-size: 0 640px;
}

/* SPEED/CLS: gallery slides already declare an aspect-ratio; guarantee the
   image can never force its own intrinsic ratio over the reserved box. */
.tourgal__slide > img,
.tour-hero__media img,
.tour-card__media img {
	max-width: 100%;
	height: 100%;
}

/* CLARITY (Viator-style): the price is the decision, so make it unmistakable —
   both in the sticky mobile bar and the sidebar card. */
.mbook__price strong {
	font-size: 1.35rem;
	color: var(--forest);
	letter-spacing: -0.015em;
}
.booking__price .price-now em {
	color: var(--forest);
}
/* A calm "from" label so the number reads as a starting price, not a flat one. */
.booking__pricelabel,
.mbook__price small {
	font-weight: 600;
}

/* -------------------------------------------------------------------------
 * 1.18.0 — Destinations joins the card family + clean-photo product frame.
 * Prior to this, Destinations rendered as a dark full-bleed overlay tile
 * (.dest-tile) with no relation to the Tours/Activities/Experiences card
 * language. .dest-card (see inc/template-tags.php) now shares the same
 * photo-top / white-body / matted-print / elevation system, so all four
 * listing surfaces — Tours, Activities, Experiences, Destinations — read as
 * one honest, image-forward product grid, Uber-Eats-style.
 * ---------------------------------------------------------------------- */
.dest-card__go {
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6);
}
.dest-card__go:hover {
	box-shadow: none;
}

@media (max-width: 700px) {
	/* Keep the saturation lift subtle on small, brighter phone screens. */
	.tour-card__media img,
	.dest-card__media img,
	.vmosaic__main img,
	.vmosaic__thumb img { filter: saturate(1.05) contrast(1.02); }
}

/* -------------------------------------------------------------------------
 * 1.20.0 — Compacting pass: tighter density across cards, archives and
 * detail pages. This is a SPACING-ONLY refinement — every color, radius,
 * shadow, light treatment and photo/text frame rule above stays exactly as
 * it is. The lamplight-on-sandstone system doesn't change; the air around
 * it does. Goal: more product visible per screen (denser grids, shorter
 * detail pages) without the cards or panels feeling cramped or losing the
 * warm, mounted-print quality already established.
 * ---------------------------------------------------------------------- */

/* CARDS — smaller, tighter text frame under the same clean photo well. */
.card-grid {
	gap: 18px;
}
.dest-grid {
	gap: 18px;
}
.tour-card__body,
.dest-card__body {
	padding: 14px 16px 15px;
	gap: 4px;
}
.tour-card__eyebrow,
.dest-card__eyebrow {
	font-size: .68rem;
}
.tour-card h3,
.dest-card h3 {
	margin-top: 1px;
	font-size: 1.08rem;
	line-height: 1.22;
}
.tour-card__metaline,
.dest-card__teaser {
	font-size: .82rem;
}
.tour-card__foot,
.dest-card__foot {
	margin-top: 8px;
	padding-top: 12px;
}
.tour-card__go,
.dest-card__go {
	padding: 9px 16px;
	font-size: .84rem;
}
.tour-card__photos {
	padding: 5px 9px;
	right: 10px;
	bottom: 10px;
}
.wishlist-btn {
	top: 12px;
	right: 12px;
	width: 32px;
	height: 32px;
}
.wishlist-btn svg { width: 17px; height: 17px; }

/* ARCHIVES — shorter lamplight header, same wash and hairline. */
.archive-head {
	padding: clamp(26px, 4.5vw, 48px) 0;
}
.archive-head h1 {
	margin-bottom: .28em;
}

/* DETAIL HERO — a shorter "one bold moment" that still reads as full-bleed
   lamplight, just without the long empty run above the title on tall
   viewports. Meta rows sit closer together underneath. */
.tour-hero {
	min-height: 42vh;
}
.tour-hero__inner {
	padding-block: 26px;
}
.tour-hero__subtitle {
	margin-top: 4px;
}
.tour-hero__meta {
	gap: 16px;
	margin-top: 8px;
}

/* MAIN LAYOUT — narrower gutter between the reading column and the
   booking card; headings sit closer to the copy above them. */
.tour-layout {
	gap: 30px;
}
.tour-main :where(h2) {
	margin-top: 1.15em;
}
.entry-content p {
	margin-bottom: .85em;
}

/* Chips: same pill, tighter padding and row gap. */
.chips {
	gap: 8px;
	margin-bottom: 4px;
}
.chips li {
	padding: 6px 13px;
	font-size: .85rem;
}

/* Itinerary: shorter row height, smaller day-number badge, tighter body
   indent — the accordion still opens onto its own mounted panel. */
.itinerary {
	padding: 2px 16px;
}
.itinerary__head {
	padding: 13px 4px;
	gap: 13px;
}
.itinerary__num {
	width: 34px;
	height: 34px;
	font-size: .92rem;
}
.itinerary__title {
	font-size: 1.08rem;
}
.itinerary__body {
	padding: 0 4px 16px 51px;
}

/* Include / exclude: narrower column gap, shorter row padding. */
.incexc {
	gap: 20px;
}
.incexc li {
	padding: 6px 0 6px 26px;
}
.incexc .inc,
.incexc .exc {
	padding: 16px 18px;
}

/* Booking / facts card: same sticky warm panel, less internal air so the
   whole card — and the price it exists to show — sits higher on screen. */
.booking {
	padding: 18px 20px 19px;
}
.booking__top {
	margin-bottom: 12px;
}
.booking__facts {
	margin: 0 0 14px;
	padding-top: 12px;
}
.booking__facts > div {
	padding: 8px 0;
}
.booking__actions {
	gap: 8px;
}
.booking__assure {
	margin-top: 10px;
}
.booking__quote {
	margin-top: 16px;
	padding-top: 16px;
}

@media (max-width: 700px) {
	/* Denser two-up phone grid: the compacted card body has room to spare. */
	.card-grid {
		gap: 14px;
	}
	.tour-hero {
		min-height: 38vh;
	}
	.tour-hero__inner {
		padding-block: 18px;
	}
	.itinerary {
		padding-inline: 12px;
	}
	.incexc .inc,
	.incexc .exc {
		padding: 14px 16px;
	}
}

/* -------------------------------------------------------------------------
 * 1.22.0 — FAQ (real per-tour data, template-parts/faq.php) joins the
 * mounted-panel family. Scoped to the product detail column only — the
 * [aaatrails_faqs] shortcode's plain bordered-list look on a standalone
 * FAQ page is untouched; it doesn't sit among elevated itinerary/incexc
 * cards there, so it doesn't need the same frame.
 * ---------------------------------------------------------------------- */
.tour-main .aat-faq {
	margin: 0;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--card);
	box-shadow: var(--aaa-elev-1);
	overflow: hidden;
	padding: 4px 20px;
}
.tour-main .aat-faq__item:last-child {
	border-bottom: 0;
}
.tour-main .aat-faq__q {
	padding: 13px 4px;
}

@media (max-width: 700px) {
	.tour-main .aat-faq {
		padding-inline: 14px;
	}
}