/* ============================================================================
   OBSAHOVÉ STRÁNKY (detail článku) — korektura klientky 8/2026

   Scoped na .obsah_clanek2 a na swiper „Proč si vybrat" — legacy styly.css
   zůstává nedotčené, takže se zbytku webu nic nemění.
   ============================================================================ */

/* --- Blok „Proč si vybrat právě ATRIUM DifuTech" ------------------------- */

/* Původně slider: čtyři karty se do kontejneru nevešly, takže od ~1340 px dolů
   zůstávaly boční karty schované za okrajem a musely se posouvat. Nově mřížka —
   4 karty vedle sebe, na tabletu 2, na mobilu pod sebou. Nižší než dřív (obsah
   je krátký) a ve stejném stylu jako „10 kroků k domu" na homepage. */

.atr-pv-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:20px;
  align-items:stretch;
}

.atr-pv-card{
  position:relative;
  display:block;
  box-sizing:border-box;
  min-height:236px;
  padding:26px 26px 28px;
  background:#fff;
  border-radius:8px;
  overflow:hidden;
  text-decoration:none;
  color:inherit;
  box-shadow:0 1px 2px rgba(15,40,80,.06);
  transition:transform .3s cubic-bezier(.4,0,.2,1), box-shadow .3s cubic-bezier(.4,0,.2,1);
}
.atr-pv-card:hover{ transform:translateY(-4px); box-shadow:0 10px 30px rgba(15,40,80,.12); }

