/* ============================================================================
   TABULKY V OBSAHU — mobilní zobrazení (korektura klientky 8/2026)

   Srovnávací tabulka („Difuzně otevřená vs. difuzně uzavřená konstrukce") se na
   mobilu nedala číst — tři sloupce se musely posouvat do stran. Na úzkých
   displejích se proto překlápí do rozbalovacích karet:

     název oblasti (klik)
       └ text k difuzně otevřené konstrukci
       └ text k difuzně uzavřené konstrukci

   Popisky sloupců doplňuje JS (hp-redesign.js → initTabulkaMobil) z hlavičky
   tabulky do data-label, obsah v adminu se needituje. Desktop zůstává tabulkou —
   všechno níž je uvnitř media query.
   ============================================================================ */

@media screen and (max-width: 1000px){

  .obsah_clanek2 table[data-atr-tabmob]{
    display:block;
    border:0 !important;
    border-radius:0 !important;
    /* z editoru chodí inline „min-width: 900px" (kvůli desktopové tabulce) — v kartovém
       režimu by karty byly 900 px široké a pravá část by utekla mimo displej */
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
  }
  .obsah_clanek2 table[data-atr-tabmob] thead{ display:none; }   /* hlavičky jdou do data-label */
  .obsah_clanek2 table[data-atr-tabmob] tbody,
  .obsah_clanek2 table[data-atr-tabmob] tr{ display:block; }

  /* Řádek = karta. Rozbalení jede plynule mezi dvěma výškami (jako accordion u dotazů) —
     konkrétní pixely dopočítá JS, tady je jen přechod a ořez. */
  .obsah_clanek2 table[data-atr-tabmob] tbody tr{
    background:#fff;
    border:1px solid #d8e8f6;
    border-radius:12px;
    margin-bottom:12px;
    overflow:hidden;
    transition:max-height .3s ease;
  }

  .obsah_clanek2 table[data-atr-tabmob] td{
    display:block;
    width:auto !important;
    border:0 !important;
    padding:0 18px 16px !important;
  }

  /* První buňka = název oblasti, slouží jako hlavička karty */
  .obsah_clanek2 table[data-atr-tabmob] td.atr-tabmob-hlavicka{
    position:relative;
    padding:16px 46px 16px 18px !important;
    font-weight:800;
    font-size:17px;
    line-height:24px;
    color:#0F2E4A;
    text-transform:none;
    cursor:pointer;
    background:#f4f7fb;
  }
  .obsah_clanek2 table[data-atr-tabmob] td.atr-tabmob-hlavicka::after{
    content:"";
    position:absolute;
    right:18px;
    top:22px;
    width:12px;
    height:12px;
    border-right:2.5px solid #1170B8;
    border-bottom:2.5px solid #1170B8;
    transform:rotate(45deg);
    transition:transform .2s ease;
  }
  .obsah_clanek2 table[data-atr-tabmob] tr[data-tabmob-open="1"] td.atr-tabmob-hlavicka::after{
    transform:rotate(-135deg);
    top:27px;
  }

  /* Popisek sloupce nad textem — ať je jasné, která konstrukce je která */
  .obsah_clanek2 table[data-atr-tabmob] td[data-label]:not(.atr-tabmob-hlavicka)::before{
    content:attr(data-label);
    display:block;
    margin:14px 0 6px;
    font-size:12px;
    letter-spacing:.1em;
    text-transform:uppercase;
    font-weight:800;
    color:#1170B8;
  }

  /* Sbalený stav: vidět je jen název oblasti. Obsah se neschovává přes display:none
     (to by nešlo animovat) — kartu ořízne max-height a text mezitím vyhasne. */
  .obsah_clanek2 table[data-atr-tabmob] td:not(.atr-tabmob-hlavicka){
    transition:opacity .22s ease;
  }
  .obsah_clanek2 table[data-atr-tabmob] tr[data-tabmob-open="0"] td:not(.atr-tabmob-hlavicka){
    opacity:0;
  }

  /* Obal z editoru drží vodorovný posun a odsazení nastavené pro desktop — v úzkém
     zobrazení ani jedno nedává smysl, karty by pak vyšly na 390px displeji sotva
     240 px široké. Necháváme kolem karet mírné odsazení, ať nesedí na hraně. */
  .obsah_clanek2 .atr-tabmob-obal{
    overflow-x:visible !important;
    padding:10px !important;
  }

  /* Karta z editoru: v kartovém režimu bez levého modrého pruhu — jednotlivé karty
     mají vlastní rám a pruh by je zvenčí zbytečně orámoval. */
  .obsah_clanek2 .atr-tabmob-karta{
    border-left:0 !important;
    box-shadow:none !important;
  }
}

/* Odsazení sekce z editoru (48/24 px) je počítané na desktop; na 375px displeji spolu
   s obalem ubíralo 60 px z každé strany a karty vycházely 253 px široké. Na tabletu
   místo je, tak se zužuje až na telefonech. */
@media screen and (max-width: 700px){
  .obsah_clanek2 .srovnani-wrap{
    padding-left:12px !important;
    padding-right:12px !important;
  }
}