/**
 * Trip rail — a tabbed, horizontally-scrolling carousel of trip cards.
 * Intrepid's information architecture (a section title, a row of tabs, an
 * "explore all" action, and a scroll rail of cards) rebuilt entirely on
 * AAAtrails' own brown/gold tokens. Reuses .tour-card as the card, so the
 * cards are identical to the rest of the site and carry the mix price.
 *
 * Progressive enhancement: with no JS every rail is shown stacked, each under
 * its own heading. The .is-enhanced class (added by JS) collapses them into
 * tabs and reveals the scroll arrows.
 */

.triprail { padding: 56px 0; }

/* Header: title left, tabs + explore-all right, wrapping gracefully. */
.triprail__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 18px 28px;
	flex-wrap: wrap;
	margin-bottom: 26px;
	border-bottom: 1px solid rgba(36, 20, 7, 0.12);
	padding-bottom: 14px;
}
.triprail__title {
	margin: 0;
	flex: 1 1 auto;
	line-height: 1.05;
}
.triprail__tabs {
	display: flex;
	gap: 26px;
	align-items: flex-end;
	margin-right: auto;
}
.triprail__title + .triprail__tabs { margin-left: 4px; }
.triprail__tab {
	background: none;
	border: 0;
	padding: 4px 0 10px;
	margin-bottom: -15px;              /* sit the underline on the head rule */
	font: inherit;
	font-weight: 600;
	color: var(--ink-soft);
	cursor: pointer;
	border-bottom: 2px solid transparent;
	transition: color .15s ease, border-color .15s ease;
}
.triprail__tab:hover { color: var(--ink); }
.triprail__tab.is-active {
	color: var(--ink);
	border-bottom-color: var(--gold);
}
.triprail__all {
	flex: 0 0 auto;
	white-space: nowrap;
	align-self: flex-end;
}

/* Panels. Without JS, all show, each with its label as a heading. */
.triprail__panel + .triprail__panel { margin-top: 34px; }
.triprail__panellabel {
	margin: 0 0 14px;
	font-size: 1.15rem;
	color: var(--ink);
}
.triprail.is-enhanced .triprail__panellabel { display: none; }
.triprail.is-enhanced .triprail__panel + .triprail__panel { margin-top: 0; }
.triprail__panel[hidden] { display: none; }

/* The scroll rail. */
.triprail__railwrap { position: relative; }
.triprail__rail {
	display: flex;
	gap: 22px;
	overflow-x: auto;
	scroll-snap-type: x proximity;
	padding: 4px 2px 14px;
	scrollbar-width: none;
	-ms-overflow-style: none;
}
.triprail__rail::-webkit-scrollbar { display: none; }
.triprail__rail > .tour-card {
	flex: 0 0 300px;
	max-width: 300px;
	scroll-snap-align: start;
}

/* Scroll arrows — only when JS is present (otherwise they'd be dead). */
.triprail__arrow {
	display: none;
	position: absolute;
	top: calc(50% - 40px);
	z-index: 3;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 1px solid rgba(36, 20, 7, 0.18);
	background: #fff;
	color: var(--forest);
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
	box-shadow: 0 6px 18px rgba(36, 20, 7, 0.16);
	transition: background .15s ease, color .15s ease, opacity .15s ease;
}
.triprail.is-enhanced .triprail__arrow { display: grid; place-items: center; }
.triprail__arrow:hover { background: var(--gold); color: var(--ink-ongold, #241a06); border-color: var(--gold); }
.triprail__arrow:disabled { opacity: 0; pointer-events: none; }
.triprail__arrow--prev { left: -10px; }
.triprail__arrow--next { right: -10px; }

@media (max-width: 640px) {
	.triprail { padding: 40px 0; }
	.triprail__rail > .tour-card { flex-basis: 82vw; max-width: 82vw; }
	.triprail.is-enhanced .triprail__arrow { display: none; } /* touch-scroll on mobile */
}

@media (prefers-reduced-motion: reduce) {
	.triprail__rail { scroll-behavior: auto; }
}