/* ==========================================================================
   Travel Hub - Tour detail + booking panel            (Redesign Phase 1E)

   Loaded on Tour singles only, after tour-detail-v3.css. The engine's
   booking.css is enqueued by the widget shortcode AFTER wp_head, so it prints
   in the footer, later than this file: every widget rule here is therefore
   prefixed .thv3 so it wins on specificity, not source order. Keep it so.
   Presentation only: nothing here changes a field, a name, a
   hidden/disabled state or the order of the booking form. The widget is
   brought onto the system through the --thv3-* variables it already reads,
   not by overpainting its buttons (see the note in tour-detail-v3.css on why
   that once broke the disabled "Book now").

   Desktop: main 2fr / booking 1fr (66.7 / 33.3) with a 48px gutter, the same
   columns for the hero, so the gallery lines up with the content column and
   the hero's price column with the booking panel.
   ========================================================================== */

.thv3 {
	/* Bridge: the page and the engine widget both read these. */
	--thv3-teal: var(--th-color-action);
	--thv3-teal-dark: var(--th-color-action-hover);
	--thv3-radius: var(--th-radius-card);
	--thv3-display: var(--th-font);
	--thv3-shadow: var(--th-shadow-card);
	--thv3-nav-h: 60px;                 /* 44px links + 2 x 8px padding */
	--thv3-section-gap: var(--th-space-9);

	font-family: var(--th-font);
	background: var(--th-color-canvas);
}
@media (min-width: 1024px) { .thv3 { --thv3-section-gap: var(--th-space-10); } }

/* One typeface. The page used Georgia for its title and prices and Cairo for
   everything else - the only page on the site that did. */
.thv3__title,
.thv3__amount,
.thv3__card-amount,
.thv3__mcta-amount,
.thv3__policy-big {
	font-family: var(--th-font);
	font-weight: var(--th-fw-display);
	letter-spacing: var(--th-ls-heading);
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.thv3__hero { padding-block: var(--th-space-6) var(--th-space-9); }
.thv3__crumbs { margin-block-end: var(--th-space-6); font-size: var(--th-fs-small); }
.thv3__title {
	margin: var(--th-gap-eyebrow) 0 0;
	font-size: var(--th-fs-h1);
	line-height: var(--th-lh-heading);
}
.thv3__lede { margin-block-start: var(--th-gap-title); font-size: var(--th-fs-lead); line-height: var(--th-lh-body); }
.thv3__figure { border-radius: var(--th-radius-panel); overflow: hidden; }
/* Quick facts - hero row 2 (owner decision): duration, group size, start time,
   next date, under the image and copy alike. Information, not controls: a
   calm grid of equal tiles, never the old horizontal chip scroller. 2 x 2 on
   phones and tablets, one row from 1024; a lone third tile takes the full row
   rather than leaving a hole; one column only where two would squeeze. */
.thv3__hero .thv3__facts {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--th-space-4);
	margin: var(--th-space-7) 0 0;
	padding: 0;
	list-style: none;
	overflow: visible;
	scroll-snap-type: none;
}
.thv3__hero .thv3__fact {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: var(--th-space-1);
	min-inline-size: 0;
	padding: var(--th-space-3) var(--th-space-4);
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: var(--th-radius-control);
	background: rgba(255, 255, 255, 0.06);
	font-size: var(--th-fs-body);
}
.thv3__hero .thv3__fact-label {
	display: block;
	font-size: var(--th-fs-micro);
	font-weight: var(--th-fw-ui);
	letter-spacing: 0;
	text-transform: none;
	line-height: 1.3;
	color: rgba(255, 255, 255, 0.78);
}
.thv3__hero .thv3__fact-value {
	font-weight: var(--th-fw-ui);
	line-height: 1.35;
	color: #fff;
	font-variant-numeric: tabular-nums;
	overflow-wrap: anywhere;
}
.thv3__hero .thv3__facts[data-count="3"] > .thv3__fact:last-child,
.thv3__hero .thv3__facts[data-count="1"] > .thv3__fact { grid-column: 1 / -1; }

