/* pohyb.css – GSAP animace webu Majordo. Základ: pojistka, tisk, omezený pohyb.
   Bloky animací níž, každý pod html:not(.mj-vyp-<id>), vlastnosti předané GSAP pod html.mj-bezi:not(.mj-vyp-<id>). */

/* Třetí pojistka předem skrytého úvodu (H1, M1): po 3 s vždy vidět, i kdyby pohyb.js zamrzl */
@keyframes mj-pojistka { to { visibility: visible; } }

/* Tisk ukáže vše, co čeká na vynoření (beforeprint v pohyb.js totéž dělá skriptem) */
@media print {
  [data-mj-skryto] { opacity: 1 !important; visibility: visible !important; transform: none !important; clip-path: none !important; }
  :is(.paragraph--type--hero, .paragraph--type--hero-homepage) > .field--name-field-text > * { visibility: visible !important; }
}

/* Omezený pohyb: skok na kotvu bez animace. !important kvůli inline scroll-behavior, který na <html> nechává ScrollTrigger. */
@media (prefers-reduced-motion: reduce) {
  html:not(.mj-bez) { scroll-behavior: auto !important; }
}

/* ================= BLOKY ANIMACÍ (pořadí podle SPECIFIKACE; každý pod html:not(.mj-vyp-<id>)) ================= */

/* ===== G1: menu – panel přijede, odkazy naskočí po něm, zavření obráceně ===== */
@keyframes mj-menu-li { from { opacity: 0; transform: translateY(10px); } }
@keyframes mj-menu-li-ven { to { opacity: 0; } }
@media (prefers-reduced-motion: no-preference) {
  /* panel a rozmazání: stejná dráha (top), jen klidná křivka mj-vstup */
  html:not(.mj-vyp-g1) .region-header::before,
  html:not(.mj-vyp-g1) .region-header::after { transition: top .35s cubic-bezier(.22,1,.36,1); }
  /* odkazy (li, nikdy <a>) od 0,15 s po 0,025 s; poslední dosedne v 0,575 s */
  html:not(.mj-vyp-g1) body.mobile-menu-expanded:not(.mj-menu-zavira) .region-header nav.menu--main ul.menu > li { animation: mj-menu-li .25s cubic-bezier(.22,1,.36,1) .15s both; }
  html:not(.mj-vyp-g1) body.mobile-menu-expanded:not(.mj-menu-zavira) .region-header nav.menu--main ul.menu > li:nth-child(2) { animation-delay: .175s; }
  html:not(.mj-vyp-g1) body.mobile-menu-expanded:not(.mj-menu-zavira) .region-header nav.menu--main ul.menu > li:nth-child(3) { animation-delay: .2s; }
  html:not(.mj-vyp-g1) body.mobile-menu-expanded:not(.mj-menu-zavira) .region-header nav.menu--main ul.menu > li:nth-child(4) { animation-delay: .225s; }
  html:not(.mj-vyp-g1) body.mobile-menu-expanded:not(.mj-menu-zavira) .region-header nav.menu--main ul.menu > li:nth-child(5) { animation-delay: .25s; }
  html:not(.mj-vyp-g1) body.mobile-menu-expanded:not(.mj-menu-zavira) .region-header nav.menu--main ul.menu > li:nth-child(6) { animation-delay: .275s; }
  html:not(.mj-vyp-g1) body.mobile-menu-expanded:not(.mj-menu-zavira) .region-header nav.menu--main ul.menu > li:nth-child(7) { animation-delay: .3s; }
  html:not(.mj-vyp-g1) body.mobile-menu-expanded:not(.mj-menu-zavira) .region-header nav.menu--main ul.menu > li:nth-child(8) { animation-delay: .325s; }
  /* zavírání obráceně (JS drží mobile-menu-expanded 450 ms + mj-menu-zavira): odkazy zmizí za 0,1 s,
     panel vyrazí až po nich (zpoždění 0,1 s + 0,35 s) */
  html:not(.mj-vyp-g1) body.mobile-menu-expanded.mj-menu-zavira .region-header::before,
  html:not(.mj-vyp-g1) body.mobile-menu-expanded.mj-menu-zavira .region-header::after { top: -120vh; transition: top .35s cubic-bezier(.4,0,.2,1) .1s; }
  html:not(.mj-vyp-g1) body.mobile-menu-expanded.mj-menu-zavira .region-header nav.menu--main ul.menu > li { animation: mj-menu-li-ven .1s ease-out both; }
}
/* hamburger se při zavírání vrací hned (hodnoty zavřeného stavu z inline stylu) */
html:not(.mj-vyp-g1) body.mobile-menu-expanded.mj-menu-zavira a#mobile-menu-button span { transform: none; transition-delay: 0s; transition-timing-function: cubic-bezier(.55,.055,.675,.19); background: #fff; }
html:not(.mj-vyp-g1) body.mobile-menu-expanded.mj-menu-zavira a#mobile-menu-button span::before { top: -8px; opacity: 1; background: #fff; transition: top .1s .34s ease-in, opacity .1s ease-in, background-color .15s ease; }
html:not(.mj-vyp-g1) body.mobile-menu-expanded.mj-menu-zavira a#mobile-menu-button span::after { bottom: -8px; transform: none; background: #fff; transition: bottom .1s .34s ease-in, transform .3s cubic-bezier(.55,.055,.675,.19), background-color .15s ease; }
html:not(.mj-vyp-g1) body.mobile-menu-expanded.mj-menu-zavira a#mobile-menu-button::before { display: none; }
/* omezený pohyb: menu se jen přepne (panel nesjíždí, hamburger se neotáčí) */
@media (prefers-reduced-motion: reduce) {
  html:not(.mj-vyp-g1) .region-header::before,
  html:not(.mj-vyp-g1) .region-header::after,
  html:not(.mj-vyp-g1) a#mobile-menu-button span,
  html:not(.mj-vyp-g1) a#mobile-menu-button span::before,
  html:not(.mj-vyp-g1) a#mobile-menu-button span::after { transition: none !important; }
}

