/* ==========================================================================
   OBĽÚBENÉ PRODUKTY  —  Figma node 1:73

   Nadpis Inter Bold 30px, pod ním 4 karty v rade.
   Stĺpce v 1400px: 0 / 360 / 720 / 1080, karta 317 → medzera 43px.
   ========================================================================== */

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

.pc-products__title {
	/* Figma: nadpis 0 → 36, obrázky kariet začínajú na 85 */
	margin-bottom: 49px;
	font-size: var(--pc-fs-heading);
	font-weight: var(--pc-weight-bold);
	line-height: var(--pc-lh-tight);
}

.pc-products__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 43px;
	align-items: stretch;
}

/* ==========================================================================
   RESPONZIVITA

   Karta potrebuje ~260px, aby sa cena a tlačidlo zmestili vedľa seba
   a názov produktu sa nelámal na tri riadky.
   ========================================================================== */

@media (max-width: 1100px) {
	.pc-products__grid {
		grid-template-columns: repeat(3, 1fr);
		gap: var(--pc-space-32);
	}

	.pc-products__title {
		margin-bottom: var(--pc-space-32);
	}
}

@media (max-width: 820px) {
	.pc-products__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 480px) {
	/*
	 * Dva stĺpce aj na najužšom displeji — jeden stĺpec robil z výpisu
	 * nekonečné rolovanie a zákazník nevidel, že produktov je viac.
	 */
	.pc-products__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--pc-space-24) var(--pc-space-12);
		gap: var(--pc-space-48);
	}
}

/* ---- Hlavička sekcie -------------------------------------------------- */
/*
 * Nadpis vľavo, odkaz „Zobraziť viac" vpravo na spoločnej účiare.
 * Odsadenie pod hlavičkou preberá pôvodnú medzeru spod nadpisu.
 */

.pc-products__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--pc-space-16);
	margin-bottom: 49px;
}

.pc-products__head .pc-products__title {
	margin-bottom: 0;
}

/*
 * Vzhľad má tlačidlo z `.btn btn--primary` — tu sa rieši len to, aby
 * v hlavičke nerástlo na celú šírku. Vlastnú farbu si NEURČUJE: modrý
 * text na modrom podklade nebolo vidieť.
 */
.pc-products__more {
	flex: 0 0 auto;
}

@media (max-width: 1024px) {
	.pc-products__head {
		margin-bottom: var(--pc-space-32);
	}
}