/* =============================================================================
   Itinerary Filter Grid — Stylesheet
   ET Tours | Colors: #2C3657 navy · #B83232 red · #6B6259 text · #FBFAF7 cream
   Fonts: sentinel (headings) · brandon-grotesque (body) — loaded by the theme
   ============================================================================= */

:root {
	--itg-accent:       #2C3657;
	--itg-accent-hover: #1E2540;
	--itg-badge:        #B83232;
	--itg-text:         #2C3657;
	--itg-text-muted:   #6B6259;
	--itg-text-light:   #9A9189;
	--itg-border:       #E4E0D8;
	--itg-bg:           #ffffff;
	--itg-bg-page:      #FBFAF7;
	--itg-radius:       6px;
	--itg-gap:          24px;
	--itg-font-heading: 'sentinel', Georgia, serif;
	--itg-font-body:    'brandon-grotesque', system-ui, sans-serif;
}

/* ── Outer wrapper ────────────────────────────────────────────────────────── */

.itg-wrapper {
	font-family: var(--itg-font-body);
	font-size:   15px;
	color:       var(--itg-text);
	line-height: 1.5;
}

/* ============================================================================
   FILTER BAR
   ============================================================================ */

.itg-filter-bar {
	background:    var(--itg-bg);
	border:        1px solid var(--itg-border);
	border-radius: var(--itg-radius);
	padding:       12px 16px;
	margin-bottom: 16px;
}

/* ── Mobile-only header row (hidden on desktop) ──────────────────────────── */

.itg-mobile-row {
	display:         none; /* shown only on mobile via media query */
	align-items:     center;
	justify-content: space-between;
	gap:             10px;
}

/* Mobile "Filters" toggle button */
.itg-mobile-toggle {
	display:       inline-flex;
	align-items:   center;
	gap:           7px;
	height:        40px;
	padding:       0 16px;
	border:        1.5px solid var(--itg-border);
	border-radius: var(--itg-radius);
	background:    var(--itg-bg);
	color:         var(--itg-text);
	font-family:   var(--itg-font-body);
	font-size:     0.9375rem;
	font-weight:   600;
	cursor:        pointer;
	transition:    border-color 0.15s;
}

.itg-mobile-toggle:hover,
.itg-mobile-toggle[aria-expanded="true"] {
	border-color: var(--itg-accent);
	color:        var(--itg-accent);
}

/* Active filter count badge on mobile toggle */
.itg-active-badge {
	display:       inline-flex;
	align-items:   center;
	justify-content: center;
	min-width:     20px;
	height:        20px;
	padding:       0 5px;
	border-radius: 10px;
	background:    var(--itg-accent);
	color:         #ffffff;
	font-size:     0.6875rem;
	font-weight:   700;
	line-height:   1;
}

/* ── Pills panel (always visible desktop, collapsible mobile) ────────────── */

.itg-pills-panel {
	display:     flex;
	flex-wrap:   wrap;
	align-items: center;
	gap:         10px;
}

/* ── Filter pills container ──────────────────────────────────────────────── */

.itg-filter-pills {
	display:   flex;
	flex-wrap: wrap;
	gap:       8px;
	flex:      1;
	min-width: 0;
}

.itg-pill-wrap {
	position: relative;
}

/* ── Pill select (styled native <select>) ────────────────────────────────── */

.itg-pill-select {
	-webkit-appearance: none;
	-moz-appearance:    none;
	appearance:         none;
	display:            inline-flex;
	align-items:        center;
	height:             36px;
	padding:            0 32px 0 13px;
	cursor:             pointer;
	font-family:        var(--itg-font-body);
	font-size:          0.8125rem;
	font-weight:        500;
	color:              var(--itg-text);
	background:         var(--itg-bg);
	border:             1px solid var(--itg-border);
	border-radius:      var(--itg-radius);
	white-space:        nowrap;
	transition:         border-color 0.15s, box-shadow 0.15s;
	background-image:   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236B6259' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
	background-repeat:  no-repeat;
	background-position: right 10px center;
}

