/* ==========================================================================
   atrium.cz — Katalog domů: výpis kategorie (fáze 2, balík B)
   Předloha: https://atrium-marketing.lovable.app/domy/prizemni
   Rozměry změřené v předloze, barvy z design systému HP (hp-redesign.css).

   Výpis běžel celý na legacy `styly.css` (filtr z roku někam do PNG ikon).
   Tenhle soubor ho přebíjí — HTML ani chování filtru se nemění, jen vzhled:
     · filtrační lišta = bílá karta přes spodek hera, tlačítka uvnitř vpravo
     · rozbalené hodnoty filtru = dropdown pod popiskem (dřív roztáhly lištu)
     · odškrtávátka jsou CSS, ne bitmapy (obr_filtr_aktivni.jpg)
   ========================================================================== */

/* --- Šířka obsahu -------------------------------------------------------- */
/* Výpis jel v kontejneru 1520 (legacy). Sjednoceno se zbytkem webu na 1280
   (předloha má 1300, ale tady vyhrává konzistence napříč webem). */

.obsah_vypis_domy .blok_sirky_webu{
  width:100%;
  max-width:1280px;
  margin-left:auto;
  margin-right:auto;
  padding-left:40px;
  padding-right:40px;
  box-sizing:border-box;
}

/* --- Hlavička (hero s fotkou) -------------------------------------------- */
/* Drobečková navigace patří dovnitř fotky (dle předlohy), ne do světlého
   pruhu nad ni — bílá, jemná, hned pod hlavičkou webu. */

/* Navigace je v šabloně uvnitř hera → leží přes fotku. Velikost, řezy i odsazení
   ale zůstávají stejné jako všude jinde na webu (14/20, pruh 14px) — mění se
   jen barvy na bílé. Předloha má menší písmo, tady vyhrává konzistence webu. */
.obsah_vypis_domy_horni .obal_navigace{
  position:relative;
  z-index:5;
  background:transparent;
}

.obsah_vypis_domy_horni .obal_navigace .polozka_navigace,
.obsah_vypis_domy_horni .obal_navigace a:link .polozka_navigace,
.obsah_vypis_domy_horni .obal_navigace a:visited .polozka_navigace{
  color:rgba(255,255,255,.8);
}

