/* ==========================================================================
   KATEGÓRIE  —  Figma node 1:264

   Pás #e6f7ff, nadpis Inter Bold 30px, mriežka 5 × 3 dlaždíc.
   Dlaždica 275 × 105, medzery 7px vodorovne / 14px zvisle, radius 5px,
   text Figtree Bold 22px / 26px.
   Odsadenie sekcie: 66px hore, 93px dole; nadpis → mriežka 25px.
   ========================================================================== */

.pc-categories {
	padding-block: 66px 93px;
}

.pc-categories__title {
	margin-bottom: 25px;
	font-size: var(--pc-fs-heading);
	font-weight: var(--pc-weight-bold);
	line-height: var(--pc-lh-tight);
}

.pc-categories__grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 14px 7px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.pc-categories__cell {
	display: flex;
}

.pc-categories .pc-tile {
	--pc-tile-height: 105px;
	--pc-tile-label: var(--pc-fs-tile);
	width: 100%;
}

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

   Dlaždica potrebuje ~230px, aby sa dvojslovný názov („celá domácnosť",
   „výhodné balenia") nelámal pod ikonu. Podľa toho sú zvolené stupne.
   ========================================================================== */

@media (max-width: 1200px) {
	.pc-categories__grid {
		grid-template-columns: repeat(4, 1fr);
	}
}

@media (max-width: 980px) {
	.pc-categories {
		padding-block: var(--pc-space-48);
	}

	.pc-categories__grid {
		grid-template-columns: repeat(3, 1fr);
	}

	.pc-categories .pc-tile {
		--pc-tile-height: 88px;
		--pc-tile-label: var(--pc-fs-small);
	}
}

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

	.pc-categories .pc-tile {
		--pc-tile-height: 72px;
		--pc-tile-icon: 34px;
		--pc-tile-label: var(--pc-fs-micro);
		--pc-tile-padding: 12px;
	}
}

@media (max-width: 420px) {
	.pc-categories__grid {
		grid-template-columns: 1fr;
	}
}