@charset "utf-8";
/* ==========================================================================
   vspservis-bilina.cz — podstranky (2026-07)
   Aditivni vrstva NAD styly.css. Legacy se needituje, jen se prebiji.
   Prevzato z dvojcete vsp-autopraha.cz (spec: _root/docs/vsp-autopraha.cz/
   podstranky-redesign-spec.md); autopraha-specificke casti (vinetace hero,
   obrazovy predel .vsp-art-pas) vypusteny.
   ========================================================================== */

:root{
  --vsp-ease: cubic-bezier(.4,0,.2,1);   /* jediny easing na celem webu */
  --vsp-akcent: #0077DF;                 /* prevzato z odkazu ve styly.css */
  --vsp-ink: #000000;
  --vsp-muted: #4A4A4A;
  --vsp-line: #DDDDDD;
  --vsp-bg-alt: #F3F3F3;
  --vsp-radius: 16px;                    /* zaobleni PANELU (karty, fotky, mapy)
                                            na celem webu vcetne HP — tlacitka
                                            si drzi vlastnich 8 px.
                                            Bylo 8 px, ale nektere zdrojove fotky
                                            maji vlastni zaobleny roh (~10 px), ktery
                                            pri 8px orezu panelu prosvital jako druhy
                                            roh. Vetsi radius panelu ho prekryje. */
  --vsp-stin: 0 10px 24px -12px rgba(0,0,0,.28);
  --vsp-stin-hover: 0 20px 34px -14px rgba(0,0,0,.34);
  --vsp-cteni: 760px;                    /* max sirka textoveho sloupce */
}

/* ==========================================================================
   1. SCROLL REVEAL
   Atribut nasazuje JS (funkce/efekty.js) => bez JS zustane obsah viditelny.
   ========================================================================== */

@media (prefers-reduced-motion: no-preference){
  [data-reveal]{
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .7s var(--vsp-ease), transform .7s var(--vsp-ease);
    will-change: opacity, transform;
  }
  [data-reveal].je-videt{
    opacity: 1;
    transform: none;
    will-change: auto;
  }
}

/* ==========================================================================
   2. TYPOGRAFIE OBSAHU Z TINYMCE
   Wrappery: .text_detail / .zkraceny_vypis / .blok_text_nad_clanky / .text_kontakt
   Obsah z adminu se NEEDITUJE kvuli vzhledu — stylujeme ho zvenci.
   ========================================================================== */

/* --- ctecí sloupec ------------------------------------------------------- */
.text_detail .blok_sirky_webu_uzky,
.zkraceny_vypis .blok_sirky_webu_uzky{
  max-width: var(--vsp-cteni);
}

/* --- odstavce ------------------------------------------------------------ */
.text_detail p,
.zkraceny_vypis p,
.blok_text_nad_clanky p{
  margin: 0 0 18px 0;
  line-height: 1.62;
  color: var(--vsp-muted);
}
.text_detail p:last-child,
.zkraceny_vypis p:last-child,
.blok_text_nad_clanky p:last-child{
  margin-bottom: 0;
}

/* perex je vyraznejsi nez bezny text */
.zkraceny_vypis p{
  font-size: 20px;
  line-height: 1.6;
  color: var(--vsp-ink);
}

.text_detail strong,
.zkraceny_vypis strong{
  color: var(--vsp-ink);
  font-weight: 600;
}

/* --- nadpisy z editoru --------------------------------------------------- */
/* POZOR: .text_kontakt je zamerne VYNECHAN — pouziva ho i blok kontaktu
   v clanku (.text_vypis_kontakt) a ma vlastni legacy styly (styly.css:1659).
   Kontaktni blok se resi ve fazi F5, ne tady.                            */
.text_detail h2{
  margin: 52px 0 18px 0;
  font-size: 36px;
  line-height: 1.2;
  font-family: "Corporate A";
  font-weight: 500;
  color: var(--vsp-ink);
}
.text_detail h3{
  margin: 38px 0 14px 0;
  font-size: 26px;
  line-height: 1.25;
  font-family: "Corporate A";
  font-weight: 500;
  color: var(--vsp-ink);
}
/* prvni nadpis nesmi odstrkovat horni okraj sekce */
.text_detail > .blok_sirky_webu_uzky > h2:first-child,
.text_detail > .blok_sirky_webu_uzky > h3:first-child{
  margin-top: 0;
}