@media (min-width: 1024px) {
	.thv3__hero .thv3__facts {
		grid-template-columns: repeat(var(--thv3-facts, 4), minmax(0, 1fr));
		gap: var(--th-space-6);
		margin-block-start: var(--th-space-8);
	}
	.thv3__hero .thv3__facts[data-count="3"] { --thv3-facts: 3; }
	.thv3__hero .thv3__facts[data-count="2"] { --thv3-facts: 2; }
	.thv3__hero .thv3__facts[data-count="1"] { --thv3-facts: 1; }
	.thv3__hero .thv3__facts[data-count="3"] > .thv3__fact:last-child { grid-column: auto; }
	.thv3__hero .thv3__fact { padding: var(--th-space-4) var(--th-space-5); }
}
/* Phones: "2026-09-25 · 04:30" is 138px at 16px and a 375 tile gives it 130;
   12px sides and a 15px value keep every tile to one line, all one height. */
@media (max-width: 29.999rem) {
	.thv3__hero .thv3__fact { padding-inline: var(--th-space-3); }
	.thv3__hero .thv3__fact-value { font-size: var(--th-fs-small); }
}
@media (max-width: 20rem) {
	.thv3__hero .thv3__facts { grid-template-columns: minmax(0, 1fr); }
}

@media (min-width: 1024px) {
	.thv3__hero-grid,
	.thv3__layout {
		grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
		column-gap: var(--th-space-9);
	}
}

/* --------------------------------------------------------------------------
   Layout and section rhythm
   -------------------------------------------------------------------------- */
.thv3__layout { padding-block: var(--th-group) var(--th-section); }
.thv3__main > .thv3__section { margin-block-end: var(--thv3-section-gap); }
.thv3__main > .thv3__section:last-child { margin-block-end: 0; }

.thv3__h2 {
	margin: 0 0 var(--th-gap-h2);
	color: var(--th-color-ink);
	font-size: var(--th-fs-section);
	font-weight: var(--th-fw-display);
	line-height: var(--th-lh-heading);
	letter-spacing: var(--th-ls-heading);
}
/* Three H3 sizes (16.5 / 17 / 18.7px) become one. */
.thv3 h3,
.thv3__h3 {
	font-size: var(--th-fs-h4);
	font-weight: var(--th-fw-heading);
	line-height: var(--th-lh-snug);
}
.thv3__h3 { margin: var(--th-space-6) 0 var(--th-gap-h3); }
.thv3__prose { max-inline-size: var(--th-measure); line-height: var(--th-lh-body); }
.thv3__prose p { margin: 0 0 var(--th-gap-p); }
.thv3__section--read { max-inline-size: var(--th-measure-overview); }

/* Anchored sections land below the sticky header AND the section nav, so a
   jump never hides the heading it jumped to. */
.thv3 [id^="thv3-"] {
	scroll-margin-block-start: calc(var(--th-header-h) + var(--thv3-nav-h) + var(--th-space-4));
}

/* --------------------------------------------------------------------------
   Section navigation
   Sticky directly under the global header. It scrolls sideways when the
   labels do not fit - that is deliberate, so the scrollbar is hidden and a
   fade on the trailing edge (set by thui.js only while more is off-screen)
   says there is more.
   -------------------------------------------------------------------------- */