.obsah_vypis_domy_horni .obal_navigace a:hover .polozka_navigace{ color:#fff; }
.obsah_vypis_domy_horni .obal_navigace .aktivni_navigace{ color:#fff; }
.obsah_vypis_domy_horni .obal_navigace .predel_navigace{ background-color:rgba(255,255,255,.55); }

/* legacy mělo padding 70px nahoře i dole — horní odsazení tlačilo navigaci
   od hlavičky, spodní zvětšovalo hero proti předloze */
.obsah_vypis_domy_horni{
  position:relative;
  padding-top:0;
  padding-bottom:40px;
}

/* Pozadí podle kategorie katalogu (klientka 8/2026, fotky 1600×600).
   Kategorie bez vlastní fotky (dvojdomy, komerční, individuální) drží
   původní pozadí ze styly.css. */
.obsah_vypis_domy_horni_prizemni{ background-image:url("../../img/pozadi/pozadi_vypis_domy_prizemni.jpg"); }
.obsah_vypis_domy_horni_patrove{ background-image:url("../../img/pozadi/pozadi_vypis_domy_patrove.jpg"); }
.obsah_vypis_domy_horni_exclusive{ background-image:url("../../img/pozadi/pozadi_vypis_domy_exclusive.jpg"); }

/* dodané fotky jsou světlejší než původní pozadí — bílé drobečky, nadpis
   i perex by na obloze zmizely, proto jemné ztmavení pod textem */
.obsah_vypis_domy_horni_prizemni:before,
.obsah_vypis_domy_horni_patrove:before,
.obsah_vypis_domy_horni_exclusive:before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:100%;
  background:linear-gradient(180deg,rgba(11,26,43,.45) 0%,rgba(11,26,43,.28) 45%,rgba(11,26,43,.42) 100%);
  pointer-events:none;
}

.obsah_vypis_domy_horni_prizemni > *,
.obsah_vypis_domy_horni_patrove > *,
.obsah_vypis_domy_horni_exclusive > *{ position:relative; z-index:2; }

/* hero: obsah 1400 (kontejner 1480 s paddingem 40) — stejná osa jako navigace */
.obsah_vypis_domy_horni .blok_sirky_webu_uzky{
  width:100%;
  max-width:1480px;
  margin-left:auto;
  margin-right:auto;
  padding:120px 40px 64px;      /* text hera začíná níž — jako v předloze */
  box-sizing:border-box;
  text-align:center;
}

.obsah_vypis_domy_horni .h1_vypis{
  margin:0;
  font-size:54px;
  line-height:60px;
  font-weight:800;
  letter-spacing:-1.36px;
  color:#fff;
}

.obsah_vypis_domy_horni .blok_text_nad_clanky{
  max-width:692px;
  margin:20px auto 0;
}

.obsah_vypis_domy_horni .blok_text_nad_clanky,
.obsah_vypis_domy_horni .blok_text_nad_clanky p{
  font-size:16px;
  line-height:26px;
  font-weight:500;
  color:rgba(255,255,255,.9);
}

.obsah_vypis_domy_horni .blok_text_nad_clanky p{ margin:0 0 12px; }
.obsah_vypis_domy_horni .blok_text_nad_clanky p:last-child{ margin-bottom:0; }

/* tučný podtitul uprostřed perexu („PŘÍZEMNÍ DŘEVOSTAVBY & BUNGALOVY NA KLÍČ") */
.obsah_vypis_domy_horni .blok_text_nad_clanky strong,
.obsah_vypis_domy_horni .blok_text_nad_clanky b{
  font-size:16px;
  line-height:24px;
  font-weight:800;
  letter-spacing:.4px;
  color:#fff;
}

/* --- Filtrační lišta ----------------------------------------------------- */

.obal_filtr_domy{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:12px 32px;
  margin-top:40px;
  margin-bottom:0;              /* legacy tu drželo 58px místo pro tlačítka pod lištou */
  padding:20px 32px;
  background:#fff;
  background-image:none;        /* legacy PNG „bílá 70 %" */
  border-radius:8px;
  box-shadow:0 18px 50px rgba(15,40,80,.22);
}

.obal_filtr_domy > .spacer{ display:none; }

/* kotva #kotva_filtr_domy — po filtraci se skáče sem, pod sticky hlavičku (95 px),
   aby byla vidět lišta filtru i výsledky pod ní */
#kotva_filtr_domy{ scroll-margin-top:110px; }
@media (max-width:900px){ #kotva_filtr_domy{ scroll-margin-top:90px; } }

/* Kotva výpisu domů (odkaz „Domy architekta") — stejné odsazení, ať výsledek
   nezůstane schovaný pod horní lištou (bod 6.3.1 korektury 8/2026). */
#kotva_filtrace{ scroll-margin-top:110px; }
@media (max-width:900px){ #kotva_filtrace{ scroll-margin-top:90px; } }

.sloupec_filtr_domy{
  position:relative;            /* kotva pro dropdown */
  float:none;
  width:auto;
  margin:0;
}

.popisek_sloupec_filtr_domy{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:15px;
  line-height:22px;
  font-weight:500;
  color:rgba(11,26,43,.8);
  white-space:nowrap;
  transition:color .15s var(--atr-ease);
}

.popisek_sloupec_filtr_domy::after{
  content:"";
  width:14px;
  height:14px;
  background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center/contain no-repeat;
  transition:transform .2s var(--atr-ease);
}

.popisek_sloupec_filtr_domy:hover{ color:var(--atr-blue-l); }

/* třídu přidává hp-redesign.js podle toho, který sloupec je rozbalený */
.sloupec_filtr_domy.je-otevrene .popisek_sloupec_filtr_domy{ color:var(--atr-blue-l); }
.sloupec_filtr_domy.je-otevrene .popisek_sloupec_filtr_domy::after{ transform:rotate(180deg); }

/* hodnoty filtru — dřív se rozbalily uvnitř lišty a roztáhly ji;
   nově plovoucí panel pod popiskem (zobrazení řídí dál jQuery show/hide) */
.sloupec_filtr_domy_in{
  position:absolute;
  left:0;
  top:calc(100% + 14px);
  z-index:40;
  min-width:240px;
  max-height:320px;
  overflow-y:auto;
  margin-top:0;
  padding:8px;
  background:#fff;
  border:1px solid #E2EAF2;
  border-radius:8px;
  box-shadow:0 12px 28px rgba(15,40,80,.16);
}

.polozka_form_filtr{
  display:flex;
  align-items:center;
  gap:10px;
  margin:0;
  padding:8px 10px;
  border-radius:6px;
  font-size:14px;
  line-height:20px;
  font-weight:500;
  color:var(--atr-ink);
  white-space:nowrap;
  background-image:none;        /* legacy obr_filtr_neaktivni.jpg */
  transition:background-color .12s var(--atr-ease);
}

.polozka_form_filtr:hover{ background:rgba(0,108,176,.07); }

/* odškrtávátko = CSS, ne bitmapa (stejné jako u formulářů) */
.polozka_form_filtr::before{
  content:"";
  flex:0 0 auto;
  width:18px;
  height:18px;
  border:1.5px solid #CFDBE8;
  border-radius:5px;
  background:#fff no-repeat center/12px;
  transition:background-color .15s var(--atr-ease),border-color .15s var(--atr-ease);
}

.aktivni_polozka_filtr{
  background-image:none;
  color:#006CB0;
  font-weight:700;
}

.aktivni_polozka_filtr::before{
  background-color:#006CB0;
  border-color:#006CB0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}

/* tlačítka — dřív visela pod lištou (absolutně), nově uvnitř vpravo */
.obal_tl_filtrace_domy{
  position:static;
  display:flex;
  align-items:center;
  gap:8px;
  margin-left:auto;
}

.obal_tl_filtrace_domy a:link,
.obal_tl_filtrace_domy a:visited{ text-decoration:none; }

.tl_filtrace_domy{
  display:inline-flex;
  align-items:center;
  gap:6px;
  height:auto;
  padding:8px 16px;
  font-size:12px;
  line-height:16px;
  font-weight:800;
  color:#fff;
  background-color:#006CB0;
  background-image:none;        /* legacy PNG šipka */
  border-radius:6px;
  transition:background-color .2s var(--atr-ease),opacity .2s var(--atr-ease);
}

.tl_filtrace_domy::after{
  content:"";
  width:14px;
  height:14px;
  background:#fff;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") center/contain no-repeat;
}

.tl_filtrace_domy:hover{ background-color:var(--atr-blue);opacity:1; }

/* --- Hlavička výsledků --------------------------------------------------- */

.blok_vystup_filtrace_popis{
  font-size:12px;
  line-height:16px;
  font-weight:800;
  letter-spacing:2.4px;
  text-transform:uppercase;
  color:var(--atr-blue-l);
}

.blok_vystup_filtrace_hodnota{
  margin-top:8px;
  font-size:42px;
  line-height:50px;
  font-weight:800;
  letter-spacing:-1.05px;
  color:var(--atr-ink);
}

/* --- Mřížka karet -------------------------------------------------------- */
/* Předloha: 3 sloupce, gap 24, karta radius 6 se stínem. Legacy měla procentní
   šířky s marginy (31,333 % + 1 %) a hranaté karty bez stínu. */

/* položkou mřížky je odkaz kolem karty (karta i banner jsou uvnitř <a>) */
.obal_polozek_vypis_domy > a{
  display:flex;
  width:calc((100% - 48px) / 3);
  margin:0;
}

.obal_polozek_vypis_domy > a > .polozka_vypis_domy,
.obal_polozek_vypis_domy > a > .zaslepny_obr_vypis{
  width:100%;
  margin:0;
}

.polozka_vypis_domy{
  border-radius:6px;
  overflow:hidden;
  background:#fff;
  box-shadow:0 10px 28px rgba(15,40,80,.1);
  transition:box-shadow .3s var(--atr-ease);
}

.polozka_vypis_domy:hover{ box-shadow:0 16px 40px rgba(15,40,80,.16); }

.h2_vypis_domy{
  font-size:20px;
  line-height:28px;
  font-weight:800;
}

/* banner mezi kartami — ať je vysoký jako karty vedle sebe, ne jen jako fotka */
.zaslepny_obr_vypis{
  align-self:stretch;
  border-radius:6px;
  overflow:hidden;
  box-shadow:0 10px 28px rgba(15,40,80,.1);
}

.zaslepny_obr_vypis img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}

/* --- Banner s nabídkou mezi kartami (klientka 8/2026) -------------------- */
/* Fotka je bez textu (čtverec desktop / na šířku mobil), nadpis i tlačítko
   kreslí kód — text zůstane ostrý a dá se opravit bez nové grafiky. */
.obal_polozek_vypis_domy > a.atr_banner_katalog{
  position:relative;
  align-self:stretch;
  border-radius:6px;
  overflow:hidden;
  box-shadow:0 10px 28px rgba(15,40,80,.1);
  transition:box-shadow .3s var(--atr-ease);
}

.atr_banner_katalog:hover{ box-shadow:0 16px 40px rgba(15,40,80,.16); }

/* fotka leží absolutně, aby výšku řádku diktovaly karty (banner je čtverec,
   jinak by řádek přerostl a karty vedle by měly prázdné dno) */
.atr_banner_katalog_foto{
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:100%;
}

.atr_banner_katalog_foto picture{
  display:block;
  width:100%;
  height:100%;
}

.atr_banner_katalog_foto img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .2s;    /* stejný zoom na najetí jako u karet domů */
}

.atr_banner_katalog:hover .atr_banner_katalog_foto img{ transform:scale(1.1); }

/* fotky jsou večerní, ale text přes okna a světla potřebuje oporu */
.atr_banner_katalog_foto:after{
  content:"";
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:100%;
  background:linear-gradient(180deg,rgba(6,18,32,.55) 0%,rgba(6,18,32,.30) 55%,rgba(6,18,32,.55) 100%);
}

/* rozvržení dle náhledů od klientky: text v horní části, tlačítko dole */
.atr_banner_katalog_obsah{
  position:absolute;
  left:0;
  top:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  gap:24px;
  width:100%;
  height:100%;
  padding:15% 28px 12%;
  box-sizing:border-box;
  text-align:center;
}

.atr_banner_katalog_tl{ margin-top:auto; }

.atr_banner_katalog_text{
  font-size:20px;
  line-height:28px;
  font-weight:800;
  color:#fff;
  text-shadow:0 1px 12px rgba(6,18,32,.35);
}

.atr_banner_katalog_tl{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:12px 22px;
  font-size:14px;
  line-height:18px;
  font-weight:800;
  color:#fff;
  background-color:#006CB0;
  border-radius:6px;
  transition:background-color .2s var(--atr-ease);
}

.atr_banner_katalog:hover .atr_banner_katalog_tl{ background-color:var(--atr-blue-l); }

/* legacy řádkové zarážky (float clear) — v mřížce nemají co dělat */
.obal_polozek_vypis_domy .spacer_vypis_domy_po_2,
.obal_polozek_vypis_domy .spacer_vypis_domy_po_3{ display:none; }

/* obal karet = mřížka, aby banner dorostl do výšky řádku */
.obal_polozek_vypis_domy{
  display:flex;
  flex-wrap:wrap;
  align-items:stretch;
  gap:24px;
}

/* Výšku fotek dopočítával JS (pomocný span + inline height). V mřížce tahle
   mechanika počítala ze špatné šířky, a hlavně ji netřeba — poměr 4:3 umí CSS. */
.obal_polozek_vypis_domy > .pomer_fotek_vypis_domy{ display:none; }

.obsah_vypis_domy .obal_obr_vypis_domy{
  display:block;
  position:relative;
  aspect-ratio:4/3;
  overflow:hidden;
}

.obsah_vypis_domy .obal_obr_vypis_domy_in{
  display:block;
  height:100% !important;      /* přebít inline height z JS */
  line-height:0 !important;
}

.obsah_vypis_domy .obal_obr_vypis_domy_in img{
  width:100%;
  height:100%;
  object-fit:cover;
  max-height:none;
}

/* --- Karta domu ---------------------------------------------------------- */
/* Karta zůstává, jak byla — dle předlohy se mění jen popisky parametrů
   (verzálky) a šipka (plná modrá, dřív obrys s bitmapou). */

/* pruh parametrů: tři hodnoty vedle sebe + šipka vpravo (karta je v mřížce
   užší než dřív, s legací velikostmi se to lámalo do dvou řádků) */
.polozka_vypis_domy_in{
  display:flex;
  align-items:flex-end;
  gap:14px;
  padding:12px 16px;
}

.hodnota_vypis_domy{
  flex:0 1 auto;
  min-width:0;
  margin:0;
}

.hodnota_vypis_domy_co{
  font-size:10px;
  line-height:14px;
  font-weight:600;
  letter-spacing:.6px;
  text-transform:uppercase;
  color:#5A7A96;
  white-space:nowrap;
}

.hodnota_vypis_domy_kolik{
  font-size:15px;
  line-height:22px;
  font-weight:800;
  padding-left:22px;            /* místo pro ikonu (bitmapa v pozadí) */
  background-size:16px;
  background-position:left center;
  white-space:nowrap;
}

.tl_vypis_domy{
  position:static;              /* dřív absolutně vpravo dole, teď poslední prvek pruhu */
  flex:0 0 32px;
  margin-left:auto;
  display:flex;
  align-items:center;
  justify-content:center;
  width:32px;
  height:32px;
  border:0;
  border-radius:6px;
  background-color:#006CB0;
  background-image:none;        /* legacy PNG šipka */
  transition:background-color .2s var(--atr-ease);
}

.tl_vypis_domy::after{
  content:"";
  width:16px;
  height:16px;
  background:#fff;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") center/contain no-repeat;
}

.polozka_vypis_domy:hover .tl_vypis_domy{
  background-color:var(--atr-blue);
  background-image:none;
}

/* --- Responzivita -------------------------------------------------------- */

@media (max-width:1100px){
  .obal_filtr_domy{gap:10px 20px;padding:16px 20px}
  .popisek_sloupec_filtr_domy{font-size:14px}
  .blok_vystup_filtrace_hodnota{font-size:32px;line-height:40px}
}

@media (max-width:1024px){
  .obal_polozek_vypis_domy > a{width:calc((100% - 24px) / 2)}
}

@media (max-width:900px){
  /* na mobilu je lišta sloupec — dropdown ať nepřetéká z obrazovky */
  .obal_filtr_domy{flex-direction:column;align-items:stretch;gap:0;padding:8px 16px}
  .sloupec_filtr_domy{border-bottom:1px solid #EEF3FB}
  .popisek_sloupec_filtr_domy{display:flex;justify-content:space-between;width:100%;padding:14px 0}
  .sloupec_filtr_domy_in{position:static;min-width:0;margin:0 0 12px;box-shadow:none;border-color:#EEF3FB}
  .obal_tl_filtrace_domy{margin:14px 0;justify-content:flex-start}
}

@media (max-width:700px){
  .obal_polozek_vypis_domy > a{width:100%}
  /* jediný sloupec → banner nemá vedle sebe kartu, která by mu dala výšku */
  .obal_polozek_vypis_domy > a.atr_banner_katalog{aspect-ratio:3/2}
  /* fotka na šířku je nižší — text i tlačítko drží u sebe uprostřed */
  .atr_banner_katalog_obsah{justify-content:center;gap:16px;padding:24px 20px}
  .atr_banner_katalog_tl{margin-top:0}
  .atr_banner_katalog_text{font-size:18px;line-height:25px}
}

@media (max-width:600px){
  .obsah_vypis_domy .blok_sirky_webu{padding-left:20px;padding-right:20px}
  .obsah_vypis_domy .h1_vypis_domy{font-size:32px;line-height:40px;letter-spacing:-.6px}
  .blok_vystup_filtrace_hodnota{font-size:26px;line-height:34px}
  .obal_tl_filtrace_domy{flex-wrap:wrap}
  .tl_filtrace_domy{flex:1 1 auto;justify-content:center}
}

/* --- Hlavička katalogu na mobilu (body 6.1, 6.2 a 12 korektury 8/2026) ----
   Nadpis držel i na telefonu 54 px, takže se lámal do pěti řádků a s perexem
   na střed zabral celou první obrazovku (1257 px). Klientka chce v katalozích
   menší nadpisy, text zarovnaný doleva a celkově úspornější zobrazení. */
@media only screen and (max-width:767px){
  .obsah_vypis_domy_horni{
    text-align:left;
    padding-bottom:20px;
  }
  /* Vnitřní blok hlavičky měl na telefonu 120 px nahoře a 64 px dole — víc než
     výška menu. Obsah tím začínal skoro až na druhé obrazovce (bod 12). */
  .obsah_vypis_domy_horni .blok_sirky_webu_uzky{
    padding-top:36px;
    padding-bottom:28px;
  }
  .obsah_vypis_domy_horni .h1_vypis{
    font-size:32px;
    line-height:40px;
    letter-spacing:-.6px;
    text-align:left;
  }
  .obsah_vypis_domy_horni p,
  .obsah_vypis_domy_horni .blok_sirky_webu_uzky{
    text-align:left;
  }
}