/*
 * Atria Travel Theme — assets/css/search.css
 *
 * Styles for the /find-a-trip/ combined search & filter page.
 * BEM prefix: fts- (find-trip-search). Loaded only on this page.
 * Tokens: #1A1715 ink · #B8915A gold · #F7F1E7 cream · #EFE7D9 sand
 *         #5A5048 body · #8a6a38 gold-dark · #C9A86A gold-light · #0E0C0B dark-bg
 */

/* ── Hero ─────────────────────────────────────────────────────────────────── */

.fts-hero {
	background: #0E0C0B;
	color: #F7F1E7;
	padding: clamp( 44px, 5.5vw, 72px ) 0;
	position: relative;
	overflow: hidden;
}

.fts-hero::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient( 135deg, rgba( 184,145,90,.07 ) 0%, transparent 60% );
	pointer-events: none;
}

/* Hero uses atria-container for max-width, but we need full bleed bg */
.fts-hero .atria-container {
	position: relative;
	z-index: 1;
}

.fts-hero__breadcrumb {
	margin: 0 0 22px;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: .28em;
	text-transform: uppercase;
	color: rgba( 247,241,231,.6 );
}

.fts-hero__bc-link {
	color: #D8B97E;
	text-decoration: none;
	transition: color .15s;
}

.fts-hero__bc-link:hover {
	color: #C9A86A;
}

.fts-hero__heading {
	margin: 0 0 16px;
	font-family: 'Cormorant Garamond', Georgia, serif;
	font-weight: 500;
	font-size: clamp( 40px, 5.4vw, 72px );
	line-height: 1.03;
	color: #F7F1E7;
}

.fts-hero__sub {
	margin: 0;
	font-size: clamp( 15px, 1.3vw, 17px );
	line-height: 1.75;
	color: rgba( 247,241,231,.72 );
	font-weight: 300;
	max-width: 52ch;
}

/* ── Content band ─────────────────────────────────────────────────────────── */

.fts-content {
	padding-block: clamp( 36px, 5vw, 60px );
}

/* ── Filter panel ─────────────────────────────────────────────────────────── */

.fts-filters {
	background: #EFE7D9;
	border: 1px solid rgba( 26,23,21,.1 );
	padding: clamp( 20px, 3vw, 32px );
	margin-block-end: clamp( 24px, 3vw, 36px );
}

/* Keyword row */
.fts-filters__keyword {
	display: flex;
	gap: 10px;
	margin-block-end: 20px;
	align-items: stretch;
}

.fts-keyword-input {
	flex: 1;
	padding: 13px 16px;
	border: 1px solid rgba( 26,23,21,.2 );
	background: #FBF9F5;
	font-family: 'Jost', sans-serif;
	font-size: 15px;
	color: #1A1715;
	border-radius: 0;
	outline: none;
	transition: border-color .18s;
}

.fts-keyword-input::placeholder {
	color: #a89b88;
}

.fts-keyword-input:focus {
	border-color: #B8915A;
}

/* Filter rows */
.fts-filters__row {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 200px, 1fr ) );
	gap: 20px 28px;
	padding-block: 18px;
	border-block-start: 1px solid rgba( 26,23,21,.1 );
}