.thv3__nav {
	inset-block-start: calc(var(--th-header-h) + var(--wp-admin--admin-bar--height, 0px));
	z-index: calc(var(--thui-z-header) - 1);
	margin-block-end: var(--th-space-6);
	background: rgba(250, 251, 252, 0.96);
	border-block-end: var(--th-divider);
}
.thv3__nav ul {
	gap: var(--th-space-1);
	padding-block: var(--th-space-2);
	scrollbar-width: none;
	overscroll-behavior-x: contain;
}
.thv3__nav ul::-webkit-scrollbar { display: none; }
.thv3__nav ul[data-th-more="end"] { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 48px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 48px), transparent); }
.thv3__nav ul[data-th-more="start"] { -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 48px), transparent); mask-image: linear-gradient(to left, #000 calc(100% - 48px), transparent); }
.thv3__nav ul[data-th-more="both"] { -webkit-mask-image: linear-gradient(to right, transparent, #000 48px, #000 calc(100% - 48px), transparent); mask-image: linear-gradient(to right, transparent, #000 48px, #000 calc(100% - 48px), transparent); }
.thv3__nav a {
	padding-inline: var(--th-space-3);
	border-radius: var(--th-radius-pill);
	color: var(--th-color-muted);
	font-size: var(--th-fs-small);
	font-weight: var(--th-fw-ui);
}
.thv3__nav a:hover { background: var(--th-color-surface); color: var(--th-color-ink); }
.thv3__nav a:focus-visible { outline: none; box-shadow: var(--th-focus-ring); }

/* --------------------------------------------------------------------------
   Booking column
   -------------------------------------------------------------------------- */
.thv3__rail { inset-block-start: calc(var(--th-header-h) + var(--wp-admin--admin-bar--height, 0px) + var(--th-space-6)); }
.thv3__card {
	padding: var(--th-space-6);
	border: var(--th-border);
	border-radius: var(--th-radius-card);
	box-shadow: var(--th-shadow-raised);
}

/* Price leads; the heading is the action it introduces. */
.thv3 .thtour-booking__head { margin-block-end: var(--th-space-6); }
.thv3 .thtour-booking__from { gap: var(--th-space-1) var(--th-space-2); margin-block-end: var(--th-space-2); }
.thv3 .thtour-booking__from-lead,
.thv3 .thtour-booking__basis { font-size: var(--th-fs-small); }
.thv3 .thtour-booking__amount {
	font-size: var(--th-fs-h2);
	font-weight: var(--th-fw-display);
	letter-spacing: var(--th-ls-heading);
	line-height: var(--th-lh-display);
}
.thv3 .thtour-booking__title { font-size: var(--th-fs-h4); font-weight: var(--th-fw-heading); }
.thv3 .thtour-booking__facts { gap: var(--th-space-2); margin-block-start: var(--th-space-3); }
.thv3 .thtour-booking__facts li { padding: var(--th-space-1) var(--th-space-3); font-size: var(--th-fs-micro); }

/* Groups 20px apart; label -> control 8px. */
.thv3 .thtour-booking__form { gap: var(--th-space-6); }
.thv3 .thtour-booking__fields { gap: var(--th-space-5); }
.thv3 .thtour-field { gap: var(--th-space-2); }
.thv3 .thtour-field > span,
.thv3 .thtour-party > legend { font-size: var(--th-fs-micro); letter-spacing: 0.02em; }

/* Every control one height (the live panel mixed 52, 54 and 61px). */
.thv3 .thtour-booking input[type="date"],
.thv3 .thtour-booking input[type="number"],
.thv3 .thtour-booking input[type="text"],
.thv3 .thtour-booking select {
	box-sizing: border-box;
	block-size: var(--th-control-h);
	min-block-size: var(--th-control-h);
	padding-block: 0;
	padding-inline: var(--th-space-3);
	border-width: 1px;
	border-radius: var(--th-radius-control);
	line-height: var(--th-control-h);
}
.thv3 .thtour-booking select { padding-inline-end: var(--th-space-8); }
.thv3 .thtour-party { gap: var(--th-space-2); }
/* One equal column per declared band (1, 2 or 3), whatever the count. */
.thv3 .thtour-party__grid {
	grid-template-columns: none;
	grid-auto-flow: column;
	grid-auto-columns: minmax(0, 1fr);
	align-items: start;
	gap: var(--th-space-3);
}
/* The capacity script (mu-plugin, .thc-cap-msg) appends an EMPTY message div
   with inline 6px margins to the Adults field only - a 12px phantom row that
   pushed Adults 20px above Children and Infants. Collapsed while empty; it
   shows, unchanged, the moment it carries a message. */
.thv3 .thtour-party__grid .thc-cap-msg:empty { display: none; }
.thv3 .thtour-field__note { font-size: var(--th-fs-micro); }

/* Total, then the action. */
.thv3 .thtour-quote { padding: var(--th-space-4); border-radius: var(--th-radius-control); }
.thv3 .thtour-booking__actions { gap: var(--th-space-3); }
.thv3 .thtour-button {
	min-block-size: var(--th-control-h-lg);
	padding-block: 0;
	border-radius: var(--th-radius-control);
	font-size: var(--th-control-fs);
}

/* Reassurance: quiet, after the action. */
.thv3 ul.thtour-booking__trust { gap: var(--th-space-2) var(--th-space-4); margin-block-start: 0; font-size: var(--th-fs-micro); }
.thv3__card-horizon,
.thv3__card-reassure { font-size: var(--th-fs-micro); }
.thv3__card-horizon { margin-block-start: var(--th-space-4); }

/* --------------------------------------------------------------------------
   Related Tours: the canonical card, two to a row in the content column
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
	.thv3__related:has(> .th-card) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Mobile sticky CTA follows the button system. */
.thv3__mcta .thv3-btn { min-block-size: var(--th-control-h); border-radius: var(--th-radius-control); }

/* --------------------------------------------------------------------------
   Quick answers: the same divided-list FAQ as the destination page, instead
   of a stack of boxes with the browser's triangle.
   -------------------------------------------------------------------------- */
.thv3__faq details {
	margin: 0;
	padding: 0;
	border: 0;
	border-block-end: var(--th-divider);
	border-radius: 0;
	background: none;
}
.thv3__faq .thv3__h2 + details,
.thv3__faq details:first-of-type { border-block-start: var(--th-divider); }
.thv3__faq summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--th-space-4);
	min-block-size: 56px;
	padding-block: var(--th-space-3);
	color: var(--th-color-ink);
	font-weight: var(--th-fw-heading);
	list-style: none;
}
.thv3__faq summary::-webkit-details-marker { display: none; }
.thv3__faq summary::after {
	content: "";
	flex: 0 0 auto;
	inline-size: 10px;
	block-size: 10px;
	/* Physical, not logical: the chevron is drawn by rotation, which does not
	   mirror, so logical borders pointed it sideways in RTL. */
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg) translateY(-3px);
}
.thv3__faq details[open] summary::after { transform: rotate(-135deg) translateY(-3px); }
.thv3__faq summary:focus-visible { outline: none; box-shadow: var(--th-focus-ring); border-radius: var(--th-radius-sm); }
.thv3__faq-a { padding-block-end: var(--th-space-5); color: var(--th-color-text); }

