/* =========================================================================
   Rave Fusion 3 — karta interpreta v Loop Gride
   -------------------------------------------------------------------------
   Vzhľad dosky (pozadie, okraj, typografia, odlesk, námraza) je v rf.css.
   Tento súbor rieši len to, čo pribudne, keď kartu nevykresľuje shortcode
   [rf_lineup], ale Loop Item šablóna Elementora: obaly navyše, ktoré
   Elementor dáva okolo každého widgetu, a mriežku Loop Gridu.

   Pravidlo: nič tu neprepisuje vzhľad dosky. Len ho prenáša cez obaly.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. Bunka mriežky
   Elementor vloží medzi bunku Loop Gridu a našu dosku ešte jeden obal
   (.e-loop-item). Bez tohto by doska mala výšku obsahu a karty v riadku
   by boli rôzne vysoké — pri oceľových doskách to vyzerá ako chyba tlače.
   ------------------------------------------------------------------------- */

.e-loop-item {
	display: flex;
	min-width: 0;
}

.e-loop-item > .rf-act {
	flex: 1 1 auto;
	width: 100%;
	min-width: 0;
}

/* -------------------------------------------------------------------------
   2. Typografia cez obal widgetu
   Widget nadpisu vypíše <h3 class="elementor-heading-title"> vnútri divu,
   ktorý nesie našu triedu. Veľkosť mena teda musí prejsť o úroveň nižšie —
   inak by .rf-act--head .rf-act__name { font-size: 2.65rem } nemalo na čo
   pôsobiť a headliner by vyzeral rovnako ako ostatní.

   Selektor je trojtriedový naschvál: globálne štýly Elementora sedia na
   .elementor-widget-heading .elementor-heading-title, čo je rovnaká váha,
   a o poradí súborov by rozhodovalo poradie zaradenia.
   ------------------------------------------------------------------------- */

.rf-act .rf-act__name .elementor-heading-title,
.rf-act .rf-act__meta .elementor-heading-title {
	font: inherit;
	color: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
	margin: 0;
	padding: 0;
}

/* Odkaz na detail dedí farbu dosky (rf.css), ale vnútri nadpisu widgetu
   ho treba zbaviť aj podčiarknutia z tém a globálnych štýlov. */
.rf-act .rf-act__name a {
	text-decoration: none;
}

/* -------------------------------------------------------------------------
   3. Fotka
   Vykreslí sa len vtedy, keď ju interpret naozaj má — o to sa stará
   inc/lineup-loop.php. Sem patrí len tvar: pás nad menom, bez zaoblenia,
   lebo brnenie a ľad sú ostré.
   ------------------------------------------------------------------------- */

.rf-act__foto {
	margin-bottom: var(--rf-3);
}

.rf-act__foto img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: 0;
	filter: saturate(.85) contrast(1.05);
}

/* -------------------------------------------------------------------------
   4. Zamknutá doska
   Reťaz z rf.css leží v spodnom odsadení karty. Keď je doska v mriežke
   natiahnutá na výšku suseda, text sa má držať hore a reťaz dole —
   nie plávať v strede.
   ------------------------------------------------------------------------- */

.e-loop-item > .rf-act--locked {
	justify-content: flex-start;
}

/* -------------------------------------------------------------------------
   5. Obmedzený pohyb
   rf.css pri prefers-reduced-motion vypína prechody. To ale znamená, že
   zdvih aj odlesk sa vykonajú okamžite — teda skok. Kto si vypol animácie,
   nechce ich rýchlejšie, chce ich nemať. Na karte v Loop Gride ich preto
   rušíme celé.
   ------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

	.e-loop-item .rf-act:hover {
		transform: none;
		box-shadow: none;
	}

	.e-loop-item .rf-act:hover::before {
		translate: -120% 0;
	}
}


/* -------------------------------------------------------------------------
   6. Karta bez fotky
   Kým interpreti fotky nepošlú, je karta holá doska: meno hore a pod ním
   prázdno. Namrznuté sklo pri spodnej hrane dá karte dno a hovorí tým
   istým jazykom ako zamknuté sloty. Keď fotka pribudne, pravidlo prestane
   platiť samo — `:has()` ju v karte nájde.
   ------------------------------------------------------------------------- */

