/* ============================================================
   Final touch 2026 — jemné doladění vzhledu (ne redesign)
   Načítá se za brand-2025.css na všech veřejných stránkách.
   Barvy, značka, struktura i obsah zůstávají; řeší se mezery,
   zarovnání, typografie a chyby na mobilu.
   Breakpointy podle Webflow: 991 / 767 / 479 px.
   ============================================================ */

/* --- 1. Tokeny svislých mezer sekcí ---------------------------
   Jedna škála 80 → 64 → 48 px (stejná jako .padding-section-medium).
   Větší odsazení 112/128 px zůstává jen hlavičce stránky (první
   sekce v <main>), protože tam vyrovnává pevné menu.             */
:root {
  --polish-section: 5rem;
}
@media (max-width: 991px) {
  :root { --polish-section: 4rem; }
}
@media (max-width: 767px) {
  :root { --polish-section: 3rem; }
}

main > :not(:first-child) :is(.padding-section-large, .padding-section-hero) {
  padding-top: var(--polish-section);
  padding-bottom: var(--polish-section);
}
/* první sekce: horní odsazení pod menu zůstává, spodní do škály */
main > :first-child .padding-section-large {
  padding-bottom: var(--polish-section);
}

/* --- 2. Hero úvodní stránky: čitelnost nadpisu na fotce ---------
   Bílý H1 měl na světlé obloze kontrast jen 2,3–2,9:1. Ztmavení
   kreslí border-image s výplní (fill) — leží nad pozadím sekce,
   ale pod obsahem, takže nepřepisuje background-image s fotkou
   a nepotřebuje z-index ani pseudo-element.                       */
.section_header {
  border-image: fill 0 linear-gradient(
    180deg,
    rgb(0 14 53 / 0) 5rem,
    rgb(0 14 53 / .55) 9rem,
    rgb(0 14 53 / .4) 50%,
    rgb(0 14 53 / .12) 100%
  );
}

/* --- 3. Typografie ------------------------------------------------
   Sjednocené řádkování nadpisů (tagy i třídy heading-style-*),
   vyvážené zalamování nadpisů a bez osamocených slov v odstavcích. */
h1 { line-height: 1.1; }
h2 { line-height: 1.15; }
h3, h4 { line-height: 1.25; }
h5, h6 { line-height: 1.35; }
.heading-style-h1 { line-height: 1.1; }
.heading-style-h2 { line-height: 1.15; }
.heading-style-h3, .heading-style-h4 { line-height: 1.25; }
.heading-style-h5, .heading-style-h6 { line-height: 1.35; }

h1, h2, h3, h4, h5, h6,
.heading-style-h1, .heading-style-h2, .heading-style-h3,
.heading-style-h4, .heading-style-h5, .heading-style-h6 {
  text-wrap: balance;
}
p, li, .text-size-medium, .text-size-regular, .text-size-large {
  text-wrap: pretty;
}
/* Dlouhé názvy z CMS (detail nemovitosti): balance by posílal pomlčku
   a „m²" na začátek řádku — tady stačí pretty.                     */
.section_product-header2 :is(h1, h2) {
  text-wrap: pretty;
}

/* Hlavička sekce: nadpis → úvodní odstavec vždy 1rem (bylo 24/20/16). */
.margin-bottom.margin-small:has(> :is(h1, h2, h3)):has(+ p) {
  margin-bottom: 1rem;
}

/* --- 4. Délka řádku ----------------------------------------------
   Úvodní odstavce sekcí měly až 54rem (~110 znaků na řádek).
   Cíl 60–75 znaků; vystředěné hlavičky zůstávají vystředěné.     */
.max-width-large > p.text-size-medium {
  max-width: 40rem;
}
.max-width-large.align-center > p.text-size-medium,
.text-align-center .max-width-large > p.text-size-medium {
  margin-left: auto;
  margin-right: auto;
}
.text-rich-text,
.product-header2_description_wrapper {
  max-width: 42rem;
}
.text-rich-text p,
.text-rich-text li,
.product-header2_description_wrapper p {
  font-size: 1.0625rem;
  line-height: 1.65;
}

/* --- 5. Karty: stejná výška, spodní řádek u spodní hrany ----------
   Odkaz karty byl inline-block, takže se zúžil na obsah a cena,
   kontakty i autor „plavaly" podle délky názvu.                    */
.layout508_item,
.blog5_item {
  display: flex;
  flex-direction: column;
}
.layout508_item > .layout508_item-link,
.blog5_item > .blog5_item-link {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}
.layout508_item-bottom {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}
/* cena (nemovitosti) */
.layout508_item-bottom > .margin-top:has(.layout508_price_wrapper) {
  margin-top: auto;
  padding-top: .5rem;
}
/* kontakty (makléři) — první blok s kontaktem jde ke spodní hraně.
   !important je nutný: client-first má na .margin-bottom
   „margin-top: 0 !important" a jinak se auto neprosadí.           */
