/* ==========================================================================
   Travel Hub - Home                                        (Redesign Phase 1F)

   Markup: front-page.php + template-parts/home/{hero,search,destinations,
   tours,services,why,lead}.php. Front page only, after cards.css.

   Built from the foundation, not beside it: .th-container, .th-section,
   .th-head, .th-grid, .th-btn, the Tour card and the place card are the
   shared components; this sheet only composes them and styles the three
   Home-only pieces (opening, services, lead). No hardcoded spacing - every
   length is a token.

   Mobile is composed, not shrunk: the eight Tours become one swipeable row,
   the services one feature card plus three rows, the section rhythm the 56px
   phone step of --th-section.
   ========================================================================== */

.th-home { background: var(--th-color-canvas); }
/* Connected-journey homepage: keep the image, text and search as one opening. */
.th-home-hero { min-block-size: min(88svh, 860px); }
.th-home-hero__image { object-position: 51% 53%; }
.th-home-hero::after,
[dir="rtl"] .th-home-hero::after {
	background: linear-gradient(to top, rgba(5, 28, 51, .88), rgba(5, 28, 51, .54) 55%, rgba(5, 28, 51, .34));
}
.th-home-hero__inner {
	min-block-size: min(88svh, 860px);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding-block: var(--th-section-sm) calc(var(--th-section) + var(--th-space-10));
}
.th-home-hero__title { max-inline-size: 15ch; }
.th-home-hero__lede { max-inline-size: 48rem; }
.th-home-hero__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--th-space-3); margin-block-start: var(--th-space-7); }
.th-home-hero__actions .th-btn--secondary { color: #fff; border-color: rgba(255,255,255,.75); background: rgba(5,28,51,.36); }
.th-home-hero__actions .th-btn--secondary:hover { background: rgba(5,28,51,.72); }
.th-home .th-home-opening .thh-search { margin-block-start: calc(-1 * var(--th-space-12)); }
.th-home-search__intro { max-inline-size: 52rem; margin: 0 0 var(--th-space-5); color: var(--th-color-ink); }
.th-home-search__action { display: inline-flex; }
.th-home .th-home-transfer-form { color: var(--th-color-ink); }
.th-home .th-home-transfer-form .thtz-search { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--th-space-4); margin: 0; }
.th-home .th-home-transfer-form .thtz-party,
.th-home .th-home-transfer-form .thtz-seats,
.th-home .th-home-transfer-form .thtz-return { grid-column: 1 / -1; }
.th-home .th-home-transfer-form .thtz-search > .thtz-button { grid-column: 1 / -1; justify-self: start; }
.th-home .th-home-transfer-form .thtz-field > span,
.th-home .th-home-transfer-form .thtz-hotel > label { display: block; margin-block-end: var(--th-space-2); font-weight: var(--th-fw-ui); }
.th-home .th-home-transfer-form input,
.th-home .th-home-transfer-form select { min-block-size: var(--th-control-h); border: var(--th-border); border-radius: var(--th-radius-control); background: var(--th-color-surface); color: var(--th-color-ink); font: inherit; }
.th-home .th-home-transfer-form .thtz-button { min-block-size: var(--th-control-h); padding-inline: var(--th-space-6); border: 0; border-radius: var(--th-radius-control); background: var(--th-color-action); color: #fff; font: inherit; font-weight: var(--th-fw-ui); cursor: pointer; }
.th-home .th-home-search__note { margin-block-start: var(--th-space-3); }
.th-home-assurance { padding-block: var(--th-space-7); border-block-end: var(--th-border); background: var(--th-color-surface); }
.th-home-assurance__list { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--th-space-4) var(--th-space-8); margin: 0; padding: 0; list-style: none; }
.th-home-assurance__list li { display: flex; align-items: center; gap: var(--th-space-2); font-weight: var(--th-fw-ui); }
.th-home-assurance__mark { display: grid; place-items: center; inline-size: 1.5rem; block-size: 1.5rem; flex: 0 0 auto; border-radius: 50%; color: #fff; background: var(--th-color-action); }
.th-home-journey__grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: var(--th-grid-gap); margin: 0; padding: 0; list-style: none; }
.th-home-journey__grid li { padding: var(--th-space-6); border: var(--th-border); border-radius: var(--th-radius-card); background: var(--th-color-surface); }
.th-home-journey__number { color: var(--th-color-action); font-size: var(--th-fs-display); font-weight: var(--th-fw-display); line-height: 1; }
.th-home-journey__grid h3 { margin: var(--th-space-4) 0 var(--th-space-2); }
.th-home-journey__grid p { margin: 0; }
.th-home-plan__inner { display: grid; grid-template-columns: 1.4fr 1fr; align-items: center; gap: var(--th-grid-gap-lg); }
.th-home-plan__inner p { max-inline-size: 42rem; }
.th-home-plan__inner .th-btn { margin-block-start: var(--th-space-4); }
.th-home-plan__inner ul { margin: 0; padding: var(--th-space-6); list-style: none; border-radius: var(--th-radius-card); background: var(--th-color-surface); }
.th-home-plan__inner li { padding-block: var(--th-space-4); border-block-end: var(--th-border); font-weight: var(--th-fw-ui); }
.th-home-plan__inner li:last-child { border: 0; }
.th-home-faq__list { max-inline-size: 54rem; margin-inline: auto; }
.th-home-faq__list details { border-block-end: var(--th-border); }
.th-home-faq__list summary { padding-block: var(--th-space-5); cursor: pointer; font-weight: var(--th-fw-heading); }
.th-home-faq__list summary:focus-visible { outline: 3px solid var(--th-color-action); outline-offset: 3px; }
.th-home-faq__list p { margin: 0; padding-block-end: var(--th-space-5); }
@media (max-width: 767.98px) {
	.th-home-hero, .th-home-hero__inner { min-block-size: min(76svh, 740px); }
	.th-home-hero__inner { padding-block: var(--th-space-10) calc(var(--th-section) + var(--th-space-10)); }
	.th-home-hero__actions, .th-home-hero__actions .th-btn { inline-size: 100%; }
	.th-home-assurance__list { display: grid; }
	.th-home-journey__grid, .th-home-plan__inner { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
	.th-home * { scroll-behavior: auto; transition-duration: .01ms; animation-duration: .01ms; }
}
/* Alternating bands must read as bands: "surface" is white on a #FAFBFC
   canvas, which made two paddings look like one blank gap. On the Home the
   alternate band takes the quiet panel tint, and cards stay white on it. */
.th-home .th-section--surface { background: var(--th-color-subtle); }

/* --------------------------------------------------------------------------
   1. Opening - photograph + statement, search panel on its lower edge
   -------------------------------------------------------------------------- */
.th-home-hero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	color: #fff;
	background: var(--th-color-night);
}
.th-home-hero__image {
	position: absolute;
	inset: 0;
	z-index: -2;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	object-position: 64% 46%;
}
.th-home-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(to right, rgba(5, 28, 51, 0.88) 0%, rgba(5, 28, 51, 0.74) 58%, rgba(5, 28, 51, 0.3) 78%, rgba(5, 28, 51, 0.1) 100%),
		linear-gradient(to top, rgba(5, 28, 51, 0.55) 0%, transparent 42%);
}
[dir="rtl"] .th-home-hero::after {
	background:
		linear-gradient(to left, rgba(5, 28, 51, 0.88) 0%, rgba(5, 28, 51, 0.74) 58%, rgba(5, 28, 51, 0.3) 78%, rgba(5, 28, 51, 0.1) 100%),
		linear-gradient(to top, rgba(5, 28, 51, 0.55) 0%, transparent 42%);
}
/* WCAG 1.4.3: the copy never runs past the part of the scrim held at 0.74
   (worst case over a white photo patch: lede 6.2:1, eyebrow 4.9:1). The
   title is capped at 18ch; the lede at 52vw (its line ends by ~55% of the
   hero at 1024 and ~50% at 1440) - see .th-home-hero__lede below. */
