/* ==========================================================================
   MOBIL – spoločné prvky a typografia (telefón do 767 px)
   Vlastník: agent „mobil-global“. Záväzná špecifikácia: /varianty/MOBIL-SPEC.md, kapitoly 2 a 3.

   Cieľ: ten istý web, na telefóne vzdušnejší, kratší a s menším vnáraním boxov. Nie je to redizajn –
   farby, Montserrat, zelená #86BB46, tlačidlá, ikony, fotky, poradie sekcií aj obsah ostávajú.

   Pravidlá tohto súboru:
   · VŠETKO je vo vnútri @media (max-width: 767px) → počítač a tablet (≥ 768 px) sa nezmenia ani o pixel.
   · Súbor sa načítava ZA main.css, komponentmi a štýlmi stránok (poradie: main.css → komponenty → stranky →
     mobil.css → mobil-stranky.css → plavajuci-panel.css, ten pripája main.js dynamicky až na konci).
     Preto pri ROVNAKEJ špecificite vyhráva tento súbor a !important netreba. Selektory píšeme s rovnakou
     špecificitou ako pôvodné pravidlo v main.css (zväčša jedna trieda), aby presnejšie stránkové pravidlá
     ostali v platnosti; rozsah bez zvýšenia špecificity obmedzuje :where(…).
   · !important je len tam, kde ho má už pôvodné pravidlo v main.css (inak sa prebiť nedá) – pri každom je poznámka.
   · Pravidlá pre plávajúci panel (.pp-*, .mobil-lista.ma-chat) majú predponu „body“, lebo plavajuci-panel.css
     sa načíta až po tomto súbore.
   · POZOR na stránkové pravidlá s ROVNAKOU špecificitou (napr. „.st-vedeli“ v sluzba-tepelne-cerpadla.css oproti
     „.poznamka“): sú v súbore pred týmto, takže by ich tento súbor prebil. Kde stránka alebo modifikátor v main.css
     (napr. .citat--velky) nastavuje tú istú vlastnosť, je prvok vylúčený cez „:where(:not(…))“ – špecificita
     ostáva rovnaká a platí stránkové pravidlo. Zoznamy vylúčení vznikli automatickou kontrolou kaskády na všetkých
     stránkach pri 320 – 767 px (kto prebíja koho) – pri novom stránkovom pravidle ich treba doplniť.
   · Žiadne :has() na html/body, žiadny backdrop-filter, dotykové ciele ≥ 44 px, najmenší text 14 px.
   · Stránkové úpravy (jednotlivé sekcie) sú v mobil-stranky.css (agent „mobil-stranky“), nie tu.
   ========================================================================== */

