/* Vikingo Letöltésrács - az ingyenes letöltések (lead magnetek) világos,
   vonalas rácsa a gyűjtő /ingyenes/ oldalon. Az Eszközeink formanyelve
   (1 px-es vonalakkal elválasztott cellák, a cella maga a link), kategória
   nélkül. Minden szabály .vk-vhp-letoltesek előtaggal és explicit
   resetekkel, mert az Elementor kit globális stílusai különben felülírnák.
   Tokenek --vkvhp-* lokális változók var(--vk-*, fallback) értékkel: az
   oldal design systeme elsőbbséget élvez. */

.vk-vhp-letoltesek {
	--vkvhp-ink: var(--vk-ink, #3E2E45);
	--vkvhp-korall: var(--vk-coral, #FF544D);
	--vkvhp-korall-hover: var(--vk-coral-hover, #E83D36);
	--vkvhp-mauve: var(--vk-mauve, #7A687F);
	--vkvhp-sand: var(--vk-sand, #DCD0C3);
	--vkvhp-paper: var(--vk-paper, #F3EEEB);
	--vkvhp-cim-font: var(--vk-clash-display, 'Clash Display', sans-serif);
	--vkvhp-mono-font: var(--vk-dm-mono, 'DM Mono', monospace);
	--vkvhp-vonal: 1px;
	width: 100%;
	min-width: 0;
	max-width: 100%;
	color: var(--vkvhp-ink);
}

/* ---- Rács ----
   A vonalak: a rács adja a felső és bal élt, minden cella a saját jobb és
   alsó élét - így nincs dupla vonal. A hiányos utolsó sort üres cellák
   (.vk-vhp-letoltes-ures) töltik ki (PHP a widget oszlopszámával, a JS a
   törésponti valódival). */

.vk-vhp-letoltesek .vk-vhp-letoltesek-racs {
	display: grid;
	grid-template-columns: repeat(var(--vkvhp-oszlopok, 3), minmax(0, 1fr));
	gap: 0;
	margin: 0;
	padding: 0;
	background: transparent;
	border-top: var(--vkvhp-vonal) solid var(--vkvhp-sand);
	border-left: var(--vkvhp-vonal) solid var(--vkvhp-sand);
}

@media (max-width: 1024px) {
	.vk-vhp-letoltesek .vk-vhp-letoltesek-racs {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 600px) {
	.vk-vhp-letoltesek .vk-vhp-letoltesek-racs {
		grid-template-columns: minmax(0, 1fr);
	}

	/* JS nélküli tartalék: egy oszlopnál a kitöltő üres sort adna alulra. */
	.vk-vhp-letoltesek .vk-vhp-letoltes-ures {
		display: none;
	}
}

/* ---- Egy tétel: széles kártya ----
   Egyetlen funnelnél a háromoszlopos rács egy magányos cellát adna; a kártya
   ehelyett a teljes szélességet kapja, a kép balra 2/5-ön, a szöveg jobbra,
   ugyanazokkal a vonalakkal. */
.vk-vhp-letoltesek--egy .vk-vhp-letoltesek-racs--egy {
	grid-template-columns: minmax(0, 1fr);
}

.vk-vhp-letoltesek--egy .vk-vhp-letoltes {
	display: grid;
	grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
	grid-template-areas:
		"kep fej"
		"kep cim"
		"kep leiras"
		"kep ures";
	column-gap: 40px;
	row-gap: 12px;
	padding: 40px;
}

.vk-vhp-letoltesek--egy .vk-vhp-letoltes-fej {
	grid-area: fej;
}

.vk-vhp-letoltesek--egy .vk-vhp-letoltes-kep {
	grid-area: kep;
	align-self: start;
}

.vk-vhp-letoltesek--egy .vk-vhp-letoltes-cim {
	grid-area: cim;
	font-size: 32px;
	margin-top: 0;
}

.vk-vhp-letoltesek--egy .vk-vhp-letoltes-leiras {
	grid-area: leiras;
	font-size: 17px;
	max-width: 56ch;
}

/* Kép nélkül a szöveg a teljes szélességet kapja. */
.vk-vhp-letoltesek--egy .vk-vhp-letoltes:not(:has(.vk-vhp-letoltes-kep)) {
	grid-template-columns: minmax(0, 1fr);
	grid-template-areas:
		"fej"
		"cim"
		"leiras";
}

@media (max-width: 760px) {
	.vk-vhp-letoltesek--egy .vk-vhp-letoltes {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas:
			"fej"
			"kep"
			"cim"
			"leiras";
		padding: 28px;
	}

	.vk-vhp-letoltesek--egy .vk-vhp-letoltes-cim {
		font-size: 26px;
	}
}

/* ---- Kártya ---- */

.vk-vhp-letoltesek .vk-vhp-letoltes {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 10px;
	box-sizing: border-box;
	padding: 28px;
	background: #FFFFFF;
	color: var(--vkvhp-ink);
	text-decoration: none;
	border: 0;
	border-right: var(--vkvhp-vonal) solid var(--vkvhp-sand);
	border-bottom: var(--vkvhp-vonal) solid var(--vkvhp-sand);
	border-radius: 0;
	transition: background-color 0.25s ease;
}

.vk-vhp-letoltesek .vk-vhp-letoltes:hover,
.vk-vhp-letoltesek .vk-vhp-letoltes:focus-visible {
	background: var(--vkvhp-paper);
	color: var(--vkvhp-ink);
	text-decoration: none;
}

.vk-vhp-letoltesek .vk-vhp-letoltes:focus-visible {
	outline: 2px solid var(--vkvhp-korall);
	outline-offset: -2px;
}

/* Üres kitöltő cella az utolsó sorban: ugyanaz a fehér, ugyanaz a két
   vonal, tartalom nélkül. */
.vk-vhp-letoltesek .vk-vhp-letoltes-ures {
	display: block;
	min-height: 0;
	background: #FFFFFF;
	border-right: var(--vkvhp-vonal) solid var(--vkvhp-sand);
	border-bottom: var(--vkvhp-vonal) solid var(--vkvhp-sand);
}

/* Fej: a típus-címke balra, a nyíl jobbra - a kattinthatóság jele. */
.vk-vhp-letoltesek .vk-vhp-letoltes-fej {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.vk-vhp-letoltesek .vk-vhp-letoltes-tipus {
	font-family: var(--vkvhp-mono-font);
	font-size: 12px;
	font-weight: 400;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--vkvhp-mauve);
}

/* Belső link: sima jobbra-nyíl, hoverre jobbra mozdul (nem jobbra-fel,
   az a külső, új lapos cél jele az Eszközeinknél). */
.vk-vhp-letoltesek .vk-vhp-letoltes-nyil {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	flex: 0 0 auto;
	color: var(--vkvhp-korall);
	transition: transform 0.25s ease;
}

.vk-vhp-letoltesek .vk-vhp-letoltes-nyil svg {
	display: block;
}

.vk-vhp-letoltesek .vk-vhp-letoltes:hover .vk-vhp-letoltes-nyil,
.vk-vhp-letoltesek .vk-vhp-letoltes:focus-visible .vk-vhp-letoltes-nyil {
	transform: translateX(4px);
}

/* A hero kép: fekvő vágat, halvány kerettel - a kártya vonalas nyelvén. */
.vk-vhp-letoltesek .vk-vhp-letoltes-kep {
	display: block;
	overflow: hidden;
	border: var(--vkvhp-vonal) solid var(--vkvhp-sand);
	border-radius: 12px;
	background: var(--vkvhp-paper);
	aspect-ratio: 3 / 2;
}

.vk-vhp-letoltesek .vk-vhp-letoltes-kep img,
.vk-vhp-letoltesek .vk-vhp-letoltes-kep .vk-vhp-letoltes-kep-kep {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	margin: 0;
}

.vk-vhp-letoltesek .vk-vhp-letoltes-cim {
	display: block;
	margin-top: 6px;
	font-family: var(--vkvhp-cim-font);
	font-size: 22px;
	font-weight: 500;
	line-height: 1.25;
	letter-spacing: 0.01em;
	color: var(--vkvhp-korall);
	overflow-wrap: break-word;
}

.vk-vhp-letoltesek .vk-vhp-letoltes-leiras {
	display: block;
	font-size: 15px;
	font-weight: 400;
	line-height: 1.55;
	color: var(--vkvhp-mauve);
}

@media (prefers-reduced-motion: reduce) {
	.vk-vhp-letoltesek .vk-vhp-letoltes,
	.vk-vhp-letoltesek .vk-vhp-letoltes-nyil {
		transition: none;
	}
}