/* Long single words (Russian compounds, German place names) must wrap inside
   the hero's narrow column instead of pushing the page sideways: at 1024 the
   Russian title overflowed the viewport by 53px. */
.thv3__title { overflow-wrap: break-word; hyphens: auto; }
@media (min-width: 1024px) and (max-width: 1279px) {
	.thv3__title { font-size: var(--th-fs-h2); }
}

/* ==========================================================================
   Refinement pass (owner review): Good to know + Add-ons
   ========================================================================== */

/* --------------------------------------------------------------------------
   Good to know: Important information, then What to bring - one column at
   every width, no boxes, one reading measure, one list rhythm.
   H2 -> 32 -> subsection title -> 12 -> content -> 32 -> next subsection.
   -------------------------------------------------------------------------- */
#thv3-info .thv3__usefulgrid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--th-space-7);
	max-inline-size: var(--th-measure-overview);
	margin-block-start: var(--th-space-7); /* collapses with the H2's 16px: 32 */
}
#thv3-info .thv3__panel {
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
}
#thv3-info .thv3__panel h3 {
	margin: 0 0 var(--th-gap-h3);
	color: var(--th-color-ink);
}
#thv3-info .thv3__panel .thv3__prose { max-inline-size: none; }
#thv3-info .thv3__panel .thv3__prose p { margin: 0 0 var(--th-gap-p); }
#thv3-info .thv3__panel .thv3__prose p:last-child { margin-block-end: 0; }
#thv3-info .thv3__panel .thv3__prose + ul { margin-block-start: var(--th-gap-p); }
#thv3-info .thv3__panel ul {
	display: grid;
	gap: var(--th-space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}