.layout508_item-bottom > :not(:has(.layout508_item-contact)) + .margin-bottom:has(.layout508_item-contact) {
  margin-top: auto !important;
}
/* autor (články) */
.blog5_item-link > .margin-top {
  margin-top: auto;
  padding-top: 1.5rem;
}
/* název max. 3 řádky */
.layout508_item-bottom > .margin-bottom > :is(h2, h3, h4),
.blog5_item-link > .margin-bottom > :is(h2, h3, h4) {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

/* Tablet 768–991 px: seznam o přesně 3 kartách ve 2 sloupcích nechával
   třetí kartu osamocenou. Ta se roztáhne přes oba sloupce a položí
   vodorovně (fotka vlevo ve stejné šířce jako karty nad ní, text
   vpravo) — díky subgridu sedí na stejné mezery jako zbytek mřížky. */
@media (min-width: 768px) and (max-width: 991px) {
  .layout508_list > .layout508_item:nth-child(3):last-child,
  .blog5_list > .blog5_item:nth-child(3):last-child {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: subgrid;
  }
  .layout508_list > .layout508_item:nth-child(3):last-child > .layout508_item-link,
  .blog5_list > .blog5_item:nth-child(3):last-child > .blog5_item-link {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: subgrid;
    grid-auto-rows: auto;
    align-content: start;
  }
  .layout508_list > .layout508_item:nth-child(3):last-child > .layout508_item-link > :first-child,
  .blog5_list > .blog5_item:nth-child(3):last-child > .blog5_item-link > :first-child {
    grid-column: 1;
    grid-row: 1 / span 4;
    margin-bottom: 0;
  }
  .layout508_list > .layout508_item:nth-child(3):last-child > .layout508_item-link > :not(:first-child),
  .blog5_list > .blog5_item:nth-child(3):last-child > .blog5_item-link > :not(:first-child) {
    grid-column: 2;
    align-self: start;
  }
  .layout508_list > .layout508_item:nth-child(3):last-child .layout508_item-bottom > .margin-top {
    margin-top: 0;
  }
}

/* --- 6. Tlačítka a odkazy: hover -----------------------------------
   Červené tlačítko mělo stín i rámeček ve stejném/světlejším odstínu
   než výplň (#D60F00 po úpravě kontrastu), takže chyběla „hrana",
   kterou mají modrá tlačítka. Stín o stupeň tmavší, rámeček v tónu. */
.button.is-red {
  border-color: #d60f00;
  box-shadow: 0 3px 0 0 #9e0800; /* mix #D60F00 a dark red #660000 */
}

/* Patička: odkazy neměly žádnou reakci na hover. */
.footer3_link,
.footer3_contacts a {
  text-decoration-line: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 1px;
  text-underline-offset: .25em;
  transition: text-decoration-color .2s;
}
.footer3_link:hover,
.footer3_contacts a:hover {
  text-decoration-color: currentColor;
}

/* Menu: podtržení dělá Webflow animace (IX2) posunem o -100 %.
   Na zlomkových pixelech z něj u hrany vykukoval 1px „puntík" pod
   vedlejším odkazem — ořízneme jeho pravé 2 px. Focus ring kreslíme
   dovnitř, protože obal má overflow:hidden a vnější prstenec ořízl.  */
.navbar21_link-underline {
  clip-path: inset(0 2px 0 0);
  width: calc(100% + 2px);
}
/* 4 px vnitřní odsazení (vyrovnané záporným okrajem obalu, text se
   neposune), aby prstenec nepřekrýval první a poslední písmeno.   */
.navbar21_link_wrapper { margin-left: -.25rem; margin-right: -.25rem; }
.navbar21_link_wrapper > .navbar21_link { padding-left: .25rem; padding-right: .25rem; }
.navbar21_link_wrapper > .navbar21_link:focus-visible {
  outline-offset: -3px;
}

/* --- 7. Úvodní stránka: hero filtr na 992–1279 px ------------------
   Tlačítko „Zobrazit N nemovitostí" se při 4 stejných sloupcích
   lámalo na 2 řádky. Tlačítku dáme šířku podle obsahu.            */
@media (min-width: 992px) and (max-width: 1279px) {
  .filters5_filter-group-list.is-home {
    grid-template-columns: repeat(3, minmax(0, 1fr)) max-content;
    column-gap: 1rem;
  }
  .filters5_filter-group-list.is-home .filters5_button-group .button {
    white-space: nowrap;
  }
}

/* --- 8. Čísla na úvodní stránce -----------------------------------
   Do 1199 px mřížka 2×2, na mobilu kompaktní karty.               */
@media (max-width: 1199px) {
  .remax-numbers_grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
  }
}
@media (max-width: 767px) {
  .remax-numbers_grid { gap: 1rem; }
  .remax-numbers_card { padding: 1.25rem; }
  .remax-numbers_content { gap: .5rem; }
  .remax-numbers_icon-wrapper { width: 3rem; height: 3rem; padding: .375rem; }
  .remax-numbers_icon { width: 2rem; }
  .remax-numbers_instance { font-size: 2rem; }
  .remax-numbers_heading { font-size: 1.0625rem; text-wrap: balance; }
  .remax-numbers_description { font-size: .875rem; }
}
@media (max-width: 479px) {
  .remax-numbers_card { padding: 1rem; }
  .remax-numbers_instance { font-size: 1.75rem; }
  .remax-numbers_heading { font-size: 1rem; }
  .remax-numbers_description { display: none; }
}

