/*
 * Dotazy z podpory — layout mřížky a filtrovací lišty.
 *
 * Záměrně minimální: vzhled karet, bublin, tlačítek i typografie je celý
 * z design systému (c_border-box, vh-msg-*, btn-outline-gray, form-control).
 * Tady je jen to, co design systém nemá — masonry mřížka a rozbalování odpovědi.
 */

/* ---- filtrovací lišta ------------------------------------------------- */

.q-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem 1.5rem;
	margin-bottom: 2.5rem;
}

.q-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.q-search {
	flex: 1 1 15rem;
	max-width: 22rem;
	margin-left: auto;
}

/* Vlastní křížek nahrazuje nativní × v type="search" — to se v každém
   prohlížeči vykresluje jinak a do stylu pole z design systému nesedí. */
.q-search input::-webkit-search-cancel-button {
	display: none;
}

.q-search .btn-close[hidden] {
	display: none;
}

/* ---- masonry mřížka ---------------------------------------------------- */

/* Sloupce jsou grid, výšku karet dopočítává JS přes grid-row-end: span N
   (proto grid-auto-rows: 1px). Bez JS se karty zobrazí pod sebou v jednom
   sloupci — viz .q-grid:not(.is-ready) níž. */
.q-grid {
	display: grid;
	grid-template-columns: 1fr;
	column-gap: 1.5rem;
	row-gap: 0;
	grid-auto-rows: 1px;
}

/* Dva sloupce až od 1200 px. Levý sloupec se odpojuje na 992 px a mezi tím
   by na kartu zbylo ~310 px, což je na konverzaci s bublinami moc málo. */
@media (min-width: 75rem) {
	.q-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

.q-grid:not(.is-ready) {
	display: block;
}

.q-card__in {
	margin-bottom: 1.5rem;
}

.q-card[hidden] {
	display: none;
}

/* ---- karta konverzace -------------------------------------------------- */

.q-card__head {
	margin-bottom: 1rem;
}

/* Štítek kategorie je vizuálně tlačítko z DS, ale není klikací. */
.q-card__tag {
	pointer-events: none;
}

.q-more[hidden] {
	display: none;
}

.q-more {
	margin-top: 0.375rem;
	padding-top: 0.375rem;
	border-top: 1px solid rgba(31, 49, 55, 0.12);
}

.q-card__foot {
	margin-top: 0.75rem;
	text-align: right;
}

/* ---- stav bez výsledků ------------------------------------------------- */

.q-empty {
	padding: 2.5rem 0;
	text-align: center;
}

.q-empty[hidden] {
	display: none;
}

/* Zvýraznění shody z fuzzy hledání. */
.q-hit {
	background: #ffe8ee;
	border-radius: 3px;
}