#thv3-info .thv3__panel li {
	position: relative;
	margin: 0;
	padding-inline-start: var(--th-space-6);
	color: var(--th-color-text);
	font-size: var(--th-fs-body);
	line-height: var(--th-lh-body);
}
#thv3-info .thv3__panel li::before {
	content: "";
	position: absolute;
	inset-inline-start: var(--th-space-2);
	inset-block-start: calc(0.8em - 3px);
	inline-size: 6px;
	block-size: 6px;
	border-radius: 50%;
	background: var(--th-color-action);
}

/* --------------------------------------------------------------------------
   Add-ons
   H2 -> 16 -> intro -> 32 -> group head -> 16 -> cards -> 40 -> next group
   -> 24 -> note. One section, whitespace between groups, one boundary per
   card - no card inside a card.
   -------------------------------------------------------------------------- */
.thv3-addons__intro {
	margin: 0 0 var(--th-space-7);
	max-inline-size: var(--th-measure);
	color: var(--th-color-muted);
}
.thv3-addons .thv3__h2 + .thv3-choices { margin-block-start: var(--th-space-4); }

.thv3-choices {
	min-inline-size: 0;
	margin: 0;
	padding: 0;
	border: 0;
}
.thv3-choices + .thv3-choices { margin-block-start: var(--th-space-8); }

.thv3-choices__head {
	display: block;
	float: none;
	inline-size: 100%;
	margin: 0 0 var(--th-space-4);
	padding: 0;
}
.thv3-choices__title {
	display: block;
	color: var(--th-color-ink);
	font-size: var(--th-fs-h4);
	font-weight: var(--th-fw-heading);
	line-height: var(--th-lh-snug);
}
.thv3-choices__rule {
	display: block;
	margin-block-start: var(--th-space-1);
	color: var(--th-color-muted);
	font-size: var(--th-fs-small);
	font-weight: var(--th-fw-body);
}

/* Columns come from the space the component actually has, not the viewport:
   a card is never narrower than 17rem, so the content column gives two at
   1440 and 1024 and on tablets, and phones get one. */
.thv3-choices__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
	gap: var(--th-space-3);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* One choice card: [radio] [label ............] [price], 64px tall. */
.thv3-choice {
	container-type: inline-size;
	position: relative;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	column-gap: var(--th-space-3);
	min-block-size: var(--th-space-10); /* 64: every card one height, one- or two-line price */
	margin: 0;
	padding: var(--th-space-3) var(--th-space-4);
	border: var(--th-border);
	border-radius: var(--th-radius-control);
	background: var(--th-color-surface);
	cursor: pointer;
	transition: border-color var(--th-dur) var(--th-ease), background-color var(--th-dur) var(--th-ease), box-shadow var(--th-dur) var(--th-ease);
}
.thv3-choice:hover { border-color: var(--th-border-color-strong); }

/* The native radio stays a real, visible, focusable control. */
.thv3-choice__input {
	inline-size: 20px;
	block-size: 20px;
	margin: 0;
	accent-color: var(--th-color-action);
	cursor: inherit;
}
/* The card draws the focus ring where :has() is supported; elsewhere the
   radio keeps its own outline, so focus is never invisible. */