/* jemna linka pod h2 — drzi rytmus dlouhych textu */
.text_detail h2{
  padding-bottom: 14px;
  border-bottom: 1px solid var(--vsp-line);
}

/* --- seznamy ------------------------------------------------------------- */
/* POZOR: odrazky resi globalni .obsah ul li:before (PNG, default.css:187).
   Nepridavat vlastni list-style — delalo by to dve odrazky.            */
.text_detail ul,
.zkraceny_vypis ul{
  margin: 0 0 20px 20px;
}
.text_detail li,
.zkraceny_vypis li{
  margin: 0 0 8px 0;
  line-height: 1.55;
  color: var(--vsp-muted);
}

/* --- zaskrtavaci seznam (ul.vsp-check) ----------------------------------- */
/* Nahrazuje ✓ znaky, ktere byly driv zapecene v textu jako <br> radky.
   Legacy PNG odrazku zabijime vyssi specificitou (.obsah ul.vsp-check).  */
.obsah ul.vsp-check{
  margin-left: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 12px;
}
.obsah ul.vsp-check li{
  position: relative;
  margin: 0;
  padding: 0 0 0 38px;
  color: var(--vsp-ink);
  line-height: 1.5;
}
.obsah ul.vsp-check li::before{
  content: '';                          /* prebiji content: url(PNG) z default.css */
  position: absolute;
  left: 0;
  top: 2px;
  width: 22px;
  height: 22px;
  padding: 0;
  border-radius: 50%;
  background-color: var(--vsp-akcent);
  /* Lucide "check" jako maska — barvu resi background-color vyse */
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: 18px 18px;
          mask-size: 18px 18px;
}

/* --- znacky vozidel jako chipy (ul.vsp-znacky) --------------------------- */
/* Z holeho seznamu znacek udela radu stitku. Legacy PNG odrazku zabiji
   vyssi specificita (.obsah ul.vsp-znacky).                               */