/* Phones and tablets: the copy runs (nearly) the full width, so the scrim
   must too (WCAG 1.4.3 - the side fade left line ends on low alpha). */
@media (max-width: 1023.98px) {
	.th-home-hero::after,
	[dir="rtl"] .th-home-hero::after { background: linear-gradient(to top, rgba(5, 28, 51, 0.86) 0%, rgba(5, 28, 51, 0.78) 100%); }
}
/* The bottom padding is the room the search panel overlaps into. */
.th-home-hero__inner { padding-block: var(--th-section-sm) calc(var(--th-space-10) + var(--th-space-8)); }
.th-home-hero__eyebrow {
	margin: 0;
	color: #7EE5D1;
	font-size: var(--th-fs-micro);
	font-weight: var(--th-fw-heading);
	letter-spacing: var(--th-ls-eyebrow);
	text-transform: uppercase;
}
.th-home-hero__title {
	max-inline-size: 18ch;
	margin: var(--th-gap-eyebrow) 0 0;
	color: #fff;
	font-size: var(--th-fs-display);
	font-weight: var(--th-fw-display);
	line-height: var(--th-lh-display);
	letter-spacing: var(--th-ls-display);
	text-wrap: balance;
}
.th-home-hero__lede {
	max-inline-size: var(--th-measure-lead);
	margin: var(--th-gap-title) 0 0;
	color: rgba(255, 255, 255, 0.9);
	font-size: var(--th-fs-lead);
	line-height: var(--th-lh-body);
}