.itg-pill-select:hover {
	border-color: var(--itg-accent);
}

.itg-pill-select:focus {
	outline:      none;
	border-color: var(--itg-accent);
	box-shadow:   0 0 0 2px color-mix(in srgb, var(--itg-accent) 18%, transparent);
}

/* Active — a value is selected */
.itg-pill-select.itg-pill-active {
	border-color:     var(--itg-accent);
	color:            var(--itg-accent);
	background-color: color-mix(in srgb, var(--itg-accent) 5%, transparent);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%232C3657' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
}

/* ── Filter action buttons ───────────────────────────────────────────────── */

.itg-filter-actions {
	display:     flex;
	align-items: center;
	gap:         8px;
	flex-shrink: 0;
}

/* Red "Filter" button */
.itg-filter-btn {
	display:        inline-flex;
	align-items:    center;
	gap:            6px;
	height:         36px;
	padding:        0 18px;
	border:         none;
	border-radius:  var(--itg-radius);
	background:     var(--itg-accent);
	color:          #ffffff;
	font-family:    var(--itg-font-body);
	font-size:      0.8125rem;
	font-weight:    600;
	letter-spacing: 0.03em;
	cursor:         pointer;
	transition:     background 0.15s;
	white-space:    nowrap;
}

.itg-filter-btn:hover {
	background: var(--itg-accent-hover);
}

.itg-filter-btn:focus {
	outline:    none;
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--itg-accent) 28%, transparent);
}

/* "Clear" button — text style, only visible when filters are active */
.itg-clear-btn {
	display:         inline-flex;
	align-items:     center;
	gap:             5px;
	height:          36px;
	padding:         0 12px;
	border:          1px solid var(--itg-border);
	border-radius:   var(--itg-radius);
	background:      transparent;
	color:           var(--itg-text-muted);
	font-family:     var(--itg-font-body);
	font-size:       0.8125rem;
	font-weight:     500;
	cursor:          pointer;
	transition:      color 0.15s, border-color 0.15s;
	white-space:     nowrap;
}

.itg-clear-btn:hover {
	color:        var(--itg-accent);
	border-color: var(--itg-accent);
}

/* Mobile clear — in the mobile toggle row */
.itg-clear-mobile {
	height:     40px;
	font-size:  0.9375rem;
	font-weight: 600;
}

/* ============================================================================
   RESULTS BAR
   ============================================================================ */

.itg-results-bar {
	display:         flex;
	justify-content: space-between;
	align-items:     center;
	margin-bottom:   20px;
	flex-wrap:       wrap;
	gap:             10px;
}

.itg-properties-count {
	font-family: var(--itg-font-body);
	font-size:   0.9375rem;
	font-weight: 400;
	color:       var(--itg-text-muted);
}

.itg-properties-count strong {
	color:       var(--itg-text);
	font-weight: 700;
}

.itg-results-bar-right {
	display:     flex;
	align-items: center;
	gap:         12px;
	flex-wrap:   wrap;
}

.itg-sort-wrap {
	display:     flex;
	align-items: center;
	gap:         8px;
	font-size:   0.875rem;
	color:       var(--itg-text-muted);
}

.itg-sort-label {
	font-weight: 500;
	white-space: nowrap;
}

.itg-sort-select {
	-webkit-appearance: none;
	-moz-appearance:    none;
	appearance:         none;
	font-family:        var(--itg-font-body);
	font-size:          0.875rem;
	font-weight:        500;
	color:              var(--itg-text);
	background:         var(--itg-bg);
	border:             1px solid var(--itg-border);
	border-radius:      var(--itg-radius);
	padding:            5px 28px 5px 10px;
	cursor:             pointer;
	background-image:   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 24 24' fill='none' stroke='%236B6259' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
	background-repeat:  no-repeat;
	background-position: right 8px center;
}

.itg-sort-select:focus {
	outline:      none;
	border-color: var(--itg-accent);
	box-shadow:   0 0 0 2px color-mix(in srgb, var(--itg-accent) 15%, transparent);
}

