/* ==========================================================================
   VIDEORECENZIE A NÁVODY  —  Figma node 1:169

   Nadpis Inter Bold 30/48, pod ním 4 karty v rade (stĺpce po 360px).
   Karta samotná je zdieľaný komponent .pc-postcard (assets/css/components.css);
   tu sa rieši len mriežka a pomer strán náhľadu (na výšku, 1122:1402).
   ========================================================================== */

.pc-videos {
	padding-block: var(--pc-space-section);
	/* Figma: náhľad na výšku */
	--pc-postcard-ratio: 1122 / 1402;
	/* Rovnaký počet riadkov ako pri článkoch, nech sedia tlačidlá. */
	--pc-postcard-lines: 6;
}

.pc-videos__title {
	/* Figma: nadpis 0 → 48, náhľady začínajú na 63 */
	margin-bottom: 15px;
	font-size: var(--pc-fs-heading);
	font-weight: var(--pc-weight-bold);
	line-height: 48px;
}

/* Nadpis a „Zobraziť viac" v jednom riadku — rovnako ako pri produktoch. */
.pc-videos__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--pc-space-16);
	margin-bottom: 15px;
}

.pc-videos__head .pc-videos__title {
	margin-bottom: 0;
}

.pc-videos__more {
	flex: 0 0 auto;
}

.pc-videos__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 40px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.pc-videos__item {
	display: flex;
}

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

   Náhľad je na výšku, takže štyri stĺpce sú vysoké — pri užšom okne
   sa zmenšujú skôr než pri produktových kartách.
   ========================================================================== */

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

	.pc-videos__title {
		margin-bottom: var(--pc-space-24);
		line-height: 1.2;
	}

	.pc-videos__head {
		margin-bottom: var(--pc-space-24);
	}

	.pc-videos {
		--pc-postcard-title-gap: 16px;
	}
}

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

@media (max-width: 480px) {
	.pc-videos__grid {
		grid-template-columns: 1fr;
		gap: var(--pc-space-32);
	}

	.pc-videos {
		/* Na jednom stĺpci by portrét zabral celú obrazovku. */
		--pc-postcard-ratio: 4 / 3;
	}

	.pc-videos .pc-postcard__cta {
		align-self: stretch;
	}
}

/* ==========================================================================
   MOBIL — vodorovný karusel

   Na úzkom displeji sa mriežka mení na posuvný pás. Posledná viditeľná
   karta je zámerne načatá, aby bolo vidieť, že sa dá posunúť ďalej.
   Žiadny skript — stačí `scroll-snap`.

   Pás ostáva vnútri kontajnera (žiadne záporné okraje), inak by prvá
   karta vytiekla za ľavý okraj obsahu a stránka by sa dala posúvať
   do strán.
   ========================================================================== */

@media (max-width: 780px) {
	.pc-videos__grid {
		display: grid;
		grid-auto-flow: column;
		grid-auto-columns: 78%;
		grid-template-columns: none;
		gap: var(--pc-space-16);
		padding-bottom: var(--pc-space-8);

		overflow-x: auto;
		/* Len do strán — inak sa dal pás posúvať prstom aj hore a dole. */
		overflow-y: hidden;
		touch-action: pan-x pan-y;
		/* Karta po potiahnutí vždy zastane zarovnaná naľavo. */
		scroll-snap-type: x mandatory;
		overscroll-behavior-x: contain;
		scrollbar-width: none;
	}

	.pc-videos__grid::-webkit-scrollbar {
		display: none;
	}

	.pc-videos__grid > * {
		scroll-snap-align: start;
	}
}

@media (max-width: 480px) {
	.pc-videos__grid {
		grid-auto-columns: 86%;
	}
}