/* =========================================================================
   Rave Fusion 3 — sekcia Vstupenky
   -------------------------------------------------------------------------
   Doska (pozadie, okraj, námraza), typografia a tlačidlá sú v rf.css. Tu je
   len to, čo sekcia pridáva: mriežky, stavy vĺn a prenos štýlu cez obaly,
   ktoré okolo každého widgetu vyrába Elementor.

   ---------------------------------------------------------------------
   STAVY VLNY — mení sa JEDNOU triedou na kontajneri karty
   ---------------------------------------------------------------------
   V Elementore: klik na kartu vlny → Rozšírené → CSS Classes. Trieda
   rf-ticket ostáva vždy, mení sa len posledná:

     rf-ticket--pripravovana   vlna ešte nie je v predaji.
                               Prvok „cena“ sa vykresľuje ako malý oceľový
                               štítok, takže v ňom môže stáť slovo („Pripravujeme“)
                               a nevyzerá to ako chýbajúce číslo.

     Stav sa **nepíše rukou** — dopĺňa ho téma podľa skladu na produkte
     (`inc/sekcia-vstupenky.php`). Trieda v Elementore ostáva len ako
     značka vlny (`rf-vlna--early-bird`), aby bolo v editore vidieť,
     ktorá karta je ktorá.

     Stavovú triedu dostane karta AJ každý prvok v nej (nadpis, cena,
     tlačidlo). Pravidlá pre dosku preto musia mieriť na
     `.rf-ticket.rf-ticket--…` — inak mala cena v predaji vlastný modrý
     lem a žiaru ako malá karta v karte.

     rf-ticket--ohlasena       cena je známa, predaj ešte nie je otvorený.
                               Do prvku „cena" sa napíše cena a vykreslí sa
                               ako veľké číslo, ale karta si necháva oceľový
                               okraj — modrý patrí až vlne s tlačidlom.

     rf-ticket--v-predaji      vlna sa predáva. Do prvku „cena“ sa napíše
                               cena („25 €“) a vykreslí sa ako veľké číslo.
                               Karta dostane modrý okraj — na obrazovke je
                               to práve tá jedna vec, ktorú má človek urobiť.

     rf-ticket--vypredana      vlna je preč. Cena ostáva prečiarknutá, cez
                               dosku sa zaleje námraza a v rohu pribudne
                               štítok „Vypredané“.

   Do karty v predaji patrí ešte tlačidlo Tickery (widget Tlačidlo s triedami
   rf-btn rf-btn--go). Dnes tam žiadne nie je, lebo predaj nie je otvorený a
   tlačidlo, ktoré nikam nevedie, je horšie než žiadne.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. Sekcia
   Odsadenie drží rf.css cez .rf-section, ale Elementor ho na kontajneri
   prepisuje vlastným .e-con { padding-inline: … } s rovnakou váhou — kto
   vyhrá, by rozhodovalo poradie súborov. Dve triedy sú deterministické.
   ------------------------------------------------------------------------- */

.rf-vstupenky.rf-section {
	padding: clamp(72px, 10vh, 140px) clamp(20px, 4vw, 72px);
}

.rf-vstupenky > .rf-section__head,
.rf-vstupenky > .rf-vstupenky__vlny,
.rf-vstupenky > .rf-vstupenky__cta,
.rf-vstupenky > .rf-vstupenky__ako,
.rf-vstupenky > .rf-vstupenky__podnadpis,
.rf-vstupenky > .rf-vstupenky__detaily,
.rf-vstupenky > .rf-vstupenky__pravne {
	max-width: var(--rf-shell);
	margin-inline: auto;
	width: 100%;
}

/* Nadpis h2 je vnútri widgetu, trieda rf-h2 sedí na jeho obale. Bez tohto
   prenosu by nadpis vykreslila globálna typografia Elementor Kitu a sekcia
   by vypadla z rytmu ostatných. */
.rf-vstupenky .rf-h2 .elementor-heading-title,
.rf-vstupenky .rf-h3 .elementor-heading-title {
	font: inherit;
	color: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
	margin: 0;
	padding: 0;
}

