/**
 * Tareno-Grids: Filterleiste und Einklappen.
 *
 * Liegt absichtlich ausserhalb von assets/scss/ und der Build-Pipeline -- aus dem
 * gleichen Grund wie assets/js/grid/tareno-grid.js: so ist die Aenderung ohne
 * Rebuild deploybar und aendert keine Hashes in assets/dist/. Beim Einsammeln in
 * die Pipeline wird daraus assets/scss/molecules/_grid-filter.scss; die
 * Variablennamen sind schon die des Themes.
 *
 * Die Filter waren vorher vue-select (.vs__dropdown-toggle usw.). Hier stehen
 * native <select> -- sie brauchen kein JavaScript zum Aufklappen, bedienen sich
 * auf dem Telefon ueber das System-Widget und sind mit Tastatur und Screenreader
 * ohne Zutun benutzbar. Die Optik bleibt: weisse Flaeche, kein Rahmen, 1.8rem,
 * Chevron als Hintergrundbild.
 *
 * **Jede var() hat einen Literal-Fallback** -- und zwar aus Notwendigkeit, nicht
 * aus Vorsicht: die ausgelieferte `assets/dist/css/app.0936140f.css` (Stand Juli
 * 2025) enthaelt **keine** Custom Properties. `assets/scss/_base/_vars.scss` mit
 * `--color-white` und `--spacing-unit-*` ist neuer als dieser Build und steckt dort
 * nicht drin. Ohne Fallback waere jedes `background-color: var(--color-white)`
 * ungueltig und jedes `padding: var(--spacing-unit-0-5)` null -- im Browser
 * nachgemessen. Die Literale sind die Werte aus `assets/scss/_config/colors.scss`
 * und `_spacing.scss`. Bringt ein spaeterer Rebuild die Variablen mit, gewinnen
 * automatisch sie.
 */

/* ------------------------------------------------------------------ Filter */

.grid-filter {
	margin-bottom: var(--spacing-unit-2, 4.8rem);
}

/**
 * Abstaende ueber Margins, nicht ueber `gap`.
 *
 * `gap` fuer Flexbox kann Chrome erst ab 84 und Safari ab 14.1 -- davor wird es
 * stillschweigend ignoriert, und dann klebten Trefferzahl und
 * «Filter zuruecksetzen» aneinander (in Chrome 73 nachgestellt). Das negative
 * Aussenmass am Container mit halbem Abstand je Feld ist dasselbe Muster, das
 * _post-masonry.scss fuer die Kacheln benutzt.
 */
.grid-filter__fields {
	display: flex;
	flex-flow: row wrap;
}

.grid-filter__field {
	width: 100%;
	margin-bottom: var(--spacing-unit-0-75, 1.8rem);
}

@media (min-width: 768px) {
	.grid-filter__fields {
		margin-left: calc(var(--spacing-unit-0-75, 1.8rem) / -2);
		margin-right: calc(var(--spacing-unit-0-75, 1.8rem) / -2);
	}

	.grid-filter__field {
		width: calc(50% - var(--spacing-unit-0-75, 1.8rem));
		margin-left: calc(var(--spacing-unit-0-75, 1.8rem) / 2);
		margin-right: calc(var(--spacing-unit-0-75, 1.8rem) / 2);
	}
}

@media (min-width: 1200px) {
	.grid-filter__field {
		width: calc(25% - var(--spacing-unit-0-75, 1.8rem));
	}
}

