/* =========================================================================
   Rave Fusion 3 — sekcia „Predošlé ročníky“
   -------------------------------------------------------------------------
   Ročník je jeden blok: rok, názov, krátky popis, veľký aftermovie a pod
   ním fotky. Blok vykresľuje Loop Grid nad šablónou „Ročník — blok (loop)“,
   takže tu ide o to, čo pribudne obalmi Elementora, a o dve veci, ktoré
   widget nekreslí: náhľad videa a tvar fotiek.

   Pravidlá zdedené z rf.css: nulové zaoblenie, modrá len na to, čo vedie
   ďalej (tu je to jediné tlačidlo — prehrať aftermovie).

   Vlastnosti, ktoré si klient bežne dolaďuje v Elementore (odsadenie bloku,
   medzery mriežky), sú tu písané jednou triedou naschvál — CSS Elementora
   sa načíta neskôr a jeho nastavenie tak toto prepíše. Naopak typografia
   cez .elementor-heading-title má tri triedy, inak by ju prevalcovali
   globálne štýly Elementora s rovnakou váhou.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. Mriežka ročníkov
   ------------------------------------------------------------------------- */

/* width: 100% tu nie je navyše. Mriežka aj nadpis sú položky flexboxu
   sekcie; položka flexboxu so šírkou auto a s margin-inline: auto sa
   nenatiahne, ale zmrští na šírku obsahu — mriežka takto skončila na
   594 px namiesto 1546 px. S explicitnou šírkou už automatické okraje
   iba rozdelia zvyšok a obsah sa vycentruje. */
.rf-gal-grid,
.rf-galeria > .rf-section__head {
	width: 100%;
	max-width: var(--rf-shell);
	margin-inline: auto;
}

/* Elementor vloží medzi bunku Loop Gridu a náš blok ešte jeden obal. Bez
   tohto by blok nedostal celú šírku bunky. */
.e-loop-item > .rf-gal {
	flex: 1 1 auto;
	width: 100%;
	min-width: 0;
}

.rf-gal {
	padding: clamp(16px, 2.6vw, 40px);
	overflow: hidden;
}

/* -------------------------------------------------------------------------
   2. Hlavička bloku
   Rok je značka, nie nadpis — číslo v úzkom písme nad menom ročníka.
   ------------------------------------------------------------------------- */

.rf-gal .rf-gal__rok .elementor-heading-title {
	font-family: "Big Shoulders Display", "Arial Narrow", Impact, sans-serif;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	font-size: 1.5rem;
	line-height: 1;
	letter-spacing: .08em;
	color: var(--rf-ice-quiet);
}

.rf-gal .rf-gal__nazov .elementor-heading-title {
	font-family: "Big Shoulders Display", "Arial Narrow", Impact, sans-serif;
	font-weight: 800;
	text-transform: uppercase;
	font-size: clamp(1.75rem, 3.4vw, 2.75rem);
	line-height: .92;
	letter-spacing: .005em;
	color: var(--rf-ice);
	margin: 0;
}

/* Popis je odstavec, aj keď ho kreslí widget nadpisu (widget textu
   nepodporuje dynamické pole — overené na ovládači editor). */
.rf-gal .rf-gal__popis .elementor-heading-title {
	font-family: Inter, system-ui, sans-serif;
	font-weight: 400;
	font-size: 1.0625rem;
	line-height: 1.65;
	letter-spacing: 0;
	text-transform: none;
	color: var(--rf-ice-dim);
	max-width: var(--rf-measure);
	margin: 0;
}

/* -------------------------------------------------------------------------
   3. Aftermovie
   Náhľad je odkaz na video. Iframe pribudne až po kliknutí (rf-galeria.js),
   dovtedy sa z YouTube ani Vimea nenačíta nič.
   ------------------------------------------------------------------------- */

