/* 
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 2.0.0
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/* ==========================================================================
   entia.sk — projektové štýly

   Jediný zdroj vlastného CSS webu; Page Settings → Custom CSS v Elementore
   sú prázdne. Súvisiace skripty: entia.js, kritické CSS: functions.php
   (entia_kriticke_css).

   Konvencia selektorov: pravidlá sa viažu na ID sekcie (#tlmocenia,
   #specializacia, …). style.css sa načítava pred post-*.css a global-*.css,
   takže pri rovnakej špecificite prehráva — ID (1,0,0) prebije global classy
   Elementora (0,2,0) nezávisle od poradia.

   Obsah:
     1. Spoločné
     2. Domov — 02 Predstavenie
     3. Domov — 03 Fotky tlmočení
     4. Domov — 04 Služby a 06 Referencie
     5. Domov — 05 Špecializácia
     6. Hlavička
     7. Celoobrazovkové menu
     8. Sticky nadpisy sekcií
     9. Plynulé škálovanie nad tabletom (notebooky)
    10. O mne — 01 Citát
    11. O mne — bloky Filozofia / Cesta / Človečina
   ========================================================================== */

/* ==========================================================================
   1. Spoločné
   ========================================================================== */

/* Akcentovaná časť nadpisu. Atomic html-v3 prepúšťa cez wp_kses na <span>
   jediný atribút (id), preto sa farba viaže na prefix id, nie na triedu. */
.elementor span[id^="akcent"] {
	color: #FF6C4F;
}

/* ⚠️ Elementor 4 pri uložení stránky zahadzuje atribút id na <span>
   v nadpisoch, takže pravidlo vyššie už nezaberá (prišli o to hero aj mená
   v Referenciách). Akcent sa preto viaže na miesto, kde span stojí — holý
   <span> v editore stačí, bez atribútov. */
#hero-sekcia h2 span,
#referencie h4 span {
	color: #FF6C4F;
}

/* ==========================================================================
   2. Domov (post 58) — 02 Predstavenie
   ========================================================================== */

/* Mobilný layout tejto sekcie (fotka ako pás nad textom) je v
   entia_kriticke_css() vo functions.php, nie tu: potrebuje URL fotky
   z Elementor pozadia, ktorá sa dá zistiť len na strane servera, a musí byť
   v <head> — pri načítaní cez JS sa sekcia po prvom vykreslení preskladala.
   Súvisiace hodnoty (výška pásu, stopy gradientu, vtiahnutie textu) sú
   previazané a ladia sa spolu; popis je pri tom pravidle. */

/* ==========================================================================
   3. Domov (post 58) — 03 Fotky tlmočení
   ========================================================================== */

/* Fotky nadväzujú na predchádzajúcu sekciu bez medzery. Atomic e-flexbox má
   základný padding 10 px; inline padding tejto sekcie nuluje Elementor sám,
   horný nie. Spodných 10 px sa nechávajú — nasledujúca sekcia má rovnaké
   pozadie. */
#tlmocenia {
	padding-block-start: 0;
}

/* Pilulka je nadpis, nie ovládací prvok. Element ostáva e-button kvôli
   lokálnym štýlom (atomic e-button sa bez odkazu vždy renderuje ako
   <button>), interaktivita sa mu odoberá tu a v entia.js. */
/* Tmavé podklady pod textom na fotke. Global classy ich majú v #16151A, čo nad
   svetlou fotkou presvitá do siva; čierna drží kontrast bez sivého závoja.
   Krytie sa nemení, mení sa len odtieň. */
/* Pilulka je nadpis, nie ovládací prvok — interaktivitu jej berie CSS nižšie
   (hover, focus, outline) a entia.js jej dáva role="heading" a tabindex="-1".
   ⚠️ Nie je tu `pointer-events: none`, hoci by sa to ponúkalo: vyradilo by ju
   z hit-testu a text v nej by sa nedal označiť myšou. `user-select: text` je
   z rovnakého dôvodu — <button> má od prehliadača `user-select: none`. */
#tlmocenia .pill {
	cursor: text;
	-webkit-user-select: text;
	user-select: text;
	background-color: rgba(0, 0, 0, .5);
}

#tlmocenia .popis-fade {
	background-image: linear-gradient(90deg,
		rgba(0, 0, 0, 0) 0%,
		rgba(0, 0, 0, .6) 12%,
		rgba(0, 0, 0, .6) 88%,
		rgba(0, 0, 0, 0) 100%);
}

#tlmocenia .pill:hover,
#tlmocenia .pill:focus,
#tlmocenia .pill:focus-visible,
#tlmocenia .pill:active {
	background-color: rgba(0, 0, 0, .5);
	border-color: #FF6C4F;
	color: #FFFFFF;
	box-shadow: none;
	outline: none;
}

/* Paralaxový scroll efekt.
 *
 * entia.js prenesie pozadie karty do premennej --foto, pridá triedu .paralax
 * a pri skrolovaní priebežne nastavuje:
 *   --f    0–1   nábeh z tmy (0 = karta vstupuje zdola, 1 = horný okraj hore)
 *   --par  −1–1  postup kartou vycentrovaný na nulu, poháňa posun fotky
 *   --p    0–1   surový postup kartou
 *
 * Vrstvy: fotka je v ::before, obsah karty ostáva nad ňou. Fade aj scale sa
 * riadia z --f, posun z --par. Text sa neposúva.
 *
 * ⚠️ Hlavným nositeľom pohybu je ZOOM, nie posun. Karta má na bežnom okne takmer
 * presne pomer strán fotky (napr. 1643 × 1091 vs fotka 3 : 2), takže fotka do rámu
 * sadne presne a na posun v nej nie je miesto — každý pixel posunu treba vykúpiť
 * zväčšením a orezom. Preto sa posun drží nízko (9 % vrstvy) a pohyb robí pomalé
 * približovanie 1,00 → 1,12 naprieč priechodom (Ken Burns). Zoom uťahuje výrez
 * symetricky, takže na rozdiel od posunu nevytláča ľudí z horného okraja.
 *
 * Geometria — pri zmene ktorejkoľvek hodnoty prepočítať:
 *   presah hore  = |inset-block-start|                    = 16 %
 *   presah dole  = height − 100 % − presah hore           = 10 %
 *   posun        = percento translate × height            = 9 % × 126 % = 11,3 %
 *   rezerva hore = presah hore − posun                    = 4,7 %
 * Rezerva nesmie klesnúť pod ~3,5 %, inak sa pri krajnej polohe odhalí okraj
 * vrstvy. Kritický je stav scale 1; scale > 1 presah len zväčšuje.
 *
 * ⚠️ KĽÚČOVÉ: --par a --f nie sú nezávislé. Namerané na karte pri priechode:
 *
 *     par   −1,00   −0,64   −0,20    0,00    0,40    1,00
 *     f      0,00    0,34    0,75    0,94    1,00    1,00
 *     výrez 20–88   17–87   12–86   10–85    7–83    3–79 %
 *
 * Záporný par (fotka posunutá nahor, teda výrez nízko a tváre mimo) nastáva
 * len vtedy, keď je f blízko nuly — karta je čierna a vrstva má opacity 0,
 * takže na výreze v tej chvíli nezáleží. Odkedy je karta naozaj vidno
 * (f ≥ 0,75), je výrez už na 12 % a ďalej sa len zlepšuje.
 *
 * Rozpočet posunu preto neurčuje krajná poloha par = −1, ale poloha par = 0,
 * kde sa karta rozsvieti. Vďaka tomu sa dá posun držať vysoko (202 px na karte
 * 1091 px) a tváre aj tak ostanú v zábere. Pri návrhu ako pre symetrický prípad
 * by vyšlo len ~115 px.
 *
 * ⚠️ Presah je preto nesymetrický (13 % hore, 19 % dole): hore ho treba len
 * toľko, aby sa pri par = +1 neodhalil okraj, kým dole musí pokryť aj krajnú
 * polohu par = −1, ktorá je síce neviditeľná, ale layout stále existuje.
 *
 * ⚠️ Scale je viazaný na --pos, nie na --f. Kým visel na --f, vrcholil presne
 * vtedy, keď karta prichádza — štartovala na 1,6× a z fotky bolo v tej chvíli
 * vidno len úzky stred (namerané 28–72 % namiesto 14–86 %), takže tváre vypadli
 * z obrazu práve v momente, keď na kartu padne prvý pohľad. Naviazaný na --pos
 * rastie monotónne počas celého priechodu a je z neho plynulý pohyb.
 *
 * ⚠️ Vzťah medzi rozsahom paralaxu a viditeľnosťou fotky je nulový súčet.
 * background-size: cover škáluje fotku na výšku vrstvy, takže vyššia vrstva
 * = viac priestoru na posun, ale menší viditeľný výrez (a užší aj do šírky).
 * Ak by mal byť pohyb ešte výraznejší, treba zdvihnúť height, presah hore
 * aj translate naraz a zmieriť sa s menším výrezom.
 *
 * Výška vrstvy musí byť explicitná (height v %). So shorthandom inset-block
 * prehliadač výšku pre transform neresolvne a percentuálny posun sa počíta
 * z výšky rámu, čím vyjde menší.
 *
 * Transform aj opacity bežia na kompozitore. Bez JS a pri
 * prefers-reduced-motion ostáva pôvodné pozadie karty.
 */
