/* ==========================================================================
   NAJNOVŠIE ČLÁNKY  —  Figma node 1:415

   Nadpis vľavo, tlačidlo „Všetky články" vpravo, pod nimi 4 karty
   s náhľadom na šírku (320 × 259.66).
   Karta je zdieľaný komponent .pc-postcard (assets/css/components.css).
   ========================================================================== */

.pc-posts {
	padding-block: var(--pc-space-section);
	/* Figma: náhľad na šírku */
	--pc-postcard-ratio: 320 / 259.66;
	--pc-postcard-title-gap: 35px;
	/* Rovnaký počet riadkov ako pri videonávodoch, nech sedia tlačidlá. */
	--pc-postcard-lines: 6;
}

.pc-posts__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--pc-space-24);
	/* Figma: nadpis 0 → 48, náhľady začínajú na 67.6 */
	margin-bottom: 20px;
}

.pc-posts__title {
	font-size: var(--pc-fs-heading);
	font-weight: var(--pc-weight-bold);
	line-height: 48px;
}

/* Figma: modré tlačidlo 200 × 29 s tenkým bielym okrajom, Inter Bold 16
   verzálkami. Okraj je vidieť len na tmavom podklade, ale ponechávame
   ho podľa návrhu. */
.pc-posts__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	min-width: 200px;
	min-height: 29px;
	padding-inline: var(--pc-space-16);
	border: 0.631px solid var(--pc-white);
	border-radius: 2.524px;
	background: var(--pc-blue);
	font-size: var(--pc-fs-small);
	font-weight: var(--pc-weight-bold);
	line-height: 1;
	text-transform: uppercase;
	color: var(--pc-white);
	transition: background-color var(--pc-duration) var(--pc-ease);
}

.pc-posts__link:hover,
.pc-posts__link:focus-visible {
	background: var(--pc-blue-dark);
	text-decoration: none;
}

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

.pc-posts__item {
	display: flex;
}

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

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

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

	.pc-posts__title {
		line-height: 1.2;
	}
}

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

@media (max-width: 560px) {
	.pc-posts__head {
		flex-direction: column;
		align-items: flex-start;
	}
}

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

	.pc-posts .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-posts__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-posts__grid::-webkit-scrollbar {
		display: none;
	}

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

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