/* Na širokej a nízkej obrazovke by video s pomerom 16:9 prerástlo výšku
   okna. Obmedzujeme šírku, nie výšku — inak by sa pomer zlomil. 135vh je
   16/9 zo 76vh, video sa teda zmestí do troch štvrtín okna.

   Rovnaké obmedzenie má aj pás fotiek, aby mali video a fotky spoločnú
   pravú hranu. Zarovnávajú sa doľava, k roku a názvu — vycentrované video
   by sa od zvyšku bloku odtrhlo.

   Bez margin: auto naschvál: pri width: auto sa automatické okraje aj tak
   vyhodnotia na nulu a prebytok padne celý napravo, takže „centrovanie“
   by nič neurobilo, len by mýlilo pri čítaní. */
/* Strop sedí na obsahu widgetu, nie na widgete samotnom. Na widget
   v kontajneri má Elementor pravidlo
   `.elementor.elementor .e-con > .elementor-widget { max-width: 100% }`,
   teda štyri triedy — preteky v špecificite by sa nedali vyhrať čitateľne.
   Zmerané: pri troch triedach ostalo max-width: 100% a video malo 1449 px
   namiesto 1213 px. */
.rf-gal-video,
.rf-gal__fotky .elementor-image-carousel-wrapper {
	max-width: min(100%, 135vh);
	/* Doľava, nie na stred: pás fotiek má začínať tam, kde rok, názov
	   a video. Elementor si carousel po zúžení sám vycentruje. */
	margin-inline: 0 auto;
}

.rf-gal-video {
	margin: 0;
}

.rf-gal-video__spust {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	text-decoration: none;
	border: 1px solid var(--rf-steel-700);
	background: linear-gradient(160deg, var(--rf-steel-900), var(--rf-night));
}

.rf-gal-video__spust:hover {
	border-color: var(--rf-blue);
}

.rf-gal-video__spust:focus-visible {
	outline: 2px solid var(--rf-blue-hot);
	outline-offset: 3px;
}

.rf-gal-video__plagat {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 0;
	/* Plagát je podklad pod tlačidlom, nie obrázok sám o sebe — stmavený,
	   aby biely trojuholník a popis držali kontrast na akejkoľvek fotke. */
	filter: saturate(.85) contrast(1.05) brightness(.62);
	transition: filter .28s ease, transform .5s cubic-bezier(.22, .61, .36, 1);
}

.rf-gal-video__spust:hover .rf-gal-video__plagat {
	filter: saturate(.9) contrast(1.05) brightness(.78);
	transform: scale(1.02);
}

/* Bez plagátu ostáva oceľový podklad — nikdy nie prázdny biely rámik. */
.rf-gal-video--bezplagatu .rf-gal-video__spust::before {
	content: "";
	position: absolute;
	inset: 0;
	background: repeating-linear-gradient(118deg, rgba(215, 227, 241, .05) 0 2px, transparent 2px 11px);
}

/* Značka prehrávania. Štvorec, nie kruh — zaoblenie na tomto webe nie je. */
.rf-gal-video__hrot {
	position: absolute;
	left: 50%;
	top: 50%;
	translate: -50% -50%;
	width: clamp(56px, 7vw, 88px);
	height: clamp(56px, 7vw, 88px);
	background: rgba(5, 10, 19, .55);
	border: 1px solid var(--rf-blue);
	box-shadow: 0 0 30px rgba(25, 122, 229, .45);
	transition: background-color .18s ease, box-shadow .18s ease;
}

.rf-gal-video__hrot::before {
	content: "";
	position: absolute;
	/* Optický stred trojuholníka je vpravo od geometrického. */
	left: 54%;
	top: 50%;
	translate: -50% -50%;
	border-style: solid;
	border-width: 13px 0 13px 22px;
	border-color: transparent transparent transparent var(--rf-ice);
}

.rf-gal-video__spust:hover .rf-gal-video__hrot {
	background: var(--rf-blue-fill);
	box-shadow: 0 0 44px rgba(25, 122, 229, .7);
}

.rf-gal-video__spust:hover .rf-gal-video__hrot::before {
	border-left-color: #fff;
}