#tlmocenia .karta-foto {
	position: relative;
	overflow: hidden;
	/* Podklad, cez ktorý fotka nabieha. Global class má #1F1E22, čo pri nízkom
	   --f presvitá a celý nábeh pôsobí sivo. Pri čiernej je výsledok presne
	   fotka × --f, čiže skutočný nábeh z tmy. */
	background-color: #000000;
	/* Karta sa nikdy nemá prevýšiť okno — na notebooku sa inak nedá zachytiť
	   celá a paralax stráca zmysel. */
	min-height: min(1165px, 88vh);
	min-height: min(1165px, 88svh);
}

#tlmocenia .karta-foto.paralax {
	background-image: none !important;
}

#tlmocenia .karta-foto.paralax::before {
	content: "";
	position: absolute;
	inset-block-start: -16%;
	height: 126%;
	inset-inline: 0;
	z-index: 0;
	background-image: var(--foto);
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	opacity: var(--f, 1);
	transform: translate3d(0, calc(var(--pos, 0) * 9%), 0) scale(calc(1 + var(--pos, 0) * 0.12));
	will-change: transform, opacity;
}

#tlmocenia .karta-foto.paralax > * {
	position: relative;
	z-index: 1;
	opacity: var(--f, 1);
}

/* Konferencie — spodnú pätinu fotky tvoria veľké rozostrené hlavy v popredí
 * a spodná hrana karty ich rezala napoly (namerané: hrana padala na 79–86 %
 * výšky fotky, hlavy začínajú na 72 %).
 *
 * Posunúť výrez sa nedá: pri oreze podľa výšky je zvislá zložka
 * `background-position` neúčinná a na posun cez transform nie je v rozpočte
 * presahu miesto. Preto sa tejto jednej karte mení `background-size` — fotka
 * sa sadí na 130 % výšky vrstvy a kotví o vrch, takže do rámu ide len jej
 * horných 77 % a hlavy v popredí sa doň nedostanú.
 *
 * Namerané po úprave: spodná hrana sa hýbe medzi 63 a 69 % výšky fotky na
 * 1658 × 1240 a medzi 66 a 69 % na tablete — teda stále nad popredím.
 *
 * ⚠️ Platí len pod pomerom okna 2:1. Nad ním je vrstva širšia než 1,95× jej
 * výška a fotka by pri `auto 130%` nepokryla šírku — preto to ultra-wide vetva
 * nižšie vracia na `cover` (tam je zvislá pozícia účinná a stačí `center top`). */
#tlmocenia #karta-konferencie.paralax::before {
	background-size: auto 135%;
	background-position: center top;
}

@media (max-width: 1024px) {
	#tlmocenia .karta-foto {
		min-height: min(700px, 82vh);
		min-height: min(700px, 82svh);
	}

	#tlmocenia .karta-foto.paralax::before {
		transform: translate3d(0, calc(var(--pos, 0) * 9%), 0) scale(calc(1 + var(--pos, 0) * 0.1));
	}
}

@media (max-width: 767px) {
	#tlmocenia .karta-foto {
		min-height: min(460px, 72vh);
		min-height: min(460px, 72svh);
	}

	#tlmocenia .karta-foto.paralax::before {
		transform: translate3d(0, calc(var(--pos, 0) * 9%), 0) scale(calc(1 + var(--pos, 0) * 0.08));
	}
}

/* Ultra-wide monitory (21:9 a širšie).
 *
 * Na bežnom monitore je rám vrstvy užší, než je pomer fotky, takže
 * background-size cover fituje podľa VÝŠKY a orezáva boky. Nad pomerom strán
 * 2:1 sa to obráti: rám je širší než fotka, cover fituje podľa ŠÍRKY a orezáva
 * vrch a spodok — teda presne pásmo, v ktorom sú tváre.
 *
 * Namerané pri pomere okna 2,67 (2560 × 960): rám 2545 × 1183, fotka po cover
 * 2545 × 1690 — v okne karty je teda len 50 % výšky fotky.
 *
 * Tri úpravy:
 *
 *   1. Výrez sa ukotví na vrch fotky (`center top`). Ľudia sú na všetkých ôsmich
 *      fotkách v hornej polovici; pri `center center` vychádzal výrez 25–75 %
 *      a hlavy padali mimo. Takto je to 10–60 %. Pod 0 % sa ísť nedá, čiže toto
 *      je maximum, ktoré sa dá vyťažiť zo samotnej pozície.
 *
 *   2. Amplitúda scale klesá z 0,6 na 0,12 — toto bola hlavná príčina. Scale je
 *      viazaný na --f, takže karta pri nábehu z tmy štartuje na 1,6× a vtedy
 *      vidno len 31 % výšky fotky (28–60 %): tváre sú mimo záberu presne
 *      v momente, keď karta prichádza. Pri 1,12 je to 44 % (13–57 %).
 *
 *   3. Posun klesá z 11 % na 6 %, aby sa úzky výrez nehojdal cez tváre.
 *      Naprieč celým priechodom tak ostáva viditeľné pásmo zhruba 9–61 %.
 *
 * ⚠️ Výška vrstvy sa nemení a ani by nepomohla — pri oreze podľa šírky je mierka
 * fotky daná šírkou rámu, takže viditeľná časť závisí len od výšky karty a od
 * scale. Rovnako nepomôže zväčšovanie karty: musela by mať 1690 px a nezmestila
 * by sa do okna.
 */
@media (min-width: 1025px) and (min-aspect-ratio: 2 / 1) {
	#tlmocenia .karta-foto.paralax::before {
		background-position: center top;
		transform: translate3d(0, calc(var(--pos, 0) * 6%), 0) scale(calc(1 + var(--pos, 0) * 0.12));
	}

	/* Ukotvenie per fotka.
	 *
	 * `center top` sedí siedmim fotkám z ôsmich — ľudia sú na nich v hornej
	 * tretine. Na tlačovej konferencii Saxo Bank sedí panel nižšie (tváre na
	 * 38–52 % výšky fotky), takže pri hornom ukotvení vyplní horné dve tretiny
	 * karty banner na stene a ľudia skončia dole pod pilulkou. 44 % ich zdvihne
	 * do hornej tretiny karty.
	 *
	 * Karty majú kvôli tomuto vlastné ID (`karta-podujatia`, `karta-konferencie`,
	 * `karta-kongresy`, `karta-navstevy`, `karta-tlacove`, `karta-keynote`,
	 * `karta-rokovania`, `karta-rozhovory`), takže doladenie ďalšej fotky je
	 * jeden riadok a nezávisí od poradia kariet.
	 *
	 * Platí len tu: pod pomerom 2:1 orezáva cover podľa výšky a zvislá zložka
	 * `background-position` nemá žiadny účinok.
	 *
	 * ⚠️ `#tlmocenia` v selektore je nutné. Pravidlo vyššie má špecificitu
	 * (1,2,1) — jedno ID a dve triedy — takže samotné `#karta-tlacove.paralax`
	 * (1,1,1) by prehralo napriek tomu, že je konkrétnejšie. */
	#tlmocenia #karta-tlacove.paralax::before {
		background-position: center 44%;
	}

	/* Diskusia v Martinuse má nad panelom vysoký strop; bez posunu zaberie
	   hornú tretinu karty prázdne miesto. */
	#tlmocenia #karta-rozhovory.paralax::before {
		background-position: center 23%;
	}

	/* Vracia Konferencie na cover — `auto 125%` z pravidla vyššie má rovnakú
	   špecificitu, takže bez tohto by tu ostalo v platnosti a fotka by
	   nepokryla šírku vrstvy. Nad 2:1 je zvislá pozícia účinná a `center top`
	   drží popredie mimo rámu aj bez zmeny veľkosti. */
	#tlmocenia #karta-konferencie.paralax::before {
		background-size: cover;
		background-position: center top;
	}
}

/* ==========================================================================
   4. Domov (post 58) — 04 Služby a 06 Referencie
   EN Home (post 407) má preložené kotvy: #services (= #sluzby), #contact (= #kontakt).
   ========================================================================== */

/* Zarovnanie nadpisov sekcií na spoločnú linku (250 px pri 1920).
   Základný 10 px padding atomic e-flexboxu sa v týchto dvoch sekciách
   nasčítal dvakrát (riadok + stĺpec) a posunul nadpis o 20 px oproti
   sekciám, kde nadpis leží priamo v koreni. */
