/**
 * Kategori-filter — chip-række over hero-kort-griddet.
 * Klient-side filter (card-filter.js). Skjult indtil JS er klar, så rækken
 * ikke står død uden JavaScript.
 * Designregler: 2-corner radius, ingen skygger, hover = sort, aktiv = rød.
 */

/* Samler filter-rækkerne (kategori + geografi) med luft ned til griddet. */
.card-filters {
	margin-bottom: var(--tc-space-8);
}

.card-filter {
	display: none; /* afsløres af JS via .card-filter--ready */
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--tc-space-2);
	margin-bottom: var(--tc-space-3);
}

.card-filter:last-child {
	margin-bottom: 0;
}

/* Akse-etiket foran rækken (Kategori / Hvor henad) — eyebrow-stil, så det er
   tydeligt hvilken akse rækken filtrerer på, når begge har et aktivt valg. */
.card-filter__label {
	font-family: var(--tc-font-body);
	font-weight: 400;
	font-size: 0.6875rem; /* 11px — mindre end chips, bevidst underordnet */
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--tc-gray-500);
	margin-right: var(--tc-space-2);
}

.card-filter--ready {
	display: flex;
}

/* Mobil: etiketten bliver en overskrift på egen linje, og chipsene venstre-stilles
   under den → to tydelige, ryddede grupper i stedet for et centreret virvar. */
@media (max-width: 767px) {
	/* Stor afstand MELLEM grupperne, lille afstand fra etiket til dens egne chips →
	   hver etiket binder tydeligt til den gruppe, den dækker. */
	.card-filter {
		justify-content: flex-start;
		margin-bottom: var(--tc-space-8);
	}

	.card-filter__label {
		flex-basis: 100%;
		margin-right: 0;
		margin-bottom: var(--tc-space-1);
	}
}