/* ===== G2: šipka v tlačítku, karty služeb na úvodní stránce ===== */
/* Odeslat: barvy se přelijí plynule i na dotyku a při omezeném pohybu (dnes skokem) */
html:not(.mj-vyp-g2) .form-actions input.button { transition: background-color .25s, color .25s, background-position .25s; }
@media (prefers-reduced-motion: no-preference) {
  html:not(.mj-vyp-g2) :is(.paragraph--type--slider,.paragraph--type--pas-fotek) :is(.swiper-button-prev,.swiper-button-next) { transition: background-color .25s; }
  html:not(.mj-vyp-g2) body.front .paragraph .paragraph.paragraph--type--polozka-dlazdice.bez-fotky { transition: transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s ease; }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  /* všechny varianty hoveru vracejí šipku na 20px – jedna vlastnost je přebije (přechod dává a{transition}) */
  html:not(.mj-vyp-g2) :is(a.button, .form-actions input.button):is(:hover, :focus-visible) { background-position: 24px center !important; }
  html:not(.mj-vyp-g2) :is(.paragraph--type--projekty,.paragraph--type--pas-fotek) > .field--name-field-odkaz a:hover { background-position: 4px center; }
  /* jediné nadzvednutí karty: tři služby na úvodní stránce (celé jsou odkaz) */
  html:not(.mj-vyp-g2) body.front .paragraph .paragraph.paragraph--type--polozka-dlazdice.bez-fotky:is(:hover, :has(a:focus-visible)) { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(45,30,40,.08); }
}