#sluzby > .e-flexbox-base,
#sluzby > .e-flexbox-base > .e-flexbox-base,
#services > .e-flexbox-base,
#services > .e-flexbox-base > .e-flexbox-base,
#referencie > .e-flexbox-base,
#referencie > .e-flexbox-base > .e-flexbox-base {
	padding-inline-start: 0;
	padding-inline-end: 0;
}

/* Referencie nad úvodnú dávku; odkrýva ich tlačidlo „Viac" v entia.js.
 *
 * Odkrývanie je animované. `display` sa animovať nedá a karta má dve deti
 * (citát + podpis), takže ani trik s grid-template-rows: 0fr → 1fr tu
 * nepomôže — potreboval by jeden spoločný riadok, čiže obal, ktorý v Elementore
 * nie je. Preto výšku meria a nastavuje skript a CSS ju len prechádza.
 *
 * Trieda .ref-rozbaluje je dočasná, platí len počas animácie; skript ju po
 * dobehnutí odoberie spolu s inline výškou, aby karta ďalej reagovala na zmenu
 * šírky okna. `!important` je pri display nutné — pravidlá Elementora majú
 * rovnakú špecificitu a načítavajú sa po style.css. */
[id^="ref-extra"] {
	display: none !important;
}

[id^="ref-extra"].ref-zobrazena {
	display: flex !important;
}

[id^="ref-extra"].ref-rozbaluje {
	overflow: hidden;
	opacity: 0;
	transform: translateY(-10px);
	transition:
		height .5s cubic-bezier(.4, 0, .2, 1) var(--oneskorenie, 0s),
		opacity .4s ease calc(var(--oneskorenie, 0s) + .08s),
		transform .5s cubic-bezier(.4, 0, .2, 1) var(--oneskorenie, 0s);
}

[id^="ref-extra"].ref-rozbaluje.ref-otvorena {
	opacity: 1;
	transform: none;
}

/* ==========================================================================
   5. Domov (post 58) — 05 Špecializácia
   ========================================================================== */

/* Karty sú po načítaní zatvorené. Na zariadeniach s myšou sa otvárajú
   prejdením kurzorom (a klávesnicou cez :focus-within), na dotykových
   zariadeniach klikom — hover tam neexistuje. Rozhoduje o tom media query
   (hover: hover), samotné prepínanie triedy .spec-otvorena je v entia.js.
   Skrývanie popisu je vyňaté z editora, aby sa dali texty upravovať. */
#specializacia .karta {
	cursor: pointer;
}

/* Rozbaľovanie je animované cez grid-template-rows 0fr → 1fr. Riadok s popisom
   sa tým roztiahne na svoju prirodzenú výšku a prechod ostane plynulý bez
   hádania max-height, ktoré by pri rôzne dlhých textoch dobiehalo nerovnako.
   Karta preto musí byť grid, nie flex.

   ⚠️ Prvý riadok je min-content, nie auto. Pri auto sa počas prechodu, kým má
   druhý riadok zlomkový flex faktor, nafúkne aj riadok s nadpisom (namerané
   71 → 102 → 71 px) a nadpis viditeľne poskočí. min-content ho drží na mieste.

   Medzera medzi nadpisom a popisom sa animuje spolu s riadkom cez row-gap.
   Ako padding popisu by nefungovala: min-height:0 zhodí len obsah položky,
   nie jej padding, takže by zbalenému riadku ostala výška 10 px. */
body:not(.elementor-editor-active) #specializacia .karta {
	display: grid;
	grid-template-rows: min-content 0fr;
	row-gap: 0;
	transition: grid-template-rows .45s cubic-bezier(.4, 0, .2, 1),
		row-gap .45s cubic-bezier(.4, 0, .2, 1);
}

body:not(.elementor-editor-active) #specializacia .karta h4 {
	color: #FFFFFF;
	transition: color .25s ease;
}

/* overflow:hidden orezáva popis počas rozbaľovania, min-height:0 dovolí
   grid položke klesnúť pod výšku obsahu. Text sa navyše jemne zosunie
   a rozsvieti, aby otvorenie nepôsobilo ako skok. */
body:not(.elementor-editor-active) #specializacia .karta p {
	display: block;
	overflow: hidden;
	min-height: 0;
	opacity: 0;
	transform: translateY(-8px);
	transition: opacity .25s ease, transform .45s cubic-bezier(.4, 0, .2, 1);
}

/* Otvorený stav — na dotykových zariadeniach trieda z entia.js. */
body:not(.elementor-editor-active) #specializacia .karta.spec-otvorena {
	grid-template-rows: min-content 1fr;
	row-gap: 10px;
}

body:not(.elementor-editor-active) #specializacia .karta.spec-otvorena h4 {
	color: #FF6C4F;
}

body:not(.elementor-editor-active) #specializacia .karta.spec-otvorena p {
	opacity: 1;
	transform: none;
	transition-delay: .12s, .12s;
}

/* Indikátor rozbaliteľnosti na pravom okraji tabu: zatvorené ↘, otvorené ↗.
   Ikona je CSS mask s currentColor, takže dedí farbu nadpisu. */
#specializacia .karta h4 {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

#specializacia .karta h4::after {
	content: "";
	flex: 0 0 auto;
	width: 24px;
	height: 24px;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 7h10v10h-2.2V10.8L7.9 17.6 6.4 16.1 13.2 9.2H7V7z'/%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'%3E%3Cpath d='M7 7h10v10h-2.2V10.8L7.9 17.6 6.4 16.1 13.2 9.2H7V7z'/%3E%3C/svg%3E") center/contain no-repeat;
	transform: rotate(90deg);
	transition: transform .35s cubic-bezier(.4, 0, .2, 1);
}

#specializacia .karta.spec-otvorena h4::after {
	transform: rotate(0deg);
}

/* Nadpis sekcie je zarovnaný k pravému okraju obsahu. Vľavo by sa bil so
   sticky nadpisom Služieb, ktorý dobieha na 66vh až po koniec svojej sekcie.
   Pod 768 px sticky nie je, tam ostáva vľavo ako ostatné nadpisy.
   ID (1,1,0) prebije h2-odsadenie aj clamp zo sekcie 9 (0,2,1). */
@media (min-width: 768px) {
	#specializacia > .txt-h2 {
		margin-inline-start: 0;
		text-align: end;
	}
}

@media (max-width: 767px) {
	#specializacia .karta h4::after {
		width: 20px;
		height: 20px;
	}
}

/* Otváranie prejdením kurzorom — len tam, kde myš naozaj je. Rovnaké hodnoty
   ako pri .spec-otvorena; zámerne sa neskladajú do jedného zoznamu selektorov,
   pretože prehliadač bez podpory :focus-within by zahodil celé pravidlo. */
@media (hover: hover) and (pointer: fine) {
	body:not(.elementor-editor-active) #specializacia .karta:hover,
	body:not(.elementor-editor-active) #specializacia .karta:focus-within {
		grid-template-rows: min-content 1fr;
		row-gap: 10px;
	}

	body:not(.elementor-editor-active) #specializacia .karta:hover h4,
	body:not(.elementor-editor-active) #specializacia .karta:focus-within h4 {
		color: #FF6C4F;
	}

	body:not(.elementor-editor-active) #specializacia .karta:hover p,
	body:not(.elementor-editor-active) #specializacia .karta:focus-within p {
		opacity: 1;
		transform: none;
		transition-delay: .12s, .12s;
	}

	#specializacia .karta:hover h4::after,
	#specializacia .karta:focus-within h4::after {
		transform: rotate(0deg);
	}
}

/* Bez animácií sa karta prepne okamžite; funkčnosť ostáva rovnaká. */
@media (prefers-reduced-motion: reduce) {
	body:not(.elementor-editor-active) #specializacia .karta,
	body:not(.elementor-editor-active) #specializacia .karta p,
	body:not(.elementor-editor-active) #specializacia .karta h4,
	#specializacia .karta h4::after {
		transition: none;
	}

	body:not(.elementor-editor-active) #specializacia .karta p {
		transform: none;
	}
}

/* Tablet: mriežka sa láme na dva stĺpce a položky dostanú menšie písmo.
   Tri stĺpcové kontajnery z Elementora idú cez display:contents preč
   z layoutu, takže do mriežky spadne priamo 12 kariet. */
@media (max-width: 1024px) {
	#specializacia {
		padding-inline: 40px;
	}

	#specializacia-mriezka {
		display: grid;
		grid-template-columns: 1fr 1fr;
		align-items: start;
	}

	#specializacia-mriezka > .e-flexbox-base {
		display: contents;
	}

	#specializacia .karta h4 {
		font-size: 22px;
		gap: 12px;
	}
}