.card-filter__chip {
	font-family: var(--tc-font-body);
	font-weight: 500;
	font-size: 0.8125rem; /* 13px */
	line-height: 1;
	color: var(--tc-gray-500);
	background: transparent;
	border: 1px solid var(--tc-gray-200);
	/* 2-corner brandform: top-højre + bund-venstre runde. */
	border-radius: 0 var(--tc-radius-ui) 0 var(--tc-radius-ui);
	padding: var(--tc-space-2) var(--tc-space-4);
	cursor: pointer;
	transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.card-filter__count {
	font-weight: 400;
	color: var(--tc-gray-300);
	margin-left: var(--tc-space-1);
	font-variant-numeric: tabular-nums;
}

/* Aktiv = brand-rød. */
.card-filter__chip[aria-pressed="true"] {
	background: var(--tc-red);
	border-color: var(--tc-red);
	color: var(--tc-white);
}

.card-filter__chip[aria-pressed="true"] .card-filter__count {
	color: rgba(255, 255, 255, 0.75);
}

/* Hover = sort (gælder hele sitet), uanset aktiv/inaktiv. */
.card-filter__chip:hover {
	background: var(--tc-ink);
	border-color: var(--tc-ink);
	color: var(--tc-white);
}

.card-filter__chip:hover .card-filter__count {
	color: rgba(255, 255, 255, 0.7);
}

/* Synligt tastatur-fokus (ikke afhængig af hover-farven). */
.card-filter__chip:focus-visible {
	outline: 2px solid var(--tc-ink);
	outline-offset: 2px;
}

/* Ville give 0 resultater givet de andre valg → dæmpet OG deaktiveret: ingen
   hover-fremhævning, ikke-klikbar markør, og klikket blokeres i JS (aria-disabled). */
.card-filter__chip.is-empty {
	opacity: 0.4;
	cursor: not-allowed;
}

.card-filter__chip.is-empty:hover {
	background: transparent;
	border-color: var(--tc-gray-200);
	color: var(--tc-gray-500);
}

.card-filter__chip.is-empty:hover .card-filter__count {
	color: var(--tc-gray-300);
}

/* Tomt resultat (kan ske når to akser kombineres til en tom skæring). */
.card-filter__empty {
	text-align: center;
	color: var(--tc-text-muted);
	font-size: var(--tc-fs-base);
	padding: var(--tc-space-12) 0;
}

/* ============================================================
   Floating "Filtrér"-knap + bund-sheet — KUN mobil. Desktop: chipsene
   står inline som hidtil, og al sheet-chrome/FAB er skjult. Ingen skygger.
   ============================================================ */

/* Som standard (desktop): kun chip-rækkerne; FAB + sheet-ramme skjules. */
.tc-filter-fab,
.tc-filter-sheet__head,
.tc-filter-sheet__foot,
.tc-filter-backdrop {
	display: none;
}

@media (max-width: 767px) {
	/* Floating trigger — altid synlig, centreret nederst (vises når JS er klar). */
	.tc-filter-fab {
		display: none; /* afsløres af body.tc-filter-ready */
		position: fixed;
		left: 50%;
		bottom: var(--tc-space-6);
		transform: translateX(-50%);
		z-index: 90;
		align-items: center;
		gap: var(--tc-space-2);
		padding: var(--tc-space-3) var(--tc-space-6);
		border: 0;
		border-radius: 0 var(--tc-radius-ui) 0 var(--tc-radius-ui);
		background: var(--tc-red);
		color: var(--tc-white);
		font-family: var(--tc-font-body);
		font-weight: 700;
		font-size: var(--tc-fs-sm);
		cursor: pointer;
	}

	body.tc-filter-ready .tc-filter-fab {
		display: inline-flex;
	}

	/* Skjul FAB'en mens sheeten er åben (close-knappen overtager). */
	body.tc-filter-open .tc-filter-fab {
		display: none;
	}

	.tc-filter-fab svg {
		width: 18px;
		height: 18px;
	}

	.tc-filter-fab__badge {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-width: 20px;
		height: 20px;
		padding: 0 6px;
		border-radius: var(--tc-radius-pill);
		background: var(--tc-white);
		color: var(--tc-red);
		font-size: var(--tc-fs-xs);
		font-weight: 700;
	}

	.tc-filter-fab__badge[hidden] {
		display: none;
	}

	/* Bund-sheet */
	.tc-filter-sheet {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 96;
		max-height: 85vh;
		overflow-y: auto;
		padding: var(--tc-space-6);
		background: var(--tc-white);
		border-radius: 20px 20px 0 0;
		transform: translateY(110%);
		transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
	}

	.tc-filter-sheet.is-open {
		transform: translateY(0);
	}

	/* Chip-rækkerne fylder ikke længere over griddet; nulstil margin i sheeten. */
	.tc-filter-sheet .card-filters {
		margin-bottom: 0;
	}

	.tc-filter-sheet__head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: var(--tc-space-5);
	}

	.tc-filter-sheet__title {
		font-family: var(--tc-font-heading);
		font-weight: 700;
		font-size: var(--tc-fs-lg);
		color: var(--tc-ink);
	}

	.tc-filter-sheet__close {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 40px;
		height: 40px;
		padding: 0;
		border: 0;
		background: none;
		color: var(--tc-ink);
		cursor: pointer;
	}

	.tc-filter-sheet__close svg {
		width: 22px;
		height: 22px;
	}

	.tc-filter-sheet__foot {
		display: block;
		margin-top: var(--tc-space-6);
	}

	.tc-filter-sheet__apply {
		width: 100%;
		justify-content: center;
	}

	/* Mørkt overlag bag sheeten */
	.tc-filter-backdrop {
		display: block;
		position: fixed;
		inset: 0;
		z-index: 95;
		background: rgba(26, 27, 31, 0.45);
		opacity: 0;
		visibility: hidden;
		transition: opacity 0.28s ease, visibility 0.28s ease;
	}

	.tc-filter-backdrop.is-open {
		opacity: 1;
		visibility: visible;
	}

	/* Lås baggrunds-scroll mens sheeten er åben */
	body.tc-filter-open {
		overflow: hidden;
	}
}

@media (prefers-reduced-motion: reduce) {
	.tc-filter-sheet,
	.tc-filter-backdrop {
		transition: none;
	}
}