/* Filter group */
.fts-filter-group {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.fts-filter-group__label {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: #5A5048;
}

.fts-filter-group__note {
	font-size: 12px;
	color: #7a6f62;
	margin: -4px 0 0;
	font-weight: 300;
	line-height: 1.5;
}

/* ── Checkbox pill options (product type, trip style, destination) ─────────── */

.fts-filter-options {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
}

.fts-check-pill {
	display: inline-flex;
	align-items: center;
	padding: 7px 15px;
	border: 1px solid rgba( 26,23,21,.22 );
	background: #FBF9F5;
	font-family: 'Jost', sans-serif;
	font-size: 13px;
	font-weight: 500;
	color: #3A332D;
	cursor: pointer;
	transition: background .15s, border-color .15s, color .15s;
	user-select: none;
	position: relative;
}

.fts-check-pill input[type="checkbox"] {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* CSS-only checked state via :has() — Chrome 105+, Safari 15.4+, Firefox 121+ */
.fts-check-pill:has( input:checked ) {
	background: #1A1715;
	border-color: #1A1715;
	color: #F7F1E7;
}

.fts-check-pill:hover {
	border-color: #B8915A;
	color: #1A1715;
}

.fts-check-pill:has( input:checked ):hover {
	background: #3A332D;
	border-color: #3A332D;
}

.fts-check-pill input:focus-visible {
	outline: 2px solid #B8915A;
	outline-offset: 2px;
}

/* ── Radio pill options (duration, price band) ────────────────────────────── */

.fts-filter-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
}

.fts-filter-pill {
	position: relative;
}

.fts-filter-pill input[type="radio"] {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}

.fts-filter-pill label {
	display: inline-block;
	padding: 7px 15px;
	border: 1px solid rgba( 26,23,21,.22 );
	background: #FBF9F5;
	font-family: 'Jost', sans-serif;
	font-size: 13px;
	font-weight: 500;
	color: #3A332D;
	cursor: pointer;
	transition: background .15s, border-color .15s, color .15s;
	white-space: nowrap;
	user-select: none;
}

.fts-filter-pill input[type="radio"]:checked + label {
	background: #1A1715;
	border-color: #1A1715;
	color: #F7F1E7;
	font-weight: 600;
}

.fts-filter-pill label:hover {
	border-color: #B8915A;
	color: #1A1715;
}

.fts-filter-pill input[type="radio"]:focus-visible + label {
	outline: 2px solid #B8915A;
	outline-offset: 2px;
}

/* ── Tour type select ─────────────────────────────────────────────────────── */

.fts-filter-select {
	padding: 9px 14px;
	border: 1px solid rgba( 26,23,21,.22 );
	background: #FBF9F5;
	font-family: 'Jost', sans-serif;
	font-size: 13px;
	color: #1A1715;
	max-width: 220px;
	outline: none;
	cursor: pointer;
	transition: border-color .18s;
	border-radius: 0;
}

.fts-filter-select:focus {
	border-color: #B8915A;
}

/* ── Custom price inputs ──────────────────────────────────────────────────── */

/* Override browser user-agent [hidden]{display:none} which class specificity would beat */
.fts-price-custom[hidden] {
	display: none;
}

.fts-price-custom {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-block-start: 12px;
	flex-wrap: wrap;
}

.fts-price-custom span {
	font-size: 13px;
	color: #7a6f62;
	font-weight: 500;
}

.fts-price-input {
	width: 86px;
	padding: 8px 10px;
	border: 1px solid rgba( 26,23,21,.2 );
	background: #FBF9F5;
	font-family: 'Jost', sans-serif;
	font-size: 13px;
	color: #1A1715;
	outline: none;
	transition: border-color .18s;
	border-radius: 0;
}

.fts-price-input:focus {
	border-color: #B8915A;
}

/* ── Filter actions row ───────────────────────────────────────────────────── */

.fts-filters__actions {
	display: flex;
	align-items: center;
	gap: 20px;
	padding-block-start: 20px;
	border-block-start: 1px solid rgba( 26,23,21,.1 );
	margin-block-start: 4px;
}

.fts-search-reset {
	font-size: 13px;
	color: #7a6f62;
	text-decoration: underline;
	text-underline-offset: 3px;
	transition: color .15s;
}

.fts-search-reset:hover {
	color: #1A1715;
}

/* ── Shared button ────────────────────────────────────────────────────────── */

.fts-btn-primary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	background: #B8915A;
	color: #1A1715;
	border: none;
	padding: 13px 28px;
	font-family: 'Jost', sans-serif;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: background .18s;
	white-space: nowrap;
}

.fts-btn-primary:hover {
	background: #C9A86A;
	color: #1A1715;
}

.fts-btn-primary--sm {
	padding: 11px 22px;
	font-size: 11.5px;
}

/* ── Mobile filter toggle ─────────────────────────────────────────────────── */

.fts-filter-toggle {
	display: none;
	width: 100%;
	align-items: center;
	justify-content: space-between;
	padding: 14px 18px;
	background: #EFE7D9;
	border: 1px solid rgba( 26,23,21,.15 );
	font-family: 'Jost', sans-serif;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: #1A1715;
	cursor: pointer;
	margin-block-end: 0;
}

.fts-filter-toggle svg {
	transition: transform .2s;
	flex-shrink: 0;
}

.fts-filter-toggle[aria-expanded="true"] svg {
	transform: rotate( 180deg );
}

/* ── Active filter chips ──────────────────────────────────────────────────── */

.fts-active-filters {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-block-end: 24px;
}

.fts-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
	background: #F7F1E7;
	border: 1px solid rgba( 26,23,21,.18 );
	font-family: 'Jost', sans-serif;
	font-size: 12.5px;
	font-weight: 500;
	color: #1A1715;
}

.fts-chip__remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 17px;
	height: 17px;
	background: rgba( 26,23,21,.12 );
	border-radius: 50%;
	font-size: 13px;
	line-height: 1;
	color: #5A5048;
	text-decoration: none;
	cursor: pointer;
	transition: background .15s, color .15s;
}

.fts-chip__remove:hover {
	background: #B8915A;
	color: #1A1715;
}

.fts-chips-reset {
	font-size: 12px;
	color: #7a6f62;
	text-decoration: underline;
	text-underline-offset: 3px;
	margin-inline-start: 4px;
	transition: color .15s;
}

.fts-chips-reset:hover {
	color: #1A1715;
}

/* ── Results header ───────────────────────────────────────────────────────── */

.fts-results-header {
	margin-block-end: clamp( 18px, 2vw, 28px );
}

.fts-results-count {
	font-family: 'Jost', sans-serif;
	font-size: 13px;
	letter-spacing: .05em;
	color: #7a6f62;
}

