/**
 * Tour packages marketplace archive.
 * Search hero, merchandising bands, facet rail, sticky toolbar, card grid.
 */

.seraj-shell {
	width: 100%;
	max-width: var(--seraj-max, 1280px);
	margin-inline: auto;
	padding-inline: max(1.15rem, env(safe-area-inset-left));
	box-sizing: border-box;
}
@media (min-width: 720px) {
	.seraj-shell { padding-inline: clamp(1.5rem, 4vw, 2.5rem); }
}

/* ── Hero ───────────────────────────────────────────────────────────── */
.seraj-pkga-hero {
	position: relative;
	padding: clamp(2.5rem, 6vw, 4.5rem) 0 clamp(2rem, 5vw, 3.25rem);
	background:
		linear-gradient(180deg, color-mix(in oklab, var(--seraj-ink, #1c1a19) 78%, transparent), color-mix(in oklab, var(--seraj-ink, #1c1a19) 55%, transparent)),
		var(--pkga-hero, linear-gradient(135deg, var(--seraj-accent, #b4632a), var(--seraj-ink, #1c1a19))) center/cover no-repeat;
	color: #fff;
}
.seraj-pkga-hero__crumbs { margin-bottom: .75rem; font-size: .82rem; opacity: .85; }
.seraj-pkga-hero__crumbs a { color: inherit; }
.seraj-pkga-hero .seraj-eyebrow { color: color-mix(in oklab, #fff 78%, transparent); }
.seraj-pkga-hero__title { margin: .25rem 0 .5rem; font-size: clamp(1.9rem, 5vw, 3.1rem); line-height: 1.1; }
.seraj-pkga-hero__lede { max-width: 62ch; margin: 0 0 1.35rem; opacity: .92; }

.seraj-pkga-search {
	display: grid;
	gap: .6rem;
	grid-template-columns: minmax(0, 1fr);
	padding: .7rem;
	background: color-mix(in oklab, #fff 94%, transparent);
	border-radius: 16px;
	box-shadow: 0 18px 40px rgba(0, 0, 0, .18);
}
@media (min-width: 860px) {
	.seraj-pkga-search { grid-template-columns: 2fr 1fr 1fr auto; align-items: center; }
}
.seraj-pkga-search__field { display: block; min-width: 0; }
.seraj-pkga-search input,
.seraj-pkga-search select {
	width: 100%;
	padding: .7rem .8rem;
	border: 1px solid var(--seraj-border, rgba(0, 0, 0, .12));
	border-radius: 11px;
	font: inherit;
	color: var(--seraj-ink, #1c1a19);
	background: #fff;
	box-sizing: border-box;
}
.seraj-pkga-search .seraj-btn { white-space: nowrap; }

.seraj-pkga-hero__trust {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem 1.4rem;
	margin: 1.1rem 0 0;
	padding: 0;
	list-style: none;
	font-size: .85rem;
	opacity: .9;
}
.seraj-pkga-hero__trust li::before { content: "✓"; margin-right: .4rem; }

/* ── Merchandising bands ────────────────────────────────────────────── */
.seraj-pkga-feature { padding-block: clamp(2rem, 5vw, 3.5rem); }
.seraj-pkga-feature__inner {
	display: grid;
	gap: clamp(1rem, 3vw, 2rem);
	align-items: center;
	grid-template-columns: minmax(0, 1fr);
	background: var(--seraj-surface, #fff);
	border: 1px solid var(--seraj-border, rgba(0, 0, 0, .08));
	border-radius: 20px;
	overflow: hidden;
}
@media (min-width: 860px) {
	.seraj-pkga-feature__inner { grid-template-columns: 1.1fr 1fr; }
}
.seraj-pkga-feature__media img { display: block; width: 100%; height: 100%; min-height: 240px; object-fit: cover; }
.seraj-pkga-feature__body { padding: clamp(1.25rem, 3vw, 2.25rem); min-width: 0; }
.seraj-pkga-feature__body h2 { margin: .2rem 0 .4rem; font-size: clamp(1.4rem, 3vw, 2rem); }
.seraj-pkga-feature__body h2 a { color: inherit; text-decoration: none; }
.seraj-pkga-feature__sub { margin: 0 0 .75rem; color: var(--seraj-muted, #6c6560); }
.seraj-pkga-feature__facts { display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; margin: 0 0 1.1rem; padding: 0; list-style: none; font-size: .9rem; }

.seraj-pkga-band { padding-block: clamp(1.5rem, 4vw, 2.75rem); }
.seraj-pkga-rail {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(250px, 1fr);
	gap: 1rem;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	padding-bottom: .5rem;
	scrollbar-width: thin;
}
.seraj-pkga-rail__item { scroll-snap-align: start; min-width: 0; }

.seraj-pkga-themes { padding-block: clamp(1.5rem, 4vw, 2.75rem); }
.seraj-pkga-themes__grid {
	display: grid;
	gap: .75rem;
	grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
	margin: 0;
	padding: 0;
	list-style: none;
}
.seraj-pkga-theme {
	display: flex;
	flex-direction: column;
	gap: .2rem;
	padding: .9rem 1rem;
	border: 1px solid var(--seraj-border, rgba(0, 0, 0, .1));
	border-radius: 14px;
	text-decoration: none;
	color: inherit;
	background: var(--seraj-surface, #fff);
	transition: transform .18s ease, box-shadow .18s ease;
}
.seraj-pkga-theme:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0, 0, 0, .08); }
.seraj-pkga-theme__name { font-weight: 600; }
.seraj-pkga-theme__count { font-size: .8rem; color: var(--seraj-muted, #6c6560); }

/* ── Results layout ─────────────────────────────────────────────────── */
.seraj-pkga-results { padding-block: clamp(1.5rem, 4vw, 3rem); }
.seraj-pkga-layout {
	display: grid;
	gap: clamp(1rem, 3vw, 2rem);
	grid-template-columns: minmax(0, 1fr);
	align-items: start;
}
@media (min-width: 1000px) {
	.seraj-pkga-layout { grid-template-columns: 280px minmax(0, 1fr); }
}
.seraj-pkga-main { min-width: 0; }

.seraj-pkgf__toggle { width: 100%; margin-bottom: .75rem; }
@media (min-width: 1000px) {
	.seraj-pkgf__toggle { display: none; }
	.seraj-pkgf { position: sticky; top: 84px; }
}
.seraj-pkgf__panel {
	display: none;
	gap: 1.1rem;
	flex-direction: column;
	padding: 1rem;
	background: var(--seraj-surface, #fff);
	border: 1px solid var(--seraj-border, rgba(0, 0, 0, .1));
	border-radius: 16px;
	max-height: min(78vh, 900px);
	overflow-y: auto;
}
.seraj-pkgf__panel.is-open { display: flex; }
@media (min-width: 1000px) { .seraj-pkgf__panel { display: flex; } }

.seraj-pkgf__group { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .35rem; }
.seraj-pkgf__group legend { font-weight: 600; font-size: .92rem; margin-bottom: .3rem; padding: 0; }
.seraj-pkgf__check { display: flex; align-items: center; gap: .5rem; font-size: .9rem; }
.seraj-pkgf__check em { margin-left: auto; font-style: normal; font-size: .78rem; color: var(--seraj-muted, #6c6560); }
.seraj-pkgf__row select,
.seraj-pkgf__row input,
.seraj-pkgf__price input {
	width: 100%;
	padding: .5rem .6rem;
	border: 1px solid var(--seraj-border, rgba(0, 0, 0, .15));
	border-radius: 9px;
	font: inherit;
	box-sizing: border-box;
}
.seraj-pkgf__price { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin-bottom: .4rem; }
.seraj-pkgf__actions { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.seraj-pkgf__clear { font-size: .85rem; }

.seraj-pkga-toolbar {
	position: sticky;
	top: 0;
	z-index: 5;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: .6rem;
	padding: .6rem 0;
	background: var(--seraj-bg, #fff);
}
.seraj-pkga-toolbar__count { margin: 0; font-weight: 600; }
.seraj-pkga-toolbar__sort select {
	padding: .45rem .6rem;
	border: 1px solid var(--seraj-border, rgba(0, 0, 0, .15));
	border-radius: 9px;
	font: inherit;
	background: #fff;
}

.seraj-pkga-chips { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 1rem; padding: 0; list-style: none; }
.seraj-pkga-chips__clear { font-size: .85rem; align-self: center; }

.seraj-pkga-grid {
	display: grid;
	gap: clamp(.9rem, 2vw, 1.4rem);
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
}
.seraj-pkga-grid > [role="listitem"] { min-width: 0; display: flex; }
.seraj-pkga-grid > [role="listitem"] > * { width: 100%; }

/* ── Card v2 ────────────────────────────────────────────────────────── */
.seraj-pkg-card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: var(--seraj-surface, #fff);
	border: 1px solid var(--seraj-border, rgba(0, 0, 0, .08));
	border-radius: 18px;
	transition: transform .18s ease, box-shadow .18s ease;
}
.seraj-pkg-card:hover { transform: translateY(-3px); box-shadow: 0 16px 32px rgba(0, 0, 0, .1); }
.seraj-pkg-card__media { position: relative; display: block; aspect-ratio: 3 / 2; background: var(--seraj-muted-bg, #efeae4); }
.seraj-pkg-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.seraj-pkg-card__badges { position: absolute; left: .6rem; top: .6rem; display: flex; flex-wrap: wrap; gap: .35rem; }
.seraj-pkg-card__badge {
	padding: .22rem .55rem;
	border-radius: 999px;
	font-size: .74rem;
	font-weight: 600;
	background: rgba(0, 0, 0, .68);
	color: #fff;
	backdrop-filter: blur(4px);
}
.seraj-pkg-card__badge--type { background: var(--seraj-accent, #b4632a); }
.seraj-pkg-card__body { display: flex; flex-direction: column; gap: .35rem; padding: .95rem 1rem 1.05rem; flex: 1; min-width: 0; }
.seraj-pkg-card__title { margin: 0; font-size: 1.06rem; line-height: 1.3; }
.seraj-pkg-card__title a { color: inherit; text-decoration: none; }
.seraj-pkg-card__sub { margin: 0; font-size: .88rem; color: var(--seraj-muted, #6c6560); }
.seraj-pkg-card__points { margin: .1rem 0 0; padding-left: 1.05rem; font-size: .85rem; display: grid; gap: .15rem; }
.seraj-pkg-card__chips { display: flex; flex-wrap: wrap; gap: .3rem; margin: .15rem 0 0; padding: 0; list-style: none; }
.seraj-pkg-card__next { margin: .2rem 0 0; font-size: .82rem; color: var(--seraj-muted, #6c6560); }
.seraj-pkg-card__seats { margin-left: .4rem; color: var(--seraj-accent, #b4632a); font-weight: 600; }
.seraj-pkg-card__foot { margin-top: auto; padding-top: .7rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; }
.seraj-pkg-card__actions { display: flex; gap: .4rem; flex-wrap: wrap; }
.seraj-pkg-card__price--soft span { font-size: .85rem; color: var(--seraj-muted, #6c6560); }
.seraj-pkg-card--compact .seraj-pkg-card__body { padding: .8rem .85rem .9rem; }

/* ── Custom-trip banner ─────────────────────────────────────────────── */
.seraj-pkga-plan__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: clamp(1.25rem, 3vw, 2rem);
	border-radius: 18px;
	background: var(--seraj-surface-alt, #f6f1ea);
}
.seraj-pkga-plan__inner h2 { margin: 0 0 .3rem; }
.seraj-pkga-plan__inner p { margin: 0; color: var(--seraj-muted, #6c6560); }