.rf-vstupenky .rf-section__head {
	margin-bottom: clamp(28px, 4vh, 48px);
}

.rf-vstupenky__lead p {
	font-family: Inter, system-ui, sans-serif;
	font-size: 1.0625rem;
	line-height: 1.65;
	color: var(--rf-ice-dim);
	max-width: var(--rf-measure);
	margin: var(--rf-4) 0 0;
}

/* -------------------------------------------------------------------------
   2. Mriežka vĺn
   Kontajner Elementora je flex; grid musí prísť odtiaľto a s vyššou váhou
   než .e-con, inak by sa karty postavili pod seba.
   ------------------------------------------------------------------------- */

/* Počet stĺpcov je určený, nie odvodený cez auto-fit. Pri štyroch vlnách a
   auto-fit vzniká na strednej šírke rad 3 + 1 osamotená karta — odmerané pri
   1066 px, kde sa štvrtá vlna prepadla sama do druhého radu. Dva a štyri
   stĺpce delia štvoricu vždy bezo zvyšku. */
.rf-vstupenky .rf-vstupenky__vlny {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--rf-3);
	align-items: stretch;
}

@media (min-width: 1000px) {

	.rf-vstupenky .rf-vstupenky__vlny {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* -------------------------------------------------------------------------
   3. Karta vlny
   ------------------------------------------------------------------------- */

.rf-vstupenky .rf-ticket {
	position: relative;
	overflow: hidden;
	height: 100%;
	padding: var(--rf-4);
	transition: transform .28s cubic-bezier(.22, .61, .36, 1),
	            border-color .28s ease,
	            box-shadow .28s ease;
}

/* Názov vlny, cena aj poznámka sú widgety nadpisu. Trieda sedí na obale,
   text je o dve úrovne nižšie — bez prenosu by si ho zobral Elementor Kit. */
.rf-vstupenky .rf-ticket__wave .elementor-heading-title,
.rf-vstupenky .rf-ticket__price .elementor-heading-title,
.rf-vstupenky .rf-ticket__note .elementor-heading-title {
	font: inherit;
	color: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
	text-decoration: inherit;
	margin: 0;
	padding: 0;
}

.rf-vstupenky .rf-ticket__note {
	font-family: Inter, system-ui, sans-serif;
	font-size: .875rem;
	line-height: 1.55;
	color: var(--rf-ice-quiet);
	margin-top: var(--rf-3);
	text-transform: none;
	letter-spacing: 0;
}

/* Poznámka sa drží pri spodnej hrane, aby mali karty rôznej dĺžky spoločnú
   základňu — inak vyzerá riadok kariet ako chyba tlače. */
.rf-vstupenky .rf-ticket > .rf-ticket__note {
	margin-top: auto;
	padding-top: var(--rf-3);
}

/* --- stav: pripravovaná ------------------------------------------------ */

/* Prvok ceny nesie dnes pravdivý stav vlny. Ako 60px číslo by slovo pôsobilo
   ako chyba, preto je v tomto stave zo skla a ocele — štítok, nie číslo. */
.rf-ticket--pripravovana .rf-ticket__price {
	align-self: flex-start;
	width: auto;
	margin-top: var(--rf-3);
	padding: 7px 12px;
	border: 1px solid var(--rf-steel-500);
	background: rgba(64, 84, 111, .16);
	font-family: Inter, system-ui, sans-serif;
	font-weight: 700;
	font-size: .75rem;
	line-height: 1;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--rf-ice-quiet);
}

/* --- stav: ohlásená ---------------------------------------------------- */

/* Cena je vonku, predaj ešte nie. Číslo teda ukazujeme naplno — je to
   informácia, kvôli ktorej sem človek prišiel. Modrý okraj a nadskočenie
   pod kurzorom si necháva stav „v predaji"; karta bez tlačidla by nimi
   sľubovala klik, ktorý sa nedá spraviť. */
.rf-vstupenky .rf-ticket.rf-ticket--ohlasena {
	border-color: var(--rf-steel-700);
}

.rf-ticket--ohlasena .rf-ticket__price {
	color: var(--rf-ice);
}

.rf-ticket--ohlasena .rf-ticket__note {
	color: var(--rf-ice-quiet);
}

/* --- stav: v predaji --------------------------------------------------- */

.rf-vstupenky .rf-ticket.rf-ticket--v-predaji {
	border-color: var(--rf-blue);
	box-shadow: 0 0 0 1px rgba(25, 122, 229, .22), 0 0 44px rgba(25, 122, 229, .16);
}

.rf-ticket--v-predaji .rf-ticket__wave {
	color: var(--rf-blue-hot);
}

/* --- tlačidlo v karte -------------------------------------------------- */

/* Tlačidlo je v Elementore vo všetkých kartách, ale do stránky sa dostane
   len pri vlne, ktorá sa naozaj dá kúpiť — `inc/sekcia-vstupenky.php` ho
   inde nevypíše vôbec. Nie je to skrývanie cez CSS: tlačidlo, ktoré nikam
   nevedie, nemá byť ani v zdroji. */
.rf-vstupenky .rf-ticket__kup {
	margin-top: var(--rf-3);
	align-self: flex-start;
}

/* --- stav: vypredaná --------------------------------------------------- */

.rf-vstupenky .rf-ticket.rf-ticket--vypredana {
	border-color: var(--rf-steel-700);
}

/* Námraza cez celú dosku. Rovnaký materiál ako zamknutý slot v line-upe,
   len tu leží nad obsahom karty, nie pod ním. */
.rf-ticket.rf-ticket--vypredana::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background:
		linear-gradient(200deg, rgba(215, 227, 241, .16), rgba(215, 227, 241, .04) 42%, transparent 68%),
		repeating-linear-gradient(118deg, rgba(215, 227, 241, .07) 0 2px, transparent 2px 9px);
	pointer-events: none;
}