.fts-results-count__num {
	color: #8a6a38;
	font-weight: 600;
}

/* ── Results card grid ────────────────────────────────────────────────────── */

.fts-grid {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 300px, 1fr ) );
	gap: clamp( 18px, 2.4vw, 32px );
	margin-block-end: clamp( 36px, 4vw, 56px );
}

/* Scope: ensure CTA links in mixed-type card partials render consistently */
.fts-grid .atria-card__cta,
.fts-grid .atria-card .atria-card__view,
.fts-grid .pka-card__view {
	color: #1A1715;
	text-decoration: none;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	transition: color .18s;
}

.fts-grid .atria-card__cta:hover,
.fts-grid .atria-card .atria-card__view:hover,
.fts-grid .pka-card__view:hover {
	color: #8a6a38;
}

/* ── Pagination ───────────────────────────────────────────────────────────── */

.fts-pagination {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 14px;
	padding-block: clamp( 28px, 3vw, 44px );
	border-block-start: 1px solid rgba( 26,23,21,.1 );
}

.fts-pagination__prev,
.fts-pagination__next {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border: 1px solid rgba( 26,23,21,.2 );
	color: #1A1715;
	text-decoration: none;
	transition: background .18s, border-color .18s, color .18s;
	flex-shrink: 0;
}

.fts-pagination__prev:hover,
.fts-pagination__next:hover {
	background: #B8915A;
	border-color: #B8915A;
}

.fts-pagination__pages {
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
	justify-content: center;
}

.fts-pagination__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 38px;
	height: 38px;
	padding-inline: 6px;
	border: 1px solid rgba( 26,23,21,.15 );
	font-family: 'Jost', sans-serif;
	font-size: 13px;
	color: #5A5048;
	text-decoration: none;
	transition: background .18s, border-color .18s, color .18s;
}

.fts-pagination__num--current {
	background: #1A1715;
	border-color: #1A1715;
	color: #F7F1E7;
	font-weight: 600;
}

a.fts-pagination__num:hover {
	border-color: #B8915A;
	color: #1A1715;
}

/* ── Empty state ──────────────────────────────────────────────────────────── */

.fts-empty {
	text-align: center;
	padding: clamp( 52px, 7vw, 96px ) 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
}

.fts-empty__heading {
	font-family: 'Cormorant Garamond', Georgia, serif;
	font-size: clamp( 28px, 3.4vw, 40px );
	font-weight: 500;
	color: #1A1715;
	margin: 0;
	line-height: 1.1;
}

.fts-empty__sub {
	font-size: 15px;
	color: #5A5048;
	font-weight: 300;
	line-height: 1.7;
	max-width: 44ch;
	margin: 0 0 8px;
}

/* ── CTA dark band ────────────────────────────────────────────────────────── */

.fts-cta {
	background: #0E0C0B;
	color: #F7F1E7;
}

.fts-cta__inner {
	max-width: 1320px;
	margin: 0 auto;
	padding: clamp( 56px, 7vw, 96px ) clamp( 20px, 5vw, 72px );
}

.fts-cta__eyebrow {
	margin: 0 0 14px;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: .3em;
	text-transform: uppercase;
	color: #C9A86A;
}

.fts-cta__heading {
	margin: 0 0 18px;
	font-family: 'Cormorant Garamond', Georgia, serif;
	font-weight: 500;
	font-size: clamp( 32px, 4.4vw, 54px );
	line-height: 1.06;
	color: #F7F1E7;
	max-width: 18ch;
}

.fts-cta__sub {
	margin: 0 0 32px;
	font-size: clamp( 15px, 1.4vw, 17px );
	line-height: 1.75;
	color: rgba( 247,241,231,.75 );
	font-weight: 300;
	max-width: 50ch;
}

.fts-cta__btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background: #B8915A;
	color: #1A1715;
	text-decoration: none;
	padding: 16px 34px;
	font-family: 'Jost', sans-serif;
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
	transition: background .18s;
}

.fts-cta__btn:hover {
	background: #C9A86A;
	color: #1A1715;
}

/* ── Responsive ───────────────────────────────────────────────────────────── */

@media ( max-width: 768px ) {
	.fts-filter-toggle {
		display: flex;
	}

	.fts-filters__body {
		display: none;
	}

	.fts-filters__body.is-open {
		display: block;
	}

	.fts-filters__keyword {
		flex-direction: column;
	}

	.fts-btn-primary--sm {
		width: 100%;
	}

	.fts-filters__row {
		grid-template-columns: 1fr;
		gap: 18px;
	}

	.fts-grid {
		grid-template-columns: 1fr;
	}
}

@media ( max-width: 480px ) {
	.fts-check-pill,
	.fts-filter-pill label {
		font-size: 12.5px;
		padding: 6px 12px;
	}

	.fts-pagination__prev,
	.fts-pagination__next {
		width: 36px;
		height: 36px;
	}
}