/* =========================================================================
   Rave Fusion 3 — sekcia „Miesto a doprava“
   -------------------------------------------------------------------------
   Sekcia odpovedá na tri otázky v poradí, v akom ich človek naozaj má:
   kam idem, ako sa tam dostanem a ako sa dostanem domov. Odchody nočných
   vlakov sú preto samostatné dosky na plnom svetle, nie riadok schovaný
   v akordeóne — pre návštevníka z iného mesta je to najdrahšia informácia
   na stránke.

   Vzhľad dosky, tlačidiel, nadpisov aj odkrývania je v rf.css. Tu je len
   to, čo pribudne: rozvrhnutie sekcie, číselník odchodov, zástupca mapy
   a prenos oceľového vzhľadu cez obaly, ktoré okolo widgetov robí Elementor.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. Šírka a rytmus
   ------------------------------------------------------------------------- */

.rf-miesto__vrch,
.rf-miesto__noc,
.rf-miesto__uvod,
.rf-miesto__podnadpis,
.rf-miesto__poznamka,
.rf-miesto__akordeon {
	max-width: var(--rf-shell);
	margin-inline: auto;
	width: 100%;
}

/* `.rf-section__head` má v rf.css `margin-inline: auto`. Kontajner sekcie
   je ale flexbox v stĺpci a automatický okraj tam neznamená vycentrovanie
   bloku — zruší roztiahnutie na plnú šírku, nadpis sa zmrští na šírku textu
   a odpláva do stredu. Namerané na vykreslenej stránke: obal nadpisu mal
   446 px namiesto 1310 a začínal na 489 px namiesto 58, teda inde než celý
   zvyšok sekcie. Šírka 100 % mu vráti zamýšľané správanie — pás rovnako
   široký ako obsah pod ním a text pri ľavom okraji. */
.rf-miesto > .rf-section__head {
	width: 100%;
}

/* Značku pod nadpisom rieši rf.css pre všetky sekcie naraz (hviezda
   z plagátu). Vlastný modrý pás tu bol z čias, keď to rf.css nevedelo —
   po oprave sa kreslili obe a nadpis mal pod sebou dve čiary. */

/* -------------------------------------------------------------------------
   1b. Prenos vzhľadu cez obaly Elementora
   Trieda z panela sedí na obale widgetu, text je o úroveň nižšie — a na tú
   úroveň dosiahne Elementor Kit vlastnou triedou, ktorá má väčšiu váhu než
   dedenie. Namerané na vykreslenej stránke: nadpisy vychádzali svetlomodré
   (110, 193, 228) namiesto ľadovej a odstavce sivé (122, 122, 122) namiesto
   --rf-ice-dim. Rovnakú stenu rieši rf-lineup.css rovnakým spôsobom.
   ------------------------------------------------------------------------- */

.rf-miesto .elementor-widget-heading .elementor-heading-title {
	font: inherit;
	color: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
	margin: 0;
	padding: 0;
}

.rf-miesto .rf-body,
.rf-miesto .rf-body p,
.rf-miesto .rf-body li,
.rf-miesto .elementor-widget-text-editor p,
.rf-miesto .elementor-widget-text-editor li {
	color: var(--rf-ice-dim);
}

.rf-miesto .elementor-widget-text-editor a {
	color: var(--rf-blue-hot);
}

.rf-miesto .elementor-widget-text-editor a:hover {
	color: var(--rf-ice);
}

/* -------------------------------------------------------------------------
   2. Vrch: adresa vedľa mapy
   Adresa je užšia než mapa naschvál — je to text, ktorý sa číta, mapa je
   plocha, na ktorú sa pozerá.
   ------------------------------------------------------------------------- */

.rf-miesto__vrch {
	display: grid;
	gap: var(--rf-4);
	grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
	align-items: stretch;
	margin-bottom: clamp(48px, 7vh, 96px);
}

.rf-miesto__karta {
	display: flex;
	flex-direction: column;
	gap: var(--rf-2);
	padding: var(--rf-4);
}

/* Popisky nad údajom majú rovnaký hlas ako lišta v hero — inak by sekcia
   pôsobila ako cudzí kus webu. */
.rf-miesto__k {
	font-family: Inter, system-ui, sans-serif;
	font-size: .6875rem;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--rf-label);
}

.rf-miesto__nazov {
	margin-top: var(--rf-1);
}

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

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

/* Tlačidlo sa drží pri spodnej hrane dosky, aj keď je text krátky. */
.rf-miesto__karta .rf-miesto__odkaz {
	margin-top: auto;
	padding-top: var(--rf-3);
}

/* Elementor vešia triedu z panela na obal widgetu, nie na samotný odkaz.
   rf.css to rieši pre `.rf-btn--go`, pre tiché tlačidlo ale nie — vo
   vykreslenom HTML preto ostávalo v predvolenom vzhľade Elementora.
   Prenášame vzhľad o úroveň nižšie, v rámci svojej sekcie. */