/* Štítok vzniká zo stavovej triedy, aby stačilo prepnúť jednu vec. Text je
   po slovensky napevno — je to označenie stavu, nie obsah stránky. */
.rf-ticket.rf-ticket--vypredana::after {
	content: "Vypredané";
	position: absolute;
	top: 0;
	right: 0;
	z-index: 2;
	padding: 6px 12px;
	background: var(--rf-steel-700);
	font-family: Inter, system-ui, sans-serif;
	font-weight: 700;
	font-size: .6875rem;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--rf-ice);
	pointer-events: none;
}

/* Pod .62 prestáva byť poznámka na oceľovej doske čitateľná. */
.rf-ticket.rf-ticket--vypredana > .elementor-element {
	opacity: .62;
}

/* Prečiarknutie musí byť tenké a tiché. Pri 60px čísle je predvolená
   čiara taká hrubá, že „9,90" prečítate ako „0,00" — cena, ktorá bola,
   sa má pripomenúť, nie preliezť do iného čísla. */
.rf-ticket--vypredana .rf-ticket__price {
	color: var(--rf-ice-quiet);
	text-decoration: line-through;
	text-decoration-color: rgba(127, 163, 207, .55);
	text-decoration-thickness: 2px;
}

/* --- reakcia na kurzor -------------------------------------------------- */

@media (hover: hover) and (pointer: fine) {

	.rf-vstupenky .rf-ticket.rf-ticket--v-predaji:hover {
		transform: translate3d(0, -4px, 0);
		box-shadow: 0 18px 40px rgba(0, 0, 0, .45), 0 0 40px rgba(25, 122, 229, .24);
	}
}

/* --- samostatný typ vstupenky (VIP) -------------------------------------

   Nie je vlna — predáva sa súbežne s nimi, preto nesedí v rade štyroch
   vĺn ako piata, ale pod nimi na celú šírku. Na širšej obrazovke je karta
   v jednom riadku: názov, cena, tlačidlo. */
.rf-vstupenky .rf-ticket.rf-ticket--samostatna {
	grid-column: 1 / -1;
}