@media (max-width: 767px) {
	#specializacia {
		padding-inline: 20px;
	}

	#specializacia-mriezka {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
   6. Hlavička (šablóna 239)
   ========================================================================== */

/* Lišta leží cez obsah a ostáva na obrazovke. Gradient nesie sama lišta
   cez global class .hlavicka. */
.elementor-location-header {
	position: fixed;
	inset-block-start: 0;
	inset-inline: 0;
	z-index: 100;
}

body.admin-bar .elementor-location-header {
	inset-block-start: 32px;
}

@media (max-width: 782px) {
	body.admin-bar .elementor-location-header {
		inset-block-start: 46px;
	}
}

/* Lišta aj overlay menu sú deťmi .elementor-location-header, teda v jednom
   stacking contexte — z-index hlavičky platí voči stránke, nie medzi jej
   deťmi. Bez explicitného poradia prekryje overlay logo aj zatváracie
   tlačidlo. */
#hlavicka-lista {
	position: relative;
	z-index: 2;
}

/* Gradient lišty. Global class .hlavicka má 100 % → 60 % (na 62 %) → 0 %,
   takže text skrolujúci pod lištou presvital cez logo (logo leží v hornej
   polovici lišty). Plné krytie drží do 45 % výšky, na 70 % je ešte 85 %
   a do priehľadna prechádza len spodná tretina — logo aj tlačidlá sú vždy
   na nepriehľadnom podklade.

   Gradient je v ::before, aby sa dal po odscrolovaní plynulo stlmiť cez
   opacity (background-image sa animovať nedá), viď sekciu 6b. z-index -1
   ho drží pod obsahom lišty — #hlavicka-lista má z-index 2, teda vlastný
   stacking context, takže ::before nepodlezie pod stránku. */
#hlavicka-lista::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image: linear-gradient(180deg,
		rgba(0, 0, 0, 1) 0,
		rgba(0, 0, 0, 1) 45%,
		rgba(0, 0, 0, .85) 70%,
		rgba(0, 0, 0, 0) 100%);
	pointer-events: none;
	transition: opacity .3s ease;
}

/* Hover piluliek: pozadie ostáva, mení sa farba textu a pribúda dvojitý
   prstenec (vnútorný vo farbe pozadia stránky, vonkajší akcentový).
   Prepisuje global class .btn, ktorá inak prepína pozadie na oranžové;
   obmedzené na lištu, aby ostatné tlačidlá ostali nedotknuté. */
#hlavicka-lista .btn {
	transition: color .2s ease, box-shadow .2s ease;
}

#hlavicka-lista .btn:hover,
#hlavicka-lista .btn:focus-visible {
	background-color: #1F1E22;
	color: #FFFFFF;
	box-shadow: 0 0 0 3px #16151A, 0 0 0 6px #FF6C4F;
	outline: none;
}

/* Tlačidlo prepína popis Menu ↔ Zavrieť; bez pevnej minimálnej šírky by sa
   pri otvorení rozšírilo a posunulo susedný prepínač jazyka. Dlhší popis
   meria 5,33 em (desktop) a 5,12 em (mobil), 5,5 em pokrýva oba breakpointy
   aj rozdiely v metrikách prehliadačov. Jednotka em drží väzbu na font-size
   z global class .btn. */
#menu-tlacidlo {
	min-width: 5.5em;
}

/* Po odscrolovaní sa logo zmenší o 20 %. Triedu .lista-zoscrolovana pridáva
   entia.js podľa polohy scrollu (lišta je fixná stále, takže „prilepenie“
   nie je čo detegovať).

   ⚠️ Zmenšuje `transform`, nie `width`. Šírku loga nastavuje Elementor
   lokálnym štýlom (173 px desktop, 120 px mobil) a prepisovať ju tu by
   znamenalo držať tie čísla na dvoch miestach — pri výmene loga v paneli by
   sa rozišli. `scale` navyše nevyvolá prepočet layoutu, takže sa pri prepnutí
   nehýbe nič okolo.

   Výška lišty sa nemení ani tak: určujú ju tlačidlá (76 px), nie logo (50 px).
   `transform-origin: left center` drží logo pri ľavej hrane; bez neho by sa
   sťahovalo do stredu svojho pôvodného rámu. */
#hlavicka-lista img {
	transform-origin: left center;
	transition: transform .3s cubic-bezier(.4, 0, .2, 1);
}

#hlavicka-lista.lista-zoscrolovana img {
	transform: scale(.8);
}

/* Tlačidlá EN a Menu sa zmenšia spolu s logom. Škáluje sa ich spoločný obal
   (.hstack), nie každé tlačidlo zvlášť — pri samostatnom scale by medzi nimi
   ostala pôvodná medzera. `transform-origin: right center` ich drží pri
   pravej hrane lišty, rovnako ako logo pri ľavej. */
#hlavicka-lista > .hstack {
	transform-origin: right center;
	transition: transform .3s cubic-bezier(.4, 0, .2, 1);
}

#hlavicka-lista.lista-zoscrolovana > .hstack {
	transform: scale(.8);
}

@media (prefers-reduced-motion: reduce) {
	#hlavicka-lista img,
	#hlavicka-lista > .hstack {
		transition: none;
	}
}

/* Na tablete boli pilulky v lište rovnako veľké ako na desktope (24 px, výška
   76 px), čo je na užšej lište neúmerné. Mobil má vlastné hodnoty z global
   class .btn (14 px), preto je toto obmedzené na tabletové pásmo.
   min-width tlačidla je v em, takže sa zmenší samo. */
@media (min-width: 768px) and (max-width: 1024px) {
	#hlavicka-lista .btn {
		font-size: 18px;
		padding: 14px 24px;
	}
}

/* ==========================================================================
   6b. Lišta po odscrolovaní — všetky šírky
   ========================================================================== */

/* Po odscrolovaní zmizne logo, prepínač jazyka aj gradient a ostane len
   okrúhle tlačidlo ☰. Stav nesie trieda .lista-zoscrolovana z hlavicka()
   v entia.js (prahy 80 / 40 px). Pôvodne len mobil (sekcia 12), na
   desktope a tablete lišta zaberala priveľa miesta.

   Gradient z global class .hlavicka sa vypína — nesie ho ::before
   (sekcia 6). */
#hlavicka-lista {
	background-image: none;
}

#hlavicka-lista img,
#hlavicka-lista > .hstack > .btn:not(#menu-tlacidlo) {
	transition: opacity .3s ease, transform .3s cubic-bezier(.4, 0, .2, 1), visibility 0s linear 0s;
}

#hlavicka-lista.lista-zoscrolovana::before {
	opacity: 0;
}

/* visibility sa prepne až po dobehnutí fade-u (oneskorenie .3s), aby
   skryté prvky nechytali kliky ani fokus z klávesnice. */
#hlavicka-lista.lista-zoscrolovana img,
#hlavicka-lista.lista-zoscrolovana > .hstack > .btn:not(#menu-tlacidlo) {
	opacity: 0;
	visibility: hidden;
	transition: opacity .3s ease, transform .3s cubic-bezier(.4, 0, .2, 1), visibility 0s linear .3s;
}

/* Priehľadná lišta ostáva nad obsahom v plnej výške — kliky musia prejsť
   do stránky, zachytáva ich len tlačidlo menu. Vypína sa to aj na fixnom
   obale šablóny; lišta a overlay menu (ten má vlastné pointer-events podľa
   stavu, sekcia 7) si ich zapínajú späť. */
.elementor-location-header {
	pointer-events: none;
}

#hlavicka-lista {
	pointer-events: auto;
}

#hlavicka-lista.lista-zoscrolovana {
	pointer-events: none;
}

#hlavicka-lista.lista-zoscrolovana #menu-tlacidlo {
	pointer-events: auto;
}

/* Otvorené menu: lišta sa vráti celá (logo, EN), aby menu nepôsobilo
   odlišne podľa toho, kde bola stránka odscrolovaná. */
body.menu-je-otvorene #hlavicka-lista.lista-zoscrolovana img,
body.menu-je-otvorene #hlavicka-lista.lista-zoscrolovana > .hstack > .btn:not(#menu-tlacidlo) {
	opacity: 1;
	visibility: visible;
	transition-delay: 0s;
}

body.menu-je-otvorene #hlavicka-lista.lista-zoscrolovana {
	pointer-events: auto;
}

/* Tlačidlo ☰: text „Menu“ sa neodstraňuje, len zneviditeľní — čítačky
   obrazovky ho ďalej ohlásia a entia.js ho prepína ako doteraz. Pri
   otvorenom menu sa vráti pilulka s textom „Zavrieť“ spolu s logom.

   Obal tlačidiel sa tu nezmenšuje (scale .8 zo sekcie 6), veľkosť kruhu
   určuje --ham (mobil 44 px = minimum pre dotyk). Selektor s dvoma ID
   prebije #hlavicka-lista .btn:hover, inak by text pri hoveri preblikol
   bielou; prstenec z hoveru ostáva a na kruhu sedí. */