@supports selector(:has(*)) {
	.thv3-choice__input:focus-visible { outline: none; }
}
@supports not selector(:has(*)) {
	.thv3-choice__input:focus-visible { outline: 2px solid var(--th-color-ink); outline-offset: 2px; }
}

/* Selected: stronger edge (inset, so the card never changes size), a
   whisper of tint, checked radio. */
.thv3-choice:has(.thv3-choice__input:checked) {
	border-color: var(--th-color-action);
	background: var(--th-color-action-soft);
	box-shadow: inset 0 0 0 1px var(--th-color-action);
}
.thv3-choice:has(.thv3-choice__input:focus-visible) { box-shadow: var(--th-focus-ring); }
.thv3-choice:has(.thv3-choice__input:checked:focus-visible) { box-shadow: inset 0 0 0 1px var(--th-color-action), var(--th-focus-ring); }
.thv3-choice:has(.thv3-choice__input:disabled) { opacity: 0.5; cursor: not-allowed; }
.thv3-choice:has(.thv3-choice__input:disabled):hover { border-color: var(--th-border-color); }

.thv3-choice__label {
	min-inline-size: 0;
	color: var(--th-color-ink);
	font-size: var(--th-fs-body);
	font-weight: var(--th-fw-ui);
	line-height: var(--th-lh-ui);
	overflow-wrap: break-word;
}

.thv3-choice__price {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	text-align: end;
	line-height: var(--th-lh-ui);
	white-space: nowrap;
}
.thv3-choice__amount {
	color: var(--th-color-ink);
	font-size: var(--th-fs-body);
	font-weight: var(--th-fw-heading);
	font-variant-numeric: tabular-nums;
	unicode-bidi: isolate;
}
.thv3-choice__basis {
	color: var(--th-color-muted);
	font-size: var(--th-fs-micro);
}
.thv3-choice__price--included {
	color: var(--th-color-muted);
	font-size: var(--th-fs-small);
	font-weight: var(--th-fw-ui);
}

/* A very narrow card puts the price under the label instead of squeezing both. */
@container (max-width: 15rem) {
	.thv3-choice__price { grid-column: 2; align-items: flex-start; text-align: start; margin-block-start: var(--th-space-1); }
}

/* Informational rows (groups the panel cannot address, included/optional
   lists): same rhythm, visibly NOT controls - no radio, no hover, no pointer. */
.thv3-choice--static {
	grid-template-columns: minmax(0, 1fr) auto;
	border-color: transparent;
	background: var(--th-color-subtle);
	cursor: default;
}
.thv3-choice--static:hover { border-color: transparent; }

.thv3-addons__status:empty { margin: 0; } /* stays in the accessibility tree so a change is announced */
.thv3-addons__status {
	margin: var(--th-space-5) 0 0;
	color: var(--th-color-ink);
	font-size: var(--th-fs-small);
	font-weight: var(--th-fw-ui);
}
.thv3-addons__note {
	margin: var(--th-space-6) 0 0;
	max-inline-size: var(--th-measure);
	color: var(--th-color-muted);
	font-size: var(--th-fs-small);
}
.thv3-addons__status:not(:empty) + .thv3-addons__note { margin-block-start: var(--th-space-2); }

/* Until tour-choices.js finds a booking panel the radios are disabled: show
   the cards as a calm list, not as dimmed controls. */
.thv3-addons:not(.is-live) .thv3-choice {
	grid-template-columns: minmax(0, 1fr) auto;
	border-color: transparent;
	background: var(--th-color-subtle);
	cursor: default;
	opacity: 1;
}
.thv3-addons:not(.is-live) .thv3-choice__input,
.thv3-addons:not(.is-live) .thv3-choice--none { display: none; }
/* "Choose one" describes a control; above a plain list it would mislead. */
.thv3-addons:not(.is-live) .thv3-choices__rule { display: none; }

@media (prefers-reduced-motion: reduce) {
	.thv3-choice { transition: none; }
}