/* ==========================================================================
   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); }
/* 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; }
}
@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; }
}