#menu-tlacidlo {
	--ham: 44px;
	--ham-ikona: 20px;
}

@media (min-width: 768px) and (max-width: 1024px) {
	#menu-tlacidlo {
		--ham: 52px;
		--ham-ikona: 22px;
	}
}

/* Desktop: 72 / 26 px návrhu, škáluje sa s --s (sekcia 9b) ako pilulky. */
@media (min-width: 1025px) {
	#menu-tlacidlo {
		--ham: max(48px, calc(72 * var(--s, 1px)));
		--ham-ikona: max(20px, calc(26 * var(--s, 1px)));
	}
}

body:not(.menu-je-otvorene) #hlavicka-lista.lista-zoscrolovana > .hstack {
	transform: none;
}

body:not(.menu-je-otvorene) #hlavicka-lista.lista-zoscrolovana #menu-tlacidlo {
	position: relative;
	width: var(--ham);
	min-width: 0;
	height: var(--ham);
	padding: 0;
	border-radius: 50%;
	overflow: hidden;
	color: transparent;
}

body:not(.menu-je-otvorene) #hlavicka-lista.lista-zoscrolovana #menu-tlacidlo::after {
	content: "";
	position: absolute;
	inset: 0;
	margin: auto;
	width: var(--ham-ikona);
	height: var(--ham-ikona);
	background-color: #FFFFFF;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 6h18v2H3zM3 11h18v2H3zM3 16h18v2H3z'/%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'%3E%3Cpath d='M3 6h18v2H3zM3 11h18v2H3zM3 16h18v2H3z'/%3E%3C/svg%3E") center/contain no-repeat;
}

@media (prefers-reduced-motion: reduce) {
	#hlavicka-lista::before,
	#hlavicka-lista img,
	#hlavicka-lista > .hstack > .btn:not(#menu-tlacidlo) {
		transition: none;
	}
}

/* ==========================================================================
   7. Celoobrazovkové menu (šablóna 239)
   ========================================================================== */

/* Dva rovnaké stĺpce, odkazy v pravom, medzi nimi zvislá linka na celú výšku.
   Stav prepína trieda .menu-je-otvorene na <body> (entia.js).
   grid-template-rows:1fr je nutný — bez neho má riadok výšku obsahu a zvislá
   linka končí pri poslednej položke namiesto spodku obrazovky. */
#menu-overlay {
	position: fixed;
	inset: 0;
	z-index: 1;
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 1fr;
	column-gap: 40px;
	background-color: #1F1E22;
	padding: 160px 80px 80px;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity .35s ease, visibility .35s ease;
}

body.menu-je-otvorene #menu-overlay {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

body.menu-je-otvorene {
	overflow: hidden;
}

body.admin-bar #menu-overlay {
	inset-block-start: 32px;
}

@media (max-width: 782px) {
	body.admin-bar #menu-overlay {
		inset-block-start: 46px;
	}
}

/* Otváracia animácia (hodnoty prevzaté z referenčného návrhu):
     položky   translateY 105 % → 0, 1000 ms, cubic-bezier(.4,0,.2,1), delay 250 ms
     linky     transparent → rgba(255,255,255,.45), 500 ms, delay 500 ms
     mriežka   horizontálny protipohyb −60 px → 0, 1000 ms
   Linky sa prelínajú cez border-color, nie cez opacity — opacity by stmavila
   aj text v tom istom elemente. */
#menu-zoznam {
	grid-column: 2;
	display: flex;
	flex-direction: column;
	align-self: stretch;
	border-inline-start: 1px solid transparent;
	padding-inline-start: 32px;
	transform: translateX(-60px);
	transition: transform 1s cubic-bezier(.4, 0, .2, 1), border-color .5s ease;
}

body.menu-je-otvorene #menu-zoznam {
	transform: translateX(0);
	border-inline-start-color: rgba(255, 255, 255, .45);
	transition-delay: 0s, .5s;
}

/* Klipovacia schránka položky. Padding riadku patrí na <a>, nie sem — inak je
   schránka vyššia než text a pri translateY vyčnieva spod hrany prúžok písma. */
#menu-zoznam h2 {
	margin: 0;
	overflow: hidden;
	border-block-end: 1px solid transparent;
	transition: border-color .5s ease;
}

body.menu-je-otvorene #menu-zoznam h2 {
	border-block-end-color: rgba(255, 255, 255, .45);
	transition-delay: .5s;
}

/* Východisková poloha 105 %, nie 100 %: <h2> má 1 px spodný border, takže
   presné 100 % nechá pri subpixelovom zaokrúhlení presvitať okraj písma. */
#menu-zoznam h2 a {
	display: grid;
	grid-template-columns: 1em auto;
	column-gap: .5em;
	align-items: center;
	padding-block: .34em;
	color: #FFFFFF;
	text-decoration: none;
	transform: translateY(105%);
	transition: transform 1s cubic-bezier(.4, 0, .2, 1), color .25s ease;
}

body.menu-je-otvorene #menu-zoznam h2 a {
	transform: translateY(0);
	transition-delay: .25s, 0s;
}

/* Šípka je viditeľná stále a má vlastný stĺpec mriežky. Na hover sa otočí
   o −45° a ostáva biela; farbu mení len text. */
#menu-zoznam h2 a::before {
	content: "";
	width: 1em;
	height: 1em;
	background-color: #FFFFFF;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z'/%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'%3E%3Cpath d='M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z'/%3E%3C/svg%3E") center/contain no-repeat;
	transition: transform .25s ease;
}

#menu-zoznam h2 a:hover,
#menu-zoznam h2 a:focus-visible {
	color: #FF6C4F;
	outline: none;
}

#menu-zoznam h2 a:hover::before,
#menu-zoznam h2 a:focus-visible::before {
	transform: rotate(-45deg);
}

/* Pod tabletom jeden stĺpec, bez zvislej linky a bez protipohybu. */
@media (max-width: 1024px) {
	#menu-overlay {
		grid-template-columns: 1fr;
		padding: 120px 40px 60px;
	}

	#menu-zoznam {
		grid-column: 1;
		border-inline-start: 0;
		padding-inline-start: 0;
		transform: none;
	}
}

@media (max-width: 767px) {
	#menu-overlay {
		padding: 100px 20px 40px;
	}
}

@media (prefers-reduced-motion: reduce) {
	#menu-zoznam,
	#menu-zoznam h2 a {
		transform: none !important;
		transition: none;
	}

	#menu-zoznam h2 a::before {
		transition: none;
	}
}

/* Položky vykresľuje shortcode [entia_menu] (functions.php) z WordPress menu.
   Elementor obalí výstup shortcodu tromi divmi; display:contents ich vypúšťa
   z layoutu, takže <h2> ostávajú priamymi flex deťmi #menu-zoznam. */
#menu-zoznam .elementor-widget-shortcode,
#menu-zoznam .elementor-widget-container,
#menu-zoznam .elementor-shortcode,
#menu-zoznam .menu-nav {
	display: contents;
}

/* ==========================================================================
   8. Sticky nadpisy sekcií
   ========================================================================== */

/* Elementor drží oba stĺpce ako position:sticky s odsadením 80 px — nadpis tak
   zamrzol pri hornej hrane okna, kde sa opticky bil s logom v lište.
   66vh ho posunie do spodnej tretiny okna: mimo dosahu lišty a nezávisle od
   výšky obrazovky. Pod 768 px Elementor sticky vypína, tam sa nič nedeje.

   Hodnota je vo vh zámerne — v pixeloch by na nízkom notebooku skončil nadpis
   inde než na veľkom monitore. */
#sluzby-nadpis,
#referencie-nadpis,
#blok-filozofia-nadpis,
#blok-cesta-nadpis,
#blok-clovecina-nadpis {
	inset-block-start: 66vh;
}

/* ==========================================================================
   9. Plynulé škálovanie nad tabletom (notebooky)
   ==========================================================================

   Web bol navrhnutý na 1920 a Elementor má len tri breakpointy — medzi
   1025 px a 1920 px sa preto nemenilo nič a na 14" notebooku sa hero ani
   karty nezmestili do okna. Namiesto pridávania ďalšieho breakpointu
   škálujeme kľúčové rozmery plynulo cez clamp(); hodnoty sú nastavené tak,
   aby na 1920 vyšli presne pôvodné čísla z návrhu.

   ⚠️ Selektor začína `body` zámerne. Global classy Elementora sa emitujú ako
   `.elementor .txt-h2` (0,2,0) a style.css sa načítava skôr, takže pri
   rovnakej špecificite by prehral. `body` pridá (0,2,1) a pravidlo vyhrá.
   -------------------------------------------------------------------------- */

