/* Vikingo kártya-link - egy linkelt Elementor konténerre (flexbox `a` tagként)
   rátehető egyetlen attribútummal: data-vk-kartya-link. Nincs hozzá JS.

   Mit ad: (1) állandó korall nyíl a kártya jobb alsó sarkában - nyugalomban
   is látszik, hogy ez egy kijárat, nem egy statikus felsorolás; (2) hoverre
   és fókuszra paper háttér az EGÉSZ kártyán, hogy a kattintható felület
   mérete egyértelmű legyen; (3) a nyíl közben pár pixelt jobbra csúszik.
   Aláhúzás szándékosan nincs: az szöveg-linket jelezne, itt az egész
   oszlop a link.

   MIÉRT NEM Elementor global class: a nyíl ::after, azt a global class nem
   tud; a szülő hoverére a gyerek sem reagálna a panelről. */

[data-vk-kartya-link] {
	--vkvhp-kl-nyil: var(--vk-coral, #FF544D);
	--vkvhp-kl-hover: var(--vk-paper, #F3EEEB);
	--vkvhp-kl-meret: 24px;
	position: relative;
	text-decoration: none;
	transition: background-color .18s ease;
}

[data-vk-kartya-link]:hover,
[data-vk-kartya-link]:focus-visible {
	text-decoration: none;
	background-color: var(--vkvhp-kl-hover);
}

[data-vk-kartya-link]:focus-visible {
	outline: 2px solid var(--vkvhp-kl-nyil);
	outline-offset: -2px;
}

/* A nyíl a flex-oszlop utolsó gyereke: margin-top: auto tolja az aljára,
   align-self: flex-end a jobb szélére - a szöveg hosszától függetlenül
   mind a három kártyán egy vonalban áll. Lucide arrow-right maszkként,
   a szín a háttérből jön, így a tokennel együtt vált. */
[data-vk-kartya-link]::after {
	content: "";
	display: block;
	flex: 0 0 auto;
	width: var(--vkvhp-kl-meret);
	height: var(--vkvhp-kl-meret);
	margin-top: auto;
	align-self: flex-end;
	background-color: var(--vkvhp-kl-nyil);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E") center / contain no-repeat;
	transition: translate .18s ease;
}

[data-vk-kartya-link]:hover::after,
[data-vk-kartya-link]:focus-visible::after {
	translate: 6px 0;
}

/* Sor-változat: vízszintes link-tételen a nyíl a sor jobb szélén,
   függőlegesen középen áll; a nyíl és a hover közös az alapváltozattal. */
[data-vk-kartya-link="sor"]::after {
	margin-top: 0;
	margin-left: auto;
	align-self: center;
}

@media (prefers-reduced-motion: reduce) {
	[data-vk-kartya-link],
	[data-vk-kartya-link]::after {
		transition: none;
	}
}