.e-loop-item > .rf-act:not(.rf-act--locked):not(:has(.rf-act__foto)) {
	background-image:
		radial-gradient(140% 92% at 50% 130%, rgba(79, 176, 255, .13), transparent 62%),
		linear-gradient(180deg, transparent 44%, rgba(215, 227, 241, .05));
	background-repeat: no-repeat;
}


/* -------------------------------------------------------------------------
   7. Prasknutie
   Trhliny vznikajú pod kurzorom (kreslí ich rf-efekty.js) a karta pri tom
   dostane pod miestom úderu studený záblesk. Pri dotyku nič — prst by
   kresbu len prebliskol.
   ------------------------------------------------------------------------- */

.e-loop-item > .rf-act { position: relative; }

.rf-prask {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	filter: drop-shadow(0 0 6px rgba(120, 190, 255, .7));
	transition: opacity .35s ease;
}

/* Kresba ostáva v karte aj po odchode myši — nech sa neroztápa uprostred
   pohybu. Zhasne a pri ďalšom vstupe ju skript nahradí novou. */
.e-loop-item > .rf-act:not(:hover):not(:focus-within) .rf-prask {
	opacity: 0;
}

.rf-prask path {
	fill: none;
	stroke: rgba(226, 242, 255, .92);
	stroke-width: 1.4;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-dasharray: 100;
	stroke-dashoffset: 100;
	animation: rf-prasknutie .42s cubic-bezier(.14, .8, .3, 1) forwards;
}

@keyframes rf-prasknutie {
	to { stroke-dashoffset: 0; }
}

/* Záblesk v mieste úderu. Súradnice zapisuje skript na kartu. */
.e-loop-item > .rf-act::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	opacity: 0;
	transition: opacity .3s ease;
	background: radial-gradient(
		220px 220px at var(--rf-uder-x, 50%) var(--rf-uder-y, 50%),
		rgba(120, 190, 255, .3), transparent 70%
	);
}

.e-loop-item > .rf-act:hover::after,
.e-loop-item > .rf-act:focus-within::after { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
	.rf-prask { display: none; }
	.e-loop-item > .rf-act::after { display: none; }
}


/* =========================================================================
   LINE-UP BEZ MIEN
   =========================================================================

   Kým nie je ohlásený ani jeden interpret, mriežka je skrytá a na jej
   mieste stojí oznam. Reč je tá istá ako na kartách vĺn: stav hore,
   veta, čo sa deje, a jedna cesta ďalej. */

.rf-lineup__tba {
	max-width: 640px;
	margin-inline: auto;
	padding: clamp(28px, 4vw, 44px) clamp(20px, 4vw, 40px);
	text-align: center;
}

.rf-lineup__stav .elementor-heading-title {
	font-family: Inter, system-ui, sans-serif;
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--rf-label);
}

.rf-lineup__nadpis {
	margin-top: var(--rf-2);
}

.rf-lineup__nadpis .elementor-heading-title {
	font-family: "Big Shoulders Display", "Arial Narrow", Impact, sans-serif;
	font-weight: 700;
	font-size: clamp(1.8rem, 4vw, 2.6rem);
	line-height: 1.02;
	text-transform: uppercase;
	color: var(--rf-ice);
}

.rf-lineup__text {
	margin-top: var(--rf-3);
}

.rf-lineup__text .elementor-heading-title {
	font-family: Inter, system-ui, sans-serif;
	font-size: .975rem;
	font-weight: 400;
	line-height: 1.7;
	color: var(--rf-ice-quiet);
}

.rf-lineup__cta {
	margin-top: var(--rf-4);
}