@media (min-width: 1025px) {

	/* Nadpisy sekcií: 100 px pri 1920, 67 px pri 1280. */
	body .elementor .txt-h2 {
		font-size: clamp(52px, 5.2vw, 100px);
	}

	/* Hero a položky menu. */
	body .elementor .txt-hero {
		font-size: clamp(38px, 3.35vw, 64px);
	}

	/* Odsadenie nadpisov od ľavej hrany obsahu (170 px pri 1920). */
	body .elementor .h2-odsadenie {
		margin-inline-start: clamp(0px, 8.85vw, 170px);
	}

	/* Hero sa musí zmestiť do okna celé. */
	#hero-sekcia {
		min-height: min(980px, 100vh);
		min-height: min(980px, 100svh);
	}

	/* Karta je na notebooku nižšia, takže aj blok s textom musí byť
	   kompaktnejší — inak vylezie z dolnej časti obrazu k tváram. */
	#tlmocenia .karta-foto {
		gap: clamp(20px, 3vh, 58px);
	}

	/* Pilulka na fotke — lokálne štýly ju držia na 48 px / 100 px pri 1920. */
	#tlmocenia .pill {
		min-height: clamp(64px, 5.2vw, 100px);
		padding-inline: clamp(40px, 4.7vw, 90px);
		font-size: clamp(28px, 2.5vw, 48px);
	}

	#tlmocenia .popis-fade {
		font-size: clamp(20px, 1.7vw, 32px);
	}
}

/* --------------------------------------------------------------------------
   9b. Ostatné písmo — úmerne šírke okna

   Pravidlá vyššie škálovali len nadpisy a pilulky; zvyšok textu (txt-h3,
   txt-lg, txt-md, txt-base, txt-karta, tlačidlá) ostával na hodnotách pre
   1920, takže na notebooku bol text voči nadpisom a stĺpcom neúmerne veľký.

   --s je „jeden pixel návrhu“: 1px pri 1920 a viac, 100vw/1920 pod tým
   (0,75px pri 1440, 0,667px pri 1280). Veľkosť = hodnota z Figmy × --s,
   takže pomer všetkých textov ostáva rovnaký ako na veľkom monitore.
   Drobný text má dolnú hranicu (max(…)), aby na 1025–1280 px ostal čitateľný.

   Elementy s lokálnou veľkosťou písma z Elementora (odseky v Predstavení,
   úvodzovka na O mne) majú vlastné pravidlo s ID — lokálna trieda by inak
   prebila škálovanie global classy, resp. naopak.
   -------------------------------------------------------------------------- */

:root {
	--s: 1px;
}

@media (min-width: 1025px) and (max-width: 1919px) {
	:root {
		--s: calc(100vw / 1920);
	}
}

@media (min-width: 1025px) {

	body .elementor .txt-h3    { font-size: calc(42 * var(--s)); }
	body .elementor .txt-lg    { font-size: calc(44 * var(--s)); }
	body .elementor .txt-karta { font-size: calc(31 * var(--s)); }
	body .elementor .txt-md    { font-size: max(18px, calc(32 * var(--s))); }
	body .elementor .txt-base  { font-size: max(16px, calc(24 * var(--s))); }
	body .elementor .btn       { font-size: max(16px, calc(24 * var(--s))); }

	/* Domov 02 — odseky majú lokálne 38 px namiesto 44 z txt-lg. */
	#predstavenie .txt-lg {
		font-size: calc(38 * var(--s));
	}

	/* Pätička — copyright má lokálne 18 px namiesto 24 z txt-base. */
	body .elementor-location-footer .txt-base {
		font-size: max(14px, calc(18 * var(--s)));
	}

	/* O mne 01 — úvodzovka sa od 27. 9. kreslí v sekcii 10 v em textu citátu,
	   škáluje sa s ním sama. */

	/* O mne — zbalený text = 5 riadkov txt-base (24 × 1,5), preto sa výška
	   aj prechod do tmy škálujú rovnako ako písmo. */
	/* `html` na začiatku: sekcia 11 má rovnaký selektor a je v súbore neskôr. */
	html body:not(.elementor-editor-active) .blok-zbalitelny [id$="-text"] {
		max-height: max(120px, calc(180 * var(--s)));
	}

	html body:not(.elementor-editor-active) .blok-zbalitelny [id$="-text"]::after {
		height: max(72px, calc(108 * var(--s)));
	}
}

/* ==========================================================================
   10. O mne (post 249) — 01 Citát
   ========================================================================== */

/* Citát leží priamo na fotke bez podkladu (od 24. 9.). Na desktope je text
   vľavo na tmavej časti portrétu, na tablete a mobile pod pásom s fotkou. */

/* Výrez portrétu. Fotku, rozmery a odsadenie nastavuje lokálny štýl sekcie
   v Elementore (panel Background); ten vie pozíciu zadať len kľúčovými slovami.
   #citat je selektor s ID (1,0,0), takže Elementoru (.elementor .e-… = 0,2,0)
   prepíše len pozíciu a všetko ostatné necháva v paneli.

   Portrét = Rasťova `profilovka.jpg` (príloha 392, 1800 × 1200, pomer 1,5)
   so zatmaveným ľavým okrajom pod citát. Odmerané na fotke (% rozmeru):

     tvár (stred)   x ~71 %
     temeno         y ~14 %
     brada          y ~35 %
     golier         y ~40 %

   Desktop: `cover` fituje (nad pomerom sekcie 1,5) podľa šírky, fotka sa
   ukotví hore a posunie o 40 px nadol, aby temeno vyšlo pod lištu aj na
   notebooku (1920: temeno na 218 px, 1440: 173 px; lišta 168 px). Pás
   40 px nad fotkou má farbu pozadia sekcie a leží pod nepriehľadnou
   časťou lišty. Pod pomerom 1,5 (1025–1260 px) fituje podľa výšky a 75 %
   drží tvár na ~70 % šírky — mimo citátu vľavo. */
#citat {
	background-position: 75% 40px;
}

/* Úvodzovka podľa Figmy (frame 4368:1493): hranatý tvar, ktorý leží POD
   prvým riadkom citátu — spodkom sedí na účarí prvého riadku a text ju
   prekrýva, citát je o jej ~2/3 odsadený doprava.

   Kreslí sa ako maska (SVG nižšie, obkreslené z Figmy, 78 × 70 pri
   písme 44 px), nie znakom z fontu — Ubuntu takú úvodzovku nemá a kvôli
   jednému znaku by sa načítaval ďalší font. Rozmery sú v em odseku, takže
   sa škáluje s písmom citátu na všetkých šírkach (sekcia 9b aj mobil).

   Pôvodný nadpis „““ z Elementora sa skrýva — ako h2 bol navyše
   sémanticky nesprávny (čítačka hlásila nadpis „ľavá úvodzovka“).
   Farba je preto tu, nie v paneli.

   Účarie prvého riadku: (line-height − 1,121em) / 2 + 0,932em (metriky
   Ubuntu), pri line-height 1,3 = 1,02em. Výška úvodzovky 1,59em →
   horná hrana −0,57em. */
#citat-text h2 {
	display: none;
}

#citat-text .txt-lg {
	position: relative;
	z-index: 0;
	padding-inline-start: 1.16em;
}

#citat-text .txt-lg::before {
	content: "";
	position: absolute;
	z-index: -1;
	inset-inline-start: 0;
	inset-block-start: -.57em;
	width: 1.77em;
	height: 1.59em;
	background-color: #FF6C4F;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 78 70'%3E%3Cpath d='M32 0V12C20 13 13 20 13 38V40H32V70H0V40C0 15 14 2 32 0ZM78 0V12C66 13 59 20 59 38V40H78V70H46V40C46 15 60 2 78 0Z'/%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 78 70'%3E%3Cpath d='M32 0V12C20 13 13 20 13 38V40H32V70H0V40C0 15 14 2 32 0ZM78 0V12C66 13 59 20 59 38V40H78V70H46V40C46 15 60 2 78 0Z'/%3E%3C/svg%3E") center/contain no-repeat;
	pointer-events: none;
}

/* Na tablete a mobile začína citát hneď pod pásom s fotkou. Úvodzovka
   presahuje nad odsek o 0,57em a bez tohto odsadenia by sa dotýkala
   košele na spodku fotky. */
@media (max-width: 1024px) {
	#citat-text .txt-lg {
		margin-block-start: .57em;
	}
}