/* ===== G3: rámeček pro klávesnici, aktivní pole formuláře (není to pohyb → i při omezeném) ===== */
html:not(.mj-vyp-g3) :focus-visible { outline: 2px solid #2D1E28; outline-offset: 3px; }
/* na tmavých plochách žlutý */
html:not(.mj-vyp-g3) :is(header, footer, .paragraph--type--hero, .paragraph--type--hero-homepage, .paragraph--type--cesty) :focus-visible { outline-color: #FAE600; }
/* na žlutém panelu menu zase tmavý */
html:not(.mj-vyp-g3) body.mobile-menu-expanded .region-header nav :focus-visible { outline-color: #2D1E28; }
/* logo: rámeček dostane obrázek */
html:not(.mj-vyp-g3) header a.site-logo:focus-visible { outline: none; }
html:not(.mj-vyp-g3) header a.site-logo:focus-visible > img { outline: 2px solid #FAE600; outline-offset: 3px; }
/* hamburger: rámeček jen kolem ikonky; při otevřeném menu kolem „zavřít“ i křížku a tmavý */
html:not(.mj-vyp-g3) a#mobile-menu-button:focus-visible { outline: none; }
html:not(.mj-vyp-g3) a#mobile-menu-button:focus-visible::after {
  content: ""; position: absolute; left: 10px; right: 10px; top: 29px; bottom: 29px;
  border: 2px solid #FAE600; border-radius: 6px; pointer-events: none;
}
html:not(.mj-vyp-g3) body.mobile-menu-expanded:not(.mj-menu-zavira) a#mobile-menu-button:focus-visible::after { left: -40px; right: 13px; border-color: #2D1E28; }
/* odkaz v běžném textu (i atribuce mapy): rámeček přiléhá k písmu */
html:not(.mj-vyp-g3) :is(p, .leaflet-control-attribution) a:not(.button):focus-visible { outline-offset: 0; border-radius: 2px; }
/* ořezávající obaly: posuvník referencí → rámeček dovnitř; nabídky práce → přesah jen po dobu fokusu */
html:not(.mj-vyp-g3) .swiper a:focus-visible { outline-offset: -2px; }
html:not(.mj-vyp-g3) .paragraph--type--pozice details:has(> summary:focus-visible) { overflow-clip-margin: 6px; }
/* výjimky: tým má vlastní rámeček přes celou osobu; pole formuláře dostane rámeček na bílý box */
html:not(.mj-vyp-g3) .tym .tym__email:focus-visible { outline: none; }
html:not(.mj-vyp-g3) :is(.paragraph--type--formular, .paragraph--type--overlayformular) form .form-item:is(.form-type-textfield, .form-type-tel, .form-type-email, .form-type-textarea, .form-type-file) :is(input, textarea, select):focus-visible { outline: none; }
html:not(.mj-vyp-g3) :is(.paragraph--type--formular, .paragraph--type--overlayformular) form .form-item:is(.form-type-textfield, .form-type-tel, .form-type-email, .form-type-textarea, .form-type-file):focus-within {
  box-shadow: 0 0 0 2px #2D1E28; transition: box-shadow .2s ease;
}
html:not(.mj-vyp-g3) :is(.paragraph--type--formular, .paragraph--type--overlayformular) form .form-item:is(.form-type-textfield, .form-type-tel, .form-type-email, .form-type-textarea, .form-type-file):focus-within label { color: #2D1E28; }

/* ===== G4: celá karta projektu / reference je odkaz, fotka se lehce přiblíží (úvodní stránka, Další příběhy v příbězích domů) ===== */
html:not(.mj-vyp-g4) :is(body.front, body.pribeh-starobrnenska, body.pribeh-hlinky, body.pribeh-zahradnicka) .paragraph--type--projekty .paragraph--type--polozka-projektu,
html:not(.mj-vyp-g4) .paragraph--type--slider .paragraph--type--polozka-slideru { position: relative; }
/* natažený odkaz „Celý příběh“ přes celou kartu (stejný vzor jako tlačítka dlaždic) */
html:not(.mj-vyp-g4) :is(body.front, body.pribeh-starobrnenska, body.pribeh-hlinky, body.pribeh-zahradnicka) .paragraph--type--projekty .paragraph--type--polozka-projektu .field--name-field-odkaz a::before,
html:not(.mj-vyp-g4) .paragraph--type--slider .paragraph--type--polozka-slideru .field--name-field-odkaz a::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
}
/* zaoblení přechází z img na obal, aby přiblížení nevylezlo z rohů */
html:not(.mj-vyp-g4) :is(body.front, body.pribeh-starobrnenska, body.pribeh-hlinky, body.pribeh-zahradnicka) .paragraph--type--projekty .paragraph--type--polozka-projektu .field--name-field-obrazek,
html:not(.mj-vyp-g4) .paragraph--type--slider .paragraph--type--polozka-slideru .field--name-field-obrazek { overflow: hidden; border-radius: 8px; }
@media (prefers-reduced-motion: no-preference) {
  html:not(.mj-vyp-g4) :is(body.front, body.pribeh-starobrnenska, body.pribeh-hlinky, body.pribeh-zahradnicka) .paragraph--type--projekty .paragraph--type--polozka-projektu .field--name-field-obrazek img,
  html:not(.mj-vyp-g4) .paragraph--type--slider .paragraph--type--polozka-slideru .field--name-field-obrazek img { transition: transform .5s cubic-bezier(.22,1,.36,1); }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  html:not(.mj-vyp-g4) :is(body.front, body.pribeh-starobrnenska, body.pribeh-hlinky, body.pribeh-zahradnicka) .paragraph--type--projekty .paragraph--type--polozka-projektu:is(:hover, :has(a:focus-visible)) .field--name-field-obrazek img,
  html:not(.mj-vyp-g4) .paragraph--type--slider .paragraph--type--polozka-slideru:is(:hover, :has(a:focus-visible)) .field--name-field-obrazek img { transform: scale(1.04); }
}

/* ===== H1: hlavní nadpis vyjede po řádcích ===== */
/* úvodní text skrytý do startu úvodu (jen když pohyb běží); třetí pojistka po 3 s */
html.mj-pohyb:not(.mj-uvod):not(.mj-vyp-h1) :is(.paragraph--type--hero,.paragraph--type--hero-homepage) > .field--name-field-text > * { visibility: hidden; animation: mj-pojistka 0s 3s forwards; }
/* maska řádku s odsazením, aby se neořízly háčky nad verzálkami a dolní dotahy */
html:not(.mj-vyp-h1) :is(.paragraph--type--hero,.paragraph--type--hero-homepage) h1 > .mj-h1-radek-mask { padding: .1em 0 .15em; margin: -.1em 0 -.15em; }
/* po dobu dělení je h1 flex sloupec, záporné okraje masek se neslučují a výška nadpisu zůstane přesně původní */
html:not(.mj-vyp-h1) :is(.paragraph--type--hero,.paragraph--type--hero-homepage) h1:has(> .mj-h1-radek-mask) { display: flex; flex-direction: column; }
/* tisk během úvodu ukáže vše */
@media print {
  :is(.paragraph--type--hero,.paragraph--type--hero-homepage) > .field--name-field-text > *,
  :is(.paragraph--type--hero,.paragraph--type--hero-homepage) h1 .mj-h1-radek { visibility: visible !important; opacity: 1 !important; transform: none !important; }
}

/* ===== H2: žlutá fráze v nadpisu se dobarví jako poslední ===== */
/* barvu fráze nese proměnná na h1; bez ní platí původní #FAE600 (pravidlo je neškodné i bez JS) */
html:not(.mj-vyp-h2) :is(.paragraph--type--hero,.paragraph--type--hero-homepage) h1 strong { color: var(--mj-h2, #FAE600); }
/* do startu úvodu bílá. Ne na další stránce návštěvy s H5, tam fráze zůstane rovnou žlutá */
html.mj-pohyb:not(.mj-uvod):not(.mj-vyp-h2):not(.mj-uvod-dalsi) :is(.paragraph--type--hero,.paragraph--type--hero-homepage) h1 strong,
html.mj-pohyb.mj-uvod-dalsi.mj-vyp-h5:not(.mj-uvod):not(.mj-vyp-h2) :is(.paragraph--type--hero,.paragraph--type--hero-homepage) h1 strong { color: #fff; animation: mj-pojistka-zluta 0s 3s forwards; }
@keyframes mj-pojistka-zluta { to { color: #FAE600; } }

/* ===== H3: fotky Brna v M na úvodní stránce (jen počítač) ===== */
@media (min-width: 768px) {
  /* pryč nekonečné přibližování všech čtyř fotek (zoom-in-out 10 s na 1,2) */
  html.mj-bezi:not(.mj-vyp-h3) .paragraph--type--hero-homepage .field--name-field-obrazky > .field__item img { animation: none; }
  /* prolnutí 2 s z CSS vypnout jen u položek, jejichž opacity drží GSAP (inline styl);
     bez inline stylu (vypnutí, revert kontextu) platí původní přechod, takže nic neskočí */
  html.mj-bezi:not(.mj-vyp-h3) .paragraph--type--hero-homepage .field--name-field-obrazky > .field__item[style*="opacity"] { transition: none; }
}
/* omezený pohyb: jedna stojící fotka (Katedrála), bez střídání a přibližování. !important přebije i inline opacity z dřívějšího běhu. */
@media (prefers-reduced-motion: reduce) {
  html:not(.mj-vyp-h3) .paragraph--type--hero-homepage .field--name-field-obrazky > .field__item img { animation: none !important; }
  html:not(.mj-vyp-h3) .paragraph--type--hero-homepage .field--name-field-obrazky > .field__item { opacity: 0 !important; transition: none !important; }
  html:not(.mj-vyp-h3) .paragraph--type--hero-homepage .field--name-field-obrazky > .field__item:first-child { opacity: 1 !important; }
}

/* ===== H4: fotka v záhlaví podstránek se jemně usadí ===== */
/* do startu úvodu čeká fotka už v mírném přiblížení, ať při převzetí GSAP neposkočí z 1 na 1,06 */
html.mj-pohyb:not(.mj-uvod):not(.mj-vyp-h4) .paragraph--type--hero > .field--name-field-obrazek img {
  transform: translateX(-50%) scale(1.06);
  transform-origin: 50% 100%;
}
/* záchrana pro pozdní načtení a selhání GSAP: dokud transform nedrží GSAP inline, dojede fotka
   CSS přechodem jako tween (1,8 s, power2.out). Jakmile GSAP zapíše inline transform, pravidlo neplatí. */
@media (prefers-reduced-motion: no-preference) {
  html:not(.mj-vyp-h4) .paragraph--type--hero > .field--name-field-obrazek img:not([style*="transform"]) {
    transform-origin: 50% 100%;
    transition: transform 1.8s cubic-bezier(.215, .61, .355, 1);
  }
}
@media (max-width: 767px) {
  html.mj-pohyb:not(.mj-uvod):not(.mj-vyp-h4) .paragraph--type--hero > .field--name-field-obrazek img { transform: translateX(-50%) scale(1.04); }
}
@media (max-width: 767px) and (prefers-reduced-motion: no-preference) {
  html:not(.mj-vyp-h4) .paragraph--type--hero > .field--name-field-obrazek img:not([style*="transform"]) { transition-duration: 1.2s; }
}

/* ===== M1: tenká linka M se v úvodu jednou nakreslí ===== */
/* původní linka skrytá do startu úvodu (jinak by 10% obrys během čekání na písmo blikl).
   Ne na další stránce návštěvy s H5, tam linka stojí od začátku. Pseudo-prvek nesmí do :is(), proto zvlášť. */
html.mj-pohyb:not(.mj-uvod):not(.mj-vyp-m1):not(.mj-uvod-dalsi) .paragraph--type--hero::before,
html.mj-pohyb:not(.mj-uvod):not(.mj-vyp-m1):not(.mj-uvod-dalsi) .paragraph--type--hero-homepage .obrys,
html.mj-pohyb.mj-uvod-dalsi.mj-vyp-h5:not(.mj-uvod):not(.mj-vyp-m1) .paragraph--type--hero::before,
html.mj-pohyb.mj-uvod-dalsi.mj-vyp-h5:not(.mj-uvod):not(.mj-vyp-m1) .paragraph--type--hero-homepage .obrys { visibility: hidden; animation: mj-pojistka 0s 3s forwards; }
/* homepage: konec nekonečného dýchání (i na další stránce návštěvy); při pozdním načtení web jako dnes */
html.mj-bezi:not(.mj-pozde):not(.mj-vyp-m1) .paragraph--type--hero-homepage .obrys { animation: none; }
/* po vložení dvojčete schovat původní pozadí / pseudo-prvek */
html.mj-bezi:not(.mj-vyp-m1) .paragraph--type--hero-homepage .obrys.mj-obrys-svg { background-image: none; }
html.mj-bezi:not(.mj-vyp-m1) .paragraph--type--hero.mj-obrys-svg::before { display: none; }
/* dvojče – homepage vyplní div.obrys (meet = contain), podstránky přebírají box ::before */
html:not(.mj-vyp-m1) .paragraph--type--hero-homepage .obrys > svg.mj-obrys { display: block; width: 100%; height: 100%; pointer-events: none; }
html:not(.mj-vyp-m1) .paragraph--type--hero > svg.mj-obrys { position: absolute; left: -495px; bottom: -100px; width: 825px; height: 667px; pointer-events: none; }
@media screen and (max-width: 1199px) {
  html:not(.mj-vyp-m1) .paragraph--type--hero > svg.mj-obrys { left: -200px; bottom: 0; width: 620px; height: 505px; }
}
/* omezený pohyb: homepage bez nekonečného dýchání obrysu */
@media (prefers-reduced-motion: reduce) {
  html:not(.mj-vyp-m1) .paragraph--type--hero-homepage .obrys { animation: none !important; }
}

/* ===== M3: Kontakt a obě poděkování – štětcové M přes roh mapy =====
   Dvojče = přesná kopie ::before (296×228, left -73px, bottom -31px, z-index 10), na všech šířkách.
   Originál se schová jen třídou na hostiteli a jen pro obrazovku → tisk ukáže původní M. */
@media screen {
  html.mj-bezi:not(.mj-vyp-m3) .paragraph--type--mapa > .col:nth-child(3) > svg.mj-stetec { position: absolute; left: -73px; bottom: -31px; width: 296px; height: 228px; z-index: 10; pointer-events: none; }
  /* prázdný pseudo-prvek už neblokuje roh mapy */
  html.mj-bezi:not(.mj-vyp-m3) .paragraph--type--mapa > .col:nth-child(3).mj-stetec-svg::before { background-image: none; pointer-events: none; }
}
@media print {
  html.mj-bezi:not(.mj-vyp-m3) .paragraph--type--mapa > .col:nth-child(3) > svg.mj-stetec { display: none !important; }
}

/* ===== M4: vlnovka za citací – stejný box a stejná STATICKÁ transformace jako ::after (nikdy se netweenuje) ===== */
@media screen {
  html.mj-bezi:not(.mj-vyp-m4) .paragraph--type--pribeh-ctyri > .mj-vlna { position: absolute; display: block; left: 50%; top: 0; width: 100vw; height: 1100px; z-index: -1; transform: rotate(-3deg) translate(-50%, 0%); overflow: hidden; pointer-events: none; }
  html.mj-bezi:not(.mj-vyp-m4) .paragraph--type--pribeh-ctyri > .mj-vlna > svg { position: absolute; left: 50%; top: 90px; margin-left: -640px; width: 1280px; height: 1010px; }
  html.mj-bezi:not(.mj-vyp-m4) .paragraph--type--pribeh-ctyri.mj-vlna-svg::after { background-image: none; }
}
@media print {
  html.mj-bezi:not(.mj-vyp-m4) .paragraph--type--pribeh-ctyri > .mj-vlna { display: none !important; }
}

/* ===== M6: úvodní stránka, M přes roh fotky Zelného trhu: dvojče ::before 296×228, left -49px, bottom -20px, z-index 1 =====
   Jen od 768 px (na telefonu M stojí jako dnes). Originál se schová jen pro obrazovku → tisk ukáže původní M. */
@media screen and (min-width: 768px) {
  html.mj-bezi:not(.mj-vyp-m6) .paragraph-121 .col > svg.mj-stetec { position: absolute; left: -49px; bottom: -20px; width: 296px; height: 228px; z-index: 1; pointer-events: none; }
  html.mj-bezi:not(.mj-vyp-m6) .paragraph-121 .col.mj-stetec-svg::before { background-image: none; pointer-events: none; }
}
@media print {
  html.mj-bezi:not(.mj-vyp-m6) .paragraph-121 .col > svg.mj-stetec { display: none !important; }
}

/* ===== T1: nadpisy a texty sekcí – žádné vlastní pravidlo (tisk řeší obecné [data-mj-skryto]) ===== */

/* ===== F1: zaoblení a ořez nese obal fotky (dnes má radius 8px jen img); karta s logem goodnite zůstává beze změny ===== */
html.mj-bezi:not(.mj-vyp-f1) :is(.paragraph--type--obrazek-a-text, .paragraph--type--text-a-obrazek) .col .field--name-field-obrazek,
html.mj-bezi:not(.mj-vyp-f1) .paragraph--type--pribeh-jedna > .col:last-child .field--name-field-obrazek { overflow: hidden; border-radius: 8px; }
html.mj-bezi:not(.mj-vyp-f1) body.goodnite .paragraph-192 .field--name-field-obrazek { overflow: visible; border-radius: 0; }
@media print {
  html:not(.mj-vyp-f1) :is(.paragraph--type--obrazek-a-text, .paragraph--type--text-a-obrazek) .col .field--name-field-obrazek,
  html:not(.mj-vyp-f1) .paragraph--type--pribeh-jedna > .col:last-child .field--name-field-obrazek { opacity: 1 !important; clip-path: none !important; }
  html:not(.mj-vyp-f1) :is(.paragraph--type--obrazek-a-text, .paragraph--type--text-a-obrazek) .col .field--name-field-obrazek img,
  html:not(.mj-vyp-f1) .paragraph--type--pribeh-jedna > .col:last-child .field--name-field-obrazek img { transform: none !important; }
}

/* ===== K1: karty – žádné vlastní pravidlo (skrývá se jen pod oknem a jen přes JS) ===== */

/* ===== K2: tisk – doporučená cesta vždy rozsvícená (inline zhasnuté barvy by jinak mohly zůstat na papíře) ===== */
@media print { html:not(.mj-vyp-k2) .paragraph--type--cesty .cesta--hlavni { border-color: #FAE600 !important; background-color: rgba(250,230,0,.07) !important; } }

/* ===== C1: čísla ve žlutém pásu – žádné vlastní pravidlo (.mj-hodnota je obyčejný span; vycentrovaná čísla řeší JS) ===== */
/* ===== P1: kroky spolupráce – žádné vlastní pravidlo ===== */

/* ===== P2: Investiční byty – zastavená osa kroků (kopie ladeni.css ř. 31–40, platí i bez JS a při omezeném pohybu) =====
   Jen od 768 px (počítač a tablet): do 767 px má stránka vlastní mobilní mřížku v ladeni.css (5. várka, „vždy jeden krok
   na šířku displeje“, mezera 12 px); P2 by ji svou vyšší specificitou přepsala (2 sloupce na 640–767 px, mezera 20 px). */
@media (min-width: 768px) {
  html:not(.mj-vyp-p2) body.investicni-byty .paragraph--type--timeline{width:auto;left:auto;transform:none;overflow:visible;}
  html:not(.mj-vyp-p2) body.investicni-byty .paragraph--type--timeline:before,html:not(.mj-vyp-p2) body.investicni-byty .paragraph--type--timeline:after{display:none;}
  html:not(.mj-vyp-p2) body.investicni-byty .paragraph--type--timeline > h2{height:auto;margin:0 auto 48px;}
  html:not(.mj-vyp-p2) body.investicni-byty .paragraph--type--timeline .field--name-field-polozky-timeline{animation:none;position:static;width:auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;counter-reset:li;}
  html:not(.mj-vyp-p2) body.investicni-byty .paragraph--type--timeline .field--name-field-polozky-timeline > .field__item:nth-child(n){width:auto;min-width:0;margin:0;padding:26px 24px 26px 86px;background:#FAF8F6;border:1px solid #F0E9EE;border-radius:8px;box-sizing:border-box;min-height:104px;display:flex;align-items:center;transition:border-color .4s;}
  html:not(.mj-vyp-p2) body.investicni-byty .paragraph--type--timeline .field--name-field-polozky-timeline > .field__item:nth-child(n):before{left:24px;top:24px;transform:none;}
  html:not(.mj-vyp-p2) body.investicni-byty .paragraph--type--timeline .field--name-field-polozky-timeline > .field__item.active:before,html:not(.mj-vyp-p2) body.investicni-byty .paragraph--type--timeline .field--name-field-polozky-timeline > .field__item.active p{transform:none;}
  html:not(.mj-vyp-p2) body.investicni-byty .paragraph--type--timeline .field--name-field-polozky-timeline > .field__item p{font-size:16px;line-height:24px;text-align:left;margin:0;}
}
@media screen and (min-width:768px) and (max-width:1023px){html:not(.mj-vyp-p2) body.investicni-byty .paragraph--type--timeline .field--name-field-polozky-timeline{grid-template-columns:repeat(2,minmax(0,1fr));}}

/* ===== D1: barva otázky pod myší se mění plynule (dnes skokem). Není to pohyb: platí i při omezeném pohybu ===== */
html:not(.mj-vyp-d1) body:not(.investicni-byty) details.paragraph--type--polozka-faq summary .field--name-field-otazka { transition: color .25s ease; }

/* ===== D2: výšku nabídky práce vlastní GSAP – bundlový 'transition: all .3s ease' by se s inline výškou pral;
   overflow:clip šablona má, pro jistotu znovu (G3 počítá s clip kvůli overflow-clip-margin) ===== */
@media (prefers-reduced-motion: no-preference) {
  html.mj-bezi:not(.mj-vyp-d2) .paragraph--type--pozice details { transition: none; overflow: clip; }
}

/* ===== X1: bílý box pole Pozice dostane na 1,5 s tmavý rámeček (třídu mj-vyplneno přidává jen pohyb.js) ===== */
html:not(.mj-vyp-x1) .paragraph--type--formular .form-item-pozice { transition: box-shadow .4s ease; }
html:not(.mj-vyp-x1) .paragraph--type--formular .form-item-pozice.mj-vyplneno { box-shadow: 0 0 0 2px #2D1E28; }
@media (prefers-reduced-motion: reduce) {
  html:not(.mj-vyp-x1) .paragraph--type--formular .form-item-pozice { transition: none; }
}

/* ===== X2: sytost tmavé barvy závoje brány řídí proměnná (výchozí 1 = dnešní rgba(0,0,0,.65));
   rozmazání (backdrop-filter) zůstává celé, takže obsah pod bránou není nikdy čitelný ===== */
html.mj-bezi:not(.mj-vyp-x2) .paragraph--type--overlayformular::before { background: rgba(0, 0, 0, calc(.65 * var(--mj-zavoj, 1))); }

/* ===== L1: srpek řízený proměnnými: posun = výchozí offset × směr (1 / -1 pod myší) × --mj-srpek (0 → 1 při vstupu, jinak 1).
   Přebíjí i hover literály z tym.css mimo (hover:hover), které po klepnutí na dotyku zůstávaly otočené ===== */
html.mj-bezi:not(.mj-vyp-l1) .tym .tym__foto{--srp-x0:12px;--srp-y0:10px;--srp-smer:1;box-shadow:calc(var(--srp-x0) * var(--srp-smer) * var(--mj-srpek, 1)) calc(var(--srp-y0) * var(--mj-srpek, 1)) 0 0 #FAE600;}
html.mj-bezi:not(.mj-vyp-l1) .tym .tym__osoba:hover .tym__foto{box-shadow:calc(var(--srp-x0) * var(--srp-smer) * var(--mj-srpek, 1)) calc(var(--srp-y0) * var(--mj-srpek, 1)) 0 0 #FAE600;}
@media (hover:hover){
  html.mj-bezi:not(.mj-vyp-l1) .tym .tym__osoba:hover .tym__foto{--srp-smer:-1;}
}
@media screen and (max-width:1023px){ html.mj-bezi:not(.mj-vyp-l1) .tym .tym__foto{--srp-x0:10px;--srp-y0:8px;} }
@media screen and (max-width:767px){ html.mj-bezi:not(.mj-vyp-l1) .tym .tym__foto{--srp-x0:6px;--srp-y0:5px;} }
@media screen and (max-width:374px){ html.mj-bezi:not(.mj-vyp-l1) .tym .tym__foto{--srp-x0:5px;--srp-y0:4px;} }
@media print{ html.mj-bezi:not(.mj-vyp-l1) .tym .tym__osoba{opacity:1!important;transform:none!important;--mj-srpek:1!important;} }

/* ===== R1 – srovnání před a po (komponenta; 3 rámy na každém příběhu domu, šablona novy-web/sablony/pred-po.html).
   Rozvržení komponenty, ne pohyb: bez vypínače a bez mj-bezi, platí i bez JS ===== */
.paragraph--type--pred-po{max-width:1100px;margin:0 auto;padding:0 0 80px;text-align:center;}
.paragraph--type--pred-po .pred-po__prednadpis{font-family:"bc-novatica-cyr",sans-serif;font-size:16px;line-height:24px;letter-spacing:1.6px;text-transform:uppercase;font-weight:500;color:#F5CD00;margin:0 0 16px;}
.paragraph--type--pred-po .pred-po__nadpis{font-size:30px;line-height:38px;margin:0 0 30px;text-wrap:balance;}
/* --pos = poloha linky v % rámu (0 = celá „po“, 100 = celá „před“); rám max. 940 px, ať se vše vejde na obrazovku 1440×900 */
.paragraph--type--pred-po .pred-po__ram{--pp:50;--uchyt:44px;--pos:calc(var(--pp) * 1%);position:relative;width:100%;max-width:940px;margin:0 auto;border-radius:8px;overflow:hidden;background:#EDE2E9;text-align:left;-webkit-user-select:none;user-select:none;}
.paragraph--type--pred-po .pred-po__ram img{position:absolute;inset:0;display:block;width:100%;height:100%;max-width:none;object-fit:cover;border-radius:0;pointer-events:none;}
.paragraph--type--pred-po .pred-po__pred{clip-path:inset(0 calc(100% - var(--pos)) 0 0);}
.paragraph--type--pred-po .pred-po__stitek{position:absolute;top:16px;z-index:2;padding:6px 12px;border-radius:4px;font-family:"bc-novatica-cyr",sans-serif;font-size:15px;line-height:20px;font-weight:500;letter-spacing:.3px;pointer-events:none;}
.paragraph--type--pred-po .pred-po__stitek--pred{left:16px;background:rgba(45,30,40,.8);color:#fff;}
.paragraph--type--pred-po .pred-po__stitek--po{right:16px;background:#FAE600;color:#2D1E28;}
/* dělicí linka 2 px + kulatý žlutý úchyt se šipkami webu */
.paragraph--type--pred-po .pred-po__delic{position:absolute;top:0;bottom:0;left:var(--pos);width:2px;margin-left:-1px;background:#FAE600;z-index:2;pointer-events:none;}
.paragraph--type--pred-po .pred-po__uchyt{position:absolute;top:50%;left:50%;width:var(--uchyt);height:var(--uchyt);margin:calc(var(--uchyt) / -2) 0 0 calc(var(--uchyt) / -2);border-radius:50%;background:#FAE600;box-shadow:0 2px 10px rgba(45,30,40,.28);}
.paragraph--type--pred-po .pred-po__uchyt::before,
.paragraph--type--pred-po .pred-po__uchyt::after{content:"";position:absolute;top:50%;width:12px;height:12px;margin-top:-6px;background:url(/themes/custom/majordo/images/button-arrow-black.svg) no-repeat center / contain;}
.paragraph--type--pred-po .pred-po__uchyt::before{left:8px;transform:scaleX(-1);}
.paragraph--type--pred-po .pred-po__uchyt::after{right:8px;}
/* průhledný nativní posuvník přes celý rám, o půl úchytu přesahuje na obě strany (přesah ořízne rám):
   palec široký jako úchyt má pak střed přesně na --pos v celém rozsahu 0–100 %. Bez JS skrytý (nic by neovládal). */
.paragraph--type--pred-po .pred-po__posuvnik{display:none;position:absolute;top:0;bottom:0;left:calc(var(--uchyt) / -2);z-index:3;width:calc(100% + var(--uchyt));height:100%;margin:0;padding:0;opacity:0;cursor:ew-resize;touch-action:pan-y;-webkit-appearance:none;appearance:none;background:transparent;}
.paragraph--type--pred-po .pred-po__ram[data-mj-pp] .pred-po__posuvnik{display:block;}
.paragraph--type--pred-po .pred-po__posuvnik::-webkit-slider-runnable-track{height:100%;background:transparent;border:0;}
.paragraph--type--pred-po .pred-po__posuvnik::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:var(--uchyt);height:100%;border:0;border-radius:0;background:transparent;}
.paragraph--type--pred-po .pred-po__posuvnik::-moz-range-track{height:100%;background:transparent;border:0;}
.paragraph--type--pred-po .pred-po__posuvnik::-moz-range-thumb{width:var(--uchyt);height:100%;border:0;border-radius:0;background:transparent;}
/* dotyk: posouvá jen tah za úchyt (svislý pás pod linkou); jinak by každé rolování přes fotku skočilo linkou pod prst */
@media (pointer:coarse){
  .paragraph--type--pred-po .pred-po__posuvnik{pointer-events:none;}
  .paragraph--type--pred-po .pred-po__posuvnik::-webkit-slider-thumb{pointer-events:auto;}
  .paragraph--type--pred-po .pred-po__posuvnik::-moz-range-thumb{pointer-events:auto;}
}
.paragraph--type--pred-po .pred-po__ram:has(.pred-po__posuvnik:focus-visible) .pred-po__uchyt{outline:2px solid #2D1E28;outline-offset:3px;}
@media screen and (max-width:767px){
  .paragraph--type--pred-po{padding-bottom:60px;}
  .paragraph--type--pred-po .pred-po__ram{--uchyt:48px;}
  .paragraph--type--pred-po .pred-po__stitek{top:10px;padding:4px 10px;font-size:13px;line-height:18px;}
  .paragraph--type--pred-po .pred-po__stitek--pred{left:10px;}
  .paragraph--type--pred-po .pred-po__stitek--po{right:10px;}
}

/* ===== R2 – tisk: pás fotek nesmí vyjít prázdný, ani když prohlížeč nepošle beforeprint ===== */
@media print{ html.mj-bezi:not(.mj-vyp-r2) .paragraph--type--pas-fotek{opacity:1!important;transform:none!important;} }

/* ===== V1 – příběhy domů: žlutá dělicí linka v Dřív a dnes (protažení dělá pohyb.js, jen od 768 px).
   Tisk: linka vždy celá, ani když prohlížeč nepošle beforeprint ===== */
@media print{ html.mj-bezi:not(.mj-vyp-v1) .paragraph--type--driv-dnes .driv-dnes__linka{transform:none!important;} }