/* ============================================================================
   CONTENT ROW
   ============================================================================ */

.itg-content-row {
	display:     flex;
	gap:         20px;
	align-items: flex-start;
}

.itg-grid-wrap {
	flex:      1;
	min-width: 0;
}

/* ============================================================================
   CARD GRID
   ============================================================================ */

.itg-grid {
	display:               grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap:                   var(--itg-gap);
	transition:            opacity 0.2s ease;
}

.itg-grid.itg-loading {
	opacity:        0.4;
	pointer-events: none;
}

/* ============================================================================
   ITINERARY CARD
   ============================================================================ */

.itg-card {
	background:     var(--itg-bg);
	border:         1px solid var(--itg-border);
	border-radius:  var(--itg-radius);
	overflow:       hidden;
	display:        flex;
	flex-direction: column;
	transition:     box-shadow 0.2s ease, transform 0.2s ease;
}

.itg-card:hover {
	box-shadow: 0 8px 28px rgba(0, 0, 0, 0.1);
	transform:  translateY(-3px);
}

.itg-card-image-wrap {
	display:         block;
	position:        relative;
	aspect-ratio:    16 / 10;
	overflow:        hidden;
	background:      var(--itg-bg-page);
	text-decoration: none;
}

.itg-card-image {
	width:      100%;
	height:     100%;
	object-fit: cover;
	display:    block;
	transition: transform 0.35s ease;
}

.itg-card:hover .itg-card-image {
	transform: scale(1.04);
}

.itg-card-placeholder {
	width:           100%;
	height:          100%;
	display:         flex;
	align-items:     center;
	justify-content: center;
	background:      #f3f4f6;
	color:           #d1d5db;
}

/* ── Status badges ───────────────────────────────────────────────────────── */

.itg-card-badges {
	position: absolute;
	top:      12px;
	left:     12px;
	display:  flex;
	flex-wrap: wrap;
	gap:      6px;
	z-index:  2;
}

.itg-badge {
	display:        inline-block;
	padding:        4px 10px;
	font-family:    var(--itg-font-body);
	font-size:      0.6875rem;
	font-weight:    700;
	letter-spacing: 0.07em;
	color:          #ffffff;
	border-radius:  3px;
	line-height:    1.4;
	white-space:    nowrap;
}

.itg-badge { background: var(--itg-badge); }

.itg-card-title {
	margin:      0 0 2px;
	font-family: var(--itg-font-heading);
	font-size:   1.0625rem;
	font-weight: 700;
	line-height: 1.3;
}

.itg-card-title a {
	color:           var(--itg-text);
	text-decoration: none;
	transition:      color 0.15s;
}

.itg-card-title a:hover { color: var(--itg-accent); }

/* ── No results ──────────────────────────────────────────────────────────── */

.itg-no-results {
	grid-column: 1 / -1;
	text-align:  center;
	color:       var(--itg-text-muted);
	padding:     56px 24px;
	font-size:   1rem;
	font-family: var(--itg-font-body);
}

/* ============================================================================
   RESPONSIVE — TABLET  ≤ 1024px
   ============================================================================ */

@media (max-width: 1024px) {
	.itg-grid {
		grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	}
}

/* ============================================================================
   RESPONSIVE — MOBILE  ≤ 680px
   The filter bar collapses to a single toggle row. Pills expand in a panel.
   ============================================================================ */