/* --------------------------------------------------------------------------
   Tablet a mobil — fotka ako pás nad citátom.

   Pod 1025 px zaberie citát väčšinu šírky, takže sa s postavou nemôže
   minúť do strany. Fotka sa zmenší na pás výšky B (vo vw, aby držal pomer),
   ukotví sa k pravej hrane (tvár tak vyjde blízko stredu) a citát začína
   pod golierom. Od brady nadol fotku prekryje ::before prechodom do farby
   sekcie a pod ním je už plná tma — košeľa nesmie ležať pod textom.

                         tablet            mobil
     pás B               100 vw            120 vw
     šírka fotky         150 vw            180 vw
     tvár x (pos 100 %)  56 % šírky        48 % šírky
     posun y0            30 px             40 px
     temeno              y0 + 14 vw        y0 + 17 vw
     brada               y0 + 35 vw        y0 + 42 vw
     prechod do tmy      y0 + 36 → 48 vw   y0 + 44 → 58 vw
     začiatok citátu     y0 + 46 vw        y0 + 56 vw

   y0 posúva temeno pod lištu (tablet 135 px, mobil 105 px); pás nad fotkou
   je pod nepriehľadnou časťou lišty.
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
	#citat {
		position: relative;
		background-size: auto 100vw;
		background-position: 100% 30px;
		padding-block-start: calc(30px + 46vw);
	}

	#citat::before {
		content: "";
		position: absolute;
		inset-inline: 0;
		inset-block-start: calc(30px + 36vw);
		inset-block-end: 0;
		background-image: linear-gradient(180deg, rgba(22, 21, 26, 0) 0, #16151A 12vw);
		pointer-events: none;
	}

	#citat > * {
		position: relative;
		z-index: 1;
	}
}

@media (max-width: 767px) {
	#citat {
		justify-content: flex-end;
		background-size: auto 120vw;
		background-position: 100% 40px;
		padding-block-start: calc(40px + 56vw);
	}

	#citat::before {
		inset-block-start: calc(40px + 44vw);
		background-image: linear-gradient(180deg, rgba(22, 21, 26, 0) 0, #16151A 14vw);
	}
}

/* ==========================================================================
   11. O mne (post 249) — bloky Filozofia / Cesta / Človečina
   ==========================================================================

   Layout preberá sekciu Služby z Domova: nadpis vľavo (53 %, sticky), obsah
   vpravo (47 %), bloky oddelené linkou #1F1E22. Sticky odsadenie 66vh je
   v sekcii 8 spolu so Službami a Referenciami.

   Každý blok má rovnakú sadu _cssid (sekcia, riadok, nadpis, obsah, text,
   viac), preto sa pravidlá viažu na ID — global classy by pri rovnakej
   špecificite prehrali (style.css sa načítava skôr).

   Zbaľovanie: po načítaní entia.js pridá sekcii triedu .blok-zbalitelny
   a text sa oreže na ~5 riadkov s prechodom do tmy. Tlačidlo „Viac“ ho
   rozbalí (profilRozbal() v entia.js). Bez JS je text celý a tlačidlo skryté.
   V editore Elementora sa nezbaľuje nič.
   -------------------------------------------------------------------------- */

#uvod {
	align-items: center;
}

#uvod h1 {
	max-width: 1500px;
	text-wrap: balance;
}

/* Akcent v nadpise je <strong>, nie <span id="akcent-…">: sanitizér
   Elementora id na <span> pri renderovaní zahodí (sekcia 1 preto nezaberá). */
#uvod h1 strong {
	color: #FF6C4F;
	font-weight: inherit;
}

#blok-filozofia,
#blok-cesta,
#blok-clovecina {
	padding-block: 0;
}

#blok-filozofia-riadok,
#blok-cesta-riadok,
#blok-clovecina-riadok {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	gap: 0;
	width: 100%;
	padding: 80px 0;
	border-block-end: 2px solid #1F1E22;
}

#blok-filozofia-nadpis,
#blok-cesta-nadpis,
#blok-clovecina-nadpis {
	position: sticky;
	align-self: flex-start;
	width: 53%;
	padding: 0;
}

#blok-filozofia-obsah,
#blok-cesta-obsah,
#blok-clovecina-obsah {
	width: 47%;
	padding: 0;
	gap: 40px;
}

#blok-filozofia-text,
#blok-cesta-text,
#blok-clovecina-text {
	position: relative;
	padding: 0;
	gap: 24px;
}

/* Podnadpisy v Moja cesta (Verejná správa, Biznis, …) — väčší odstup od
   predchádzajúceho odseku, aby bolo vidno, kde začína téma. */
#blok-cesta-text h4 {
	margin-block-start: 16px;
}

/* Zvýraznené vety a odkazy v texte. */
#blok-filozofia-text strong,
#blok-cesta-text strong,
#blok-clovecina-text strong {
	color: #FFFFFF;
	font-weight: 500;
}

#blok-clovecina-text a,
#profil-kontakt a {
	color: #FF6C4F;
	text-decoration: none;
	transition: color .2s ease;
}

#blok-clovecina-text a:hover,
#blok-clovecina-text a:focus-visible,
#profil-kontakt a:hover,
#profil-kontakt a:focus-visible {
	text-decoration: underline;
	text-underline-offset: .15em;
}

/* Tlačidlo Viac / Menej. Skryté, kým nie je JS (bez neho je text celý). */
#blok-filozofia-viac,
#blok-cesta-viac,
#blok-clovecina-viac {
	display: none;
	align-self: flex-start;
	gap: 12px;
	margin-block-start: -8px;
}

.blok-zbalitelny #blok-filozofia-viac,
.blok-zbalitelny #blok-cesta-viac,
.blok-zbalitelny #blok-clovecina-viac {
	display: inline-flex;
}

/* Šípka rovnaká ako v Špecializácii na Domove: zatvorené ↘, otvorené ↗.
   Kým je blok zbalený, jemne pulzuje smerom nadol. */
#blok-filozofia-viac::after,
#blok-cesta-viac::after,
#blok-clovecina-viac::after {
	content: "";
	flex: 0 0 auto;
	width: 1em;
	height: 1em;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 7h10v10h-2.2V10.8L7.9 17.6 6.4 16.1 13.2 9.2H7V7z'/%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'%3E%3Cpath d='M7 7h10v10h-2.2V10.8L7.9 17.6 6.4 16.1 13.2 9.2H7V7z'/%3E%3C/svg%3E") center/contain no-repeat;
	transform: rotate(90deg);
	transition: transform .35s cubic-bezier(.4, 0, .2, 1);
	animation: blok-sipka 1.6s ease-in-out infinite;
}

.blok-otvoreny #blok-filozofia-viac::after,
.blok-otvoreny #blok-cesta-viac::after,
.blok-otvoreny #blok-clovecina-viac::after {
	transform: rotate(0deg);
	animation: none;
}

@keyframes blok-sipka {
	0%, 100% { transform: rotate(90deg) translate(0, 0); }
	50%      { transform: rotate(90deg) translate(3px, -3px); }
}

/* Zbalený stav. Výška = 5 riadkov txt-base (24 px × 1,5). Prechod do tmy
   nesie ::after, aby sa text neorezal natvrdo uprostred riadku. */
body:not(.elementor-editor-active) .blok-zbalitelny [id$="-text"] {
	overflow: hidden;
	max-height: 180px;
	transition: max-height .6s cubic-bezier(.4, 0, .2, 1);
}

body:not(.elementor-editor-active) .blok-zbalitelny [id$="-text"]::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	inset-block-end: 0;
	height: 108px;
	background-image: linear-gradient(180deg, rgba(22, 21, 26, 0) 0, #16151A 100%);
	pointer-events: none;
	transition: opacity .4s ease;
}

body:not(.elementor-editor-active) .blok-otvoreny [id$="-text"]::after {
	opacity: 0;
}

/* Klik na podnadpis tiež rozbaľuje (JS). */
.blok-zbalitelny [id$="-obsah"] > .e-heading-base,
.blok-zbalitelny [id$="-obsah"] > h3 {
	cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {
	body:not(.elementor-editor-active) .blok-zbalitelny [id$="-text"],
	body:not(.elementor-editor-active) .blok-zbalitelny [id$="-text"]::after,
	#blok-filozofia-viac::after,
	#blok-cesta-viac::after,
	#blok-clovecina-viac::after {
		transition: none;
		animation: none;
	}
}

/* Záverečná výzva. */
#profil-kontakt {
	align-items: center;
	gap: 24px;
}

@media (max-width: 1024px) {
	#blok-filozofia-riadok,
	#blok-cesta-riadok,
	#blok-clovecina-riadok {
		padding-block: 60px;
	}

	#blok-filozofia-nadpis,
	#blok-cesta-nadpis,
	#blok-clovecina-nadpis {
		width: 44%;
		padding-inline-end: 24px;
	}

	#blok-filozofia-obsah,
	#blok-cesta-obsah,
	#blok-clovecina-obsah {
		width: 56%;
		gap: 32px;
	}
}

