/* =====================================================================
   mobile.css — čitelnost na telefonech a tabletech
   Přidáno 2026-07-27 k 1:1 kopii webu systempartners.cz.

   Záměrně je to SAMOSTATNÁ VRSTVA nad původní šablonou Nicepage:
   v původních souborech se nic nepřepisuje, takže odebrání <link>
   na tento soubor vrátí web do stavu přesné kopie originálu.
   ===================================================================== */


/* ---------------------------------------------------------------------
   1) ODMRAZENÍ ZASEKNUTÝCH ANIMACÍ  (platí ve všech šířkách)

   Nicepage skryje každý prvek s atributem data-animation-name
   (třída .u-backstage-hidden = "čeká za oponou") a zviditelní ho až
   ve chvíli, kdy spustí animaci. Na tomto webu se animace nespustí
   nikdy — ověřeno i na živém originálu. Důsledky:
     • logo SYSTEM PARTNERS v hlavičce je neviditelné na VŠECH stránkách
     • na úvodu zůstane ~650 px vysoký prázdný červený pás místo
       statistik (772 klientů / 3274 projektů / 32 let / 98 %)
   --------------------------------------------------------------------- */
.u-backstage-hidden {
  visibility: visible !important;
}


/* ---------------------------------------------------------------------
   2) TELEFONY A MENŠÍ TABLETY (≤ 767 px)
   --------------------------------------------------------------------- */