/* --- 9. Přepínače typu nemovitosti na mobilu ----------------------
   Místo sloupce 4 řádků (290 px) jeden řádek: ikona nad popiskem,
   4 stejně široké položky. Na velmi úzkých displejích (pod ~360 px)
   se řádek posouvá vodorovně uvnitř sebe, stránka ne.              */
@media (max-width: 767px) {
  .layout508_tabs-menu {
    flex-flow: row nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    padding: .5rem;
    gap: .25rem;
  }
  .layout508_tabs-menu::-webkit-scrollbar { display: none; }
  .layout508_tab-link {
    flex: 1 0 auto;
    width: auto;
    flex-direction: column;
    gap: .25rem;
    padding: .75rem .625rem;
    white-space: nowrap;
  }
  .layout508_tab-link .heading-style-h6 { font-size: 1rem; }
  /* poslední položka měla spodní linku vypnutou (tabs-last) */
  .layout508_tab-link.tabs-last { border-bottom-width: .125rem; }
}

/* --- 10. Služby na mobilu: kratší časová osa ----------------------
   Každý ze 16 kroků měl min. 110vh (obrázek 50vh + text 50vh) —
   stránka měřila 17 600 px. Tečka jde do toku mezi text a obrázek,
   aby seděla i při proměnlivé výšce kroků.                         */
@media (max-width: 767px) {
  .proces-prodeje_krok { min-height: 0; }
  .content-wrap {
    height: auto;
    padding-top: 2rem;
    padding-bottom: 1rem;
  }
  .proces-prodeje_image_wrapper {
    min-height: 0;
    padding-top: 1rem;
    padding-bottom: 2rem;
  }
  .proces-prodeje_image_wrapper img {
    max-height: 11rem;
    width: auto;
  }
  .proces-prodeje_dot {
    position: relative;
    bottom: auto;
  }
}

/* --- 11. Chyby a přetékání ----------------------------------------- */

/* Filtr kategorií článků přetékal na 390 px (594 px obsahu) —
   posouvá se uvnitř sebe, ne celá stránka.                        */
@media (max-width: 767px) {
  .category-filter-menu {
    overflow-x: auto;
    scrollbar-width: none;
    gap: .25rem;
    margin-bottom: 2.5rem;
  }
  .category-filter-menu::-webkit-scrollbar { display: none; }
}

/* SVG ikona 960×960 v parametrech nemovitosti rozšiřovala stránku. */
:is(.icon-embed-xsmall, .icon-embed-small, .icon-embed-medium) > svg {
  max-width: 100%;
  max-height: 100%;
}

/* --- 12. Cookie lišta na mobilu/tabletu ----------------------------
   Lišta se ukazuje inline stylem display:flex. Dokud je vidět,
   bublina chatu (pevně vpravo dole) překrývala tlačítka lišty;
   schováme ji, po rozhodnutí se vrátí. Křížek vyčníval nad lištu. */
@media (max-width: 1199px) {
  body:has(.fs-cc-banner_component[style*="display: flex"]) #grnd-chat-fasada,
  body:has(.fs-cc-banner_component[style*="display: block"]) #grnd-chat-fasada {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
  }
}
@media (max-width: 991px) {
  .fs-cc-banner_close {
    top: .25rem;
    right: .25rem;
    padding: .625rem;
    box-shadow: none;
    background-color: transparent;
  }
  .fs-cc-banner_text { padding-right: 2.5rem; }
}
@media (max-width: 767px) {
  .fs-cc-banner_buttons-wrapper .button { min-height: 44px; }
}
@media (max-width: 479px) {
  /* mezera před tečkou za odkazem „Zásadách cookies" */
  .fs-cc-banner_text-link { margin-right: 0; }
}