.rf-miesto .rf-btn--quiet .elementor-button {
	background-color: transparent;
	color: var(--rf-ice-dim);
	border: 1px solid var(--rf-steel-500);
	border-radius: 0;
	font-family: Inter, system-ui, sans-serif;
	font-weight: 700;
	font-size: .8125rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	padding: 14px var(--rf-4);
	transition: color .18s ease, border-color .18s ease;
}

.rf-miesto .rf-btn--quiet .elementor-button:hover,
.rf-miesto .rf-btn--quiet .elementor-button:focus {
	color: var(--rf-ice);
	border-color: var(--rf-steel-300);
	background-color: transparent;
}

/* -------------------------------------------------------------------------
   3. Mapa a jej zástupca pred súhlasom
   Mapu vykresľuje Google. Kým na to nie je súhlas, na jej mieste stojí
   doska, ktorá povie prečo a ponúkne dve cesty ďalej: nastaviť súhlas
   alebo odísť do Máp priamo. Iframe sa do stránky nedostane vôbec —
   nie skrytý, nie s prázdnym src. Nie je tam.
   ------------------------------------------------------------------------- */

.rf-miesto__mapa {
	min-height: 340px;
	display: flex;
}

.rf-miesto__mapa .elementor-widget-container,
.rf-miesto__mapa .rf-mapa {
	width: 100%;
}

.rf-mapa {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 340px;
	border: 1px solid var(--rf-steel-700);
	background:
		linear-gradient(200deg, rgba(215, 227, 241, .10), rgba(215, 227, 241, .02) 46%, transparent 70%),
		linear-gradient(180deg, var(--rf-steel-900), var(--rf-deep));
}

/* Námraza cez zástupcu: mapa je zamrznutá, kým ju nepustíš dnu. Rovnaký
   materiál ako zamknutý slot v line-upe, aby web hovoril jedným jazykom. */
.rf-mapa::before {
	content: "";
	position: absolute;
	inset: 0;
	background: repeating-linear-gradient(118deg, rgba(215, 227, 241, .06) 0 2px, transparent 2px 9px);
	pointer-events: none;
}

.rf-mapa__zastupca {
	position: relative;
	z-index: 1;
	max-width: 42ch;
	padding: var(--rf-4);
	text-align: center;
}

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

.rf-mapa__akcie {
	display: flex;
	flex-wrap: wrap;
	gap: var(--rf-2);
	justify-content: center;
	margin: var(--rf-4) 0 0;
}

/* Tlačidlo v zástupcovi je <button>, nie odkaz — nikam nevedie, len
   otvorí lištu. Prehliadač mu dáva vlastné písmo a okraje, ktoré by
   rf-btn nepokryl. */
.rf-mapa__btn {
	font: inherit;
	font-weight: 700;
	font-size: .8125rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	cursor: pointer;
}

/* Po súhlase doska zmizne aj s námrazou a ostane holý rám s mapou. */
.rf-mapa--zapnuta {
	background: var(--rf-deep);
	padding: 0;
}

.rf-mapa--zapnuta::before {
	display: none;
}

.rf-mapa iframe {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 340px;
	border: 0;
	/* Mapa chodí od Googlu vždy svetlá a uprostred tmavého webu svietila
	   ako výkladná skriňa. Prevrátenie s otočením odtieňa o 180° z nej
	   spraví tmavú mapu a odtiene ulíc, zelene aj vody nechá približne
	   tam, kde boli. Popisky zostávajú čitateľné — to je celá podmienka. */
	filter: invert(.92) hue-rotate(180deg) saturate(.7) brightness(.96) contrast(1.02);
}

/* -------------------------------------------------------------------------
   4. Odchody v noci
   Doska = jeden odchod. Čas je najväčší prvok, lebo je to jediné, čo si
   z celej sekcie o pol piatej ráno niekto pamätá.
   ------------------------------------------------------------------------- */

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

.rf-miesto__uvod {
	margin-bottom: var(--rf-4);
}

