/* ==========================================================================
   BLOG — výpis článkov  ·  Figma node 1:1195

   Miery z Figmy:
     banner       1398 × 599, radius 5, nápis „profi blog" cez fotku
     nápis        Playfair Display ExtraBold 144.4, biely
     nadpis       Inter Bold 30 / 48
     mriežka      4 stĺpce, náhľad 320 × 259.66, medzera 40 / 90
     stránkovanie zarovnané vpravo (na rozdiel od obchodu, kde je v strede)
   ========================================================================== */

.pc-blog {
	padding-block: var(--pc-space-48) var(--pc-space-section);
	/* Karta článku — rovnaký komponent ako „Najnovšie články". */
	--pc-postcard-ratio: 320 / 259.66;
	--pc-postcard-title-gap: 35px;
	--pc-postcard-lines: 6;
}

/* ---- Banner ----------------------------------------------------------- */

.pc-blog__banner {
	position: relative;
	/* Nápis sa škáluje z bannera, nie z okna. */
	container-type: inline-size;
	margin: 0;
	aspect-ratio: 1398.035 / 598.912;
	border-radius: 5px;
	overflow: hidden;
}

.pc-blog__banner img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/*
 * Rovnaké prevedenie ako titulné bannery na ostatných stránkach: text
 * v ľavej časti fotky, rovnaká veľkosť aj rez. Pôvodný dekoratívny
 * nápis („profi blog") mal iný rukopis a blog sa tým od webu odlišoval.
 */
.pc-blog__overlay {
	position: absolute;
	left: 6.762%;
	top: 30%;
	width: 32%;
	display: block;
	color: var(--pc-white);
}

.pc-blog__overlay-word {
	display: block;
	font-size: clamp(18px, 2.86cqw, 40px);
	font-weight: var(--pc-weight-bold);
	line-height: 1.25;
}

/* ---- Nadpis a mriežka ------------------------------------------------- */

.pc-blog__title {
	/* Figma: banner končí na 773.5, nadpis začína na 885.4 */
	margin-block: 112px 38px;
}

/*
 * Bez vstavaného bannera (nad výpisom je hero sekcia) je nadpis prvý —
 * odsadenie pod banner by nad ním nechalo prázdnu dieru.
 */
.pc-blog__title:first-child {
	margin-top: 0;
	font-size: var(--pc-fs-heading);
	font-weight: var(--pc-weight-bold);
	line-height: 48px;
}

.pc-blog__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	/* Figma: riadky po 590.2 pri karte 524.9 → medzera 65; stĺpce 40 */
	gap: 65px 40px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.pc-blog__item {
	display: flex;
}

.pc-blog__empty {
	padding-block: var(--pc-space-48);
	font-size: var(--pc-fs-lead);
}

/* Vo Figme je stránkovanie blogu pri pravom okraji. */
.pc-pager--end {
	justify-content: flex-end;
	margin-top: 86px;
}

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

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

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

	.pc-blog__title {
		margin-block: var(--pc-space-48) var(--pc-space-32);
		line-height: 1.2;
	}

	.pc-pager--end {
		margin-top: var(--pc-space-48);
	}
}

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

	/* Pri nižšom banneri by portrétová fotka stratila kompozíciu. */
	.pc-blog__banner {
		aspect-ratio: 16 / 9;
	}
}

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

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

	.pc-blog__banner {
		aspect-ratio: 4 / 3;
	}

	.pc-pager--end {
		justify-content: center;
	}
}

/* ---- Videonávody: náhľady na výšku ako na úvodnej stránke --------------
   Náhľady návodov sú orezané 1122 × 1402 (fľaša celá). Formát blogu
   na šírku ich odrezal (Juraj 31. 10. 2026). */

.pc-guides {
	--pc-postcard-ratio: 1122 / 1402;
}

/* ---- Ďalšie videonávody pod detailom návodu ---------------------------- */

.pc-guides--more {
	padding-top: 0;
}

.pc-guides--more .pc-blog__title {
	margin-top: 0;
}

.pc-guides__all {
	margin: var(--pc-space-48) 0 0;
	text-align: center;
}