@media (max-width: 680px) {

	/* Show the mobile toggle row */
	.itg-mobile-row {
		display: flex;
	}

	/* Hide pills panel by default; JS adds .itg-panel-open to show it */
	.itg-pills-panel {
		display:       none;
		flex-direction: column;
		align-items:   stretch;
		border-top:    1px solid var(--itg-border);
		margin-top:    12px;
		padding-top:   14px;
		gap:           12px;
	}

	.itg-pills-panel.itg-panel-open {
		display: flex;
	}

	/* Pills in a 2-column grid */
	.itg-filter-pills {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap:     10px;
	}

	.itg-pill-wrap {
		width: 100%;
	}

	.itg-pill-select {
		width:      100%;
		box-sizing: border-box;
		height:     42px;
		font-size:  0.875rem;
	}

	/* Actions row: full-width buttons */
	.itg-filter-actions {
		display: flex;
		gap:     10px;
	}

	.itg-filter-btn,
	.itg-clear-btn {
		flex:            1;
		justify-content: center;
		height:          44px;
		font-size:       0.9375rem;
	}

	/* Results bar stacks on mobile */
	.itg-results-bar {
		flex-direction: column;
		align-items:    flex-start;
	}

	.itg-results-bar-right {
		width:           100%;
		justify-content: space-between;
	}

	/* Card grid: single column */
	.itg-grid {
		grid-template-columns: 1fr;
		gap: 16px;
	}

}

@media (max-width: 400px) {
	/* Very small screens: single column pills */
	.itg-filter-pills {
		grid-template-columns: 1fr;
	}
}


/* ─────────────────────────────────────────────────────────────────────────────
   ITINERARY SPECIFIC
   ───────────────────────────────────────────────────────────────────────── */

/* ── Row alignment across cards ───────────────────────────────────────────────
   Each card spans 6 rows of the grid and shares them via subgrid:
   1 image · 2 title · 3 tagline · 4 interests · 5 duration · 6 footer.
   So in any visual row of cards, the titles start on the same line and the
   durations/"View Itinerary" sit on the same line — however many lines the
   title, tagline or interests wrap to on a given card. Every row is always
   rendered (empty when a field is blank) so no card has fewer rows. */

.itg-grid {
	row-gap:    0;
	column-gap: var(--itg-gap);
}

.itg-card {
	display:            grid;
	grid-row:           span 6;
	grid-template-rows: subgrid;
	row-gap:            0;
	margin-bottom:      var(--itg-gap);
}

.itg-card > *               { min-width: 0; }
.itg-card-image-wrap        { grid-row: 1; }
.itg-card-title             { grid-row: 2; }
.itg-card-tagline           { grid-row: 3; }
.itg-card-types             { grid-row: 4; }
.itg-card-duration          { grid-row: 5; }
.itg-card-footer            { grid-row: 6; }

/* Browsers without subgrid: fall back to a column that pins the duration and
   footer to the bottom of each card (durations still line up per row). */
@supports not (grid-template-rows: subgrid) {
	.itg-grid           { row-gap: var(--itg-gap); }
	.itg-card           { display: flex; flex-direction: column; margin-bottom: 0; }
	.itg-card-duration  { margin-top: auto; }
}

/* ── Image: always cover + centered ───────────────────────────────────────────
   Extra specificity + absolute fill so Elementor's `.elementor img { height:auto }`
   can't shrink the photo inside its frame. */

.itg-wrapper .itg-card-image-wrap {
	position:     relative;
	aspect-ratio: 16 / 10;
	overflow:     hidden;
}

.itg-wrapper .itg-card-image-wrap .itg-card-image {
	position:        absolute;
	inset:           0;
	width:           100%;
	height:          100%;
	max-width:       none;
	object-fit:      cover;
	object-position: center center;
	border-radius:   0;
}

.itg-wrapper .itg-card-image-wrap .itg-card-placeholder {
	position: absolute;
	inset:    0;
}

/* ── Text rows ───────────────────────────────────────────────────────────── */

.itg-card-types,
.itg-card-title,
.itg-card-tagline,
.itg-card-duration,
.itg-card-footer {
	padding-left:  20px;
	padding-right: 20px;
}

/* Interests (categories) — sit with the duration as trip details; each links to its page */
.itg-card-types {
	margin:         0;
	padding-top:    16px;
	padding-bottom: 0;
	font-family:    var(--itg-font-body);
	font-size:      0.6875rem;
	font-weight:    700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color:          var(--itg-text-light);
	line-height:    1.6;
}