.obsah ul.vsp-znacky{
  margin: 0 0 22px 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.obsah ul.vsp-znacky li{
  margin: 0;
  padding: 8px 18px;
  border: 1px solid var(--vsp-line);
  border-radius: 999px;
  background-color: #FFFFFF;
  font-size: 16px;
  line-height: 1.4;
  color: var(--vsp-ink);
  transition: border-color .2s var(--vsp-ease), background-color .2s var(--vsp-ease);
}
.obsah ul.vsp-znacky li::before{
  content: '';                          /* prebiji content: url(PNG) */
  display: none;
}
.obsah ul.vsp-znacky li:hover{
  border-color: var(--vsp-akcent);
  background-color: var(--vsp-bg-alt);
}

/* --- dlazdicove seznamy -------------------------------------------------- */
/* .vsp-sortiment = sortiment dilu, .vsp-sluzby = servisni prace.
   Stejny vzhled, jina ikona. Jednotna ikona pro vsechny polozky zamerne —
   per-item ikony pres nth-child by se rozjely, jakmile klient v adminu
   polozku prida.                                                          */
.obsah ul.vsp-sortiment,
.obsah ul.vsp-sluzby{
  margin: 0 0 24px 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
.obsah ul.vsp-sortiment li,
.obsah ul.vsp-sluzby li{
  position: relative;
  margin: 0;
  padding: 16px 18px 16px 54px;
  background-color: var(--vsp-bg-alt);
  border-radius: var(--vsp-radius);
  font-size: 17px;
  line-height: 1.45;
  color: var(--vsp-ink);
  transition: transform .25s var(--vsp-ease), box-shadow .25s var(--vsp-ease);
}
.obsah ul.vsp-sortiment li::before,
.obsah ul.vsp-sluzby li::before{
  content: '';                          /* prebiji content: url(PNG) */
  position: absolute;
  left: 18px;
  top: 17px;
  width: 22px;
  height: 22px;
  padding: 0;
  background-color: var(--vsp-akcent);
  /* Lucide "wrench" */
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
}
/* servisni prace — Lucide "wrench" nahrazen "settings" (ozubene kolo) */
.obsah ul.vsp-sluzby li::before{
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
}

@media (prefers-reduced-motion: no-preference){
  .obsah ul.vsp-sortiment li:hover,
  .obsah ul.vsp-sluzby li:hover{
    transform: translateY(-3px);
    box-shadow: var(--vsp-stin);
  }
}

/* --- odkazy v obsahu ----------------------------------------------------- */
.text_detail a:not([class]),
.zkraceny_vypis a:not([class]){
  color: var(--vsp-akcent);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color .2s var(--vsp-ease);
}
.text_detail a:not([class]):hover,
.zkraceny_vypis a:not([class]):hover{
  color: var(--vsp-ink);
}

/* --- tabulky z editoru --------------------------------------------------- */
/* default.css:154 dava 1px cerny ramecek — zjemnujeme */
.text_detail table,
.zkraceny_vypis table{
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 22px 0;
}
.text_detail td, .text_detail th,
.zkraceny_vypis td, .zkraceny_vypis th{
  border: 1px solid var(--vsp-line);
  padding: 12px 14px;
  line-height: 1.5;
}
.text_detail th,
.zkraceny_vypis th{
  background-color: var(--vsp-bg-alt);
  font-weight: 600;
  text-align: left;
}

/* --- obrazky z editoru --------------------------------------------------- */
.text_detail img:not([class]){
  border-radius: var(--vsp-radius);
}
/* iframe (napr. Google My Maps na strance O nas) */
.text_detail iframe{
  display: block;
  width: 100%;
  border: 0;
  border-radius: var(--vsp-radius);
  box-shadow: var(--vsp-stin);
}

/* ==========================================================================
   3. HLAVICKY PODSTRANEK — dychani
   ========================================================================== */

.obsah_clanek_uvod{
  padding: 80px 0 44px 0;
}

/* --- hlavicka s fotkou (.obsah_clanek_uvod_art) -------------------------- */
/* Fotku nastavuje PHP inline (clanek.php — hlavni obrazek clanku, jinak fotka
   z fotogalerie). Kde fotka neni, plati puvodni bila hlavicka vyse.         */
.obsah_clanek_uvod_art{
  position: relative;
  padding: 150px 0 60px 0;
  background-color: #161616;      /* podklad nez se fotka nacte */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
/* Ztmaveni pro citelnost bileho nadpisu — stejny princip jako HP dlazdice.
   Silnejsi dole, kde sedi text.                                            */
.obsah_clanek_uvod_art::before{
  content: '';
  position: absolute;
  left: 0; right: 0; top: 0; bottom: 0;
  background: linear-gradient(to bottom,
              rgba(0,0,0,.30) 0%,
              rgba(0,0,0,.45) 45%,
              rgba(0,0,0,.78) 100%);
}
.obsah_clanek_uvod_art > *{
  position: relative;
  z-index: 2;
}
.obsah_clanek_uvod_art .h1_clanek{
  /* Legacy 80/90 delalo z dlouhych nazvu servisu ctyrradkovy blok pres
     celou obrazovku. Na artu staci mensi. */
  font-size: 58px;
  line-height: 66px;
  color: #FFFFFF;
  text-shadow: 0 2px 12px rgba(0,0,0,.55);   /* jako .h1_home na HP */
}
.obsah_clanek_uvod_art .h2_clanek{
  color: rgba(255,255,255,.88);
  text-shadow: 0 1px 8px rgba(0,0,0,.5);
}
.obsah_clanek_uvod_art .linka_h1_h2_clanek{
  background-color: #FFFFFF;
}
.h2_clanek{
  margin-top: 14px;
  color: var(--vsp-muted);
}
.blok_text_nad_clanky{
  max-width: var(--vsp-cteni);
  margin: 0 auto;
  text-align: center;
}
/* Vypis s herem: legacy .obsah_vypis ma padding 80px 0, ktery by nad
   artem nechal bily pruh (u clanku tenhle problem neni, .obsah_clanek
   padding nema). */
.obsah_vypis_s_herem{
  padding-top: 0;
}
/* intro text vypisu, kdyz nad nim sedi hero s artem (h1 uz je v heru) */
.obsah_vypis_horni_pod_herem{
  padding-top: 56px;
  margin-bottom: 40px;
}

/* ==========================================================================
   4. KARTY A TLACITKA — spolecny standard
   Plati pro vypis (.polozka_vypis) i dalsi dlazdice na podstrankach.
   ========================================================================== */

.polozka_vypis{
  box-shadow: var(--vsp-stin);
  transition: transform .3s var(--vsp-ease), box-shadow .3s var(--vsp-ease);
}

@media (prefers-reduced-motion: no-preference){
  .polozka_vypis:hover{
    transform: translateY(-6px);
    box-shadow: var(--vsp-stin-hover);
  }
  /* zoom fotky v masce — jemnejsi nez legacy scale(1.1) */
  .polozka_vypis .obal_obr_vypis img{
    transition: transform .45s var(--vsp-ease);
  }
  .polozka_vypis:hover .obal_obr_vypis img{
    transform: scale(1.06);
  }
  /* tlacitka: lift + odjizdejici sipka */
  .tl_vypis,
  .tl_uvodni_blok_home,
  .tl_cik_cak{
    transition: background-color .2s var(--vsp-ease), color .2s var(--vsp-ease),
                transform .2s var(--vsp-ease), background-position .2s var(--vsp-ease);
  }
  .tl_vypis:hover,
  .tl_cik_cak:hover{
    transform: translateY(-2px);
    background-position: right 20px center;
  }
  .tl_vypis:active,
  .tl_cik_cak:active{
    transform: translateY(1px);
  }
}

/* --- obrazovy predel (.vsp-art-pas) -------------------------------------- */
/* Plna sirka, deli dlouhy text od zaverecne sekce. Vklada clanek.php podle mapy. */
.vsp-art-pas{
  display: block;
  clear: both;
  height: 320px;
  background-color: #161616;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* --- spodni CTA hero (.vsp-cta-pas) -------------------------------------- */
/* Uzavira podstranku odkazem ven (Truck Shop). Fotka + ztmaveni + bily text. */
.vsp-cta-pas{
  position: relative;
  display: block;
  clear: both;
  padding: 92px 0;
  background-color: #161616;
  text-align: center;
  overflow: hidden;
}
.vsp-cta-pas__foto{
  position: absolute;
  /* presah kompenzuje mekke okraje po blur */
  left: -20px; right: -20px; top: -20px; bottom: -20px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: blur(7px);
  transform: scale(1.04);
}
.vsp-cta-pas__stin{
  position: absolute;
  left: 0; right: 0; top: 0; bottom: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,.72) 0%, rgba(0,0,0,.82) 100%);
}
.vsp-cta-pas__in{
  position: relative;
  z-index: 2;
}
.vsp-cta-pas__nadraz{
  display: block;
  margin-bottom: 10px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: rgba(255,255,255,.82);
}
.vsp-cta-pas__nadpis{
  display: block;
  margin: 0;
  font-size: 56px;
  line-height: 1.1;
  font-family: "Corporate A";
  font-weight: 500;
  text-transform: uppercase;
  color: #FFFFFF;
}
.vsp-cta-pas__linka{
  display: block;
  width: 40px;              /* brand prvek — stejna linka jako u nadpisu */
  height: 2px;
  margin: 22px auto 30px auto;
  background-color: #FFFFFF;
}
/* tlacitko na tmavem podkladu = inverzni varianta */
.vsp-cta-pas__tl{
  background-color: #FFFFFF;
  color: #000000;
}

/* ==========================================================================
   5. KONTAKTY V CLANKU (modul kontakty.php)
   Legacy vypis byl 4 sloupce zarovnane vlevo — pri dvou kontaktech
   to viselo v levem rohu. Prerovnano na centrovane karty.
   ========================================================================== */

.obal_kontakty_detail .velky_nadpis_kontakt{
  text-align: center;
  margin-bottom: 12px;
}
.obal_kontakty_detail .linka_velky_nadpis_kontakt{
  right: 0;
  margin-left: auto;
  margin-right: auto;
}
.obal_kontakty_detail .nadpis_kontakt_detail{
  /* h3 kategorie je primy potomek flex kontejneru nize — musi zabrat
     cely radek, jinak se postavi vedle karet */
  flex: 0 0 100%;
  width: 100%;
  margin: 44px 0 4px 0;
  text-align: center;
}
.obal_kontakty_detail .nadpis_kontakt_detail:first-child{
  margin-top: 16px;
}

.obal_polozek_vypis_kontakt{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: 20px;
  text-align: left;
}
.polozka_vypis_kontakt{
  /* prebiji legacy width 23% + inline-block.
     min() kvuli uzkym telefonum — pevnych 300px + padding 2x26 pretekalo
     na 360px displeji o 4px. */
  display: block;
  width: min(300px, 100%);
  max-width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 24px 26px;
  font-size: 18px;          /* rodic ma font-size 0 (legacy inline-block trik) */
  background-color: var(--vsp-bg-alt);
  border-radius: var(--vsp-radius);
  transition: transform .25s var(--vsp-ease), box-shadow .25s var(--vsp-ease);
}
@media (prefers-reduced-motion: no-preference){
  .polozka_vypis_kontakt:hover{
    transform: translateY(-4px);
    box-shadow: var(--vsp-stin);
  }
}
.polozka_vypis_kontakt .polozka_vypis_kontakt_in{
  padding: 0;
}
.polozka_vypis_kontakt .obal_h2_h3_vypis_kontakt{
  height: auto;             /* legacy fixni 58px rezalo delsi pozice */
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--vsp-line);
}

/* ==========================================================================
   6. FOTOGALERIE — mozaika
   Legacy vypis byl pravidelna mrizka stejnych dlazdic. Prerovnano na
   mozaiku (vzor pozemkyOtovice): explicitni grid-column/row per fotka,
   ne masonry. Lightbox resi stavajici fancybox, nesahame na nej.

   Pozor: vsech 5 fotek je na sirku (4x 640x480 = 4:3, 1x 1400x926), zadny
   portret — proto zadny vysoky ani uzky slot; vsechny sloty drzi poměr
   blizky 4:3, aby se fotky neorezavaly. (Na disku lezi jeste 12mini.png,
   ale v DB k teto galerii nepatri — sirotek po smazani.)
   ========================================================================== */

.obal_fotogalerie_pomerove .blok_sirky_webu{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 280px;
  gap: 16px;
}
/* pomocne prvky legacy layoutu by v gridu zabraly bunku */
.obal_fotogalerie_pomerove .pomer_fotek_v_galerii,
.obal_fotogalerie_pomerove .spacer{
  display: none;
}

.obal_fotogalerie_pomerove a[data-fancybox]{
  display: block;
  position: relative;
  overflow: hidden;
  border-radius: var(--vsp-radius);
  background-color: var(--vsp-bg-alt);
}
/* Legacy JS (skripty_pro_upravu_fotek.js) pocita pomerove vysky a zapisuje
   je inline — proto !important, jinak by prebil grid. */
/* margin: 0 je nutny kvuli .polozka_fotogalerie_pomerove{margin:1%} ze
   styly.css — 1 % z bunky (~7,5 px) odsouvalo fotku doprava dolu, takze
   vlevo nahore prosvitalo sede pozadi panelu a vpravo dole fotka pretekala
   pod overflow:hidden. */
.obal_fotogalerie_pomerove .polozka_fotogalerie_pomerove,
.obal_fotogalerie_pomerove .polozka_fotogalerie_pomerove_in{
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}
/* Tentyz JS zapisuje rozmery i na <img> (height:auto, zaporny margin-top
   pro "vycentrovani" v legacy layoutu) — proto i tady !important. */
.obal_fotogalerie_pomerove a[data-fancybox] img{
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover;
  object-position: center;
}
@media (prefers-reduced-motion: no-preference){
  .obal_fotogalerie_pomerove a[data-fancybox] img{
    transition: transform .45s var(--vsp-ease);
  }
  .obal_fotogalerie_pomerove a[data-fancybox]:hover img{
    transform: scale(1.06);
  }
}

/* Rozvrzeni 5 fotek: jedna velka pres 2x2 vlevo + ctyri male vpravo.
   Velky slot ma pomer ~1.1, male ~1.1 — obojí blizko 4:3 zdrojovych fotek,
   takze ořez je minimalni. Sesta a dalsi fotka z adminu se doplni
   automaticky do dalsi rady (bez pravidla), nic se nerozbije. */
.obal_fotogalerie_pomerove a[data-fancybox]:nth-of-type(1){ grid-column: 1 / span 2; grid-row: 1 / span 2; }
.obal_fotogalerie_pomerove a[data-fancybox]:nth-of-type(2){ grid-column: 3;          grid-row: 1; }
.obal_fotogalerie_pomerove a[data-fancybox]:nth-of-type(3){ grid-column: 4;          grid-row: 1; }
.obal_fotogalerie_pomerove a[data-fancybox]:nth-of-type(4){ grid-column: 3;          grid-row: 2; }
.obal_fotogalerie_pomerove a[data-fancybox]:nth-of-type(5){ grid-column: 4;          grid-row: 2; }

/* Male galerie (napr. O nas ma jedinou fotku) — mozaika pro pet fotek by
   je nechala viset v levem rohu. Musi byt AZ ZA pravidly vyse, specificita
   je stejna a rozhoduje poradi. */
.obal_fotogalerie_pomerove a[data-fancybox]:only-of-type{
  grid-column: 2 / span 2;   /* jedna fotka na stred */
  grid-row: 1 / span 2;
}
.obal_fotogalerie_pomerove a[data-fancybox]:first-of-type:nth-last-of-type(2),
.obal_fotogalerie_pomerove a[data-fancybox]:first-of-type:nth-last-of-type(2) ~ a[data-fancybox]{
  grid-row: 1 / span 2;      /* dve fotky — kazda pres pulku */
}
.obal_fotogalerie_pomerove a[data-fancybox]:first-of-type:nth-last-of-type(2){ grid-column: 1 / span 2; }
.obal_fotogalerie_pomerove a[data-fancybox]:first-of-type:nth-last-of-type(2) ~ a[data-fancybox]{ grid-column: 3 / span 2; }

/* ==========================================================================
   7. KONTAKT — hero, mapy a firemni blok
   ========================================================================== */

/* Hero Kontaktu ma vlastni sablonu (clanek_kontakt.php) a legacy velikosti
   80/90 + 36/46. Srovnano s hero podstranek (58/66), aby dlouhy nazev
   nedelal robustni blok pres pul obrazovky. */
.obsah_clanek_kontakt_uvod .h1_clanek_kontakt{
  font-size: 58px;
  line-height: 66px;
  text-shadow: 0 2px 12px rgba(0,0,0,.55);
}
.obsah_clanek_kontakt_uvod .h2_clanek_kontakt{
  margin-top: 12px;
  font-size: 26px;
  line-height: 34px;
  color: rgba(255,255,255,.88);
}
.obsah_clanek_kontakt_uvod{
  padding: 78px 0 64px 0;
}

.blok_kontakt_mapa iframe,
.blok_kontakt_prohlidka iframe{
  display: block;
  border: 0;
  border-radius: var(--vsp-radius);
  box-shadow: var(--vsp-stin);
}
/* nadpisy nad mapami dostanou stejnou brand linku jako zbytek webu */
.obsah_clanek_kontakt .h2_text_vypis_kontakt{
  position: relative;
  padding-bottom: 16px;
  margin-bottom: 22px;
}
.obsah_clanek_kontakt .h2_text_vypis_kontakt::after{
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 40px;
  height: 2px;
  background-color: var(--vsp-ink);
}

/* ==========================================================================
   8. PATICKA — firemni udaje presunute ze "sedeho pruhu"
   Obsah jde z adminu (clanek Kontakt) a je zabaleny v <table> z TinyMCE.
   Rozbalujeme ho na bloky a nadpisy sjednocujeme se zbytkem paticky.
   ========================================================================== */

.sloupec_paticka_kontakt table,
.sloupec_paticka_kontakt tbody,
.sloupec_paticka_kontakt tr,
.sloupec_paticka_kontakt td{
  display: block;
  width: auto;
  border: 0;
  padding: 0;
  background: none;
}
.sloupec_paticka_kontakt td{
  margin-bottom: 22px;
}
.sloupec_paticka_kontakt td:last-child{
  margin-bottom: 0;
}
/* prazdna bunka z tabulky 2x2 (v adminu drzi mrizku) */
.sloupec_paticka_kontakt td:empty{
  display: none;
  margin: 0;
}

/* Nadpisy sloupcu — sjednoceno na 28/36 pro vsechny ctyri sloupce.
   Legacy 40/50 bylo delano pro tri sloupce; se ctyrmi se dlouhy nazev
   firmy lamal na dva radky a "Hlavni kontakty" prebijely obsah. */
.paticka .nadpis_sloupec_paticka,
.sloupec_paticka_kontakt h2{
  font-size: 28px;
  line-height: 36px;
  margin-bottom: 24px;
  padding-bottom: 14px;
}
.sloupec_paticka_kontakt h2{
  position: relative;
  display: block;
  margin-top: 0;
  font-family: "Corporate A";
  font-weight: 500;
}
.sloupec_paticka_kontakt h2::after{
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 40px;
  height: 2px;
  background-color: currentColor;
  opacity: .85;
}
/* druhy a dalsi nadpis uvnitr sloupce potrebuje odsazeni shora */
.sloupec_paticka_kontakt h2 ~ h2{
  margin-top: 36px;
}
.sloupec_paticka_kontakt strong{
  display: block;
  margin-bottom: 6px;
}
.sloupec_paticka_kontakt a{
  display: block;
}

/* druhy nadpis ve sloupci Servis + socialni site */
.nadpis_sloupec_paticka_druhy{
  margin-top: 34px;
}

/* ==========================================================================
   9. MOBILNI MENU — nase logika misto legacy Mony
   ==========================================================================
   PROC: Mona resi responsivni menu v funkce/skripty.js takto:
     if ($('.resp_menu').css('display') == 'block') { ...klik... } else { ...hover... }
   Ta podminka se vyhodnoti JEDNOU pri nacteni stranky a pri resize uz nikdy.
   Navic slideToggle() zapisuje inline display, ktery prezije zmenu breakpointu.
   Vysledek: pri zmenseni okna se menu chova nahodne — bud zustane rozbalene,
   nebo burger nereaguje. Na Mona webech se to opakuje porad.

   RESENI: viditelnost neridi display (ten je natvrdo flex), ale transform.
   Inline styly od jQuery tim prestanou hrat roli a stav drzi jedina trida
   na <html>, ktera se pri resize sama zresetuje. JS handler Mony je
   neutralizovan v funkce/efekty.js (capture + stopImmediatePropagation).
   ========================================================================== */

@media only screen and (max-width: 1310px){
  .horni_menu{
    /* !important prebiji inline display, ktery zapisuje jQuery slideToggle */
    display: flex !important;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: auto !important;
    max-height: none !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 90px 24px 40px 24px;
    box-sizing: border-box;
    background-color: #000000;
    overflow-y: auto;
    z-index: 900;
    transform: translateX(100%);
    visibility: hidden;
    transition: transform .35s var(--vsp-ease), visibility .35s var(--vsp-ease);
  }
  html.vsp-menu-otevrene .horni_menu{
    transform: none;
    visibility: visible;
  }
  /* polozky legacy menu jsou float left — v overlay je chceme pod sebou */
  .horni_menu .obal_polozky_menu{
    float: none;
    width: 100%;
    text-align: center;
  }
  .horni_menu .polozka_menu{
    display: block;
  }
  /* burger a logo zustavaji nad overlayem — branding ma byt videt
     i pri otevrenem menu */
  .resp_menu{
    position: relative;
    z-index: 950;
  }
  .hlavicka .logo,
  .hlavicka a:has(> .logo){
    position: relative;
    z-index: 950;
  }
  /* zamek scrollu pod otevrenym menu */
  html.vsp-menu-otevrene,
  html.vsp-menu-otevrene body{
    overflow: hidden;
  }
  /* legacy stin (jQuery fadeIn) uz neni potreba — overlay je pres celou plochu */
  .stin_pro_menu{
    display: none !important;
  }
}

@media only screen and (max-width: 1310px) and (prefers-reduced-motion: reduce){
  .horni_menu{
    transition: none;
  }
}

/* ==========================================================================
   10. DOTYKOVE OVLADANI
   Minimalni tap target 44x44 (Apple HIG). Legacy hodnoty byly delane
   pro mys, na telefonu se do nich tezko trefuje.
   ========================================================================== */

@media only screen and (max-width: 860px){
  /* burger byl 40x30 */
  .resp_menu{
    min-width: 44px;
    min-height: 44px;
  }
  /* telefony a maily v kartach kontaktu mely vysku 32px */
  .polozka_vypis_kontakt .obal_vypis_kontakt_hodnoty a{
    display: block;
    padding: 6px 0;
  }
  /* polozky mobilniho menu mely 38px */
  .horni_menu .polozka_menu{
    padding-top: 14px;
    padding-bottom: 14px;
  }
}

/* ==========================================================================
   11. HOMEPAGE — cik-cak sekce (Autoservis / Nahradni dily)
   Legacy .clanek_cik_cak_td_obr_in melo margin-right: 18 %, coz pri sloupci
   760px delalo 137px prazdna napravo od fotky. Fotka je navic 615x589
   (skoro ctverec) a zobrazovala se 1:1. Ted vyplni sloupec na sirku
   a je nizsi (landscape), mezera k textu zustava 40px.
   ========================================================================== */

/* Desktop zustava beze zmeny (odsazeni 18 % je soucast layoutu).
   Na mobilu se pouziva jiny element — .clanek_cik_cak_td_obr_resp — a ten
   byl uzsi nez text vedle nej (297 vs 337px), takze fotka nedosahovala
   k pravemu okraji. Ted vyplni sirku a je na sirku misto skoro ctverce. */
@media only screen and (max-width: 860px){
  .clanek_cik_cak_td_obr_resp{
    display: block;
    width: 100%;
    margin-right: 0;
  }
  .clanek_cik_cak_td_obr_resp img{
    display: block;
    width: 100%;
    height: 220px;          /* landscape misto puvodnich 615x589 */
    object-fit: cover;
    border-radius: var(--vsp-radius);
  }
}

/* ==========================================================================
   12. RESPONZIVITA
   ========================================================================== */

@media only screen and (max-width: 1230px){
  .obsah_clanek_uvod_art{ padding: 110px 0 46px 0; }
  .obsah_clanek_uvod_art .h1_clanek{ font-size: 44px; line-height: 52px; }
  .obsah_clanek_kontakt_uvod .h1_clanek_kontakt{ font-size: 44px; line-height: 52px; }
  .obsah_clanek_kontakt_uvod .h2_clanek_kontakt{ font-size: 22px; line-height: 30px; }
  .text_detail h2{ font-size: 30px; margin-top: 44px; }
  .text_detail h3{ font-size: 24px; margin-top: 32px; }
  .zkraceny_vypis p{ font-size: 19px; }
  .obsah_clanek_uvod{ padding: 60px 0 36px 0; }
}

@media only screen and (max-width: 860px){
  .text_detail h2{ font-size: 26px; margin-top: 38px; }
  .text_detail h3{ font-size: 22px; margin-top: 28px; }
  .zkraceny_vypis p{ font-size: 18px; }
  .obsah ul.vsp-check li{ padding-left: 32px; }

  .vsp-art-pas{ height: 220px; }
  .vsp-cta-pas{ padding: 64px 0; }
  .vsp-cta-pas__nadpis{ font-size: 38px; }

  /* galerie: 2 sloupce, prvni fotka pres celou sirku jako pas */
  .obal_fotogalerie_pomerove .blok_sirky_webu{
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 210px;
  }
  .obal_fotogalerie_pomerove a[data-fancybox]:nth-of-type(1){ grid-column: 1 / -1; grid-row: 1; }
  .obal_fotogalerie_pomerove a[data-fancybox]:nth-of-type(2){ grid-column: 1;      grid-row: 2; }
  .obal_fotogalerie_pomerove a[data-fancybox]:nth-of-type(3){ grid-column: 2;      grid-row: 2; }
  .obal_fotogalerie_pomerove a[data-fancybox]:nth-of-type(4){ grid-column: 1;      grid-row: 3; }
  .obal_fotogalerie_pomerove a[data-fancybox]:nth-of-type(5){ grid-column: 2;      grid-row: 3; }
  .obsah ul.vsp-check li::before{ width: 20px; height: 20px; -webkit-mask-size: 15px 15px; mask-size: 15px 15px; }
}

@media only screen and (max-width: 650px){
  .text_detail h2{ font-size: 24px; }
  .obsah_clanek_uvod{ padding: 44px 0 28px 0; }
  .obsah_clanek_uvod_art{ padding: 70px 0 34px 0; }
  .obsah_clanek_uvod_art .h1_clanek{ font-size: 30px; line-height: 38px; }
  /* Dlazdicove seznamy do jednoho sloupce az tady — na tabletu je misto
     na dva a jeden sloupec tam pusobil prazdne. */
  .obsah ul.vsp-sortiment,
  .obsah ul.vsp-sluzby{ grid-template-columns: 1fr; }
  /* tabulky z editoru na uzkem displeji radeji odscrollovat nez rozbit layout */
  .text_detail table,
  .zkraceny_vypis table{ display: block; overflow-x: auto; }
}