/* ==========================================================================
   posts.css — Blog szakasz a főoldalon: a rács és a záró sáv.
   MÉRT A MINTÁN (taurus3.unas.hu, 2026-09-04): négy 320 px-es kártya 40 px
   réssel (4x320 + 3x40 = 1400), a kártyasor alatt 40 px-re a záró sáv:
   rgb(252,227,242) háttér, 10 px lekerekítés, 20 px 40 px padding, 96 px
   magas, a cím 32 px 700 (sormagasság 1,1), az alcím 14 px, a gomb 40 px
   magas, 12 px-es felirattal, 10 px 20 px paddinggal, a sáv jobb szélétől
   40 px-re.
   A .pcard kártya stílusa SZÁNDÉKOSAN nincs itt: azt az assets/css/blog.css
   adja, és a főoldalon is azt töltjük be (lásd vls_enqueue_block_styles).
   NULLA ÜRES SOR.
   ========================================================================== */
.blogrow__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--gutter);
}
/* A SIN CSAK MOBILON. A `.carousel__track` alaposztaly (blocks.css) MINDEN
   szelessegen sint csinal, mert a termek-carousel asztali nezetben is sin. A
   blog viszont csak mobilon carousel, ezert 768 pixel felett a racsot
   visszaallitjuk. Ket osztaly, tehat nagyobb a suly: `!important` nem kell.
   .
   A `grid-template-columns: none` MOBILON KELL, es ez nem dísz: az alaposztaly
   `grid-auto-flow: column`-t ad, a `.blogrow__grid` viszont egy explicit
   hasabot definial (1fr, 576 pixel felett kettot). A ketto egyutt azt jelenti,
   hogy az ELSO kartya az explicit, teljes szelessegu hasabba kerul, a tobbi
   pedig a 320 pixeles implicit hasabokba: az elso kartya kilogna a sorbol.
   Ugyanez a megoldas van a termek-carouselben (products.css). */
@media (max-width: 767px) {
	.blogrow__grid.carousel__track {
		grid-template-columns: none;
	}
	/* HELY A KARTYA ARNYEKANAK, ugyanaz a csapda, mint a termek-sinnel: az
	   `overflow: hidden` a belso margo szelen vag, a kartya arnyeka pedig azon
	   tul esik. A bejegyzes-kartya nyugalmi arnyeka `0 0 20px` (10 pixel minden
	   iranyban), a hoveré `--sh-md` (`0 2px 8px`, alul 6 felul 2), tehat 12
	   pixel belso margo mind a ket iranyban fedi. A negativ kulso margo itt is
	   a kompenzacio, hogy a kartyak a helyukon maradjanak. */
	.blogrow__grid.carousel__track {
		margin-block: -12px;
		padding-block: 12px;
	}
}
@media (min-width: 768px) {
	.blogrow__grid.carousel__track {
		grid-auto-flow: row;
		grid-auto-columns: auto;
		padding-bottom: 0;
		overflow: visible;
		scroll-snap-type: none;
	}
}
@media (min-width: 576px) {
	.blogrow__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
@media (min-width: 992px) {
	.blogrow__grid {
		grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr));
		gap: var(--sp-10);
	}
}
.blogrow__cta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-4) var(--sp-8);
	margin-top: var(--sp-10);
	padding: var(--sp-5) var(--sp-10);
	border-radius: var(--r-lg);
	background: var(--c-cream);
}
.blogrow__cta-text {
	flex: 1 1 320px;
	min-width: 0;
}
.blogrow__cta-title {
	margin: 0;
	font-size: var(--fs-4xl);
	font-weight: 700;
	line-height: 1.1;
	color: var(--c-text);
	text-wrap: balance;
}
.blogrow__cta-sub {
	margin: var(--sp-1) 0 0;
	font-size: var(--fs-base);
	line-height: 1.5;
	color: var(--c-text);
}
.blogrow__cta-btn {
	flex: 0 0 auto;
	min-height: 40px;
	padding: 10px var(--sp-5);
	font-size: var(--fs-xs);
}
.blogrow__cta-btn svg {
	width: 14px;
	height: 14px;
}
@media (max-width: 767px) {
	.blogrow__cta {
		margin-top: var(--sp-6);
		padding: var(--sp-5);
	}
	.blogrow__cta-title {
		font-size: var(--fs-2xl);
	}
	.blogrow__cta-btn {
		width: 100%;
	}
}