.rf-miesto__noc {
	display: grid;
	gap: var(--rf-3);
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.rf-miesto__spoj {
	display: flex;
	flex-direction: column;
	padding: var(--rf-4);
}

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

.rf-miesto__smer {
	font-family: "Big Shoulders Display", "Arial Narrow", Impact, sans-serif;
	font-weight: 700;
	font-size: 1.35rem;
	line-height: 1.1;
	text-transform: uppercase;
	color: var(--rf-blue-hot);
	margin-top: var(--rf-2);
}

.rf-miesto__spoj .rf-body {
	font-size: .95rem;
	margin-top: var(--rf-2);
}

/* Tretia doska nesie rozsah, nie jeden čas — dve čísla vedľa seba by pri
   veľkosti odchodov roztrhli riadok. */
.rf-miesto__cas--rozsah {
	font-size: 2.1rem;
	letter-spacing: -.01em;
}

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

.rf-miesto__poznamka .rf-body {
	font-size: .9rem;
	color: var(--rf-ice-quiet);
}

/* -------------------------------------------------------------------------
   5. Akordeón s ostatnými praktickými vecami
   Elementor mu dáva vlastné pozadie a zaoblenie. Prenášame naň oceľ:
   doska, ostrá hrana, modrá až pri otvorení.
   ------------------------------------------------------------------------- */

.rf-miesto__akordeon {
	margin-top: clamp(48px, 7vh, 96px);
}

/* Selektory sú naschvál trojtriedové. Vlastný štýl widgetu
   (`.elementor-widget-n-accordion .e-n-accordion-item-title`) má rovnakú
   váhu ako dvojtriedový zápis a načítava sa až pri prvom výskyte widgetu,
   teda po tomto súbore — s dvoma triedami vyhral on. Namerané: hlavička
   mala 10 px odsadenia namiesto 16/24 a nadpis 16 px namiesto 24. */

.rf-miesto .rf-miesto__akordeon .e-n-accordion {
	display: flex;
	flex-direction: column;
	gap: var(--rf-2);
}

.rf-miesto .e-n-accordion .e-n-accordion-item {
	background: linear-gradient(180deg, var(--rf-steel-900), var(--rf-deep));
	border: 1px solid var(--rf-steel-700);
	border-radius: 0;
}

.rf-miesto .e-n-accordion .e-n-accordion-item[open] {
	border-color: var(--rf-blue);
}

/* Zvislé odsadenie drží hlavičku nad 44 px aj na dotykovej obrazovke —
   s predvolenými 10 px mal cieľ na kliknutie 40 px. */
.rf-miesto .e-n-accordion .e-n-accordion-item-title {
	padding: var(--rf-3) var(--rf-4);
	cursor: pointer;
}

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

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

/* Odsadenie sa nedá podstrčiť premennou. Elementor čerpá odsadenie
   kontajnera z `--padding-block-*` a `--padding-inline-*` a nastavuje ich
   pravidlom na konkrétny prvok (`.elementor-<id> .elementor-element-<id>`),
   ktoré má väčšiu váhu než čokoľvek s triedou. Namerané: `padding-bottom`
   ostal 0 aj s premennou, text sa lepil na spodnú hranu. Píše sa preto
   priamo, selektorom o tri triedy. */
.rf-miesto .e-n-accordion .e-n-accordion-item > .e-con {
	padding: 0 var(--rf-4) var(--rf-4);
}

.rf-miesto .e-n-accordion .e-n-accordion-item .rf-body {
	max-width: var(--rf-measure);
}

/* -------------------------------------------------------------------------
   6. Odkazy von
   Zdroje, podľa ktorých sú časy a ceny v sekcii napísané. Sú súčasťou
   informácie, nie dekorácia — kto ide v noci na vlak, chce si to overiť.
   ------------------------------------------------------------------------- */

.rf-miesto__zdroje {
	display: flex;
	flex-wrap: wrap;
	gap: var(--rf-2) var(--rf-4);
	margin: var(--rf-3) 0 0;
	padding: 0;
	list-style: none;
}

.rf-miesto__zdroje li {
	font-size: .875rem;
	color: var(--rf-label);
}

/* -------------------------------------------------------------------------
   7. Úzke obrazovky
   Pod 900 px ide mapa pod adresu. Nižšie sa zmenšuje len čas — zvyšok
   textu je už na dolnej hranici čitateľnosti.
   ------------------------------------------------------------------------- */

@media (max-width: 900px) {

	.rf-miesto__vrch {
		grid-template-columns: 1fr;
	}

	.rf-miesto__mapa,
	.rf-mapa,
	.rf-mapa iframe {
		min-height: 280px;
	}
}

@media (max-width: 430px) {

	.rf-miesto__cas {
		font-size: 2.6rem;
	}

	.rf-miesto__cas--rozsah {
		font-size: 1.75rem;
	}

	.rf-miesto__adresa {
		font-size: 1.35rem;
	}
}

/* -------------------------------------------------------------------------
   8. Obmedzený pohyb
   Kto má vypnuté animácie, nedostane rýchlejší prechod — nedostane
   žiadny. Ruší sa preto aj transformácia, nielen trvanie.
   ------------------------------------------------------------------------- */

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

	.rf-miesto .rf-reveal,
	.rf-miesto [data-rf-reveal] {
		opacity: 1;
		transform: none;
		transition: none;
	}

	.rf-miesto .e-n-accordion .e-n-accordion-item,
	.rf-miesto .e-n-accordion .e-n-accordion-item-title,
	.rf-mapa,
	.rf-mapa iframe {
		transition: none;
		animation: none;
	}
}