.grid-filter__label {
	display: block;
	font-size: 1.8rem;
	margin-bottom: var(--spacing-unit-0-25, 0.6rem);
	margin-left: var(--spacing-unit-0-75, 1.8rem);
	color: var(--color-grey-400, #3E3E3E);
}

@media (min-width: 1200px) {
	.grid-filter__label {
		margin-bottom: var(--spacing-unit-0-75, 1.8rem);
	}
}

.grid-filter__select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	width: 100%;
	margin: 0;
	border: 0;
	border-radius: 0;
	background-color: var(--color-white, #ffffff);
	color: var(--color-primary-1, #063E85);
	font-family: inherit;
	font-size: 1.8rem;
	line-height: 1.3;
	/* Rechts Platz fuer den Chevron. */
	padding: var(--spacing-unit-0-5, 1.2rem) var(--spacing-unit-1-75, 4.2rem) var(--spacing-unit-0-5, 1.2rem) var(--spacing-unit-0-5, 1.2rem);
	cursor: pointer;
	/* Chevron als Hintergrund statt mask-image: der Pfeil soll die Farbe
	   behalten, auch wenn der Select selbst invertiert. */
	background-image: url('../images/chevron-down.svg');
	background-repeat: no-repeat;
	background-position: right var(--spacing-unit-0-5, 1.2rem) center;
	background-size: 14px auto;
}

.c-bg-white .grid-filter__select {
	background-color: var(--color-grey-100, #F6F6F6);
}

.grid-filter__select:focus-visible {
	outline: 2px solid var(--color-primary-1, #063E85);
	outline-offset: 2px;
}

/* Ein gesetzter Filter ist von aussen erkennbar -- invertiert wie die
   aufgeklappte vue-select vorher. */
.grid-filter__select[data-active='1'],
.c-bg-white .grid-filter__select[data-active='1'] {
	background-color: var(--color-black, #000);
	color: var(--color-white, #ffffff);
}

.grid-filter__meta {
	display: flex;
	flex-flow: row wrap;
	align-items: center;
	margin-top: var(--spacing-unit-0-75, 1.8rem);
	font-size: 1.6rem;
	color: var(--color-grey-400, #3E3E3E);
	/* Kein Hoehensprung, wenn Treffer und Zuruecksetzen erscheinen. */
	min-height: 2.4rem;
}

/* Verborgene Elemente sind display:none und bringen kein Aussenmass mit. */
.grid-filter__meta > * {
	margin-right: var(--spacing-unit-0-75, 1.8rem);
}

.grid-filter__meta > *:last-child {
	margin-right: 0;
}

.grid-filter__reset {
	appearance: none;
	border: 0;
	background: none;
	padding: 0;
	font: inherit;
	color: var(--color-primary-1, #063E85);
	text-decoration: underline;
	cursor: pointer;
}

/* ------------------------------------------------- Einklappen und Aufdecken */

/**
 * Die Kacheln stehen alle im HTML. Die ueber den ersten Schritt hinaus bekommen
 * is-hidden bereits vom Server -- so ist die Seite schon beim ersten Aufbau
 * kurz, ohne dass JavaScript etwas umstellen muss (kein Umspringen, und die
 * Bilder der eingeklappten Kacheln laedt der Browser wegen loading="lazy" gar
 * nicht erst an). Danach verschiebt tareno-grid.js die Klasse.
 */
[data-grid-item].is-hidden {
	display: none;
}

/**
 * `hidden` allein reicht hier nicht.
 *
 * Das UA-Stylesheet setzt [hidden]{display:none}, aber jede Autoren-Regel
 * gewinnt dagegen -- unabhaengig von Spezifitaet. Der Nachladeknopf traegt
 * `.action`, und das Theme setzt darauf `display:inline-flex`: der Knopf blieb
 * sichtbar und fokussierbar, obwohl er nichts mehr zu tun hatte. Am Seitenende
 * stand so weiter «Weitere Beitraege laden», bei null Treffern gleichzeitig mit
 * «Zu dieser Auswahl gibt es niemanden».
 *
 * Zwei Attribute im Selektor (0,2,0) schlagen `.action` (0,1,0) -- ohne
 * !important und ohne ein globales [hidden] aufzustellen, das auch alles
 * andere auf der Seite treffen wuerde.
 */
[data-grid-more][hidden],
[data-grid-reset][hidden],
[data-grid-count][hidden],
[data-grid-empty][hidden],
[data-grid-sentinel][hidden] {
	display: none;
}

.grid-sentinel {
	width: 100%;
	height: 1px;
	margin: 0;
	padding: 0;
}

.grid-empty {
	margin-top: var(--spacing-unit-1, 2.4rem);
}

.grid-more {
	display: flex;
	justify-content: center;
	margin-top: var(--spacing-unit-2, 4.8rem);
}

/**
 * Ohne JavaScript bleibt nichts eingeklappt: dann gibt es weder Observer noch
 * Knopf, und 6 von 35 Beitraegen waeren eine Sackgasse. Der Filter verschwindet
 * aus demselben Grund -- vier Auswahlfelder, die nichts tun, sind schlechter
 * als keine.
 */
html.no-js [data-grid-item].is-hidden {
	display: block;
}

html.no-js .grid-filter,
html.no-js .grid-more,
html.no-js .grid-sentinel {
	display: none;
}