/* ==========================================================================
   VÝSLEDKY HĽADANIA

   Tri oddelené skupiny — kategórie, produkty, články. Každá má vlastný
   typ karty, aby bolo na prvý pohľad jasné, čo je čo.
   ========================================================================== */

.pc-results {
	padding-block: var(--pc-space-48) var(--pc-space-section);
}

.pc-results__title {
	margin: 0 0 var(--pc-space-24);
	font-size: var(--pc-fs-heading);
	font-weight: var(--pc-weight-bold);
	line-height: var(--pc-lh-tight);
}

.pc-results__title span {
	color: var(--pc-blue);
}

.pc-results__form {
	max-width: 720px;
	margin-bottom: var(--pc-space-48);
}

.pc-results__empty {
	font-size: var(--pc-fs-lead);
	color: var(--pc-grey);
}

.pc-results__group + .pc-results__group {
	margin-top: var(--pc-space-64);
}

.pc-results__group-title {
	display: flex;
	align-items: center;
	gap: var(--pc-space-12);
	margin: 0 0 var(--pc-space-24);
	padding-bottom: var(--pc-space-12);
	border-bottom: 1px solid var(--pc-border);
	font-size: var(--pc-fs-lead);
	font-weight: var(--pc-weight-bold);
}

.pc-results__count {
	display: grid;
	place-items: center;
	min-width: 26px;
	height: 26px;
	padding-inline: 8px;
	border-radius: 999px;
	background: var(--pc-sky);
	font-size: var(--pc-fs-small);
	font-weight: var(--pc-weight-regular);
	color: var(--pc-blue);
}

.pc-results__tiles,
.pc-results__products,
.pc-results__posts {
	display: grid;
	gap: var(--pc-space-24);
	margin: 0;
	padding: 0;
	list-style: none;
}

.pc-results__tiles {
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}

/* Dlaždice majú v kontajneri sivé pozadie — tu je biele, preto okraj. */
.pc-results__tiles .pc-tile {
	border: 1px solid var(--pc-border);
}

.pc-results__products {
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 40px var(--pc-space-32);
}

.pc-results__posts {
	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
	gap: 40px var(--pc-space-32);
}

/* ==========================================================================
   NAŠEPKÁVAČ V HLAVIČKE
   ========================================================================== */

.pc-suggest {
	max-height: min(70vh, 520px);
	margin-top: var(--pc-space-12);
	padding: 15px;
	overflow-y: auto;
	background: var(--pc-white);
}

@media (max-width: 700px) {
	.pc-suggest {
		padding: 10px;
	}
}

.pc-suggest:empty {
	display: none;
}

/* Indikátor hľadania — panel ostane na mieste a len stmavne. */
.pc-suggest.is-loading {
	opacity: 0.5;
}

.pc-suggest__loading {
	display: flex;
	align-items: center;
	gap: var(--pc-space-8);
	margin: 0;
	padding: var(--pc-space-12) var(--pc-space-8);
	font-size: var(--pc-fs-small);
	color: var(--pc-grey);
}

.pc-suggest__spinner {
	flex: 0 0 16px;
	width: 16px;
	height: 16px;
	border: 2px solid var(--pc-border);
	border-top-color: var(--pc-blue);
	border-radius: 50%;
	animation: pc-spin 0.7s linear infinite;
}

@keyframes pc-spin {
	to {
		transform: rotate(360deg);
	}
}

@media (prefers-reduced-motion: reduce) {
	.pc-suggest__spinner {
		animation-duration: 2s;
	}
}

.pc-suggest__group + .pc-suggest__group {
	margin-top: var(--pc-space-16);
}

.pc-suggest__group-title {
	margin: 0 0 6px;
	font-size: var(--pc-fs-micro);
	font-weight: var(--pc-weight-bold);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--pc-grey);
}

.pc-suggest__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * Kategórie sú krátke názvy — vedľa seba zaberú zlomok miesta oproti
 * zoznamu pod sebou a našepkávač sa zmestí na obrazovku aj s produktmi.
 */
.pc-suggest__group--categories .pc-suggest__list {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.pc-suggest__group--categories .pc-suggest__item {
	padding: 6px var(--pc-space-12);
	border: 1px solid var(--pc-border);
	border-radius: 999px;
}

.pc-suggest__group--categories .pc-suggest__item:hover,
.pc-suggest__group--categories .pc-suggest__item:focus-visible {
	border-color: var(--pc-blue);
	background: var(--pc-sky);
}

.pc-suggest__item {
	display: flex;
	align-items: center;
	gap: var(--pc-space-12);
	padding: 6px var(--pc-space-8);
	border-radius: var(--pc-radius-xs);
	font-size: var(--pc-fs-small);
	color: var(--pc-black);
	text-decoration: none;
}

.pc-suggest__item:hover,
.pc-suggest__item:focus-visible {
	background: var(--pc-mist);
	text-decoration: none;
}

.pc-suggest__thumb {
	flex: 0 0 32px;
	width: 32px;
	height: 32px;
	object-fit: contain;
}

.pc-suggest__empty {
	margin: 0;
	font-size: var(--pc-fs-small);
	color: var(--pc-grey);
}

.pc-suggest__all {
	display: inline-block;
	margin-top: var(--pc-space-16);
	font-size: var(--pc-fs-small);
	font-weight: var(--pc-weight-bold);
	color: var(--pc-blue);
	text-decoration: underline;
}