/* ============================================================
   BLOG RÁCS — Kosztolánczy Gábor
   Krém-szén paletta, barna hangsúly, Bricolage Grotesque + DM Sans.
   A tokenek a .blog-racs scope-jára vannak szűkítve, hogy ne
   szivárogjanak a téma stílusaiba.
   ============================================================ */
.blog-racs{
	--br-cream:#F6F1EE;
	--br-cream-2:#EFE9E5;
	--br-text:#161616;
	--br-muted:#656565;
	--br-line:rgba(22,22,22,.12);
	--br-line-2:rgba(22,22,22,.22);
	--br-brown:#895b3e;
	--br-brown-soft:#a87a55;
	--br-display:'Bricolage Grotesque',system-ui,sans-serif;
	--br-body:'DM Sans',system-ui,sans-serif;

	display:grid;
	gap:34px 28px;            /* nagyobb sor- mint oszlopköz → újságos ritmus */
	font-family:var(--br-body);
	color:var(--br-text);
	line-height:1.6;
}
.blog-racs--cols-2{grid-template-columns:repeat(2,1fr);gap:44px 40px}
.blog-racs--cols-3{grid-template-columns:repeat(3,1fr)}
.blog-racs--cols-4{grid-template-columns:repeat(4,1fr);gap:30px 20px}

/* ===== KÁRTYA (egész kártya egy link) ===== */
.blog-racs__post{
	display:flex;
	flex-direction:column;
	height:100%;
	text-decoration:none;
	color:inherit;
	position:relative;
	background:#fff;
}
.blog-racs__post:focus-visible{
	outline:2px solid var(--br-brown);
	outline-offset:3px;
	border-radius:2px;
}

/* Kép + zoom */
.blog-racs__ph{
	overflow:hidden;
	border-radius:2px;
	background:var(--br-cream-2);
	position:relative;
}
.blog-racs__img{
	display:block;
	width:100%;
	height:auto;
	aspect-ratio:4/3;
	object-fit:cover;
	transition:transform .7s cubic-bezier(.2,.6,.2,1);
}
.blog-racs__ph-empty{
	aspect-ratio:4/3;
	background:
		linear-gradient(135deg,var(--br-cream-2),var(--br-cream));
}
.blog-racs--cols-2 .blog-racs__img,
.blog-racs--cols-2 .blog-racs__ph-empty{aspect-ratio:16/11}
.blog-racs--cols-4 .blog-racs__img,
.blog-racs--cols-4 .blog-racs__ph-empty{aspect-ratio:1/1}
.blog-racs__post:hover .blog-racs__img,
.blog-racs__post:focus-visible .blog-racs__img{transform:scale(1.045)}

/* Szövegblokk */
.blog-racs__txt{
	padding:18px 20px 24px;
	position:relative;
	display:flex;
	flex-direction:column;
	flex:1;
}
.blog-racs--cols-2 .blog-racs__txt{padding:22px 24px 28px}
.blog-racs--cols-4 .blog-racs__txt{padding:14px 16px 18px}

/* Aláíró hover: 2px-es barna sáv nő be a szövegblokk tetején */
.blog-racs__txt::before{
	content:"";
	position:absolute;
	left:0;
	top:0;
	height:2px;
	width:100%;
	background:var(--br-brown);
	transform:scaleX(0);
	transform-origin:left;
	transition:transform .35s ease;
}
.blog-racs__post:hover .blog-racs__txt::before,
.blog-racs__post:focus-visible .blog-racs__txt::before{transform:scaleX(1)}

/* Felső sor: kategória + dátum (csak hónap, nap) */
.blog-racs__topline{
	display:flex;
	align-items:center;
	gap:12px;
	flex-wrap:wrap;
}
.blog-racs__cat{
	display:inline-flex;
	align-items:center;
	gap:8px;
	font-size:11.5px;
	font-weight:600;
	color:var(--br-brown);
}
.blog-racs__sep{
	width:4px;
	height:4px;
	background:var(--br-brown);
	display:inline-block;
	flex:0 0 auto;
}
/* Dátum — a kategóriával azonos stílus, de NEM nagybetűs */
.blog-racs__datum{
	font-size:11.5px;
	font-weight:600;
	color:var(--br-brown);
	font-variant-numeric:tabular-nums;
}

/* Cím */
.blog-racs__title{
	display:block;
	margin-top:11px;
	font-family:var(--br-display);
	font-weight:600;
	line-height:1.16;
	letter-spacing:-.015em;
	color:var(--br-text);
	transition:color .25s;
}
.blog-racs--cols-2 .blog-racs__title{font-size:27px}
.blog-racs--cols-3 .blog-racs__title{font-size:20px}
.blog-racs--cols-4 .blog-racs__title{font-size:16.5px;margin-top:9px}
.blog-racs__post:hover .blog-racs__title,
.blog-racs__post:focus-visible .blog-racs__title{color:var(--br-brown)}

/* Kivonat — 15 px minden oszlopszámnál, soronként levágva */
.blog-racs__exc{
	margin-top:10px;
	color:var(--br-muted);
	font-size:15px;
	line-height:1.55;
	display:-webkit-box;
	-webkit-box-orient:vertical;
	overflow:hidden;
}
.blog-racs--cols-2 .blog-racs__exc{-webkit-line-clamp:4}
.blog-racs--cols-3 .blog-racs__exc{-webkit-line-clamp:4}
.blog-racs--cols-4 .blog-racs__exc{-webkit-line-clamp:3;margin-top:8px}

/* „Megnézem" — egyszerű szöveg, hoverre jelenik meg a kivonat alatt (gomb nélkül) */
.blog-racs__more{
	display:grid;
	grid-template-rows:0fr;
	transition:grid-template-rows .35s cubic-bezier(.2,.6,.2,1);
}
.blog-racs__more > span{
	overflow:hidden;
	min-height:0;
	display:block;
	padding-top:14px;
	color:var(--br-brown);
	font-size:14px;
	font-weight:600;
	opacity:0;
	transition:opacity .25s ease;
}
.blog-racs__post:hover .blog-racs__more,
.blog-racs__post:focus-visible .blog-racs__more{grid-template-rows:1fr}
.blog-racs__post:hover .blog-racs__more > span,
.blog-racs__post:focus-visible .blog-racs__more > span{opacity:1}

/* (Lábléc eltávolítva — a dátum a felső sorba került a kategória mellé,
   az olvasási idő és a „Cikk →” gomb pedig törölve.) */

/* Üres állapot */
.blog-racs-ures{
	color:var(--br-muted);
	font-style:italic;
}

/* ===== Reszponzív összeomlás ===== */
@media (max-width:980px){
	.blog-racs--cols-4{grid-template-columns:repeat(2,1fr)}
	.blog-racs--cols-3{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:720px){
	.blog-racs--cols-2{grid-template-columns:1fr}
}
@media (max-width:600px){
	.blog-racs--cols-3,
	.blog-racs--cols-4{grid-template-columns:1fr}
}

/* Csökkentett mozgás */
@media (prefers-reduced-motion:reduce){
	.blog-racs *,
	.blog-racs *::before{transition:none !important;animation:none !important}
}