/* Bottom of its row so a one-line list hugs the duration; flex gap instead of
   "·" separators so no separator is ever stranded at the end of a line. */
.itg-card-types {
	display:     flex;
	flex-wrap:   wrap;
	align-self:  end;
	align-items: baseline;
	gap:         2px 14px;
}

.itg-card-types:empty { padding-top: 0; }

.itg-card-types .itg-type-link {
	color:           var(--itg-text-light);
	text-decoration: none;
	transition:      color 0.15s;
}

.itg-card-types .itg-type-link:hover,
.itg-card-types .itg-type-link:focus {
	color:                 var(--itg-accent);
	text-decoration:       underline;
	text-underline-offset: 2px;
}

.itg-card-title {
	margin:      0;
	padding-top: 20px;
	font-family: var(--itg-font-heading);
	font-size:   1.3125rem;
	font-weight: 400;
	line-height: 1.25;
}

.itg-card-title a {
	color:           var(--itg-text);
	text-decoration: none;
	transition:      color 0.15s;
}

.itg-card-title a:hover { color: var(--itg-accent); }

.itg-card-tagline {
	margin:      0;
	padding-top: 6px;
	font-size:   0.9375rem;
	color:       var(--itg-text-muted);
	line-height: 1.5;
}

.itg-card-duration {
	display:     flex;
	align-items: center;
	gap:         6px;
	margin:      0;
	padding-top: 8px;
	font-size:   0.875rem;
	font-weight: 600;
	color:       var(--itg-text);
}

.itg-card-duration svg { flex-shrink: 0; color: var(--itg-text-muted); }

/* Footer: divider + right-aligned "View Itinerary" */
.itg-card-footer {
	display:         flex;
	justify-content: flex-end;
	align-items:     center;
	margin:          12px 20px 0;
	padding:         12px 0 16px;
	border-top:      1px solid var(--itg-border);
}

.itg-card-view {
	display:         inline-flex;
	align-items:     center;
	gap:             5px;
	font-family:     var(--itg-font-body);
	font-size:       0.875rem;
	font-weight:     700;
	color:           var(--itg-accent);
	text-decoration: none;
	transition:      color 0.15s;
}

.itg-card-view:hover {
	color:                 var(--itg-accent-hover);
	text-decoration:       underline;
	text-underline-offset: 2px;
}

@media (max-width: 680px) {
	.itg-grid { row-gap: 0; }
	.itg-card { margin-bottom: 16px; }
}

/* ── Load More ───────────────────────────────────────────────────────────── */

.itg-load-more-wrap {
	display:         flex;
	justify-content: center;
	margin-top:      8px;
}

.itg-load-more {
	display:        inline-flex;
	align-items:    center;
	height:         44px;
	padding:        0 28px;
	border:         1.5px solid var(--itg-accent);
	border-radius:  var(--itg-radius);
	background:     transparent;
	color:          var(--itg-accent);
	font-family:    var(--itg-font-body);
	font-size:      0.8125rem;
	font-weight:    700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	cursor:         pointer;
	transition:     background 0.15s, color 0.15s;
}

.itg-load-more:hover,
.itg-load-more:focus {
	background: var(--itg-accent);
	color:      #ffffff;
}

.itg-load-more.itg-loading-more {
	opacity: 0.5;
	cursor:  progress;
}

/* ── Full width inside Elementor ──────────────────────────────────────────────
   A Shortcode widget inside a flex container set to "Align Items: Center"
   shrinks to the width of its content, which squeezed the grid to 2 columns.
   Make the widget holding a grid always span its container. */

.elementor-widget-shortcode:has(.itg-wrapper) {
	width:      100%;
	max-width:  100%;
	align-self: stretch;
}

.itg-wrapper { width: 100%; }

/* The [hidden] attribute must beat the display rules above — the Clear buttons
   and the active-filter badge are toggled via .prop('hidden', …) in JS. */
.itg-clear-btn[hidden],
.itg-active-badge[hidden],
.itg-wrapper [hidden] { display: none !important; }