@media (min-width: 768px) {
	.rf-vstupenky .rf-ticket.rf-ticket--samostatna {
		--flex-direction: row;
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		gap: var(--rf-3) var(--rf-5);
	}

	.rf-vstupenky .rf-ticket.rf-ticket--samostatna > .elementor-element {
		width: auto;
		margin: 0;
		padding: 0;
	}

	.rf-vstupenky .rf-ticket.rf-ticket--samostatna > .rf-ticket__kup {
		margin-left: auto;
	}
}

/* -------------------------------------------------------------------------
   4. Výzva k akcii
   ------------------------------------------------------------------------- */

.rf-vstupenky .rf-vstupenky__cta {
	margin-top: var(--rf-5);
	gap: var(--rf-3);
}

/* Elementor vešia triedy na OBAL widgetu, nie na samotný odkaz. Bez tohto
   bloku je obal modrý obdĺžnik cez celú šírku a tlačidlo vnútri zelené —
   odmerané, nie odhadnuté: obal 1309 px, vnútro rgb(97, 206, 112).

   Zelenú drží pravidlo, ktoré si Elementor generuje do CSS každej stránky
   (`.elementor-widget-button .elementor-button` s globálnou farbou akcentu).
   Má rovnakú váhu ako `.rf-btn--go .elementor-button` z rf.css a načíta sa
   neskôr, takže vyhráva ono. Preto je tu selektor o triedu dlhší. */
.rf-vstupenky .rf-btn.rf-btn--go {
	align-self: flex-start;
	width: auto;
	padding: 0;
	background: transparent;
	box-shadow: none;
}

.rf-vstupenky .rf-btn--go .elementor-button {
	background-color: var(--rf-blue-fill);
	color: #fff;
	border-radius: 0;
	box-shadow: 0 0 0 1px rgba(79, 176, 255, .45), 0 0 30px rgba(25, 122, 229, .5);
}

.rf-vstupenky .rf-btn--go .elementor-button:hover,
.rf-vstupenky .rf-btn--go .elementor-button:focus {
	background-color: var(--rf-blue-hot);
	color: var(--rf-night);
}

.rf-vstupenky .rf-btn--go .elementor-button:focus-visible {
	outline: 2px solid var(--rf-blue-hot);
	outline-offset: 3px;
}

.rf-vstupenky__cta-note p {
	font-family: Inter, system-ui, sans-serif;
	font-size: .9375rem;
	line-height: 1.6;
	color: var(--rf-label);
	max-width: var(--rf-measure);
	margin: 0;
}

/* -------------------------------------------------------------------------
   5. Ako nákup prebehne
   ------------------------------------------------------------------------- */

.rf-vstupenky .rf-vstupenky__podnadpis {
	margin-top: clamp(56px, 8vh, 96px);
}

.rf-vstupenky .rf-vstupenky__podnadpis .elementor-heading-title::after {
	content: "";
	display: block;
	width: 40px;
	height: 2px;
	margin-top: var(--rf-2);
	background: var(--rf-steel-500);
}

/* Tri kroky idú buď všetky vedľa seba, alebo všetky pod sebou. Rad 2 + 1 by
   z tretieho kroku spravil dodatok. */
.rf-vstupenky .rf-vstupenky__ako {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--rf-4);
	margin-top: var(--rf-5);
}

@media (min-width: 860px) {

	.rf-vstupenky .rf-vstupenky__ako {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: var(--rf-5);
	}
}

.rf-vstupenky .rf-krok {
	padding: 0;
	border-top: 1px solid var(--rf-steel-700);
	padding-top: var(--rf-3);
}

.rf-krok__n {
	font-family: "Big Shoulders Display", "Arial Narrow", Impact, sans-serif;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	font-size: 2.1rem;
	line-height: 1;
	color: var(--rf-steel-300);
}

.rf-krok__t {
	font-family: "Big Shoulders Display", "Arial Narrow", Impact, sans-serif;
	font-weight: 700;
	font-size: 1.45rem;
	line-height: 1.05;
	text-transform: uppercase;
	color: var(--rf-ice);
	margin-top: var(--rf-2);
}

