/**
 * Shared "section kit" — section header, card grid, filter bar, empty
 * state, skeleton loading. Brand tokens only (see assets/css/theme.css).
 *
 * @package SerajTourism
 */

/* --- Section header ------------------------------------------------- */
.seraj-kit-section-header {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1.5rem;
	flex-wrap: wrap;
}
.seraj-kit-section-header__text { max-width: 62ch; }
.seraj-kit-section-header__action {
	flex: 0 0 auto;
	font-weight: 600;
	color: var(--seraj-primary);
	white-space: nowrap;
}
.seraj-kit-section-header__action:hover { color: var(--seraj-primary-ink); }

/* --- Filter bar ------------------------------------------------------ */
.seraj-kit-filter-bar {
	background: color-mix(in srgb, var(--seraj-surface) 92%, transparent);
	backdrop-filter: blur(10px);
	border-block: 1px solid var(--seraj-border);
	z-index: 20;
}
.seraj-kit-filter-bar--sticky {
	position: sticky;
	top: var(--seraj-header-height, 0);
}
.seraj-kit-filter-bar__inner {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: .6rem 1rem;
	padding-block: .65rem;
}
.seraj-kit-filter-bar__count {
	margin: 0;
	font-size: .9rem;
	color: var(--seraj-muted);
	flex: 1 1 auto;
	min-width: 8rem;
}
.seraj-kit-filter-bar__chips {
	display: flex;
	flex-wrap: wrap;
	gap: .4rem;
	margin: 0;
	padding: 0;
	list-style: none;
}
.seraj-kit-chip {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	padding: .3rem .7rem;
	border-radius: 999px;
	background: color-mix(in srgb, var(--seraj-primary) 10%, transparent);
	color: var(--seraj-primary-ink);
	font-size: .82rem;
	font-weight: 600;
	text-decoration: none;
	border: 1px solid transparent;
}
.seraj-kit-chip:hover { background: color-mix(in srgb, var(--seraj-primary) 18%, transparent); color: var(--seraj-primary-ink); }
.seraj-kit-chip__remove { font-size: 1rem; line-height: 1; }
.seraj-kit-filter-bar__clear {
	font-size: .85rem;
	font-weight: 600;
	color: var(--seraj-muted);
	text-decoration: underline;
	white-space: nowrap;
}
.seraj-kit-filter-bar__clear:hover { color: var(--seraj-text); }

/* --- Card grid --------------------------------------------------------- */
.seraj-kit-skeleton-grid { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.seraj-kit-skeleton-card {
	background: var(--seraj-surface);
	border: 1px solid var(--seraj-border);
	border-radius: var(--seraj-radius-lg);
	overflow: hidden;
	padding-bottom: 1rem;
}
.seraj-kit-skeleton {
	background: linear-gradient(90deg, var(--seraj-border) 25%, color-mix(in srgb, var(--seraj-border) 60%, transparent) 37%, var(--seraj-border) 63%);
	background-size: 400% 100%;
	animation: seraj-kit-skeleton-shimmer 1.4s ease infinite;
}
.seraj-kit-skeleton--media { aspect-ratio: 4/3; width: 100%; }
.seraj-kit-skeleton--line { height: .85rem; margin: .9rem 1rem 0; border-radius: 4px; }
.seraj-kit-skeleton--line-short { width: 60%; }
@keyframes seraj-kit-skeleton-shimmer {
	0% { background-position: 100% 0; }
	100% { background-position: 0 0; }
}

/* --- Empty state --------------------------------------------------- */
.seraj-kit-empty {
	text-align: center;
	padding: clamp(2.5rem, 6vw, 4rem) 1.5rem;
	background: var(--seraj-surface);
	border: 1px dashed var(--seraj-border);
	border-radius: var(--seraj-radius-lg);
}
.seraj-kit-empty__icon { display: block; font-size: 2.25rem; margin-bottom: .75rem; }
.seraj-kit-empty__title { font-family: var(--seraj-font-display); font-size: 1.3rem; margin: 0 0 .35rem; }
.seraj-kit-empty__message { color: var(--seraj-muted); margin: 0 auto 1.25rem; max-width: 46ch; }
.seraj-kit-empty__links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: .6rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* --- Accessibility --------------------------------------------------- */
.seraj-kit-chip:focus-visible,
.seraj-kit-filter-bar__clear:focus-visible,
.seraj-kit-section-header__action:focus-visible,
.seraj-kit-empty__links a:focus-visible {
	outline: 2px solid var(--seraj-primary);
	outline-offset: 2px;
	border-radius: 6px;
}

@media (prefers-reduced-motion: reduce) {
	.seraj-kit-skeleton {
		animation: none;
	}
	.seraj-card,
	.seraj-kit-chip {
		transition: none !important;
	}
}

/* ---------------------------------------------------------------
 * Universal taxonomy archive (taxonomy.php)
 * ------------------------------------------------------------- */
.seraj-tax-hero {
	position: relative;
	padding: clamp(3rem, 7vw, 6rem) 0 clamp(2rem, 4vw, 3rem);
	background: var(--seraj-surface-2, #f6f4ef);
}
.seraj-tax-hero--image {
	background-image: linear-gradient(180deg, rgba(0, 0, 0, .35), rgba(0, 0, 0, .62)), var(--tax-hero);
	background-size: cover;
	background-position: center;
	color: #fff;
}
.seraj-tax-hero--image .seraj-lede,
.seraj-tax-hero--image .seraj-eyebrow,
.seraj-tax-hero--image .seraj-tax-hero__count { color: rgba(255, 255, 255, .86); }
.seraj-tax-hero--image a { color: #fff; }
.seraj-tax-hero__inner { max-width: 62ch; }
.seraj-tax-hero__crumbs { margin-bottom: 1rem; }
.seraj-tax-hero__title {
	font-family: var(--seraj-font-display);
	font-size: clamp(2rem, 5vw, 3.25rem);
	line-height: 1.08;
	margin: .35rem 0 .75rem;
}
.seraj-tax-hero__count {
	margin: .75rem 0 0;
	font-size: .85rem;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--seraj-muted);
}
.seraj-tax-chips {
	border-bottom: 1px solid var(--seraj-border, rgba(0, 0, 0, .08));
	background: var(--seraj-surface, #fff);
	position: sticky;
	top: 0;
	z-index: 5;
}
.seraj-tax-chips ul {
	display: flex;
	gap: .5rem;
	list-style: none;
	margin: 0;
	padding: .85rem 0;
	overflow-x: auto;
	scrollbar-width: none;
}
.seraj-tax-chips ul::-webkit-scrollbar { display: none; }
.seraj-tax-chips li { flex: 0 0 auto; }
.seraj-tax-intro { padding-top: clamp(1.5rem, 3vw, 2.5rem); }
.seraj-tax-results { padding-top: clamp(1.75rem, 4vw, 3rem); }

/* 404 recovery rails */
.seraj-404__intro { text-align: center; }
.seraj-404__search { margin: 1.75rem auto 1rem; max-width: 34rem; }
.seraj-404__rail { padding-top: 0; }