.rf-gal-video__text {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: var(--rf-4) clamp(16px, 2.6vw, 32px) var(--rf-3);
	font-family: Inter, system-ui, sans-serif;
	font-weight: 700;
	font-size: .8125rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--rf-ice);
	background: linear-gradient(0deg, rgba(5, 10, 19, .88), rgba(5, 10, 19, 0));
}

.rf-gal-video__ramik {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	border: 1px solid var(--rf-steel-700);
	background: #000;
}

.rf-gal-video__pozn {
	margin-top: var(--rf-2);
	font-family: Inter, system-ui, sans-serif;
	/* Hello Elementor dáva popiskom pod obrázkom kurzívu. Toto nie je
	   popiska obrázka, ale veta o tom, čo sa stane po kliknutí — kurzíva
	   ju robí menej čitateľnou a tvári sa ako poznámka pod čiarou. */
	font-style: normal;
	font-size: .8125rem;
	line-height: 1.5;
	color: var(--rf-label);
}

/* Po spustení je poznámka o načítaní prehrávača už neplatná. */
.rf-gal-video--bezi .rf-gal-video__pozn {
	display: none;
}

/* Adresa, ktorú nevieme rozobrať na YouTube ani Vimeo — ostáva odkaz. */
.rf-gal__odkaz {
	margin: 0;
	font-size: .9375rem;
}

/* Vysvetlivka, ktorú vidno len v editore Elementora. */
.rf-gal__pomoc {
	margin: 0;
	padding: var(--rf-3);
	border: 1px dashed var(--rf-steel-500);
	font-size: .875rem;
	color: var(--rf-ice-quiet);
}

/* -------------------------------------------------------------------------
   4. Fotky
   Kreslí ich widget Image Carousel nad dynamickým poľom „Fotky ročníka“,
   takže tu ide len o tvar snímky a o ovládanie v našich farbách.
   ------------------------------------------------------------------------- */

.rf-gal__fotky .swiper-slide img,
.rf-gal__fotky .elementor-carousel-image {
	border-radius: 0;
	filter: saturate(.9) contrast(1.05);
}

.rf-gal__fotky .swiper-slide img {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

.rf-gal__fotky .elementor-carousel-image {
	aspect-ratio: 3 / 2;
	background-size: cover;
	background-position: center;
}

.rf-gal__fotky .swiper-slide {
	cursor: zoom-in;
}

.rf-gal__fotky .elementor-swiper-button {
	color: var(--rf-ice);
	text-shadow: 0 0 18px rgba(5, 10, 19, .9);
}

.rf-gal__fotky .elementor-swiper-button:hover {
	color: var(--rf-blue-hot);
}

.rf-gal__fotky .swiper-pagination-bullet {
	width: 22px;
	height: 3px;
	border-radius: 0;
	background: var(--rf-steel-500);
	opacity: 1;
}

.rf-gal__fotky .swiper-pagination-bullet-active {
	background: var(--rf-blue);
}

/* -------------------------------------------------------------------------
   5. Úzka obrazovka
   ------------------------------------------------------------------------- */

@media (max-width: 620px) {

	.rf-gal-video__text {
		padding: var(--rf-4) var(--rf-3) 12px;
		font-size: .75rem;
		letter-spacing: .1em;
	}

	.rf-gal-video__hrot::before {
		border-width: 10px 0 10px 17px;
	}

	.rf-gal__fotky .swiper-slide img,
	.rf-gal__fotky .elementor-carousel-image {
		aspect-ratio: 4 / 3;
	}
}

/* -------------------------------------------------------------------------
   6. Obmedzený pohyb
   Vypnúť treba aj transformáciu, nielen prechod — inak sa zdvih plagátu
   vykoná okamžite, teda ako skok.
   ------------------------------------------------------------------------- */

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

	.rf-gal-video__plagat,
	.rf-gal-video__spust:hover .rf-gal-video__plagat {
		transform: none;
		transition: none;
	}

	.rf-gal-video__hrot {
		transition: none;
	}
}