@media (min-width: 768px) {
	.th-home-hero__inner { padding-block: var(--th-section) calc(var(--th-section) + var(--th-space-10)); }
}
@media (min-width: 1024px) {
	.th-home-hero { min-block-size: min(620px, 48vw); }
	.th-home-hero__lede { max-inline-size: min(var(--th-measure-lead), 52vw); }
	.th-home-hero__inner { padding-block: var(--th-section) calc(var(--th-space-12) + var(--th-space-10)); }
}

/* Search panel (template-parts/home/search.php, tabs from tabs.css). The panel
   is the only card here: the form inside loses its own border so there is no
   card inside a card. */
.th-home-opening .thh-search {
	position: relative;
	z-index: 1;
	margin-block-start: calc(-1 * (var(--th-space-10) + var(--th-space-4)));
	padding-block: 0;
	background: none;
}
.th-home-opening .thh-search .thh-head {
	/* Visually hidden, still announced: it names the search panel. */
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}
.th-home .thh-search__panel {
	margin: 0;
	padding: var(--th-space-5) var(--th-space-4);
	border: var(--th-border);
	border-radius: var(--th-radius-card);
	background: var(--th-color-surface);
	box-shadow: var(--th-shadow-overlay);
}
.th-home .thh-search__tabs { gap: var(--th-space-2); margin-block-end: var(--th-space-5); }
.th-home .thh-search__tab {
	min-block-size: 44px;
	padding: var(--th-space-2) var(--th-space-4);
	border-color: var(--th-border-color-strong);
	color: var(--th-color-ink);
	font-size: var(--th-fs-small);
	font-weight: var(--th-fw-ui);
}
.th-home .thh-search__tab.is-active { border-color: var(--th-color-ink); background: var(--th-color-ink); color: #fff; }
.th-home .thh-search__tab:focus-visible { outline: none; box-shadow: var(--th-focus-ring); }
.th-home .thh-search .thsx-form { padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
.th-home .thh-search__hint { margin-block-start: var(--th-space-4); font-size: var(--th-fs-small); }
.th-home .thh-search__hint a { color: var(--th-color-action); }

/* Phones: origin and destination keep the full width (long place names); the
   short fields pair up - vehicle / date, time / passengers - in DOM order. */
@media (max-width: 767.98px) {
	.th-home .thsx-form--transfers .thsx-form__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--th-space-3); }
	.th-home .thsx-form--transfers .thsx-form__grid > :nth-child(-n+2),
	.th-home .thsx-form--transfers .thsx-form__grid > .thsx-field--submit { grid-column: 1 / -1; }
	.th-home .th-home-transfer-form .thtz-search { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--th-space-3); }
	.th-home .th-home-transfer-form .thtz-search > :nth-child(-n+3),
	.th-home .th-home-transfer-form .thtz-search > .thtz-return,
	.th-home .th-home-transfer-form .thtz-search > .thtz-party,
	.th-home .th-home-transfer-form .thtz-search > .thtz-seats,
	.th-home .th-home-transfer-form .thtz-search > .thtz-button { grid-column: 1 / -1; }
}
@media (min-width: 768px) {
	.th-home-opening .thh-search { margin-block-start: calc(-1 * var(--th-section)); }
	.th-home .thh-search__panel { padding: var(--th-space-7) var(--th-space-8); border-radius: var(--th-radius-panel); }
}
@media (min-width: 1024px) {
	.th-home-opening .thh-search { margin-block-start: calc(-1 * (var(--th-space-12) + var(--th-space-4))); }
}