@media (max-width: 767px) {
	#blok-filozofia-riadok,
	#blok-cesta-riadok,
	#blok-clovecina-riadok {
		flex-direction: column;
		gap: 24px;
		padding-block: 40px;
	}

	#blok-filozofia-nadpis,
	#blok-cesta-nadpis,
	#blok-clovecina-nadpis {
		position: static;
		width: 100%;
		padding-inline-end: 0;
	}

	#blok-filozofia-obsah,
	#blok-cesta-obsah,
	#blok-clovecina-obsah {
		width: 100%;
		gap: 24px;
	}

	#blok-filozofia-text,
	#blok-cesta-text,
	#blok-clovecina-text {
		gap: 18px;
	}

	/* 5 riadkov txt-base na mobile (18 px × 1,5). */
	body:not(.elementor-editor-active) .blok-zbalitelny [id$="-text"] {
		max-height: 135px;
	}

	body:not(.elementor-editor-active) .blok-zbalitelny [id$="-text"]::after {
		height: 81px;
	}
}

/* ==========================================================================
   12. Mobil na výšku (do 767 px) — pripomienky 24. 9.
   ========================================================================== */

@media (max-width: 767px) {

	/* Lišta po odscrolovaní (len ☰) platí od 27. 9. pre všetky šírky —
	   sekcia 6b. */

	/* Domov 01 — úvod na celú výšku okna: pri otvorení je vidno len čiernu
	   plochu a text, fotka zo sekcie 02 (tvár) prichádza až po odscrolovaní.
	   svh = výška okna so zobrazenou lištou prehliadača, takže sa výška
	   pri skrolovaní nemení (vh ako záloha pre staršie prehliadače). */
	#hero-sekcia {
		min-height: 100vh;
		min-height: 100svh;
	}

	/* Text úvodu hneď pod lištou (Michal 27. 9.), nie pri spodku okna —
	   medzera logo → text bola ~280 px. 150 px = lišta (105) + 45 px
	   vzduchu. Výška sekcie ostáva 100svh, fotka zo sekcie 02 teda stále
	   príde až po odscrolovaní. */
	#hero-sekcia {
		justify-content: flex-start;
		padding-block-start: 150px;
	}

	/* Domov 03 — Fotky tlmočení: štvorcové karty so štvorcovými fotkami.
	   Fotky sú v Elementore ako pozadie karty len pre mobil (lokálny štýl,
	   variant „mobile“, prílohy 376–381 …), takže sa menia v paneli. JS ich
	   pri načítaní prečíta do --foto rovnako ako fotky na šírku.

	   Pri 1 : 1 by vrstva s paralaxom (126 % výšky + posun) fotku zväčšila
	   a znova orezala boky — presne to, čo štvorce riešia. Na mobile preto
	   vrstva kryje kartu presne, bez posunu; pohyb nesie len jemný zoom
	   1,00 → 1,06 a nábeh z tmy. Výrez na začiatku = orez z fotky. */
	#tlmocenia .karta-foto {
		min-height: 0;
		aspect-ratio: 1 / 1;
	}

	#tlmocenia .karta-foto.paralax::before {
		inset-block-start: 0;
		height: 100%;
		background-position: center center;
		transform: scale(calc(1 + var(--pos, 0) * 0.06));
	}

	/* Konferencie majú na desktope vlastný výrez (auto 135 %, center top);
	   štvorec je už orezaný, preto späť na cover. */
	#tlmocenia #karta-konferencie.paralax::before {
		background-size: cover;
		background-position: center center;
	}

	/* Domov 05 — Špecializácia: menšie medzery a nižšie karty, aby sa ich
	   naraz zmestilo viac (14 → 6 px, padding 24 → 16 px). */
	#specializacia-mriezka {
		gap: 6px;
	}

	#specializacia .karta {
		padding-block: 16px;
	}

	/* Domov 08 — Kontakt: e-mail a telefón k pravému okraju. */
	#kontakt h3.txt-accent,
	#contact h3.txt-accent {
		align-self: flex-end;
		text-align: end;
	}

	/* Domov 07 — Logá klientov: menšie guličky navigácie (16 → 10 px,
	   rozostup 12 → 10 px, odsadenie 40 → 24 px). 16 px nastavuje
	   vlastné CSS widgetu c124bbc (0,4,0) — ID sekcie ho prebije. */
	#klienti .swiper-pagination-bullet {
		width: 10px;
		height: 10px;
		margin: 0 5px;
	}

	#klienti .swiper-pagination {
		margin-top: 24px;
	}
}

@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
	#hlavicka-lista::before,
	#hlavicka-lista img,
	#hlavicka-lista > .hstack > .btn {
		transition: none;
	}
}

/* ==========================================================================
   13. Ochrana osobných údajov (post 397)
   ==========================================================================

   Klasický kontajner #gdpr + Heading (h1) + Text Editor #gdpr-text, aby sa
   právny text dal upravovať bežným editorom (nadpisy, zoznamy, odkazy).
   Typografiu kitu (H1–H3 100 / 75 / 57 px) tu zmenšujeme na mierku
   čitateľného textu; veľkosti násobí --s (sekcia 9b) ako zvyšok webu.
   Horný padding drží nadpis pod fixnou lištou. */
#gdpr {
	padding-block: 220px 140px;
	padding-inline: 40px;
}

#gdpr > .e-con-inner {
	max-width: 1000px;
	gap: 48px;
}

/* Kontajner centruje deti (align-items: center) — nadpis by bol užší
   a posunutý oproti textu. */
#gdpr > .e-con-inner > .elementor-widget {
	align-self: stretch;
	width: 100%;
}

#gdpr h1 {
	text-align: start;
	font-size: max(40px, calc(72 * var(--s, 1px)));
	font-weight: 500;
	line-height: 1.1;
}

#gdpr-text p,
#gdpr-text li {
	font-size: max(16px, calc(22 * var(--s, 1px)));
	line-height: 1.6;
	color: rgba(255, 255, 255, .85);
}

#gdpr-text p {
	margin-block: 0 1em;
}

#gdpr-text h2 {
	margin-block: 2.2em .8em;
	font-size: max(24px, calc(40 * var(--s, 1px)));
	font-weight: 500;
	line-height: 1.2;
}

#gdpr-text h3 {
	margin-block: 1.6em .6em;
	font-size: max(19px, calc(28 * var(--s, 1px)));
	font-weight: 500;
	line-height: 1.3;
	color: #FF6C4F;
}

#gdpr-text ul {
	margin-block: 0 1.2em;
	padding-inline-start: 1.2em;
}

#gdpr-text li + li {
	margin-block-start: .4em;
}

#gdpr-text strong {
	color: #FFFFFF;
	font-weight: 500;
}

#gdpr-text a {
	color: #FF6C4F;
	text-decoration: underline;
	text-underline-offset: .15em;
}

#gdpr-text a:hover,
#gdpr-text a:focus-visible {
	color: #FFFFFF;
}

#gdpr-text .gdpr-ucinnost {
	margin-block-start: 3em;
	font-size: max(14px, calc(18 * var(--s, 1px)));
	color: rgba(255, 255, 255, .55);
}

/* Pod 1025 px je --s = 1px (sekcia 9b), veľkosti treba zadať priamo. */
@media (max-width: 1024px) {
	#gdpr {
		padding-block: 180px 100px;
	}

	#gdpr h1            { font-size: 52px; }
	#gdpr-text h2       { font-size: 30px; }
	#gdpr-text h3       { font-size: 22px; }
	#gdpr-text p,
	#gdpr-text li       { font-size: 18px; }
}

@media (max-width: 767px) {
	#gdpr {
		padding-block: 140px 80px;
		padding-inline: 20px;
	}

	#gdpr > .e-con-inner {
		gap: 32px;
	}

	#gdpr h1            { font-size: 36px; }
	#gdpr-text h2       { font-size: 25px; }
	#gdpr-text h3       { font-size: 20px; }
	#gdpr-text p,
	#gdpr-text li       { font-size: 16px; }
	#gdpr-text .gdpr-ucinnost { font-size: 14px; }
}

/* Pätička — odkaz na Ochranu osobných údajov v nadpise 50e8762 (šablóna 241).
   Elementor dáva odkazom v atomic nadpisoch `all: unset`, preto ho treba
   označiť aspoň pri hoveri a fokuse. */
.elementor-location-footer .e-heading-base a {
	cursor: pointer;
	transition: color .2s ease;
}

.elementor-location-footer .e-heading-base a:hover,
.elementor-location-footer .e-heading-base a:focus-visible {
	color: #FF6C4F;
	text-decoration: underline;
	text-underline-offset: .15em;
}

/* ==========================================================================
   14. Dočasne skryté sekcie
   ==========================================================================

   Domov 07 — Logá klientov (#klienti, element 643efde): skryté do dodania
   reálnych log (27. 9. 2026). Sekcia ostala v Elementore nedotknutá;
   na obnovenie stačí zmazať toto pravidlo. V editore je viditeľná. */
body:not(.elementor-editor-active) #klienti {
	display: none;
}