.rf-vstupenky .rf-krok__n .elementor-heading-title,
.rf-vstupenky .rf-krok__t .elementor-heading-title {
	font: inherit;
	color: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
	margin: 0;
	padding: 0;
}

.rf-krok__d p {
	font-family: Inter, system-ui, sans-serif;
	font-size: .9375rem;
	line-height: 1.6;
	color: var(--rf-ice-dim);
	margin: var(--rf-2) 0 0;
}

/* -------------------------------------------------------------------------
   6. Podmienky nákupu — akordeón Elementora
   Widget si vykresľuje vlastnú kostru (.e-n-accordion). Prepisuje sa len
   povrch, správanie ostáva na widgete.
   ------------------------------------------------------------------------- */

.rf-vstupenky .rf-vstupenky__detaily {
	margin-top: var(--rf-5);
}

/* Šírka sa obmedzuje na vnútornej kostre akordeónu, nie na obale widgetu:
   Elementor drží obaly na `max-width: 100%` selektorom `.elementor.elementor
   .e-con > .elementor-widget`, ktorý má o triedu vyššiu váhu a vyhral by. */
.rf-vstupenky__detaily .e-n-accordion {
	max-width: 900px;
}

.rf-vstupenky__detaily .e-n-accordion-item {
	border-bottom: 1px solid var(--rf-steel-700);
	background: transparent;
}

.rf-vstupenky__detaily .e-n-accordion-item:first-child {
	border-top: 1px solid var(--rf-steel-700);
}

.rf-vstupenky__detaily .e-n-accordion-item-title {
	padding: 18px 0;
	cursor: pointer;
}

.rf-vstupenky__detaily .e-n-accordion-item-title-text {
	font-family: "Big Shoulders Display", "Arial Narrow", Impact, sans-serif;
	font-weight: 700;
	font-size: 1.3rem;
	line-height: 1.1;
	text-transform: uppercase;
	letter-spacing: .01em;
	color: var(--rf-ice);
	margin: 0;
}

.rf-vstupenky__detaily .e-n-accordion-item-title-icon {
	color: var(--rf-blue-hot);
}

.rf-vstupenky__detaily .e-n-accordion-item-title:hover .e-n-accordion-item-title-text {
	color: var(--rf-blue-hot);
}

.rf-vstupenky__detaily .e-n-accordion-item-title:focus-visible {
	outline: 2px solid var(--rf-blue-hot);
	outline-offset: 3px;
}

.rf-vstupenky__detaily .e-con-inner,
.rf-vstupenky__detaily .e-n-accordion-item > .e-con {
	padding-inline: 0;
}

.rf-vstupenky__detaily p {
	font-family: Inter, system-ui, sans-serif;
	font-size: .9375rem;
	line-height: 1.65;
	color: var(--rf-ice-dim);
	max-width: var(--rf-measure);
	margin: 0 0 var(--rf-3);
}

.rf-vstupenky__pravne p {
	font-family: Inter, system-ui, sans-serif;
	font-size: .875rem;
	line-height: 1.6;
	color: var(--rf-label);
	max-width: var(--rf-measure);
	margin: var(--rf-4) 0 0;
}

/* -------------------------------------------------------------------------
   7. Úzke obrazovky
   ------------------------------------------------------------------------- */

@media (max-width: 620px) {

	.rf-vstupenky .rf-vstupenky__vlny {
		grid-template-columns: minmax(0, 1fr);
	}

	.rf-vstupenky .rf-ticket {
		padding: var(--rf-3);
	}
}

/* -------------------------------------------------------------------------
   8. Obmedzený pohyb
   Vypnúť samotný prechod nestačí — zdvih karty by sa vykonal okamžite a
   pôsobil by ako skok. Ruší sa aj transformácia.
   ------------------------------------------------------------------------- */

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

	.rf-vstupenky .rf-ticket {
		transition: none;
	}

	.rf-vstupenky .rf-ticket.rf-ticket--v-predaji:hover {
		transform: none;
		box-shadow: 0 0 0 1px rgba(25, 122, 229, .22), 0 0 44px rgba(25, 122, 229, .16);
	}
}