/* --------------------------------------------------------------------------
   2. Section heads with an action on the far side
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
	.th-head--split {
		flex-direction: row;
		align-items: flex-end;
		justify-content: space-between;
		gap: var(--th-space-6);
		max-inline-size: none;
	}
	.th-head--split > div { max-inline-size: var(--th-measure-lead); }
	.th-head--split > .th-btn { flex: 0 0 auto; }
}
.th-head--split > div > * { margin: 0; }
.th-head--split > div > .th-head__eyebrow + * { margin-block-start: var(--th-gap-eyebrow); }
.th-head--split > .th-btn { margin-block-start: var(--th-space-5); }
@media (min-width: 768px) { .th-head--split > .th-btn { margin-block-start: 0; } }

/* --------------------------------------------------------------------------
   3. Destinations - the place card, with its lede
   Phones: compact rows (thumbnail + text) - three places in one screen.
   -------------------------------------------------------------------------- */
.th-places--home .th-place__body { padding: var(--th-card-pad); }
@media (max-width: 767.98px) {
	.th-places--home .th-place {
		display: grid;
		grid-template-columns: 7rem minmax(0, 1fr);
		align-items: stretch;
	}
	.th-places--home .th-place__media { --th-ratio: auto; aspect-ratio: auto; min-block-size: 100%; }
	.th-places--home .th-place__media > img { position: absolute; inset: 0; }
	.th-places--home .th-place__body { padding: var(--th-space-4); }
	.th-places--home .th-card__art { inline-size: 64%; inset-block-start: 30%; }
}
@media (min-width: 768px) and (max-width: 1023.98px) {
	.th-places--home { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* --------------------------------------------------------------------------
   4. Tours - four across on desktop, one swipeable row below 1024
   -------------------------------------------------------------------------- */
.th-rail {
	margin-inline: calc(-1 * var(--th-gutter));
	padding-inline: var(--th-gutter);
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: var(--th-gutter);
	scrollbar-width: thin;
}
.th-rail:focus-visible { outline: none; box-shadow: inset var(--th-focus-ring); }
.th-rail__track {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: min(20rem, calc(100vw - 4rem));
	gap: var(--th-grid-gap);
	margin: 0;
	padding: var(--th-space-1) 0 var(--th-space-4);
	list-style: none;
}
.th-rail__item { scroll-snap-align: start; min-inline-size: 0; }

@media (min-width: 1024px) {
	.th-rail { margin-inline: 0; padding-inline: 0; overflow: visible; scroll-snap-type: none; }
	.th-rail__track {
		grid-auto-flow: row;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		grid-auto-columns: auto;
		padding: 0;
	}
}

/* --------------------------------------------------------------------------
   5. Services - transfers feature + three entries
   -------------------------------------------------------------------------- */
.th-home-services__grid { display: grid; gap: var(--th-grid-gap-lg); }
.th-feature {
	display: grid;
	overflow: hidden;
	border: var(--th-border);
	border-radius: var(--th-radius-card);
	background: var(--th-color-surface);
	box-shadow: var(--th-shadow-card);
}
.th-feature__media { --th-focus: 50% 60%; }
.th-feature__body { padding: var(--th-space-6) var(--th-card-pad) var(--th-space-6); }
.th-feature__eyebrow {
	margin: 0;
	color: var(--th-color-action);
	font-size: var(--th-fs-micro);
	font-weight: var(--th-fw-heading);
	letter-spacing: var(--th-ls-eyebrow);
	text-transform: uppercase;
}
.th-feature__title {
	margin: var(--th-gap-eyebrow) 0 0;
	color: var(--th-color-ink);
	font-size: var(--th-fs-section);
	font-weight: var(--th-fw-display);
	line-height: var(--th-lh-heading);
}
.th-feature__text { margin: var(--th-gap-h3) 0 0; color: var(--th-color-text); line-height: var(--th-lh-body); }
.th-feature__cta { margin-block-start: var(--th-space-6); }

.th-home-services__list { display: grid; gap: var(--th-grid-gap); margin: 0; padding: 0; list-style: none; }
.th-service {
	display: flex;
	align-items: center;
	gap: var(--th-space-4);
	block-size: 100%;
	min-block-size: var(--th-control-h);
	padding: var(--th-space-5) var(--th-card-pad);
	border: var(--th-border);
	border-radius: var(--th-radius-card);
	background: var(--th-color-surface);
	box-shadow: var(--th-shadow-card);
	color: var(--th-color-text);
	text-decoration: none;
	transition: box-shadow var(--th-dur) var(--th-ease), border-color var(--th-dur) var(--th-ease);
}
.th-service:hover { border-color: var(--th-border-color-strong); box-shadow: var(--th-shadow-raised); color: var(--th-color-text); }
.th-service:focus-visible { outline: none; box-shadow: var(--th-shadow-raised), var(--th-focus-ring); }
.th-service__icon {
	flex: 0 0 auto;
	inline-size: 44px;
	block-size: 44px;
	padding: 10px;
	border-radius: var(--th-radius-control);
	background: var(--th-color-action-soft);
	fill: none;
	stroke: var(--th-color-action);
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.th-service__body { display: flex; flex: 1 1 auto; flex-direction: column; gap: var(--th-space-1); min-inline-size: 0; }
.th-service__title { color: var(--th-color-ink); font-size: var(--th-fs-h4); font-weight: var(--th-fw-heading); line-height: var(--th-lh-snug); }
.th-service__text { color: var(--th-color-muted); font-size: var(--th-fs-small); line-height: var(--th-lh-body); }
.th-service__arrow {
	flex: 0 0 auto;
	inline-size: 20px;
	block-size: 20px;
	fill: none;
	stroke: var(--th-color-muted);
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}
[dir="rtl"] .th-service__arrow { transform: scaleX(-1); }

@media (min-width: 768px) {
	.th-feature { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
	.th-feature__media { --th-ratio: auto; min-block-size: 100%; }
	.th-feature__media > img { position: absolute; inset: 0; }
	.th-feature__body { display: flex; flex-direction: column; justify-content: center; padding: var(--th-space-8); }
	.th-feature__cta { align-self: flex-start; }
}
@media (min-width: 1024px) {
	.th-feature { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); min-block-size: 360px; }
	.th-feature__body { padding: var(--th-space-9); }
	.th-home-services__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.th-service { align-items: flex-start; }
	.th-service__arrow { margin-block-start: var(--th-space-3); }
}

/* --------------------------------------------------------------------------
   6. Why Travel Hub - three points + the trust claims
   -------------------------------------------------------------------------- */
.th-home-why__points { margin: 0; padding: 0; list-style: none; }
@media (min-width: 768px) { .th-home-why__points { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.th-home-why__point {
	padding: var(--th-space-6) var(--th-card-pad);
	border: var(--th-border);
	border-radius: var(--th-radius-card);
	background: var(--th-color-surface);
}
.th-home-why__num {
	display: block;
	color: var(--th-color-accent-ink);
	font-size: var(--th-fs-small);
	font-weight: var(--th-fw-heading);
	font-variant-numeric: tabular-nums;
}
.th-home-why__title {
	margin: var(--th-space-3) 0 0;
	color: var(--th-color-ink);
	font-size: var(--th-fs-h4);
	font-weight: var(--th-fw-heading);
	line-height: var(--th-lh-snug);
}
.th-home-why__text { margin: var(--th-gap-h3) 0 0; color: var(--th-color-text); font-size: var(--th-fs-small); line-height: var(--th-lh-body); }

.th-home-why__trust {
	display: grid;
	gap: var(--th-space-3) var(--th-space-6);
	margin: var(--th-group) 0 0;
	padding: var(--th-space-6) 0 0;
	border-block-start: var(--th-border);
	list-style: none;
}
.th-home-why__trust li {
	display: flex;
	align-items: flex-start;
	gap: var(--th-space-3);
	color: var(--th-color-ink);
	font-size: var(--th-fs-small);
	font-weight: var(--th-fw-ui);
	line-height: var(--th-lh-snug);
}
.th-home-why__trust svg {
	flex: 0 0 auto;
	inline-size: 20px;
	block-size: 20px;
	fill: none;
	stroke: var(--th-color-action);
	stroke-width: 2.2;
	stroke-linecap: round;
	stroke-linejoin: round;
}
@media (min-width: 768px) { .th-home-why__trust { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .th-home-why__trust { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* --------------------------------------------------------------------------
   7. Lead - WhatsApp / phone
   -------------------------------------------------------------------------- */
.th-home-lead__panel {
	display: grid;
	gap: var(--th-space-7);
	padding: var(--th-space-7) var(--th-space-5);
	border-radius: var(--th-radius-panel);
	background: linear-gradient(160deg, #083F78 0%, var(--th-color-night) 100%);
	color: #fff;
}
.th-home-lead__eyebrow {
	margin: 0;
	color: #7EE5D1;
	font-size: var(--th-fs-micro);
	font-weight: var(--th-fw-heading);
	letter-spacing: var(--th-ls-eyebrow);
	text-transform: uppercase;
}
.th-home-lead__title {
	margin: var(--th-gap-eyebrow) 0 0;
	color: #fff;
	font-size: var(--th-fs-h2);
	font-weight: var(--th-fw-display);
	line-height: var(--th-lh-heading);
	letter-spacing: var(--th-ls-heading);
}
.th-home-lead__text { margin: var(--th-gap-title) 0 0; color: rgba(255, 255, 255, 0.86); line-height: var(--th-lh-body); }
.th-home-lead__actions { display: grid; gap: var(--th-control-gap); }
.th-home-lead__btn {
	display: flex;
	align-items: center;
	gap: var(--th-space-3);
	min-block-size: 64px;
	padding: var(--th-space-3) var(--th-space-5);
	border: 1px solid rgba(255, 255, 255, 0.45);
	border-radius: var(--th-radius-control);
	color: #fff;
	text-decoration: none;
	transition: background-color var(--th-dur) var(--th-ease), border-color var(--th-dur) var(--th-ease);
}
.th-home-lead__btn:hover { border-color: #fff; color: #fff; }
.th-home-lead__btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.th-home-lead__btn--wa { border-color: var(--th-color-action); background: var(--th-color-action); }
.th-home-lead__btn--wa:hover { border-color: var(--th-color-action-hover); background: var(--th-color-action-hover); }
.th-home-lead__btn svg { flex: 0 0 auto; inline-size: 24px; block-size: 24px; fill: currentColor; }
.th-home-lead__btn span { display: flex; flex-direction: column; min-inline-size: 0; }
.th-home-lead__btn b { font-weight: var(--th-fw-heading); line-height: var(--th-lh-ui); }
.th-home-lead__btn small { color: #fff; font-size: var(--th-fs-micro); line-height: var(--th-lh-ui); }
[dir="rtl"] .th-home-lead__btn b[dir="ltr"] { text-align: end; }

@media (min-width: 768px) {
	.th-home-lead__panel { padding: var(--th-space-9); }
	.th-home-lead__actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
	.th-home-lead__panel { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; gap: var(--th-space-9); padding: var(--th-space-10); }
	.th-home-lead__actions { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
	.th-service,
	.th-home-lead__btn { transition: none; }
}

/* Kept last so legacy 1F opening declarations above cannot override the
   centred connected-journey composition at tablet and desktop widths. */
@media (min-width: 768px) {
	.th-home .th-home-hero__inner { min-block-size: min(88svh, 860px); padding-block: var(--th-section-sm) calc(var(--th-section) + var(--th-space-10)); }
}
@media (min-width: 1024px) {
	.th-home .th-home-hero { min-block-size: min(88svh, 860px); }
	.th-home .th-home-hero__lede { max-inline-size: 48rem; }
}
.th-home .th-home-hero__image { object-position: 51% 53%; }
.th-home .th-home-hero::before {
	content: "";
	position: absolute;
	z-index: -1;
	inline-size: min(64vw, 46rem);
	block-size: min(64vw, 46rem);
	inset-inline-end: -24rem;
	inset-block-start: 7%;
	border: 1px solid rgba(255,255,255,.33);
	border-radius: 50%;
	pointer-events: none;
}
.th-home .th-home-hero::after,
[dir="rtl"] .th-home .th-home-hero::after { background: linear-gradient(to top, rgba(5, 28, 51, .88), rgba(5, 28, 51, .54) 55%, rgba(5, 28, 51, .34)); }

/* --------------------------------------------------------------------------
   8. Homepage Bento composition

   The shared foundation supplies colour, type, spacing, controls, borders
   and elevation. This 12-column composition is local to the Home; global
   chrome and the rest of the site keep their existing layout. The real
   search component and data-owning cards remain intact.
   -------------------------------------------------------------------------- */
.th-home {
	--th-home-grid-columns: 12;
	--th-home-bento-gap: var(--th-grid-gap-lg);
}

@media (min-width: 1024px) {
	/* A shorter, start-aligned hero leaves the image and headline room while
	   keeping the real search panel prominent in the opening viewport. */
	.th-home .th-home-hero { min-block-size: min(70svh, 720px); }
	.th-home .th-home-hero__inner {
		display: grid;
		grid-template-columns: repeat(var(--th-home-grid-columns), minmax(0, 1fr));
		min-block-size: min(70svh, 720px);
		align-items: start;
		justify-content: center;
		text-align: start;
		padding-block: var(--th-space-10) calc(var(--th-space-12) + var(--th-space-8));
	}
	.th-home .th-home-hero__eyebrow,
	.th-home .th-home-hero__title,
	.th-home .th-home-hero__lede,
	.th-home .th-home-hero__actions { grid-column: 1 / span 7; }
	.th-home .th-home-hero__title { max-inline-size: 14ch; }
	.th-home .th-home-hero__lede { max-inline-size: 42rem; }
	.th-home .th-home-hero__actions { justify-content: flex-start; }

	/* Hurghada is the lead destination; the other two share the remaining
	   tracks. This uses the existing place-card content and canonical URLs. */
	.th-home-dest .th-places--home {
		display: grid;
		grid-template-columns: repeat(var(--th-home-grid-columns), minmax(0, 1fr));
		gap: var(--th-home-bento-gap);
	}
	.th-home-dest .th-places--home > .th-place:first-child { grid-column: span 6; }
	.th-home-dest .th-places--home > .th-place:not(:first-child) { grid-column: span 3; }
	.th-home-dest .th-places--home > .th-place:first-child .th-place__media { --th-ratio: 16 / 10; }
	.th-home-dest .th-places--home > .th-place:not(:first-child) .th-place__media { --th-ratio: 4 / 3; }

	/* One broad transfer feature and a clear, stacked set of service links. */
	.th-home-services__grid {
		display: grid;
		grid-template-columns: repeat(var(--th-home-grid-columns), minmax(0, 1fr));
		gap: var(--th-home-bento-gap);
		align-items: stretch;
	}
	.th-home-services__grid > .th-feature { grid-column: span 7; min-inline-size: 0; }
	.th-home-services__grid > .th-home-services__list {
		grid-column: span 5;
		grid-template-columns: minmax(0, 1fr);
		align-content: stretch;
		min-inline-size: 0;
	}
	.th-home-services__list > li { min-inline-size: 0; }
	.th-home-services__list .th-service { align-items: center; }
	.th-home-services__list .th-service__arrow { margin-block-start: 0; }
}

@media (min-width: 768px) and (max-width: 1023.98px) {
	.th-home-dest .th-places--home { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.th-home-services__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.th-home-services__grid > .th-feature,
	.th-home-services__grid > .th-home-services__list { grid-column: 1 / -1; }
	.th-home-services__grid > .th-home-services__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 767.98px) {
	.th-home { --th-home-bento-gap: var(--th-grid-gap); }
	.th-home-dest .th-places--home { grid-template-columns: minmax(0, 1fr); }
	.th-home-services__grid { grid-template-columns: minmax(0, 1fr); }
}

/* Keep the two booked pickup inputs together in the homepage search card. */
.th-home .th-home-transfer-form .thtz-date-time > .thtz-outbound,
.th-home .th-home-transfer-form .thtz-date-time > .thtz-return {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	align-content: start;
	column-gap: var(--th-space-3);
	row-gap: var(--th-space-2);
	min-inline-size: 0;
}
.th-home .th-home-transfer-form .thtz-date-time > .thtz-outbound > .thtz-date-group__title,
.th-home .th-home-transfer-form .thtz-date-time > .thtz-return > .thtz-date-group__title { grid-column: 1 / -1; }
@media (min-width: 1024px) {
	body .th-home .th-home-transfer-form .thtz-search > .thtz-date-time { grid-column: span 4; }
	body .th-home .th-home-transfer-form .thtz-search > .thtz-passengers { grid-column: span 2; align-self: end; }
}
@media (max-width: 379.98px) {
	.th-home .th-home-transfer-form .thtz-date-time > .thtz-outbound,
	.th-home .th-home-transfer-form .thtz-date-time > .thtz-return { grid-template-columns: minmax(0, 1fr); }
}

/* Tap-target polish (UX review 2026-10-29). On phones narrower than 480px the vehicle select shared a half-width column and its
   placeholder was clipped ("Choose a vehic"); it now takes the full row. Links and the round-trip option get a 44px tap area. */
@media (max-width: 479.98px) {
	.th-home .thsx-form--transfers .thsx-form__grid > .thsx-field:has(select[name="vehicle"]) { grid-column: 1 / -1; }
}
.th-home .thh-search__hint a { display: inline-flex; align-items: center; min-block-size: 44px; }
.th-home .thsx-round-trip { display: flex; align-items: center; gap: .65rem; min-block-size: 44px; }
.th-home .thsx-round-trip input { inline-size: 20px; block-size: 20px; flex: 0 0 20px; margin: 0; }