@media (max-width: 767px) {

  /* ------------------------------------------------------------------------
     1. TOKENY A TYPOGRAFIA (spec 2.1, 2.2)
     Plynulá stupnica 360 → 767 px, ktorá pri 768 px nadväzuje na počítačovú (bez skoku).
     Menšie nadpisy a medzery = viac obsahu na obrazovke bez zmenšovania bežného textu pod 16 px.
     ------------------------------------------------------------------------ */
  :root {
    /* typografia */
    --fs-display: clamp(2.25rem, .92rem + 5.9vw, 3.75rem);    /* 37,7 px pri 390 (bolo 45,9) */
    --fs-h1: clamp(2rem, 1rem + 4.42vw, 3.125rem);            /* 33,2 px (bolo 38,9) */
    --fs-h2: clamp(1.625rem, 1.07rem + 2.46vw, 2.25rem);      /* 26,7 px (bolo 30,5) */
    --fs-h3: clamp(1.1875rem, .91rem + 1.23vw, 1.5rem);       /* 19,4 px (bolo 22,2) */
    --fs-h4: clamp(1.0625rem, .98rem + .37vw, 1.1875rem);     /* 17,1 px */
    --fs-lead: clamp(1.0625rem, .92rem + .61vw, 1.25rem);     /* 17,1 px (bolo 19,1) */
    --fs-body: clamp(1rem, .945rem + .25vw, 1.0625rem);       /* 16,1 px (bolo 17) */
    --fs-small: .875rem;                                      /* 14 px = najmenší text */
    --fs-cislo: clamp(2.5rem, 1.39rem + 4.91vw, 3.75rem);     /* veľké čísla 41,4 px (bolo 48) */

    /* rytmus sekcií (pri 767 px nadväzuje na počítač) */
    --sekcia-pad: clamp(48px, 24px + 6.25vw, 72px);           /* bežná sekcia: 48 pri 390 (bolo 72) */
    --sekcia-pad-tesna: clamp(40px, 28px + 3vw, 48px);        /* tesná sekcia: 40 pri 390 (bolo 48) */
    --panel-pad: clamp(40px, 22px + 4.5vw, 56px);             /* NOVÝ – farebná plocha na celú šírku: 40 pri 390 */
    --gap-l: 24px;                                            /* bolo 28 */
    --r-karta: 18px;                                          /* bolo 22 */
    --r-obr: 16px;                                            /* bolo 22 */

    /* hlavička a spodná lišta (main.js si --vyska-hlavicky prepíše skutočnou výškou hlavičky) */
    --hlavicka-h: 64px;                                       /* bolo 76 */
    --vyska-hlavicky: 64px;
    --mobil-lista-h: calc(60px + env(safe-area-inset-bottom, 0px));   /* NOVÝ – výška spodnej lišty (bolo 72 natvrdo) */

    /* posuvné pásy kariet (používa mobil-stranky): 302 / 328 / 340 px pri 360 / 390 / 430 */
    --pas-karta: min(84vw, 340px);
  }

  /* riadkovanie – o chlp tesnejšie, nadpisy o niečo menej stiahnuté (sú menšie) */
  body { line-height: 1.55; }                                   /* bolo 1.6 */
  h1, .h1 { line-height: 1.06; letter-spacing: -.028em; }
  h2, .h2 { line-height: 1.14; letter-spacing: -.022em; }
  h3, .h3 { line-height: 1.22; }
  .lead { line-height: 1.5; }
  .eyebrow { letter-spacing: .07em; gap: .6em; }


  /* ------------------------------------------------------------------------
     2. FAREBNÉ PLOCHY NA CELÚ ŠÍRKU (spec 3.2, rozhodnutie 1) – PRIORITA 1
     Na počítači sú úvod, tmavé sekcie, sekcia s animáciou, zelený pás, svetlý panel a výzva s formulárom
     odsadené od okraja a zaoblené. Na telefóne to zbytočne zužovalo obsah (342 → 358 px) a pridávalo
     jednu úroveň „boxu v boxe“. Selektory sú 1 : 1 z main.css (sekcie 18 a 21) → rovnaká špecificita,
     tento súbor je neskôr → vyhrá. Pozadia (prelínania) ostávajú, len siahajú od okraja po okraj.
     ------------------------------------------------------------------------ */
  body:not([data-page="domov"]) main > .hero-sluzba,
  body:not([data-page="domov"]) main > .sekcia--tmava:not(.cta-sekcia),
  body:not([data-page="domov"]) main > .sekcia:has(> .wrap.ao-mriezka),
  body:not([data-page="domov"]) main > .sekcia--zelena,
  body:not([data-page="domov"]) main > .sekcia--papier2:not(:has(> .wrap.ao-mriezka)),
  main > .cta-sekcia { margin: 0; border-radius: 0; }

  /* dve farebné plochy za sebou: na počítači sa mierne prekrývajú (main.css sekcia 18, špecificita 0,2,1) – bez okraja netreba */
  main > :is(.sekcia--tmava, .sekcia--zelena, .cta-sekcia) + :is(.sekcia--tmava, .sekcia--zelena, .cta-sekcia) { margin-top: 0; }

  /* vnútorný rytmus farebných plôch: 40 px hore aj dole pri 390 (bolo 56 + 8 px okraj) */
  body:not([data-page="domov"]) main > .sekcia--tmava:not(.cta-sekcia),
  body:not([data-page="domov"]) main > .sekcia:has(> .wrap.ao-mriezka),
  body:not([data-page="domov"]) main > .sekcia--zelena { padding-block: var(--panel-pad); }
  /* záverečný zelený pás je krátky (nadpis + tlačidlo) → 32 px */
  body:not([data-page="domov"]) main > .sekcia--zelena { padding-block: 32px; }
  /* výzva s formulárom: prepisuje aj 44/28 px z main.css sekcie 23 */
  main > .cta-sekcia { padding-block: 40px 24px; }


  /* ------------------------------------------------------------------------
     3. HLAVIČKA SEKCIE, STACK (spec 3.3)
     Hlavičky sekcií (štítok → h2 → lead → odkaz) boli 247 – 280 px vysoké, teraz ~190 – 210 px.
     ------------------------------------------------------------------------ */
  .sekcia__hlavicka { gap: 14px; }
  /* odstup hlavičky od obsahu 24 px; stránky s vlastnou hodnotou (20 – 28 px pri 390) si ju nechávajú */
  .sekcia__hlavicka:where(:not(.cl-hlavicka, .db-hlavicka, .dt-hlavicka, .on-hlavicka, .rc-hlavicka, .sc-hlavicka,
    .sf-hlavicka, .so-hlavicka, .sp2-hlavicka, .st-hlavicka, .sz-hlavicka)) { margin-bottom: 24px; }
  .sekcia__hlavicka > .stack > * + * { margin-top: 12px; }
  /* vylúčené: prvky, ktorým stránka dáva vlastný horný odstup (.so-body, .sp2-miesta, .st-citat) */
  .stack > * + *:where(:not(.so-body, .sp2-miesta, .st-citat)) { margin-top: var(--stack, 1rem); }
  .stack--s { --stack: .625rem; }
  .stack--l { --stack: 1.5rem; }
  .stack--xl { --stack: 2rem; }


  /* ------------------------------------------------------------------------
     4. ÚVOD PODSTRÁNKY – .hero-sluzba (spec 3.4)
     Na prvej obrazovke (390 × 844) majú byť omrvinky, h1, lead, hlavné tlačidlo a začiatok fotky.
     ------------------------------------------------------------------------ */
  .hero-sluzba { padding-block: 16px 32px; }
  .hero-sluzba__mriezka { gap: 24px; }
  .hero-sluzba__obsah > * + *:where(:not(.so-dovera)) { margin-top: 14px; }        /* .so-dovera má odstup zo sluzba-okna.css */
  .hero-sluzba__obsah > .breadcrumbs + * { margin-top: 12px; }
  .hero-sluzba__obsah > .akcie { margin-top: 22px; }
  /* štítok nad h1 opakuje poslednú položku omrviniek → na telefóne skryť (PUR pena má iný text → ostáva) */
  body:not([data-page="sluzba-pur-pena"]) .hero-sluzba__obsah > .breadcrumbs + .eyebrow { display: none; }
  /* fotka v úvode nižšia (16 : 10 namiesto 4 : 3).
     ZÁMERNE silný selektor (0,3,1): musí prebiť „.so-hero … 4/3“ zo sluzba-okna.css a main.css ≤ 959 px. */
  .hero-sluzba .hero-sluzba__mriezka > .hero-sluzba__media > img { aspect-ratio: 16 / 10; }
  .hero-sluzba__plavajuci { padding: 12px 14px; gap: 6px; max-width: 220px; }
  /* fakty v úvode – :where() drží špecificitu 0,1,x, aby platili stránkové pravidlá (.sf-hero …)
     a aby sa nezasiahol pás pod videom na domovskej stránke (ten nie je main > .hero-sluzba) */
  :where(main > .hero-sluzba) .hero-sluzba__fakty { margin-top: 24px; }
  :where(main > .hero-sluzba) .hero-sluzba__fakty > li { padding: 12px 12px 2px 0; gap: 4px; }
  /* „nainštalovaných“ sa zalomí so spojovníkom, nie „…ýc|h“ */
  :where(main > .hero-sluzba) .hero-sluzba__fakty span { hyphens: auto; -webkit-hyphens: auto; }


  /* ------------------------------------------------------------------------
     5. OMRVINKY (spec 3.5) – dotykový cieľ 44 px (bolo 34), riadky bez medzery navyše
     ------------------------------------------------------------------------ */
  .breadcrumbs ol { row-gap: 0; }
  .breadcrumbs li + li::before { margin: 0 8px; }
  .breadcrumbs a { display: inline-flex; align-items: center; min-height: 44px; padding: 0; }


  /* ------------------------------------------------------------------------
     6. KARTY, IKONY, CITÁT, POZNÁMKA, DOTAČNÝ BOX, ČÍSLA, POROVNANIE (spec 3.6)
     Menšie vnútorné odsadenie = širší text v karte (poznámka 254 → ~300 px, dotačný box 286 → ~322 px).
     ------------------------------------------------------------------------ */
  /* :where() → špecificita 0,1,0 ako .karta v main.css; fotokarty (.karta--foto) majú padding 0 a ostávajú.
     Karty s vlastným paddingom / medzerou zo stránky (kontakt, o nás, blog, klimatizácie) sú vylúčené. */
  :where(.karta):not(.karta--foto):where(:not(.ko-karta, .rd-sluzba__karta)) { padding: 20px 18px; }
  :where(.karta):not(.karta--foto):where(:not(.ko-karta, .on-udaje, .rd-sluzba__karta, .sk-vyzva, .sk-zima)) { gap: 10px; }
  .karta__telo { padding: 16px 18px 18px; gap: 8px; }
  .karta__sipka { width: 44px; height: 44px; }
  :where(.ikona-box):not(.ikona-box--s) { width: 48px; height: 48px; border-radius: 14px; }
  :where(.ikona-box):not(.ikona-box--s) .ikona { width: 24px; height: 24px; }
  /* citát: veľký citát (.citat--velky, bez plochy a s obrovskou úvodzovkou) má vlastné rozmery v main.css → vylúčený */
  .citat:where(:not(.citat--velky)) { padding: 20px 18px; gap: 16px; }
  .citat:where(:not(.citat--velky))::before { font-size: 4rem; }
  .citat__avatar { width: 44px; height: 44px; font-size: 1.05rem; }
  .poznamka { border-radius: 14px; font-size: .9375rem; line-height: 1.55; }
  /* „Vedeli ste?“ na TČ (.st-vedeli) má na telefóne 1 stĺpec bez ikony a vlastný padding; .rd-upozornenie (blog)
     má vlastné rozmery → vylúčené (inak by text .st-vedeli spadol do 22 px stĺpca a box mal 3 900 px) */
  .poznamka:where(:not(.st-vedeli, .rd-upozornenie)) { grid-template-columns: 22px minmax(0, 1fr); gap: 10px; padding: 14px 16px; }
  .poznamka > .ikona { width: 22px; height: 22px; margin-top: 1px; }
  .dotacia-box { gap: 20px; padding: 24px 18px; border-radius: 18px; }
  .dotacia-box .akcie { margin-top: 20px; gap: 10px; }
  .dotacia-box .akcie .btn { width: 100%; padding-inline: 16px; }
  /* dekoratívny rebríček tried vedľa sumy – na telefóne skryť (5 stránok ho už skrýva ≤ 859 px, TČ nie) */
  .dotacia-box__vizual { display: none; }
  .cisla__polozka { padding: 18px 12px 18px 0; gap: 8px; }
  .cisla__popis { font-size: .9375rem; hyphens: auto; -webkit-hyphens: auto; }
  .porovnanie__stlpec { padding: 20px 18px; gap: 14px; }
  .porovnanie__nazov { font-size: 1.5rem; }
  .porovnanie__hodnota { padding: 12px 0; }
  .porovnanie__hodnota strong { font-size: 1.5rem; }


  /* ------------------------------------------------------------------------
     7. TLAČIDLÁ, TABY, FILTER (spec 3.7)
     Základné .btn (54 px) sa NEMENÍ – plošné pravidlo by kolidovalo s .btn--text / .btn--male.
     ------------------------------------------------------------------------ */
  .btn--velke { min-height: 56px; padding: 0 24px; font-size: 1rem; }      /* bolo 64 px */
  .akcie { gap: 10px 14px; }
  .taby__tab { min-height: 44px; padding: 0 16px; font-size: .9375rem; }
  .taby__panel { padding-top: 20px; }
  .filter__cip, .filter [data-filter] { min-height: 44px; padding: 0 16px; }


  /* ------------------------------------------------------------------------
     8. KROKY – ČASOVÁ OS (spec 3.8)
     Box VY/MY v kroku (tretia úroveň vnárania) sa mení na text so zelenou linkou vľavo.
     Text VY/MY 236 → ~292 px pri 390. (.kroky--vodorovne je len ≥ 1024 px.)
     ------------------------------------------------------------------------ */
  .kroky::before { left: 19px; top: 20px; bottom: 20px; }
  .krok { grid-template-columns: 40px minmax(0, 1fr); column-gap: 12px; padding-bottom: 20px; }   /* :last-child ostáva 0 z main.css */
  .krok__cislo { width: 40px; height: 40px; font-size: .9375rem; }
  .krok__obsah { padding-top: 7px; }
  .krok__obsah > * + * { margin-top: 6px; }
  .krok__nadpis { font-size: var(--fs-h4); }
  .krok__role { gap: 8px; margin-top: 10px; }
  /* 0,2,0 – prebije aj stránkové „.so-kroky / .sp2-kroky .krok__rola { background }“ */
  .kroky .krok__rola { padding: 2px 0 2px 12px; background: none; border-radius: 0; border-left: 2px solid rgba(134, 187, 70, .6); }
  .krok__rola strong { font-size: .875rem; margin-bottom: 2px; }                                   /* bolo 12 px */


  /* ------------------------------------------------------------------------
     9. FAQ (spec 3.9) – zatvorená otázka 92 – 123 → 56 – 70 px, dotykový cieľ je celé <summary>
     ------------------------------------------------------------------------ */
  .faq__otazka { padding: 16px 0; gap: 14px; font-size: 1.0625rem; line-height: 1.3; min-height: 56px; }
  .faq__ikona { width: 36px; height: 36px; }
  .faq__ikona::before, .faq__ikona::after { width: 12px; margin-left: -6px; }
  .faq__odpoved > div, .faq__odpoved-vnutro { padding-bottom: 18px; }


  /* ------------------------------------------------------------------------
     10. TABUĽKY (spec 3.10)
     ------------------------------------------------------------------------ */
  /* main.css sekcia 23 dáva „table th, table td small { .75rem !important }“ = 12 px → pod minimom 14 px.
     !important je nutný: pôvodné pravidlo ho má tiež (rovnaká špecificita, tento súbor je neskôr → vyhrá). */
  table th, table td small { font-size: .875rem !important; }
  /* tabuľky s vlastným odsadením buniek (rozpis dotácie, tabuľky v článkoch) sú vylúčené */
  .tabulka:where(:not(.dt-rozpis, .rd-tabulka)) th, .tabulka:where(:not(.dt-rozpis, .rd-tabulka)) td { padding: 12px 14px; }
  .tabulka thead th { font-size: .875rem; }
  @media (max-width: 719px) {          /* rovnaká hranica ako .tabulka--karty v main.css */
    /* !important: inak by vyhralo „table th … !important“ vyššie (14 px) nad 15 px pre nadpis riadku */
    .tabulka--karty tbody th { font-size: .9375rem !important; }
    .tabulka--karty tr { padding: 4px 14px; margin-bottom: 8px; border-radius: 14px; }
    .tabulka--karty:where(:not(.dt-rozpis)) td, .tabulka--karty:where(:not(.dt-rozpis)) tbody th { padding: 8px 0; gap: 12px; }
  }


  /* ------------------------------------------------------------------------
     11. POSUVNÍKY – komponent pk- (spec 3.11)
     Šípky (44 px) a bodky (24 × 44 px, vedomá výnimka) ostávajú; šírky kariet v pásoch rieši mobil-stranky.
     ------------------------------------------------------------------------ */
  .pk-nav:where(:not(.db-programy__nav)) { margin-top: 12px; }     /* dotácie na domove majú vlastných 10 px */
  /* navigácia má šírku podľa obsahu – pri 9 bodkách (blog na domove) mala 350 px a pri 320 px pretiekla stránku.
     Teraz je najviac na šírku obsahu; šípky ostávajú 44 px, zúžia sa len bodky (len keď sa nezmestia). */
  .pk-nav { max-width: 100%; }
  .pk-sipka { flex-shrink: 0; }
  .pk-bodky { min-width: 0; }
  .pk-rad:where(:not(.db-programy__rad)) { padding-bottom: 8px; }   /* dotácie na domove: od 640 px mriežka s paddingom 0 zo stránky */


  /* ------------------------------------------------------------------------
     12. VÝZVA S FORMULÁROM – main > .cta-sekcia, #obhliadka (spec 3.12) – PRIORITA 1
     Úvod 924 → ~700 px, polia 294 → 326 px, sekcia 2255 → ~1800 px.
     ------------------------------------------------------------------------ */
  .cta-sekcia__vnutro { gap: 28px; }
  .cta-sekcia__uvod > * + * { margin-top: 14px; }
  .cta-sekcia__nadpis { font-size: calc(var(--fs-h2) * 1.15); line-height: 1.05; }        /* ≈ 30,7 px, 2 riadky */
  /* !important: main.css má „margin-top: 32px !important“ (inak sa prebiť nedá) */
  .cta-sekcia__telefon { margin-top: 20px !important; gap: 12px; font-size: 1.625rem; }
  .cta-sekcia__telefon .ikona-kruh { width: 48px; height: 48px; }
  .cta-sekcia__hodiny { font-size: .9375rem; }
  /* !important: main.css má „margin-top: 36px !important“ */
  .cta-sekcia__kroky { margin-top: 20px !important; }
  .cta-sekcia__kroky li { grid-template-columns: 32px minmax(0, 1fr); gap: 10px; padding: 12px 0; }
  .cta-sekcia__kroky strong { font-size: 1rem; }
  .cta-sekcia__kroky span { font-size: .9375rem; line-height: 1.45; }
  /* karta formulára LEN v sekcii #obhliadka – trieda .cta-sekcia__formular je aj na karte v úvode domovskej
     stránky (.hero-kontakt__karta), ktorá patrí agentovi „video“ */
  main > .cta-sekcia .cta-sekcia__formular { padding: 22px 16px 20px; border-radius: 18px; }


  /* ------------------------------------------------------------------------
     13. FORMULÁRE A ČIPY (spec 3.13) – všetky formuláre vrátane kalkulačky
     Písmo polí ostáva 16 px (vynucuje main.css sekcia 23 – iOS inak pri ťuknutí priblíži stránku).
     ------------------------------------------------------------------------ */
  .formular, .formular__polia, .formular__riadok { gap: 16px; }
  .pole { gap: 6px; }
  .pole__label { font-size: .9375rem; }
  .pole__vstup, .formular input[type="text"], .formular input[type="tel"], .formular input[type="email"],
  .formular input[type="number"], .formular textarea { min-height: 50px; padding: 12px 14px; border-radius: 12px; }
  /* výber v riadku kalkulačky dotácií (.dt-op__vyber) má vlastnú výšku 46 px → vylúčený */
  .formular select:where(:not(.dt-op__vyber select)) { min-height: 50px; padding: 12px 44px 12px 14px; border-radius: 12px; background-position: right 14px center; }
  .formular textarea { min-height: 104px; }
  .suhlas { gap: 10px; }
  .suhlas:where(:not(.dt-op__volba)) { font-size: .9375rem; }       /* voľby kalkulačky dotácií majú 16 px zo stránky */
  /* čipy (voľby služieb) v 2 stĺpcoch: 8 volieb = 4 riadky namiesto 6 – 8 */
  .cipy { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .cipy > :not(.cip) { grid-column: 1 / -1; }            /* legend, poznámky a nápovedy (kalkulačka) cez celú šírku */
  .cipy > legend { float: none; margin-bottom: 4px; }    /* BEZ float: none by sa legend stal bunkou mriežky */
  .cip { display: flex; min-width: 0; }
  .cip span { width: 100%; min-height: 44px; padding: 6px 10px; line-height: 1.25; white-space: normal; border-radius: 14px; }


  /* ------------------------------------------------------------------------
     14. ZÁVEREČNÝ ZELENÝ PÁS NA PODSTRÁNKACH (spec 3.14)
     Telefón je v spodnej lište aj veľký v #obhliadka hneď pod pásom → duplicitné tlačidlo „Zavolať“ v páse skryť.
     Hlavné tlačidlo („Chcem obhliadku zdarma“, „Objednať certifikát“) ostáva. Padding pásu (32 px) je v bloku 2.
     ------------------------------------------------------------------------ */
  body:not([data-page="domov"]) main > .sekcia--zelena .akcie > .btn[href^="tel:"] { display: none; }


  /* ------------------------------------------------------------------------
     15. HLAVIČKA (64 px) A MOBILNÉ MENU (spec 3.15)
     Výšku hlavičky dávajú tokeny --hlavicka-h / --vyska-hlavicky (blok 1). Menu s rozbalenými
     službami 1374 → ~1140 px, zbalené sa zmestí na obrazovku.
     ------------------------------------------------------------------------ */
  .hlavicka__lista::before { top: 6px; bottom: 6px; border-radius: 16px; }
  .hlavicka__logo img { height: 32px; }
  .hlavicka__hamburger { min-height: 44px; padding: 0 6px 0 14px; }
  .mobilne-menu__hlavicka img { height: 32px; }
  .mobilne-menu__zavriet { min-height: 44px; }
  .mobilne-menu__telo { gap: 24px; }
  .mobilne-menu__odkaz { min-height: 52px; padding: 8px 0; font-size: 1.5rem; }
  .mobilne-menu__odkaz > .ikona { width: 22px; height: 22px; }
  .mobilne-menu__sluzby { gap: 2px; padding-bottom: 12px; }
  .mobilne-menu__sluzby a { min-height: 48px; padding: 4px 8px; gap: 12px; font-size: 1rem; }
  .mobilne-menu__sluzby .ikona-box { width: 36px; height: 36px; border-radius: 10px; }
  .mobilne-menu__sluzby .ikona-box .ikona { width: 20px; height: 20px; }
  .mobilne-menu__telefon { font-size: 1.75rem; }


  /* ------------------------------------------------------------------------
     16. SPODNÁ LIŠTA (60 px) A PLÁVAJÚCE TLAČIDLÁ (spec 3.16)
     plavajuci-panel.css sa načíta AŽ ZA týmto súborom → pravidlá pre .pp-* a .mobil-lista.ma-chat majú predponu body.
     ------------------------------------------------------------------------ */
  .mobil-lista { padding: 6px 8px calc(6px + env(safe-area-inset-bottom, 0px)); gap: 6px; }
  .mobil-lista .btn { min-height: 48px; }
  body .mobil-lista.ma-chat { grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr) 48px; }
  body .mobil-lista .pp-lista-chat { width: 48px; height: 48px; }
  /* plávajúca šípka „späť hore“: na telefóne SKRYŤ (rozhodnutie špecifikácie 3.16) – v 18 z 21 polôh prekrývala text,
     „+“ vo FAQ a polia formulára. POZOR: tlačidlo .paticka__hore v pätičke, s ktorým špecifikácia počíta ako s náhradou,
     v HTML od 22. 9. nie je (tools/blog_menu_hore.py ho už nevkladá) → na telefóne teraz šípka hore nie je nikde. */
  /* 4. 10. 2026: šípka „späť hore“ je na želanie používateľa aj na telefóne (nad tlačidlom chatu v spodnej lište) */
  /* pätička končí nad spodnou lištou (nahrádza 74 px z main.css) */
  .paticka { padding-bottom: calc(var(--mobil-lista-h) + 4px); }
  @media (max-width: 359px) {
    /* pri 320 px sa „Obhliadka zdarma“ inak nezmestí → užšie tlačidlá, pri „Zavolať“ bez ikony a druhý stĺpec
       aspoň na šírku textu (nezalamuje sa), prvý dostane zvyšok */
    body .mobil-lista.ma-chat { grid-template-columns: minmax(min-content, 1fr) minmax(max-content, 1.45fr) 48px; }
    body .mobil-lista.ma-chat .btn { padding: 0 8px; font-size: .875rem; }
    body .mobil-lista.ma-chat .btn--tmave .ikona { display: none; }
  }


  /* ------------------------------------------------------------------------
     17. PÄTIČKA (spec 3.17) – dnes 1971 px (12 – 24 % stránky) → cieľ ≤ 1 250 px
     NEPOUŽIŤ white-space: nowrap na odkazy (pri 320 px pretečú o 35 px).
     ------------------------------------------------------------------------ */
  .paticka { padding-top: 40px; }
  .paticka__mriezka { gap: 24px 16px; padding-block: 28px; }
  /* Služby cez 2 riadky → Firma a Dôležité sú pod sebou v 2. stĺpci */
  .paticka__mriezka > nav:first-of-type { grid-row: span 2; }
  /* „Z blogu“ – duplicitná navigácia (odkaz Blog v stĺpci Firma, sekcia Blog na domove, zoznam na /radca/) */
  .paticka__mriezka > div:last-child:not(.paticka__znacka) { display: none; }
  .paticka__nadpis { margin-bottom: 6px; font-size: .875rem; letter-spacing: .08em; }
  .paticka__odkazy { gap: 0; }
  /* flex: dotykový cieľ 44 px aj pri zalomenom názve (2 riadky = stále 44 px) */
  .paticka__odkazy a { display: flex; align-items: center; gap: 6px; min-height: 44px; padding: 0; font-size: .9375rem; line-height: 1.3; }
  /* odkaz s ikonou (E-shop ↗, Facebook) ostáva riadkový: vo flexe by sa zalomený text „E-shop klimatizácie“ roztiahol
     na celú šírku stĺpca a ↗ by odskočila k pravému okraju; takto je ikona hneď za slovom (a nezalomí sa sama) */
  .paticka__odkazy a:has(> .ikona) { display: block; padding-block: 12px; }
  .paticka__znacka > * + *:where(:not(.paticka__kontakt)) { margin-top: 12px; }   /* kontakty majú v main.css margin 0 – ostáva */
  .paticka__znacka img { height: 36px; }
  .paticka__kontakt { gap: 10px; }
  .paticka__clanky time { font-size: .875rem; }
  .paticka__udaje { padding-block: 18px; gap: 4px 16px; font-size: .875rem; }
  /* spodný riadok 14 px a menšia medzera → „Ochrana osobných údajov“ a „Nastavenia cookies“ v jednom riadku od ~360 px
     (−48 px; bez toho mala pätička 1 265 – 1 277 px, cieľ špecifikácie je ≤ 1 250) */
  .paticka__spodok { padding-block: 14px 20px; font-size: .875rem; }
  .paticka__spodok ul { column-gap: 16px; }


  /* ------------------------------------------------------------------------
     18. COOKIE LIŠTA (spec 3.18) – dnes 366 px = 43 % obrazovky → ~230 px
     Tri rovnocenné tlačidlá v jednom riadku v pôvodnom poradí (žiadne zvýhodnenie súhlasu, poradie fokusu = vizuálne).
     ------------------------------------------------------------------------ */
  .cookie-lista { left: 8px; right: 8px; bottom: calc(8px + env(safe-area-inset-bottom, 0px)); padding: 16px; border-radius: 18px; font-size: .875rem; line-height: 1.5; }
  .cookie-lista__nadpis { font-size: 1.125rem; margin-bottom: 4px; }
  .cookie-lista__tlacidla { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
  .cookie-lista__tlacidla .btn { min-height: 48px; padding: 0 8px; font-size: .875rem; line-height: 1.15; white-space: normal; }
  @media (max-width: 359px) {
    /* pri 320 px sa „Odmietnuť“ a „Nastavenia“ (jedno slovo, 14 px) do tretiny nezmestia → stĺpce aspoň na šírku
       najdlhšieho slova, menší vnútorný okraj; stále jeden riadok, rovnaký vzhľad, pôvodné poradie */
    .cookie-lista__tlacidla { grid-template-columns: repeat(3, minmax(min-content, 1fr)); }
    .cookie-lista__tlacidla .btn { padding: 0 4px; }
  }


  /* ------------------------------------------------------------------------
     19. NAJMENŠIE PÍSMO 14 px – spoločné prvky (spec 3.19)
     (+ table th, .krok__rola strong, .paticka__nadpis, .paticka__clanky time vyššie.)
     Výnimky: .doplnit, .sp-karta__docasne (dočasné značky), .stitok > li > small (rebríček tried), widgety ≥ 12 px.
     ------------------------------------------------------------------------ */
  .odznak { font-size: .875rem; }
  .pred-po__stitok { font-size: .875rem; }
  .filter__pocet { font-size: .875rem; }

  /* ------------------------------------------------------------------------
     Čo tento súbor na telefóne skrýva (úplný zoznam, spec 3.20) – len dekoratívne alebo duplicitné:
     · .hero-sluzba__obsah > .breadcrumbs + .eyebrow (okrem PUR) – opakuje poslednú položku omrviniek
     · .dotacia-box__vizual – dekoratívny rebríček
     · .sekcia--zelena .akcie > .btn[href^="tel:"] (podstránky) – telefón je v lište aj v #obhliadka
     · .pp-hore – plávajúca šípka hore prekrývala obsah (náhrada v pätičke zatiaľ v HTML nie je – pozri blok 16)
     · blok „Z blogu“ v pätičke – duplicitná navigácia
     ------------------------------------------------------------------------ */
}
/* 4. 10. 2026 – mobil: formulár a breadcrumbs */
@media (max-width: 767px) {
  /* „Nezáväzné.“ sa pod tlačidlom zalamovalo ako osamotené slovo */
  .formular__pata { flex-direction: column; align-items: stretch; gap: 8px; }
  .formular__pata > .btn { width: 100%; justify-content: center; }
  .formular__pata > small { display: none; }
  /* cesta (breadcrumbs): bez „Domov“, aby nebola na 3 riadky; písmo 14 px (mobilné minimum projektu – 12 px bolo pod ním),
     najdlhšia cesta (Obklady a dlažby › Betónový dizajn › Design Industry) má aj pri 360 px najviac 2 riadky */
  .breadcrumbs ol { font-size: .875rem; font-weight: 600; }
  .breadcrumbs li:first-child { display: none; }
  .breadcrumbs li:nth-child(2)::before { display: none; }
  .breadcrumbs li + li::before { margin: 0 6px; }
}
/* 4. 10. 2026 – mobil: hviezdička súhlasu, úradné hodiny, odkaz E-shop v pätičke */
@media (max-width: 767px) {
  /* povinná hviezdička za textom súhlasu padala sama na nový riadok („…osobných údajov.“ ↵ „*“) –
     mimo toku ostáva prilepená za poslednou bodkou (najviac 8 px do vnútorného okraja karty) */
  .suhlas .pole__povinne { position: absolute; margin-left: .3em; }
  /* „Úradné hodiny: pondelok až piatok 9:00 – 15:00“ sa lámalo na „– 15:00“ v samostatnom riadku:
     vyvážené riadky a ikona pri prvom riadku */
  .cta-sekcia__hodiny { align-items: flex-start; text-wrap: balance; }
  .cta-sekcia__hodiny > .ikona { flex: none; margin-top: .2em; }
  /* „E-shop klimatizácie ↗“: dekoratívna šípka von padala sama na nový riadok (do stĺpca sa nezmestí ani pri 390 px)
     → na telefóne je skrytá; text pre čítačky „(otvorí sa v novom okne)“ ostáva */
  .paticka__odkazy a > .ikona:has(> use[href$="#sipka-von"]) { display: none; }
}

/* ==========================================================================
   4. 10. 2026 – MOBIL: ZDIEĽANÉ BLOKY, 2. kolo (agent „zdielane“) – čipy formulára, spodok pätičky, animácie
   Všetko vo vnútri @media (max-width: 767px) → počítač a tablet (≥ 768 px) sa nemenia.
   Šípka „späť hore“ (.pp-hore) je v css/komponenty/plavajuci-panel.css (blok „mobil“ na konci súboru).
   ========================================================================== */
@media (max-width: 767px) {

  /* ------------------------------------------------------------------------
     ČIPY VO FORMULÁRI (#obhliadka aj dotačný formulár) – dva stĺpce po 144 px pri 360 px = 102 px na text:
     „Okná a tieniaca technika“ a „Tepelné čerpadlo“ (14 px: 113 / 125 px) sa lámali na 3 riadky (čip 67 px).
     4. 10. 2026 (QA): čipy cez celú šírku pod 380 px robili nepravidelnú mriežku (2 – 1 – 1 – 2 – 2 …) → aj pod 380 px
     ostávajú 2 stĺpce; „Tepelné čerpadlo“ a „Okná a tieniaca technika“ sú vedľa seba (3. a 4. voľba = 2. riadok) a text
     sa zalomí na 2 – 3 riadky. Čipy v jednom riadku mriežky majú vždy ROVNAKÚ výšku (align-items: stretch – .cip je
     flex a jeho span sa roztiahne); dotacie.css dáva .dp-otazka.cipy / .dt-otazky .cipy align-items: flex-start
     (špecificita 0,2,0) → rovnaké selektory tu, tento súbor je neskôr.
     Pri 320 px má stĺpec 124 px (76 px na text) – „Klimatizácia“ (89 px) by pretiekla → jeden stĺpec.
     ------------------------------------------------------------------------ */
  .cipy, .dp-otazka.cipy, .dt-otazky .cipy { align-items: stretch; }
  @media (max-width: 339px) {
    .cipy { grid-template-columns: minmax(0, 1fr); }
  }
  /* DOTÁCIE – pomocník pre firmy (kroky sú skryté, kým ich používateľ neotvorí, preto ich automatická kontrola nevidela):
     „Mikro alebo malá (do 49 zamestnancov)“ pretekalo z čipu – slovo „zamestnancov)“ je širšie než text 2-stĺpcového čipu
     aj pri 390 px; „V Bratislavskom kraji“ pretekalo pri 360 px. Tieto dve skupiny volieb idú na užších telefónoch do
     jedného stĺpca (všetky voľby rovnako široké, znenie ostáva – „Bratislavský kraj“ netreba skracovať). */
  @media (max-width: 429px) { .cipy:has(> .cip > input[name="f-velkost"]) { grid-template-columns: minmax(0, 1fr); } }
  @media (max-width: 379px) { .cipy:has(> .cip > input[name="f-kraj"]) { grid-template-columns: minmax(0, 1fr); } }

  /* ------------------------------------------------------------------------
     DOMOV – posuvník služieb: pilulka s navigáciou (šípka + 11 bodiek + šípka) mala obsah 390 px a max-width
     calc(100 % − 16 px) → pri 360/390 px pravá šípka trčala z pilulky a mimo obrazovky. Bodky na telefóne užšie
     (19 px, aktívna 29 px; pod 340 px 15 / 25 px) → obsah 339 px (360) / 295 px (320), šípky ostávajú v pilulke.
     Viditeľná bodka ostáva 10 px; sluzby-posuvnik.css má pod 400 px gap 0 a padding 4 px. Počítač sa nemení.
     ------------------------------------------------------------------------ */
  .sp-sluzby__bodky { gap: 0; padding-inline: 4px; }
  .sp-sluzby__bodka { width: 19px; }
  .sp-sluzby__bodka[aria-current="true"] { width: 29px; }
  .sp-sluzby__bodka[aria-current="true"]::before { width: 20px; }
  @media (max-width: 339px) {
    .sp-sluzby__bodka { width: 15px; }
    .sp-sluzby__bodka::before { width: 8px; height: 8px; }
    .sp-sluzby__bodka[aria-current="true"] { width: 25px; }
    .sp-sluzby__bodka[aria-current="true"]::before { width: 16px; }
  }

  /* ------------------------------------------------------------------------
     PÄTIČKA – spodný riadok: „Ochrana osobných údajov“ + „Nastavenia cookies“ majú spolu ~356 px (14 px, 600),
     do 328 px pri 360 px sa nezmestia → pod 380 px zámerne pod sebou, bez medzery navyše (dotykové ciele 44 px ostávajú)
     ------------------------------------------------------------------------ */
  @media (max-width: 379px) {
    .paticka__spodok ul { flex-direction: column; align-items: flex-start; gap: 0; }
  }
  /* koniec stránky: šípka „späť hore“ (44 px, 8 px nad lištou) pri úplnom odrolovaní zakrývala posledný riadok
     („Nastavenia cookies“) → pätička končí 60 px nad lištou (blok 16 mal 4 px); šípka tam sedí v prázdnej tmavej ploche */
  .paticka { padding-bottom: calc(var(--mobil-lista-h) + 60px); }

  /* ------------------------------------------------------------------------
     ANIMÁCIE ODHAĽOVANIA (main.css sekcia 16): na telefóne 0,9 / 1,1 s + posun 34 px + odstup 90 ms na kartu pôsobili
     ako „zasekávanie“ – prvok sa ešte sekundu dosúval, kým používateľ rolovať ďalej. Telefón: 0,5 / 0,6 s, posun 18 px,
     odstupy × 0,6 (--oneskorenie dáva main.js inline → škáluje sa v calc()). Selektory 1 : 1 z main.css → rovnaká
     špecificita, tento súbor je neskôr. Rovnako ako v main.css len pri prefers-reduced-motion: no-preference
     (inak by samostatná transition-duration pôsobila na „transition: all“). Varianty fade / scale / lines majú
     v main.css vyššiu špecificitu (0,4,1) → ich transform ostáva.
     ------------------------------------------------------------------------ */
  @media (prefers-reduced-motion: no-preference) {
    html.js:not(.noanim) [data-reveal]:not(.je-odhalene),
    html.js:not(.noanim) [data-reveal-group] > :not(.je-odhalene) { transform: translateY(18px); }
    html.js:not(.noanim) [data-reveal], html.js:not(.noanim) [data-reveal-group] > * {
      transition: opacity .5s var(--ease), transform .6s var(--ease);
      transition-delay: calc(var(--oneskorenie, 0ms) * .6);
    }
    html.js:not(.noanim) [data-reveal-group] > .je-odhalene {
      transition: opacity .5s var(--ease) calc(var(--oneskorenie, 0ms) * .6), transform .6s var(--ease) calc(var(--oneskorenie, 0ms) * .6),
        box-shadow var(--t) var(--ease), background var(--t) var(--ease);
    }
    .rl-i { transition: transform .6s var(--ease), opacity .4s ease; transition-delay: calc(var(--riadok, 0) * 80ms + var(--oneskorenie, 0ms) * .6); }
    html.js:not(.noanim) [data-reveal="lines"].je-rozdelene em {
      transition: --em-ciara .5s ease calc(var(--em-riadok, 0) * 80ms + .7s + var(--oneskorenie, 0ms) * .6);
    }
  }
}