@media (max-width: 767px) {

  /* --- 2a) Stránka nesmí jít posouvat do stran ---------------------
     Několik prvků (katalogové obrázky, srovnávací tabulka) je širších
     než displej a táhlo to celou stránku doprava. */
  html,
  body {
    max-width: 100%;
    overflow-x: hidden;
  }

  img,
  video,
  iframe {
    max-width: 100%;
  }

  /* --- 2b) Široké obrázky na šířku displeje ------------------------
     Šablona jim dává pevnou šířku v px (až 1129 px). */
  .u-image-contain,
  img.u-image-contain {
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
    /* šablona některé obrázky odsazuje zápornými/pevnými okraji,
       na úzkém displeji je to vystrčilo mimo obrazovku */
    margin-left: auto !important;
    margin-right: auto !important;
    display: block;
  }

  /* --- 2b2) Záporné okraje ze šablony, které tahají obsah přes sebe -
     Nicepage při exportu dosadil do mobilních breakpointů záporné
     spodní okraje, kterými „vytahuje" následující obsah nahoru:
        index.css        .u-section-7 .u-layout-wrap-1  −1665 px
        poptavka.css     .u-section-2 .u-layout-wrap-1   −863 px
        pronajem…css     .u-section-3 .u-layout-wrap-1   −863 px
     Výsledkem byl text přes text a patička přes kontaktní dlaždice
     (stejně je na tom i živý originál). */
  .u-layout-wrap {
    margin-bottom: 0 !important;
  }

  /* patička: −76 px tahalo řádek s rokem přes název společnosti */
  .u-footer .u-text-3 {
    margin-top: 8px !important;
  }

  /* --- 2c) Hlavička: QR kód přestal přebíjet telefonní čísla -------
     QR (136×136 px) ležel přes text s čísly — na telefonu je navíc
     k ničemu (vlastní displej nenaskenuješ), proto se skryje
     a čísla dostanou celou šířku. */
  .u-header img[src*="QRSP"] {
    display: none !important;
  }

  /* Text s čísly měl v šabloně margin-top až −176 px (aby na desktopu
     sedl vedle loga). Po skrytí QR kódu ho to táhlo přes logo, proto
     se okraj ruší — logo tím zůstane nahoře a čísla pod ním. */
  .u-header p {
    width: auto !important;
    max-width: 100% !important;
    margin: 6px 0 0 !important;
    font-size: 1.05rem !important;
    line-height: 1.65 !important;
    text-align: center !important;
  }

  /* Pozn.: pořadí v černém pruhu (čísla nahoře, logo pod nimi) se nechává,
     jak ho vysází šablona. Zkoušené přepnutí sheetu na flex-column skončilo
     překryvem loga a čísel — prvky jsou pozicované, ne v běžném toku. */

  /* logo v hlavičce (po odmrazení v bodě 1) na rozumnou velikost */
  .u-header .u-logo {
    max-width: 210px !important;
    height: auto !important;
  }

  .u-header .u-logo img {
    width: 100% !important;
    height: auto !important;
  }

  /* --- 2d) Úvodní červený pás se statistikami ----------------------
     Čtyři položky pod sebou, každá měla 165 px → pás 654 px vysoký. */
  .u-section-1 .u-list-item {
    min-height: 0 !important;
  }

  .u-section-1 .u-container-layout {
    padding-top: 14px !important;
    padding-bottom: 14px !important;
  }

  .u-section-1 h3 {
    font-size: 2.4rem !important;
    line-height: 1.15 !important;
    margin-bottom: 2px !important;
  }

  .u-section-1 h6 {
    font-size: 1rem !important;
    line-height: 1.4 !important;
    margin-top: 0 !important;
  }

  /* --- 2e) Srovnávací tabulky (Canon MAXIFY) -----------------------
     Tabulka je 611 px široká, na displeji se ořízla uprostřed slov.
     Nově roluje vodorovně UVNITŘ svého rámečku — stránka samotná
     zůstává bez vodorovného posuvu. */
  .u-table {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  .u-table table {
    min-width: 580px;                 /* pod tuto šířku už se slova lámou po písmenech */
  }

  .u-table .u-table-cell {
    padding-left: 8px !important;
    padding-right: 8px !important;
    font-size: 0.92rem !important;
    line-height: 1.4 !important;
  }

  /* proužek napovídající, že tabulkou jde posouvat */
  .mb-table-hint {
    display: block;
    margin: 6px 2px 10px;
    font-size: 0.82rem;
    opacity: 0.75;
  }

  /* --- 2f) Obrázky s vysázeným textem (katalogy, ceníky) -----------
     Jsou to bitmapy s drobným textem — na 375 px je nepřečteš.
     mobile.js z nich udělá odkaz na plné rozlišení, tady je jen
     vizuální označení, že se dají otevřít. */
  a.mb-zoom {
    display: block;
    position: relative;
  }

  a.mb-zoom::after {
    content: "🔍 Klepnutím zvětšit";
    position: absolute;
    right: 8px;
    bottom: 8px;
    padding: 5px 10px;
    border-radius: 14px;
    background: rgba(0, 0, 0, 0.62);
    color: #fff;
    font: 500 0.78rem/1 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    pointer-events: none;
  }

  /* Šablona dosazuje sekcím pevnou výšku spočítanou pro desktop.
     Na úzkém displeji je text vyšší, než se do ní vejde → obsah
     přetekl a překrýval následující sekci (na úvodní stránce sekce
     „Osm nových sérií" / „CHYTRÝ PROVOZ S AI" — 1769 px obsahu
     v sekci vysoké 940 px). Výšku proto určuje obsah.

     Přepisuje se JEN `height`, ne `min-height`: sekce, které mají
     obsah pozicovaný absolutně (video, dlaždice s pozadím), by při
     nulové min-height spadly na nulu. */
  .u-sheet {
    max-width: 100% !important;
    height: auto !important;
    /* vnitřní bloky šablony „plavou" (float), takže sekci nezvětší
       a obsah přetekl ven; flow-root je uzavře dovnitř bez ořezu */
    display: flow-root;
  }

  /* --- 2g) Konec obřích bílých mezer mezi letáky --------------------
     Sekce s letáky měly na telefonu výšku 1535 px, ale samotný leták
     zabere po zmenšení jen ~480 px → pod každým zbylo přes 1000 px
     bílého místa.

     Proč zrovna takhle (dohledáno měřením, ať to někdo znovu neřeší):
       • nestačí `min-height: 0` — šablona dosazuje i `height`
         (za běhu, hodnoty jako 1351.77px), takže se výška nezmění;
       • nestačí ani přebít obojí — leták je `position: absolute`,
         takže je mimo tok a sekce by se složila na nulu a obrázek
         by přetekl přes navazující sekci.
     Musí se proto udělat obojí naráz: uvolnit výšku sekce A vrátit
     leták do běžného toku. Výšku pak určí sám obrázek.

     Cílí se přes ID sekcí, ne přes .u-section-3/4/5 — ta čísla mají
     i jiné stránky (Canon MAXIFY, Kontakty, Pronájem) a pravidla by
     jim přepisovala úplně jiné sekce. */
  #block-9 .u-sheet-1,
  #block-10 .u-sheet-1,
  #block-11 .u-sheet-1 {
    min-height: 0 !important;
    height: auto !important;
    padding-bottom: 18px !important;
  }

  #block-9 .u-image-1,
  #block-10 .u-image-1,
  #block-11 .u-image-1 {
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
  }

  /* --- 2h) Kontakty: vizitky pod sebe, ne přes sebe -----------------
     Sekce „TISKÁRNY A PŘÍSLUŠENSTVÍ" skládá čtyři vizitky vedle sebe
     tak, že každou další vytáhne nahoru o její vlastní výšku:
        .u-list-2/3/4 { margin: -242px … }
     Mobilní breakpoint mění jen boční okraje, záporný horní ne — na
     telefonu proto všechny čtyři karty spadly na sebe a jména se
     překrývala (stejně je na tom živý originál). */
  #carousel_a520 .u-list-1,
  #carousel_a520 .u-list-2,
  #carousel_a520 .u-list-3,
  #carousel_a520 .u-list-4 {
    width: 100% !important;
    max-width: 320px !important;
    margin: 0 auto 16px !important;
    float: none !important;
  }

  #carousel_a520 .u-sheet-1 {
    min-height: 0 !important;
    height: auto !important;
    padding-bottom: 24px !important;
  }

  /* Šablona dává textům ve vizitkách pevné šířky (186 px, 216 px)
     a boční okraje pro desktopové rozmístění — delší e-mail se pak
     zalomil uprostřed slova a telefon vylezl mimo kartu. */
  #carousel_a520 .u-text {
    width: auto !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
  }

  /* delší texty ať nejsou do bloku — na úzkém sloupci dělá díry */
  .u-text {
    text-align: left;
    hyphens: auto;
  }

  .u-align-center .u-text,
  .u-align-center-xs .u-text {
    text-align: center;
  }
}


/* ---------------------------------------------------------------------
   3) VELMI ÚZKÉ DISPLEJE (≤ 420 px)
   --------------------------------------------------------------------- */
@media (max-width: 420px) {

  .u-header p {
    font-size: 1rem !important;
  }

  .u-section-1 h3 {
    font-size: 2.1rem !important;
  }
}