/* levý accent 3 px — stejný jako u „10 kroků" i u „6 důvodů" na HP */
.atr-pv-accent{ position:absolute; left:0; top:0; width:3px; height:100%; background:#006CB0; z-index:2; }

.atr-pv-num{
  position:absolute; top:8px; right:16px;
  font-size:104px; line-height:1; font-weight:800;
  color:#DDE7F1; letter-spacing:-4px; z-index:0; pointer-events:none;
}
.atr-pv-icon{ position:relative; z-index:1; display:block; color:#006CB0; margin-bottom:16px; }
.atr-pv-icon svg{ display:block; width:36px; height:36px; }

.atr-pv-title{
  position:relative; z-index:1;
  font-size:20px; line-height:1.35; font-weight:800; color:#0F2E4A;
  margin:0 0 10px; max-width:210px;
}
.atr-pv-text{
  position:relative; z-index:1;
  font-size:15px; line-height:1.6; font-weight:600; color:#5A7A96;
}
/* obsah z editoru má na odstavcích inline text-align: justify — v úzké kartě dělá
   nehezké mezery mezi slovy, proto se přebíjí */
.atr-pv-text p{ margin:0; text-align:left !important; }

@media screen and (max-width: 1100px){
  .atr-pv-grid{ grid-template-columns:repeat(2,1fr); }
}
@media screen and (max-width: 700px){
  .atr-pv-grid{ grid-template-columns:1fr; gap:14px; }
  .atr-pv-card{ min-height:0; padding:22px 22px 24px; }
  .atr-pv-num{ font-size:84px; }
}
/* --- Rozestupy mezi obsahovými bloky ------------------------------------- */

/* Legacy hodnoty dávaly mezi bloky 80 + 60 + 60 px, tedy až 120 px mezi dvěma
   sousedními bloky. Bloky samy o sobě mezery mají, takže se tyhle ruší —
   na desktopu i na mobilu (tam bylo 30 px z hromadného pravidla ve styly.css). */
.obsah_clanek2 .blok_s_texty_clanek2{ padding-top:0; }
.obsah_clanek2 .blok_s_texty_clanek2_in{ padding-top:0; padding-bottom:0; }

/* --- Obsah z editoru na mobilu (korektura 8/2026) ------------------------
   Bloky vložené editorem mají mřížky zapsané napevno v obsahu, typicky
   `grid-template-columns: repeat(auto-fit, minmax(320px, 1fr))`. Na displeji
   pod ~390 px se dva sloupce nevejdou a stránka jde posouvat do stran (na
   /difutech/ přetékala o 55 px). V úzkém zobrazení proto mřížky v obsahu
   srovnáváme pod sebe a hlídáme, aby nic nepřerostlo šířku stránky.
   Netýká se našich sekcí — ty mají vlastní breakpointy. */

@media screen and (max-width: 760px){
  .obsah_clanek2 [style*="grid-template-columns"]{
    grid-template-columns:1fr !important;
  }
  .obsah_clanek2 [style*="minmax"]{
    grid-template-columns:1fr !important;
  }
  /* pojistka pro obrázky a vložený obsah se zadanou šířkou */
  .obsah_clanek2 img,
  .obsah_clanek2 iframe,
  .obsah_clanek2 table{ max-width:100% !important; }
}

/* --- Článek bez nadpisu v levém sloupci (bod 7.1 korektury 8/2026) --------
   Rozšířený článek má text ve dvou sloupcích: vlevo nadpis (nazev2), vpravo
   obsah. Když klientka nadpis nevyplní, zůstal levý sloupec prázdný a obsah
   visel na pravé polovině stránky — jako u Nejčastějších otázek ke zdravému
   bydlení. Bez nadpisu se tedy obsah roztáhne přes celou šířku. */
.atr-cl2-bez-nadpisu .blok_s_texty_clanek2_in_leva{
  display:none;
}
.atr-cl2-bez-nadpisu .blok_s_texty_clanek2_in_prava{
  display:block;
  width:auto;
}

/* --- Odsazení mezi obsahovými bloky (body 8, 9.2, 9.3 korektury 8/2026) ---
   Bloky z „Dalších textů" mají v šabloně 60 px nahoře i dole a klientka do nich
   vkládá obsah, který si nese vlastní odsazení (typicky 48 px). Mezi dvěma bloky
   tak vznikala mezera přes 300 px. Šablonové odsazení se zmenšuje na 20 px —
   obsah si dýchání drží sám. Týká se detailů článků (Technologie, Základová
   deska, Výroba a další stránky se stejnou skladbou). */
/* Korektura 24. 8. 2026 (bod 4): 12 px se ukázalo jako přestřelené do druhé
   krajnosti — bloky seděly na sobě a klientka to hlásila jako „natěsno“.
   40 px je mezi původními 60 (mezera přes 300) a 12 (nalepené). */
.obsah_clanek2 .blok_vyhody_clanek2,
.obsah_clanek2 .blok_proc_si_vybrat{
  padding-top:40px;
  padding-bottom:40px;
}
@media only screen and (max-width:767px){
  .obsah_clanek2 .blok_vyhody_clanek2,
  .obsah_clanek2 .blok_proc_si_vybrat{
    padding-top:28px;
    padding-bottom:28px;
  }
}

/* --- Srovnávací karty na mobilu (bod 9.2 korektury 8/2026) ----------------
   Dvě karty pod sebou byly na telefonu tak dlouhé, že se nedaly porovnat.
   V úzkém zobrazení se proto zabalí — vidět zůstane hlavička s číslem varianty,
   zbytek se rozbalí kliknutím. Na širokém displeji je obsah vždy odkrytý. */
.atr-zd-obsah{
  overflow:hidden;
  transition:max-height .32s ease;
}
@media only screen and (max-width:767px){
  .zd-compare .atr-zd-karta{
    padding:22px 20px !important;
  }
  .atr-zd-hlavicka{
    position:relative;
    cursor:pointer;
    margin:0 !important;
    padding-right:34px;
    font-size:22px !important;
  }
  /* šipka vpravo — otočí se, když je karta rozbalená */
  .atr-zd-hlavicka:after{
    content:"";
    position:absolute;
    right:2px;
    top:.35em;
    width:12px;
    height:12px;
    border-right:2.5px solid #1f78c8;
    border-bottom:2.5px solid #1f78c8;
    transform:rotate(45deg);
    transition:transform .25s ease;
  }
  .atr-zd-hlavicka.is-zd-otevreno:after{
    transform:rotate(-135deg);
    top:.6em;
  }
  .atr-zd-obsah{
    padding-top:16px;
  }
  .atr-zd-obsah.is-zd-zavreno{
    padding-top:0;
  }
}

/* --- Časová osa „Náš příběh" na mobilu (bod 1.2 korektury 8/2026) ---------
   Osa je z editoru: vlevo sloupec s letopočtem (82 px), vpravo karty událostí,
   mezi nimi 42 px a svislá linka. Na telefonu tak na kartu zbylo 158 px z 375 —
   text se lámal po dvou slovech a osa narostla na 24 700 px. V úzkém zobrazení
   proto letopočet stojí nad kartami a ty mají celou šířku. Desktop se nemění.
   Inline styly z editoru se přebíjejí, jinak by se neuplatnilo nic. */
@media only screen and (max-width:767px){
  .np-timeline-line{
    display:none !important;
  }
  .np-group{
    display:block !important;
    margin:0 0 28px !important;
  }
  .np-year-col{
    width:auto !important;
    text-align:left !important;
    margin:0 0 12px !important;
  }
  .np-year{
    font-size:28px !important;
  }
  .np-events{
    width:auto !important;
  }
  .np-event{
    padding:20px !important;
    border-radius:20px !important;
    margin:0 0 14px !important;
  }
}

/* --- Texty na mobilu doleva (bod 12 korektury 8/2026) ---------------------
   Legacy šablona od tabletu níž zarovnává obsahové bloky na střed. Na telefonu
   se tak čte hůř — klientka chce texty zarovnané doleva. Přebíjí se jen obsah
   (detail článku, cik-cak bloky, časová osa), ne patička a menu, kde střed
   dává smysl. Platí od 767 px dolů, na tabletu zůstává legacy chování. */
@media only screen and (max-width:767px){
  .obsah_clanek_horni_leva,
  .obsah_clanek_horni_prava,
  .obal_h1_h2_clanek,
  .obsah_clanek2_horni_in,
  .blok_s_texty_clanek2_in_leva,
  .blok_s_texty_clanek2_in_prava,
  .blok_cik_cak_td,
  .cik_cak_td_text,
  .obal_p_cik_cak_home,
  .nadpis_cik_cak,
  .polozka_casova_osa,
  .polozka_casova_osa_in_obsah{
    text-align:left !important;
  }
}

/* --- Zarovnání do bloku na mobilu (bod 12 korektury 8/2026) ---------------
   Pět bloků má z editoru „text-align: justify". Na širokém displeji to drží,
   na telefonu ale mezi slovy vznikají velké díry. V úzkém zobrazení se proto
   zarovnává doleva; obsah v databázi zůstává, jak ho klientka napsala. */
@media only screen and (max-width:767px){
  [style*="justify"]{
    text-align:left !important;
  }
}

/* --- Odsazení pod horní lištou na mobilu (bod 12 korektury 8/2026) --------
   Mezi menu a začátkem obsahu bylo na telefonu skoro 90 px — drobečky mají
   24 px nahoře a hlavička výpisu dalších 30 px. Klientka chce zobrazení
   úspornější, tak se rozestupy zkracují zhruba na polovinu. */
@media only screen and (max-width:767px){
  .obal_navigace{
    padding-top:12px;
    padding-bottom:8px;
  }
  .obsah_vypis_horni,
  .obsah_vypis_podmenu_horni,
  .obsah_vypis_10kroku_horni{
    padding-top:16px;
    padding-bottom:18px;
  }

  /* nadpis a perex výpisu na střed vypadá na úzkém displeji roztrhaně —
     stejné zarovnání jako u sedmi sjednocených výpisů */
  .obsah_vypis_horni,
  .obsah_vypis_podmenu_horni,
  .obsah_vypis_10kroku_horni,
  .obsah_vypis_horni .blok_sirky_webu_uzky,
  .obsah_vypis_podmenu_horni .blok_sirky_webu_uzky,
  .obsah_vypis_10kroku_horni .blok_sirky_webu_uzky{
    text-align:left;
  }
}

/* ============================================================================
   OBSAH Z EDITORU NA MOBILU (korektura klientky 1. 9. 2026)

   Klientka nahlásila „Nabídka ATRIUM Podzim 2026" — na telefonu se nedala číst.
   Ukázalo se, že jde o vzor sdílený napříč webem: obsah se v administraci sází
   inline styly, které jsou napsané pro desktop a media query je nepřebije.
   V databázi má stejnou stavbu **43 článků** (32 referencí v modulu O nás a
   11 novinek), takže se to řeší jednou pro všechny, ne na jedné stránce.

   Dva vzory z editoru:

     1) `display: flex; gap: 34px; align-items: center` se dvěma bloky
        `width: 54%` (text) a `width: 46%` (fotka). Na 390px displeji z toho
        vyjde sloupec 152 a 96 px — fotka velikosti náhledu a text lámaný po
        slabikách. Nově pod sebou, fotka na celou šířku a text pod ní (jak si
        klientka přála). Pořadí v HTML se střídá (jednou fotka vlevo, podruhé
        vpravo), proto `:has(img)` a `order` — v HTML se nic přerovnávat nemusí.

     2) `grid-template-columns: repeat(3, minmax(0, 1fr))` — přehled „Co nabídka
        zahrnuje?" (Technika / Služby / Jistota). Tři sloupce po 71 px. Nově
        panely pod sebou, svislé oddělovače se překlopí na vodorovné.

   Všechno je uvnitř media query a přebíjí jen inline styly z editoru — desktop
   ani zbytek webu se nemění. Kdyby klientka v článku něco přepsala, pravidla
   drží dál, protože nejsou vázaná na konkrétní článek.
   ============================================================================ */

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

  /* --- 1) Dvousloupcová sekce fotka + text -------------------------------- */

  .obsah_clanek [style*="display: flex"][style*="align-items: center"],
  .obsah_clanek2 [style*="display: flex"][style*="align-items: center"]{
    flex-direction:column !important;
    align-items:stretch !important;
    gap:18px !important;
  }

  /* 54 % / 46 % z editoru — na výšku obojí přes celou šířku */
  .obsah_clanek [style*="display: flex"][style*="align-items: center"] > div,
  .obsah_clanek2 [style*="display: flex"][style*="align-items: center"] > div{
    width:100% !important;
  }

  /* fotka patří nad text, i když je v HTML až druhá */
  .obsah_clanek [style*="display: flex"][style*="align-items: center"] > div:has(img),
  .obsah_clanek2 [style*="display: flex"][style*="align-items: center"] > div:has(img){
    order:-1;
  }

  /* fotky z editoru mají pevných 260 px; na šířku displeje je to placka,
     o něco vyšší poměr sedí líp */
  .obsah_clanek [style*="display: flex"][style*="align-items: center"] img,
  .obsah_clanek2 [style*="display: flex"][style*="align-items: center"] img{
    height:220px !important;
  }

  /* --- 2) Trojsloupcový přehled -> panely pod sebe ------------------------ */

  .obsah_clanek [style*="grid-template-columns: repeat(3"],
  .obsah_clanek2 [style*="grid-template-columns: repeat(3"]{
    grid-template-columns:1fr !important;
  }

  /* v mřížce dělí sloupce `border-left` a odsazení je asymetrické (první panel
     bez levého, poslední bez pravého) — pod sebou to musí být obojí naopak */
  .obsah_clanek [style*="grid-template-columns: repeat(3"] > div,
  .obsah_clanek2 [style*="grid-template-columns: repeat(3"] > div{
    padding:20px 0 !important;
    border-left:0 !important;
  }
  .obsah_clanek [style*="grid-template-columns: repeat(3"] > div + div,
  .obsah_clanek2 [style*="grid-template-columns: repeat(3"] > div + div{
    border-top:1px solid #d8e8f6 !important;
  }

  /* --- 3) Odsazení boxů z editoru ---------------------------------------- */

  /* modré a bílé boxy mají `padding: 24px 40px` (resp. 36px) počítaných na
     980px kontejner — na telefonu ubírají 80 px z 390 a text pak stojí
     ve sloupci 262 px */
  .obsah_clanek [style*="border-radius: 22px"],
  .obsah_clanek2 [style*="border-radius: 22px"]{
    padding-left:20px !important;
    padding-right:20px !important;
  }

  /* nadpisy sekcí z editoru (36 px) jsou na displeji přes půl řádku */
  .obsah_clanek [style*="font-size: 36px"],
  .obsah_clanek2 [style*="font-size: 36px"]{
    font-size:27px !important;
    line-height:1.25 !important;
  }
}