/* ==========================================================================
   Safari Premium — Archive layout
   Shared by /excursions/, /accommodations/, /car-rental/.
   ========================================================================== */

.sp-archive {
	background: var(--sp-color-cream);
}

/* Category chips strip below hero */
.sp-archive__chips-strip {
	background: var(--sp-color-off-white);
	border-bottom: 1px solid var(--sp-color-ivory);
	padding: 20px var(--sp-page-gutter);
}
.sp-archive__chips-strip-inner {
	max-width: var(--sp-container-max);
	margin: 0 auto;
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}
@media (max-width: 767px) {
	.sp-archive__chips-strip { padding: 16px 0 4px; }
	.sp-archive__chips-strip-inner {
		padding: 0 16px;
		flex-wrap: nowrap;
		overflow-x: auto;
		gap: 8px;
		scrollbar-width: none;
	}
	.sp-archive__chips-strip-inner::-webkit-scrollbar { display: none; }
}

/* Mobile sticky filter+sort bar */
.sp-archive__mobile-bar {
	display: none;
	position: sticky;
	top: var(--sp-header-height-mobile);
	z-index: 30;
	background: var(--sp-color-off-white);
	border-bottom: 1px solid var(--sp-color-ivory);
	padding: 12px 16px;
	gap: 10px;
}
.sp-archive__mobile-bar > * { flex: 1; }
.sp-archive__mobile-bar-button {
	padding: 10px 14px;
	border-radius: var(--sp-radius-pill);
	border: 1px solid var(--sp-color-card-border);
	background: var(--sp-color-cream);
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--sp-font-sans);
	font-size: 13px;
	color: var(--sp-color-brown);
	cursor: pointer;
}
.sp-archive__mobile-bar-button .sp-badge {
	margin-left: auto;
	background: var(--sp-color-burnt-orange);
	color: var(--sp-color-cream);
	font-size: 11px;
	font-weight: 600;
	padding: 1px 7px;
	border-radius: var(--sp-radius-pill);
}
.sp-archive__mobile-bar-button .sp-icon--chevron { margin-left: auto; }
@media (max-width: 1023px) {
	.sp-archive__mobile-bar { display: flex; }
}

/* Body — desktop: 280-col sidebar + results */
.sp-archive__body {
	padding: 56px 0 96px;
}
.sp-archive__body-inner {
	display: grid;
	grid-template-columns: 280px 1fr;
	gap: 40px;
	align-items: start;
}
.sp-archive__sidebar {
	position: sticky;
	top: calc(var(--sp-header-height) + 20px);
}
@media (max-width: 1023px) {
	.sp-archive__body-inner { grid-template-columns: 1fr; }
	.sp-archive__sidebar { display: none; }
}
@media (max-width: 767px) {
	.sp-archive__body { padding: 16px 16px 32px; }
	.sp-archive__body-inner { gap: 16px; }
}

/* Results bar */
.sp-archive__results-bar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 24px;
	gap: 16px;
}
.sp-archive__count {
	font-family: var(--sp-font-sans);
	font-size: var(--sp-text-base);
	color: var(--sp-color-muted-brown);
}
.sp-archive__count strong { color: var(--sp-color-brown); }
.sp-archive__sort {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	font-size: var(--sp-text-sm);
	color: var(--sp-color-muted-brown);
}
.sp-archive__sort-trigger {
	padding: 8px 14px;
	border-radius: var(--sp-radius-sm);
	border: 1px solid var(--sp-color-card-border);
	background: var(--sp-color-off-white);
	font-size: 13px;
	color: var(--sp-color-brown);
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-weight: 500;
	cursor: pointer;
}

/* View toggle (grid / map) */
.sp-archive__view-toggle { display: inline-flex; gap: 10px; }
.sp-archive__view-toggle button {
	padding: 8px 14px;
	border-radius: var(--sp-radius-sm);
	border: 1px solid var(--sp-color-card-border);
	background: var(--sp-color-off-white);
	font-size: 13px;
	color: var(--sp-color-muted-brown);
	display: inline-flex;
	align-items: center;
	gap: 6px;
	cursor: pointer;
}
.sp-archive__view-toggle button.is-active { color: var(--sp-color-brown); }

/* Results grid */
.sp-archive__grid {
	display: grid;
	gap: 24px;
	grid-template-columns: repeat(3, 1fr);
}
.sp-archive__empty {
	grid-column: 1 / -1;
	padding: 40px 0;
	text-align: center;
	font-family: var(--sp-font-sans);
	color: var(--sp-color-muted-brown);
}
@media (max-width: 1023px) {
	.sp-archive__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
	.sp-archive__grid { grid-template-columns: 1fr; gap: 16px; }
	.sp-archive__results-bar { font-size: var(--sp-text-sm); }
	.sp-archive__sort { display: none; }
}