/*
 * Doplňkové styly k Webflow exportu.
 *
 * Obsahuje dvě věci:
 *  1) CSS, které původní web opakoval inline u každého odkazu a formuláře —
 *     tady je jednou, chování je stejné.
 *  2) Nový vzhled výpisu nemovitostí (Prvek 1 ze zadání).
 *
 * Barvy se berou z proměnné --color, kterou definuje reality-srdcem.webflow.css
 * (#36364f). Fallback je tam pro případ, že by se pořadí stylů změnilo.
 */

/* ---------------------------------------------------------------
   1) Přenesené inline styly z původního webu
   --------------------------------------------------------------- */

/* Efekt vyjíždějícího textu v navigaci a v patičce */
.slide-in-bottom {
    overflow: hidden;
    padding: 0 4px;
    height: 1em;
}

.slide-in-bottom div {
    position: relative;
    display: inline-block;
    transition: transform 0.3s;
}

.slide-in-bottom div::before {
    position: absolute;
    top: 100%;
    content: attr(data-hover);
    font-weight: 700;
    transform: translate3d(0, 0, 0);
}

.slide-in-bottom:hover div,
.slide-in-bottom:focus div {
    transform: translateY(-100%);
}

/* Chybová hláška u formulářů */
.chyba {
    color: #b42318;
    background-color: #fef3f2;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0.7rem;
    display: flex;
    font-size: 1rem;
    margin: 0.5rem;
}

.UspesneOdeslano {
    font-weight: bold;
    font-size: 1rem;
    color: green;
    display: flex;
    justify-content: center;
}

/* ---------------------------------------------------------------
   2) Výpis nemovitostí — Prvek 1
   --------------------------------------------------------------- */

.nemo-mrizka {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2.5rem 2rem;
    width: 100%;
    margin-top: 2rem;
}

.nemo-dlazdice {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
}

/* Fotka drží pevný poměr stran, takže se stránka při načítání nehýbe. */
.nemo-dlazdice-foto {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: 14px;
    background-color: #e9e7e4;
}

.nemo-dlazdice-obrazek {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.45s ease;
}

.nemo-dlazdice:hover .nemo-dlazdice-obrazek,
.nemo-dlazdice:focus-visible .nemo-dlazdice-obrazek {
    transform: scale(1.05);
}

/* Ztmavení zdola, aby byl bílý nadpis čitelný na jakékoli fotce.
   Při najetí ztmavení mizí — fotka pod ním mezitím zesvětlá. */
.nemo-dlazdice-prekryv {
    position: absolute;
    inset: auto 0 0 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 4rem 1.25rem 1.25rem;
    background: linear-gradient(to top, rgba(12, 12, 24, 0.85) 0%, rgba(12, 12, 24, 0.55) 45%, rgba(12, 12, 24, 0) 100%);
    transition: opacity 0.4s ease;
}

.nemo-dlazdice:hover .nemo-dlazdice-prekryv {
    background: linear-gradient(to top, rgba(12, 12, 24, 0.12) 0%, rgba(12, 12, 24, 0) 60%);
}

.nemo-dlazdice-nadpis {
    margin: 0;
    color: #fffbf8;
    font-size: 1.4rem;
    line-height: 1.25;
    font-weight: 700;
    transition: color 0.4s ease, text-shadow 0.4s ease;
}

/* Na zesvětlené fotce musí být název tmavý, jinak zmizí. */
.nemo-dlazdice:hover .nemo-dlazdice-nadpis {
    color: var(--color, #36364f);
}

/* Závoj, který fotku při najetí zesvětlí. */
.nemo-dlazdice-zavoj {
    position: absolute;
    inset: 0;
    z-index: 1;
    background-color: #fffbf8;
    opacity: 0;
    transition: opacity 0.45s ease;
    pointer-events: none;
}

.nemo-dlazdice:hover .nemo-dlazdice-zavoj,
.nemo-dlazdice:focus-visible .nemo-dlazdice-zavoj {
    opacity: 0.72;
}

/* Výzva přes střed fotky — nahradila tlačítko pod dlaždicí. */
.nemo-dlazdice-vyzva {
    position: absolute;
    /* Výš než střed — dole je název a rozbalený panel se čtyřmi údaji. */
    inset: 18% 1.25rem auto;
    z-index: 3;
    text-align: center;
    font-family: var(--header_text, inherit);
    font-size: clamp(1.1rem, 2vw, 1.6rem);
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color, #36364f);
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.4s ease, transform 0.4s ease;
    pointer-events: none;
}

.nemo-dlazdice:hover .nemo-dlazdice-vyzva,
.nemo-dlazdice:focus-visible .nemo-dlazdice-vyzva {
    opacity: 1;
    transform: none;
}

/* Panel s cenou. V klidu je to jen cenovka, při najetí se roztáhne
   přes celou šířku fotky a doplní adresu a klíčové údaje. */
.nemo-dlazdice-panel {
    width: 100%;
    border-radius: 12px;
    padding: 0;
    background-color: #0000;
    border: 1px solid #0000;
    transition: background-color 0.4s ease, padding 0.4s ease, border-color 0.4s ease;
}

.nemo-dlazdice:hover .nemo-dlazdice-panel,
.nemo-dlazdice:focus-visible .nemo-dlazdice-panel {
    padding: 0.9rem;
    background-color: #36364fb8;
    border-color: #fffbf83d;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* Cenovka má vlastní podklad jen do chvíle, než ho převezme panel —
   díky tomu to vypadá, že se krabička roztáhla. */
/* Matné sklo v barvě tématu — stejný styl jako cedule PRODÁNO
   u realizovaných obchodů, jen o něco méně průhledný. */
.nemo-dlazdice-cena {
    display: inline-flex;
    flex-direction: column;
    gap: 0.1rem;
    padding: 0.5rem 0.9rem;
    border-radius: 10px;
    border: 1px solid #fffbf83d;
    background-color: #36364fb8;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: #fffbf8;
    transition: background-color 0.4s ease, padding 0.4s ease, border-color 0.4s ease;
}

/* Při najetí podklad přebírá panel, cenovka se do něj „rozplyne". */
.nemo-dlazdice:hover .nemo-dlazdice-cena,
.nemo-dlazdice:focus-visible .nemo-dlazdice-cena {
    background-color: #0000;
    border-color: #0000;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    padding: 0;
}

.nemo-dlazdice-cena-popis {
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0.75;
}

.nemo-dlazdice-cena-castka {
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
}

/* Adresa a klíčové údaje — vysunou se až při najetí. */
.nemo-dlazdice-detail {
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    color: #fffbf8;
    transition: max-height 0.4s ease, opacity 0.35s ease, margin-top 0.4s ease;
}

.nemo-dlazdice:hover .nemo-dlazdice-detail,
.nemo-dlazdice:focus-visible .nemo-dlazdice-detail {
    max-height: 14rem;
    opacity: 1;
    margin-top: 0.7rem;
}

.nemo-dlazdice-adresa {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.9rem;
    line-height: 1.35;
    opacity: 0.85;
}

.nemo-dlazdice-adresa svg {
    flex: none;
}

.nemo-dlazdice-udaje {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
    margin-top: 0.6rem;
}

.nemo-dlazdice-udaj {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
    padding: 0.45rem 0.7rem;
    border-radius: 8px;
    background-color: #ffffff1f;
}

.nemo-dlazdice-udaj-nazev {
    font-size: 0.65rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0.7;
}

.nemo-dlazdice-udaj-hodnota {
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.nemo-dlazdice-tag {
    position: absolute;
    top: 1rem;
    left: 1rem;
    z-index: 3;
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
    background-color: #fffbf8;
    color: var(--color, #36364f);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    box-shadow: 0 2px 8px #0000001a;
}

/* Na tabletu a mobilu jedna nemovitost na řádek. */
@media (max-width: 991px) {
    .nemo-mrizka {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .nemo-dlazdice-nadpis {
        font-size: 1.25rem;
    }
}

@media (max-width: 479px) {
    .nemo-dlazdice-prekryv {
        padding: 3rem 1rem 1rem;
    }

    .nemo-dlazdice-nadpis {
        font-size: 1.1rem;
    }

    .nemo-dlazdice-cena-castka {
        font-size: 1rem;
    }
}

/* Na dotykovém displeji žádné najetí myší není. Prohlížeč tam ale umí
   :hover „zaseknout" po klepnutí, takže by dlaždice zůstala v rozehraném
   stavu — proto se tam celý efekt vypíná. */
@media (hover: none) {
    .nemo-dlazdice:hover .nemo-dlazdice-obrazek {
        transform: none;
    }

    .nemo-dlazdice:hover .nemo-dlazdice-zavoj,
    .nemo-dlazdice:hover .nemo-dlazdice-vyzva,
    .nemo-dlazdice:hover .nemo-dlazdice-detail {
        opacity: 0;
    }

    .nemo-dlazdice:hover .nemo-dlazdice-detail {
        max-height: 0;
        margin-top: 0;
    }

    .nemo-dlazdice:hover .nemo-dlazdice-cena {
        padding: 0.5rem 0.9rem;
        border-color: #fffbf83d;
        background-color: #36364fb8;
    }

    .nemo-dlazdice:hover .nemo-dlazdice-panel {
        padding: 0;
        background-color: #0000;
    }

    .nemo-dlazdice:hover .nemo-dlazdice-cena {
        padding: 0.5rem 0.9rem;
        background-color: var(--color, #36364f);
    }

    .nemo-dlazdice:hover .nemo-dlazdice-nadpis {
        color: #fffbf8;
    }

    .nemo-dlazdice:hover .nemo-dlazdice-prekryv {
        background: linear-gradient(to top, rgba(12, 12, 24, 0.85) 0%, rgba(12, 12, 24, 0.55) 45%, rgba(12, 12, 24, 0) 100%);
    }
}

/* Kdo má vypnuté animace, nedostane žádné posuny. */
@media (prefers-reduced-motion: reduce) {
    .nemo-dlazdice-obrazek,
    .nemo-dlazdice-zavoj,
    .nemo-dlazdice-vyzva,
    .nemo-dlazdice-panel,
    .nemo-dlazdice-cena,
    .nemo-dlazdice-detail,
    .slide-in-bottom div {
        transition: none;
    }

    .nemo-dlazdice:hover .nemo-dlazdice-obrazek,
    .nemo-dlazdice:focus-visible .nemo-dlazdice-obrazek {
        transform: none;
    }

    .nemo-dlazdice:hover .nemo-dlazdice-vyzva {
        transform: none;
    }
}

/* ---------------------------------------------------------------
   3) Horní lišta — kontakty a hodnocení na Google (bod A)

   Lišta je připíchnutá nahoře a navigace pod ní jen o její výšku
   poskočí. Výška je v proměnné, ať se nikde nepočítá ručně.
   --------------------------------------------------------------- */

:root {
    --vyska-listy: 2.5rem;
}

.horni-lista {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 10000;
    height: var(--vyska-listy);
    /* Stejný průsvitný krém jako navigace pod ní — lišta má se stránkou
       splynout, ne ji přerazit. */
    background-color: #fffbf8d9;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid #36364f14;
    color: var(--color, #36364f);
    font-family: var(--body, inherit);
    font-size: 0.85rem;
    display: flex;
    align-items: center;
}

.horni-lista-obsah {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
    max-width: 80rem;
    margin: 0 auto;
    padding: 0 10vw;
}

.horni-lista-kontakty {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    min-width: 0;
}

.horni-lista-polozka {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    color: inherit;
    text-decoration: none;
    white-space: nowrap;
    opacity: 0.75;
    transition: opacity 0.2s ease;
}

.horni-lista-polozka:hover,
.horni-lista-polozka:focus-visible {
    opacity: 1;
    text-decoration: underline;
}

.horni-lista-polozka svg {
    flex: none;
    color: var(--main-green, #6ad1e3);
}

.horni-lista-hodnoceni {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.25rem 0.4rem 0.25rem 0.7rem;
    border-radius: 999px;
    border: 1px solid #36364f1f;
    background-color: #ffffff80;
    color: inherit;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

a.horni-lista-hodnoceni:hover,
a.horni-lista-hodnoceni:focus-visible {
    background-color: #fff;
    border-color: #36364f3d;
}

/* Výzva k prokliku na sekci s recenzemi na úvodní stránce.
   Schválně nenápadná — lišta má splývat, ne přerážet obsah. */
.horni-lista-vice {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    margin-left: 0.15rem;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    background-color: #36364f0f;
    color: #1c1c28;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    transition: background-color 0.2s ease;
}

.horni-lista-hodnoceni:hover .horni-lista-vice {
    background-color: #36364f1f;
}

.horni-lista-vice svg {
    transition: transform 0.2s ease;
}

.horni-lista-hodnoceni:hover .horni-lista-vice svg {
    transform: translateX(2px);
}

.horni-lista-google {
    flex: none;
    background: #fff;
    border-radius: 50%;
    padding: 1px;
}

.horni-lista-cislo {
    font-weight: 700;
}

/* Zlaté hvězdy ležící přesně přes šedé — proto stejný text dvakrát. */
.horni-lista-hvezdy {
    position: relative;
    display: inline-block;
    line-height: 1;
    letter-spacing: 0.08em;
}

.horni-lista-hvezdy-podklad {
    color: #36364f33;
}

.horni-lista-hvezdy-plne {
    position: absolute;
    inset: 0 auto 0 0;
    overflow: hidden;
    color: #fbbc05;
    white-space: nowrap;
}

.horni-lista-pocet {
    opacity: 0.7;
}

/* Navigace i ukazatel scrollu se posunou pod lištu. */
.nav {
    margin-top: calc(var(--vyska-listy) + 1rem);
}

.progress-bar {
    top: var(--vyska-listy);
}

@media (max-width: 991px) {
    .horni-lista-obsah {
        padding: 0 5vw;
    }
}

/* Na mobilu se musí vejít telefon, e-mail i hodnocení. Písmo je proto
   menší a mezery užší; hvězdičky a výzva k prokliku ustoupí, číslo
   hodnocení vedle loga Google zůstává. */
@media (max-width: 767px) {
    :root {
        --vyska-listy: 2.5rem;
    }

    /* Pevná výška lištu na některých telefonech skřípla a horní hrana
       boxu s hodnocením se ztratila. Minimální výška ji naopak nechá
       vždycky dýchat. */
    .horni-lista {
        height: auto;
        min-height: var(--vyska-listy);
        padding: 0.2rem 0;
        font-size: 0.7rem;
    }

    .horni-lista-obsah {
        padding: 0 0.6rem;
        gap: 0.4rem;
    }

    .horni-lista-kontakty {
        gap: 0.7rem;
        flex: 1 1 auto;
        overflow: hidden;
    }

    .horni-lista-polozka {
        min-width: 0;
    }

    .horni-lista-polozka span {
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .horni-lista-polozka svg {
        width: 13px;
        height: 13px;
    }

    .horni-lista-hodnoceni {
        flex: none;
        padding: 0.15rem 0.5rem;
    }

    .horni-lista-hvezdy,
    .horni-lista-pocet,
    .horni-lista-vice {
        display: none;
    }
}

/* Na opravdu úzkých displejích se e-mail nevejde ani s malým písmem. */
@media (max-width: 379px) {
    .horni-lista-polozka.je-email span {
        display: none;
    }
}

/* ---------------------------------------------------------------
   4) Přehled prodaných nemovitostí (bod D)

   Stejný rastr i velikost fotek jako aktuální nabídka. Přes střed
   fotky vede světlý pruh s nápisem PRODÁNO / PRONAJATO.
   --------------------------------------------------------------- */

.prodano-mrizka {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2.5rem 2rem;
    width: 100%;
    margin-top: 2rem;
}

.prodano-dlazdice {
    display: flex;
    flex-direction: column;
}

.prodano-dlazdice-foto {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: 14px;
    background-color: #e9e7e4;
}

.prodano-dlazdice-obrazek {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Realizované obchody jsou ukázka, ne nabídka — proto lehce ztlumené. */
    filter: saturate(0.85);
    transition: transform 0.45s ease, filter 0.45s ease;
}

.prodano-dlazdice:hover .prodano-dlazdice-obrazek {
    transform: scale(1.05);
    filter: saturate(1);
}

/* Průsvitná zaoblená cedule uprostřed fotky. Fotka musí zůstat vidět —
   proto jen lehký závoj s rozostřením, ne neprůhledný pruh. */
.prodano-dlazdice-pruh {
    position: absolute;
    /* Přesně na střed fotky. */
    inset: 50% auto auto 50%;
    transform: translate(-50%, -50%);
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 82%;
    padding: 1.4rem 1rem;
    border-radius: 1rem;
    border: 1px solid #fffbf866;
    background-color: #fffbf85c;
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    box-shadow: 0 8px 24px #0000001a;
}

.prodano-dlazdice-stav {
    font-family: var(--header_text, inherit);
    font-size: clamp(1.3rem, 2.4vw, 2rem);
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--color, #36364f);
    line-height: 1.1;
    /* Nápis musí zůstat čitelný i na světlé fotce pod průsvitnou cedulí. */
    text-shadow: 0 1px 2px #fffbf8b3;
}

/* Název leží přes spodek fotky, stejně jako u aktuální nabídky. */
.prodano-dlazdice-prekryv {
    position: absolute;
    inset: auto 0 0 0;
    z-index: 2;
    padding: 4rem 1.25rem 1.25rem;
    background: linear-gradient(to top, rgba(12, 12, 24, 0.85) 0%, rgba(12, 12, 24, 0.55) 45%, rgba(12, 12, 24, 0) 100%);
}

.prodano-dlazdice-nadpis {
    margin: 0;
    color: #fffbf8;
    font-family: var(--header_text, inherit);
    font-size: 1.2rem;
    line-height: 1.3;
    font-weight: 700;
    text-transform: uppercase;
}

@media (max-width: 991px) {
    .prodano-mrizka {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .prodano-dlazdice-nadpis {
        font-size: 1.05rem;
    }
}

@media (max-width: 479px) {
    .prodano-dlazdice-prekryv {
        padding: 3rem 1rem 1rem;
    }

    .prodano-dlazdice-nadpis {
        font-size: 0.95rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .prodano-dlazdice-obrazek {
        transition: none;
    }

    .prodano-dlazdice:hover .prodano-dlazdice-obrazek {
        transform: none;
    }
}

/* ---------------------------------------------------------------
   5) Detail nemovitosti (body E a F)
   --------------------------------------------------------------- */

/* Klíčové údaje mezi názvem a cenou — 0 až 4 políčka z administrace. */
/* Čtyři stejně široká místa vedle sebe. Dřív to byl pružný řádek, kde si
   boxíky rozdělily celou šířku mezi sebe — se čtyřmi údaji to vypadalo
   dobře, ale se třemi (a hůř se dvěma) se roztáhly do nesmyslné šířky.
   Mřížka drží stejnou velikost bez ohledu na to, kolik údajů klient
   vyplní; nevyplněná místa zůstanou prostě prázdná. */
.nemovitost-parametry {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.6rem;
    width: 100%;
    margin: 1rem 0 0.5rem;
}

@media (max-width: 991px) {
    .nemovitost-parametry {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.nemovitost-parametr {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
    padding: 0.65rem 0.9rem;
    border: 1px solid #36364f26;
    border-radius: 12px;
    background-color: #36364f0a;
}

.nemovitost-parametr-nazev {
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #36364fa6;
}

.nemovitost-parametr-hodnota {
    font-family: var(--header_text, inherit);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--color, #36364f);
    line-height: 1.2;
    overflow-wrap: anywhere;
}

/* Odstavce popisu. Dřív to byly zdvojené <br> a mezery byly obří. */
.nemovitost-popislong p {
    margin: 0 0 0.85rem;
    line-height: 1.6;
}

.nemovitost-popislong p:last-child {
    margin-bottom: 0;
}

/* Hlavní fotka — plynulejší přiblížení místo skoku o desetinu. */
.fotohlavni-image {
    transition: transform 0.45s ease;
}

.fotohlavni-image:hover {
    transform: scale(1.05);
}

/* Náhledy v galerii */
.foto-databaze-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
    margin-top: 1rem;
    /* Náhledy si výšku určují samy (viz `.galerie-nahled`). Natahování na
       výšku řádku je to, co Safari pletlo. */
    align-items: start;
}

/* Rámeček náhledu drží poměr 4:3 přes vnitřní odsazení, ne přes
   `aspect-ratio`.

   Důvod: náhled je zároveň položkou mřížky, a ta má v původních stylech
   `align-items: stretch`. Safari na iPhonu si v téhle kombinaci s výškou
   neporadí a rámeček mu zůstane nulově vysoký — na telefonu pak místo
   náhledů zbylo prázdné místo. A protože nulový rámeček je pro prohlížeč
   „mimo obraz", nespustilo se ani načítání fotek uvnitř.

   Odsazení v procentech se počítá ze šířky rodiče a funguje ve všech
   prohlížečích stejně, takže na žádný výpočet poměru stran nespoléháme.
   Obrázek uvnitř proto musí být vytažený z toku (viz níž). */
.galerie-nahled {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: 0.9rem;
    background-color: #e9e7e4;
}

.galerie-nahled::before {
    content: "";
    display: block;
    padding-top: 75%;
}

/* Obrázek vyplní rámeček přes `inset`, ne přes `height: 100 %`.
   Procentní výška se totiž počítá z výšky rodiče — a ta je tady daná jen
   poměrem stran (`aspect-ratio`), což některé prohlížeče (hlavně Safari)
   neumí spočítat a obrázek jim pak vyjde nulový nebo naopak přes celou
   výšku fotky. Absolutní umístění tenhle výpočet vůbec nepotřebuje. */
.galerie-nahled-obrazek {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.45s ease;
}

.galerie-nahled::after {
    content: "";
    position: absolute;
    inset: 0;
    background-color: #0c0c18;
    opacity: 0;
    transition: opacity 0.35s ease;
}

.galerie-nahled-lupa {
    position: absolute;
    inset: 50% auto auto 50%;
    transform: translate(-50%, -50%) scale(0.8);
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 50%;
    background-color: #fffbf8;
    color: var(--color, #36364f);
    opacity: 0;
    transition: opacity 0.35s ease, transform 0.35s ease;
}

.galerie-nahled:hover .galerie-nahled-obrazek,
.galerie-nahled:focus-visible .galerie-nahled-obrazek {
    transform: scale(1.08);
}

.galerie-nahled:hover::after,
.galerie-nahled:focus-visible::after {
    opacity: 0.25;
}

.galerie-nahled:hover .galerie-nahled-lupa,
.galerie-nahled:focus-visible .galerie-nahled-lupa {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

/* 3D prohlídka — fotka držela jen šířku, výška zůstala z originálu
   a náhled se protahoval do výšky. Poměr stran to řeší natrvalo. */
.prohlidka3d {
    display: block;
    margin-top: 1.5rem;
    text-decoration: none;
}

.prohlidka3d-foto {
    position: relative;
    aspect-ratio: 5 / 4;
    overflow: hidden;
    border-radius: 1rem;
    background-color: #e9e7e4;
}

.prohlidka3d-obrazek {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.45s ease;
}

.prohlidka3d:hover .prohlidka3d-obrazek {
    transform: scale(1.04);
}

.prohlidka3d-foto::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, #0c0c1873, #0c0c1826);
}

.prohlidka3d-popisek {
    position: absolute;
    /* Vystředěno přes inset: 0 a margin: auto, ne přes left: 50 %.
       U posunu o 50 % totiž prohlížeč počítá dostupnou šířku jen od středu
       fotky doprava, takže se popisek zlomil i tam, kde měl místa dost. */
    inset: 0;
    margin: auto;
    width: fit-content;
    height: fit-content;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.7rem 1.3rem;
    border-radius: 999px;
    background-color: var(--main-green, #6ad1e3);
    color: var(--white, #fff);
    font-family: var(--header_text, inherit);
    font-size: 1.05rem;
    font-weight: 700;
    /* Popisek „Spustit 3D virtuální prohlídku" je delší než šířka náhledu
       na telefonu. Smí se proto zlomit a nepřeroste rámeček — s nowrap
       by z fotky trčel. Na počítači je náhled dost široký, tam zůstane
       na jedné řádce sám. */
    max-width: calc(100% - 1.5rem);
    text-align: center;
    line-height: 1.3;
    transition: transform 0.3s ease;
}

.prohlidka3d:hover .prohlidka3d-popisek {
    transform: scale(1.05);
}

/* ---------------------------------------------------------------
   6) Vizitka makléře a poptávka na detailu nemovitosti (bod E)
   --------------------------------------------------------------- */

.makler-karta {
    margin-top: 2rem;
    border: 2px solid #36364f1f;
    border-radius: 1.5rem;
    background-color: #fffbf8;
    box-shadow: 0 10px 30px #36364f14;
    overflow: hidden;
}

.makler-hlavicka {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem;
    background-color: var(--color, #36364f);
    color: #fffbf8;
}

.makler-foto {
    flex: none;
    width: 5rem;
    height: 5rem;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #fffbf84d;
}

.makler-udaje {
    min-width: 0;
}

.makler-jmeno {
    font-family: var(--header_text, inherit);
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.2;
}

.makler-pozice {
    font-size: 0.85rem;
    opacity: 0.75;
    margin-top: 0.1rem;
}

.makler-kontakty {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-top: 0.6rem;
}

.makler-kontakt {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    color: inherit;
    font-size: 0.95rem;
    text-decoration: none;
    overflow-wrap: anywhere;
}

.makler-kontakt:hover,
.makler-kontakt:focus-visible {
    text-decoration: underline;
}

.makler-formular {
    padding: 1.25rem;
}

.makler-formular-nadpis {
    font-family: var(--header_text, inherit);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--color, #36364f);
    margin-bottom: 0.9rem;
}

.makler-formular form {
    display: grid;
    gap: 0.9rem;
}

.makler-formular .form_input.is-text-area {
    min-height: 6.5rem;
}

.makler-formular .button-dark {
    width: 100%;
}

@media (max-width: 767px) {
    .foto-databaze-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .makler-hlavicka {
        flex-direction: column;
        text-align: center;
    }

    .makler-kontakty {
        align-items: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    .galerie-nahled-obrazek,
    .galerie-nahled-lupa,
    .prohlidka3d-obrazek,
    .prohlidka3d-popisek,
    .fotohlavni-image {
        transition: none;
    }

    .galerie-nahled:hover .galerie-nahled-obrazek,
    .prohlidka3d:hover .prohlidka3d-obrazek,
    .fotohlavni-image:hover {
        transform: none;
    }
}

/* ---------------------------------------------------------------
   7) Formuláře — ohraničená karta a modernější rozbalovací pole
      (body G a H)
   --------------------------------------------------------------- */

/* Kontaktní i odhadový formulář sedí ve stejné kartě. */
.odhad-karta,
.contact9_form-block {
    border: 2px solid #36364f33;
    border-radius: 1.5rem;
    background-color: #fffbf8;
    box-shadow: 0 10px 30px #36364f14;
    padding: 2rem;
}

.contact2_form.odhad {
    padding-top: 0;
    margin-bottom: 0;
}

.odhadfrom-con {
    width: 100%;
    max-width: 46rem;
    margin: 0 auto;
    padding: 0 1rem 3rem;
}

/* Vlastní šipka u rozbalovacího pole — původní byla systémová
   a v každém prohlížeči vypadala jinak. */
.vyber {
    position: relative;
}

.vyber::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 1rem;
    width: 0.55rem;
    height: 0.55rem;
    border-right: 2px solid var(--color, #36364f);
    border-bottom: 2px solid var(--color, #36364f);
    transform: translateY(-70%) rotate(45deg);
    pointer-events: none;
    transition: transform 0.2s ease;
}

.vyber:focus-within::after {
    transform: translateY(-30%) rotate(225deg);
}

.vyber .form_input.is-select-input {
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    padding-right: 2.5rem;
    background-image: none;
    cursor: pointer;
}

.form_input:focus {
    outline: none;
    box-shadow: 0 0 0 3px #6ad1e340;
}

@media (max-width: 767px) {
    .odhad-karta,
    .contact9_form-block {
        padding: 1.25rem;
        border-radius: 1.25rem;
    }

    .form_field-2col.is-mobile-1col {
        grid-template-columns: 1fr;
    }
}

/* ---------------------------------------------------------------
   8) Kontakt — mapa a kontaktní údaje vedle sebe (bod CH)

   Původně byla mapa odsazená o 22 rem dolů a doprava, takže lezla
   do obrázku na pozadí. Tady jsou z toho dva rovnocenné sloupce
   zarovnané na střed.
   --------------------------------------------------------------- */

/* Odsazení sekce s údaji. Dřív tu bylo obrovské, protože formulář
   z předchozí sekce přetékal dolů — to se ale mezitím vyřešilo
   u zdroje (viz oddíl 18). */
.kontaktinfo-sec {
    padding: 6rem 2rem;
}

.kontaktcom {
    max-width: 76rem;
    padding: 0;
}

.contact14_content {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    align-items: center;
    gap: 3rem;
}

.kontaktyleft {
    display: flex;
    justify-content: center;
}

/* Kontakty jako karta, ať nesplývají s obrázkem na pozadí. */
.kontaktlist {
    width: 100%;
    max-width: 30rem;
    gap: 1.75rem;
    padding: 2rem;
    border-radius: 1.5rem;
    background-color: #fffbf8e6;
    box-shadow: 0 10px 30px #36364f1a;
}

.kontakt-type {
    align-items: flex-start;
}

.kontakt-con {
    justify-content: flex-start;
    gap: 0.6rem;
}

.kontakt-header {
    font-size: 1.35rem;
    line-height: 1.4;
}

.kontakt-type .text-style-link {
    font-size: 1.1rem;
    line-height: 1.5;
    overflow-wrap: anywhere;
    transition: color 0.2s ease;
}

.kontakt-type .text-style-link:hover {
    color: #6ad1e3;
}

.contaktyright {
    /* Původní odsazení shora mapu vytlačovalo mimo sekci. */
    margin-top: 0;
    padding: 0;
    justify-content: center;
    align-items: center;
}

.contaktyright .div-block-12 {
    width: 100%;
    padding: 0;
}

/* Mapa je šedá a obarví se, až když na ni návštěvník najede.
   Selektory jsou schválně navázané na kontaktní sekci — stejnou třídu
   používá i mapa na detailu nemovitosti a té se to týkat nemá. */
.contaktyright .kontaktmapa {
    width: 100%;
    height: clamp(20rem, 38vw, 30rem);
    border-radius: 1.5rem;
    box-shadow: 0 10px 30px #36364f1a;
    filter: grayscale(1);
    transition: filter 0.5s ease, box-shadow 0.5s ease;
}

.contaktyright .kontaktmapa:hover,
.contaktyright .kontaktmapa:focus-within {
    filter: grayscale(0);
    box-shadow: 0 14px 40px #36364f2e;
}

.contaktyright .kontaktmapa iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

@media (max-width: 991px) {
    .kontaktinfo-sec {
        padding: 4rem 1.25rem;
    }

    .contact14_content {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .kontaktlist {
        max-width: none;
    }

    /* Na dotykovém displeji není hover — mapa proto rovnou barevná. */
    .contaktyright .kontaktmapa {
        filter: none;
        height: 20rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .contaktyright .kontaktmapa {
        transition: none;
    }
}

/* ---------------------------------------------------------------
   9) Nájezdové animace (bod I)

   Prvek čeká skrytý, a jakmile se dostane do obrazu, plynule najede.
   Když z obrazu odjede, vrátí se do výchozího stavu — efekt tedy funguje
   při scrollování dolů i nahoru, ne jen napoprvé.

   Zpoždění mezi prvky v jedné řadě řídí proměnná --zpozdeni, kterou
   nastavuje doplnky.js.
   --------------------------------------------------------------- */

/* Skrytí je schválně podmíněné třídou `w-mod-js`, kterou na <html> přidává
   Webflow, když běží JavaScript. Bez skriptu se tedy nic neschová a web
   zůstane čitelný — jen bez animací. */
.w-mod-js [data-anim] {
    opacity: 0;
    transition:
        opacity 0.7s cubic-bezier(0.22, 0.61, 0.36, 1),
        transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
    transition-delay: var(--zpozdeni, 0ms);
    will-change: opacity, transform;
}

.w-mod-js [data-anim="vzhuru"] { transform: translateY(28px); }
.w-mod-js [data-anim="zleva"]  { transform: translateX(-32px); }
.w-mod-js [data-anim="zprava"] { transform: translateX(32px); }
.w-mod-js [data-anim="radek"]  { transform: translateY(-14px); }

/* Karty na úvodu se skládají přes sebe (position: sticky). Posun by jim
   podrazil nohy, proto jen decentní zvětšení. */
.w-mod-js [data-anim="karta"] {
    transform: scale(0.96);
}

.w-mod-js [data-anim].je-videt {
    opacity: 1;
    transform: none;
}

/* Řádky formuláře se „vylistují" rychleji, jinak by čekání bylo znát. */
.w-mod-js [data-anim="radek"] {
    transition-duration: 0.5s;
}

/* ---------------------------------------------------------------
   10) Skládané karty na úvodní stránce (bod I)

   Karty se lepí pod sebe na stejné místo. Malý rozdíl v odsazení
   udělá z hromádky vrstvy, ve kterých je vidět, kolik jich je.
   --------------------------------------------------------------- */

.layout353_content-item.content-item-1 {
    transition: box-shadow 0.4s ease;
}

.layout353_content-right > .layout353_content-item:nth-child(2) {
    top: 33%;
}

.layout353_content-right > .layout353_content-item:nth-child(3) {
    top: 36%;
}

.layout353_content-right > .layout353_content-item:nth-child(4) {
    top: 39%;
}

/* ---------------------------------------------------------------
   11) Karty služeb — zvýraznění při najetí (bod I)
   --------------------------------------------------------------- */

/* Webflow posouval celou řadu služeb podle polohy scrollu — pohyb byl proto
   trhaný a závisel na tom, jak rychle kdo točí kolečkem. Jeho inline styly
   tady rušíme a nájezd řídí doplnky.js: řada přiletí sama, plynule
   a s malým odstupem mezi kartami. */
.servicegroup {
    opacity: 1 !important;
    transform: none !important;
}

.serviceitem {
    border-radius: 1.25rem;
    padding: 1.75rem 1.25rem;
    background-color: #0000;
    transition: transform 0.35s ease, background-color 0.35s ease, box-shadow 0.35s ease;
}

.serviceitem:hover {
    /* Jen naznačit, že karta reaguje — plné pozadí a velký stín byly
       na devět karet vedle sebe moc. */
    transform: translateY(-3px) scale(1.02);
    background-color: #fffbf866;
    box-shadow: 0 6px 18px #36364f14;
}

.serviceitem .serviceicon {
    transition: transform 0.35s ease, color 0.35s ease;
}

.serviceitem:hover .serviceicon {
    transform: scale(1.06);
}

/* ---------------------------------------------------------------
   12) Cookie lišta (bod G)
   --------------------------------------------------------------- */

.cookie-lista {
    position: fixed;
    left: 1rem;
    right: 1rem;
    bottom: 1rem;
    z-index: 10001;
    opacity: 0;
    transform: translateY(1.5rem);
    transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.cookie-lista.je-videt {
    opacity: 1;
    transform: none;
}

.cookie-lista-obsah {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    max-width: 62rem;
    margin: 0 auto;
    padding: 1.1rem 1.4rem;
    border-radius: 1.25rem;
    background-color: #fffbf8;
    border: 2px solid #36364f1f;
    box-shadow: 0 18px 50px #36364f33;
}

.cookie-lista-ikona {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    background-color: var(--color, #36364f);
    color: #fffbf8;
}

.cookie-lista-text {
    flex: 1;
    min-width: 0;
    color: var(--color, #36364f);
}

.cookie-lista-nadpis {
    font-family: var(--header_text, inherit);
    font-size: 1.05rem;
    font-weight: 700;
    margin-bottom: 0.15rem;
}

.cookie-lista-text p {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.5;
    color: #36364fcc;
}

.cookie-lista-text a {
    color: inherit;
    text-decoration: underline;
}

.cookie-lista-tlacitka {
    flex: none;
    display: flex;
    gap: 0.6rem;
}

.cookie-tlacitko {
    padding: 0.7rem 1.4rem;
    border-radius: 999px;
    font-family: var(--header_text, inherit);
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.25s ease, color 0.25s ease, transform 0.25s ease;
}

.cookie-tlacitko-hlavni {
    border: 2px solid var(--color, #36364f);
    background-color: var(--color, #36364f);
    color: #fffbf8;
}

.cookie-tlacitko-vedlejsi {
    border: 2px solid #36364f40;
    background-color: #0000;
    color: var(--color, #36364f);
}

.cookie-tlacitko:hover {
    transform: translateY(-2px);
}

.cookie-tlacitko-hlavni:hover {
    background-color: #4a4a68;
    border-color: #4a4a68;
}

.cookie-tlacitko-vedlejsi:hover {
    border-color: var(--color, #36364f);
    background-color: #36364f0f;
}

@media (max-width: 767px) {
    .cookie-lista {
        left: 0.75rem;
        right: 0.75rem;
        bottom: calc(0.75rem + env(safe-area-inset-bottom));
    }

    .cookie-lista-obsah {
        flex-wrap: wrap;
        gap: 0.85rem;
        padding: 1rem;
    }

    .cookie-lista-ikona {
        width: 2.25rem;
        height: 2.25rem;
    }

    .cookie-lista-text {
        flex: 1 1 12rem;
    }

    .cookie-lista-tlacitka {
        flex: 1 1 100%;
    }

    .cookie-tlacitko {
        flex: 1;
    }
}

/* Kdo má vypnuté animace, dostane všechno rovnou a bez pohybu. */
@media (prefers-reduced-motion: reduce) {
    .w-mod-js [data-anim],
    .w-mod-js [data-anim="vzhuru"],
    .w-mod-js [data-anim="zleva"],
    .w-mod-js [data-anim="zprava"],
    .w-mod-js [data-anim="radek"],
    .w-mod-js [data-anim="karta"] {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .cookie-lista {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .serviceitem,
    .cookie-tlacitko {
        transition: none;
    }

    .serviceitem:hover,
    .cookie-tlacitko:hover {
        transform: none;
    }
}

/* ---------------------------------------------------------------
   13) Zarovnání nadpisů, které měly sedět na sobě (body A a F)

   Odstavce s třídou `p black` mají z Webflow `padding-left: 4rem`.
   V textu vedle fotky to dává smysl, ale u vycentrovaných nadpisů
   to text posune doprava a nesedí pak na nadpis nad ním.
   --------------------------------------------------------------- */

/* Sekce „Moje hodnocení" na úvodní stránce */
.hodnocen-i-con .h1.hhodnoceni,
.hodnocen-i-con .p.black.hodnoceni,
.odhadform-header .odhadonline,
.odhadform-header .p.black {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
    text-align: center;
    justify-content: center;
    align-items: center;
}

/* Formulář odhadu byl nalepený na větu nad sebou. */
.odhadform-header .p.black {
    margin-bottom: 2.5rem;
}

.odhadfrom-con {
    padding-top: 0;
}

@media (max-width: 767px) {
    .odhadform-header .p.black {
        margin-bottom: 1.75rem;
    }
}

/* ---------------------------------------------------------------
   14) Mapa na detailu nemovitosti (bod E)

   Dřív byla vmáčknutá do textového sloupce. Teď leží pod oběma
   sloupci, je vycentrovaná a v rámečku. Barvy nabere až při najetí,
   stejně jako mapa na kontaktu — v klidu neruší od fotek.
   --------------------------------------------------------------- */

.nemovitost-mapa {
    width: 100%;
    max-width: 62rem;
    margin: 4rem auto 0;
    border-radius: 1rem;
}

.nemovitost-mapa-nadpis {
    margin: 0 0 1rem;
    font-family: var(--header_text, inherit);
    font-size: 1.35rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--color, #36364f);
    text-align: center;
}

.nemovitost-mapa-ramecek {
    overflow: hidden;
    border: 2px solid #36364f1f;
    border-radius: 1.5rem;
    box-shadow: 0 10px 30px #36364f14;
    filter: grayscale(1);
    transition: filter 0.5s ease, box-shadow 0.5s ease, border-color 0.5s ease;
}

.nemovitost-mapa-ramecek:hover,
.nemovitost-mapa-ramecek:focus-within {
    filter: grayscale(0);
    border-color: var(--main-green, #6ad1e3);
    box-shadow: 0 14px 40px #36364f2e;
}

.nemovitost-mapa .kontaktmapa {
    width: 100%;
    height: clamp(18rem, 32vw, 26rem);
    border: 0;
    border-radius: 0;
    display: block;
}

.nemovitost-mapa .kontaktmapa iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

@media (max-width: 991px) {
    .nemovitost-mapa {
        margin-top: 3rem;
    }

    /* Bez myši se hover nikdy nespustí — mapa je proto rovnou barevná. */
    .nemovitost-mapa-ramecek {
        filter: none;
    }

    .nemovitost-mapa .kontaktmapa {
        height: 18rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .nemovitost-mapa-ramecek {
        transition: none;
    }
}

/* ---------------------------------------------------------------
   15) Právní stránky — zásady ochrany údajů, podmínky, cookies (bod G)

   Obsah těchto stránek pochází ze starého editoru a je plný pozůstatků:
   prázdné odstavce, řady zalomení řádku, nadpisy použité místo textu,
   ruční velikosti písma. Text nikde neměníme — jen ho dáváme do
   čitelného sloupce a pozůstatky skrýváme.
   --------------------------------------------------------------- */

.pravni-stranka {
    padding: calc(var(--vyska-listy) + 7rem) 1.5rem 5rem;
    background-color: var(--backgound-dark, #f4f4f4);
}

.pravni-obsah {
    max-width: 46rem;
    margin: 0 auto;
    padding: 3rem;
    border-radius: 1.5rem;
    background-color: var(--background-light, #fffbf8);
    border: 2px solid #36364f1f;
    box-shadow: 0 10px 30px #36364f14;
    color: var(--color, #36364f);
    font-family: var(--body, inherit);
    font-size: 1.05rem;
    line-height: 1.75;
    text-align: left;
}

/* Nadpis stránky. Bere se z titulku, protože v obsahu jsou nadpisové
   značky použité i pro běžné věty. */
.pravni-nadpis {
    margin: 0 0 1.75rem;
    font-family: var(--header_text, inherit);
    font-size: 1.8rem;
    line-height: 1.25;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--color, #36364f);
}

/* Všechno v obsahu srovnáme na běžný text — starý editor tam nechal
   nadpisy, kurzívu i ruční velikosti písma použité jako formátování. */
.pravni-obsah h1:not(.pravni-nadpis),
.pravni-obsah h2,
.pravni-obsah h3,
.pravni-obsah h4,
.pravni-obsah h5,
.pravni-obsah h6,
.pravni-obsah p,
.pravni-obsah li,
.pravni-obsah span,
.pravni-obsah em,
.pravni-obsah i {
    font-family: var(--body, inherit) !important;
    font-size: inherit !important;
    line-height: inherit !important;
    font-weight: 400;
    font-style: normal !important;
    text-transform: none !important;
    letter-spacing: normal;
    color: inherit;
    text-align: left !important;
    display: block;
}

.pravni-obsah span,
.pravni-obsah em,
.pravni-obsah i,
.pravni-obsah b,
.pravni-obsah strong,
.pravni-obsah a {
    display: inline;
}

.pravni-obsah p,
.pravni-obsah h1:not(.pravni-nadpis),
.pravni-obsah h2,
.pravni-obsah h3,
.pravni-obsah h4,
.pravni-obsah h5,
.pravni-obsah h6 {
    margin: 0 0 1.1rem;
}

/* Tučný text uvnitř zůstává tučný. */
.pravni-obsah b,
.pravni-obsah strong {
    font-weight: 700;
}

/* Pozůstatky po starém editoru: prázdné odstavce, nezlomitelné mezery
   místo odsazení a hromady zalomení řádku za sebou. */
.pravni-obsah p:empty,
.pravni-obsah h1:empty,
.pravni-obsah h2:empty,
.pravni-obsah h3:empty,
.pravni-obsah .mce-nbsp-wrap,
.pravni-obsah br + br {
    display: none;
}

/* Vodorovné čáry oddělují bloky — necháme je, jen zjemníme. */
.pravni-obsah hr {
    height: 0;
    margin: 2rem 0;
    border: 0;
    border-top: 1px solid #36364f26;
}

.pravni-obsah hr:first-child,
.pravni-obsah hr:last-child {
    display: none;
}

.pravni-obsah a {
    color: var(--color, #36364f);
    text-decoration: underline;
}

.pravni-obsah ul,
.pravni-obsah ol {
    margin: 0 0 1.1rem;
    padding-left: 1.4rem;
}

@media (max-width: 767px) {
    .pravni-stranka {
        padding: calc(var(--vyska-listy) + 6rem) 1rem 3rem;
    }

    .pravni-obsah {
        padding: 1.5rem;
        border-radius: 1.25rem;
        font-size: 1rem;
    }

    .pravni-nadpis {
        font-size: 1.4rem;
    }
}

/* ---------------------------------------------------------------
   16) Tlačítka „Zobrazit další" a tmavá tlačítka obecně (body 4, 5, 6)
   --------------------------------------------------------------- */

/* Tlačítko doléhalo na spodní hranu poslední dlaždice. */
.nemovitostisecbutton {
    margin-top: 3rem;
    margin-bottom: 1rem;
}

/* Tmavá tlačítka postavená z `btn-parent` (Zobrazit další, Online odhad
   v navigaci) neměla žádnou reakci na najetí myší — na rozdíl od
   „Odeslat" v kontaktním formuláři. Sjednoceno.
   `!important` je tu proto, že tlačítko „Zobrazit další" má barvu
   napsanou přímo v atributu style a ta by jinak vyhrála. */
.btn-parent {
    transition: background-color 0.25s ease, transform 0.25s ease;
}

.btn-parent:hover,
.btn-parent:focus-visible {
    background-color: var(--main-green, #6ad1e3) !important;
    transform: translateY(-2px);
}

.button-dark,
.button_cta,
.button-nemovitostt-detail {
    transition: background-color 0.25s ease, color 0.25s ease, transform 0.25s ease;
}

.button-dark:hover,
.button_cta:hover,
.button-nemovitostt-detail:hover {
    transform: translateY(-2px);
}

/* Modrá výplň s bílým rámečkem — při najetí obrátíme role,
   jinak by tlačítko na barevném pozadí zmizelo. */
.button_cta:hover {
    background-color: var(--background-light, #fffbf8);
    color: var(--color, #36364f);
}

@media (prefers-reduced-motion: reduce) {
    .btn-parent,
    .button-dark,
    .button_cta,
    .button-nemovitostt-detail {
        transition: none;
    }

    .btn-parent:hover,
    .button-dark:hover,
    .button_cta:hover,
    .button-nemovitostt-detail:hover {
        transform: none;
    }
}

/* ---------------------------------------------------------------
   17) Detail nemovitosti — nové rozvržení (bod 2)

   Nahoře fotky vlevo a popis vpravo, pod tím na plnou šířku video
   a 3D prohlídka vedle sebe, mapa, formulář a nakonec tlačítko zpět
   na přehled. Všechno pod horní částí je vycentrované.
   --------------------------------------------------------------- */

.nemovitost-adresa {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    width: 100%;
    margin-top: 0.5rem;
    color: #36364fb3;
    font-size: 1rem;
    line-height: 1.4;
}

.nemovitost-adresa svg {
    flex: none;
    color: var(--main-green, #6ad1e3);
}

/* Video a 3D prohlídka */
.nemovitost-media {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2rem;
    width: 100%;
    max-width: 72rem;
    margin: 4rem auto 0;
}

/* Když je vyplněné jen jedno z nich, stojí samo uprostřed. */
.nemovitost-media.je-sama {
    grid-template-columns: minmax(0, 1fr);
    max-width: 44rem;
}

.nemovitost-media-box {
    min-width: 0;
}

.nemovitost-media-nadpis {
    margin: 0 0 1rem;
    font-family: var(--header_text, inherit);
    font-size: 1.35rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--color, #36364f);
    text-align: center;
}

.nemovitost-media-ramecek {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border: 2px solid #36364f1f;
    border-radius: 1.5rem;
    background-color: #e9e7e4;
    box-shadow: 0 10px 30px #36364f14;
}

.nemovitost-media-ramecek iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* 3D náhled sedí ve stejném rámečku jako video vedle. */
.nemovitost-media .prohlidka3d {
    margin-top: 0;
}

.nemovitost-media .prohlidka3d-foto {
    aspect-ratio: 16 / 9;
    border-radius: 1.5rem;
}

/* Mapa je o kus širší než dvojice boxů nad ní. */
.nemovitost-mapa {
    max-width: 72rem;
}

/* Formulář s vizitkou makléře pod mapou, vycentrovaný. */
.nemovitost-detail .makler-karta {
    max-width: 44rem;
    margin: 4rem auto 0;
}

.button-group-nemovitost {
    display: flex;
    justify-content: center;
    margin-top: 3rem;
    padding-bottom: 1rem;
}

@media (max-width: 991px) {
    .nemovitost-media {
        grid-template-columns: minmax(0, 1fr);
        gap: 2.5rem;
        margin-top: 3rem;
    }

    .nemovitost-detail .makler-karta {
        margin-top: 3rem;
    }
}

/* ---------------------------------------------------------------
   18) Kontakt — formulář přestal přetékat do sekce s mapou (bod 6)

   Sekce s formulářem měla z Webflow `max-height: 100vh`. Formulář je
   ale vyšší, takže při běžném přiblížení přetekl přes okraj sekce
   a lehl si na mapu. Sekce teď roste podle obsahu — o odsazení
   následující sekce se pak nemusí hádat s výškou okna.
   --------------------------------------------------------------- */

.section_contact9.color-scheme-1 {
    max-height: none;
    padding-bottom: 6rem;
}


/* ---------------------------------------------------------------
   19) Zkrácená vizitka makléře na detailu nemovitosti (bod 3)

   Stejný tmavý pruh jako hlavička formuláře dole, jen nižší. Leží
   mezi klíčovými údaji a cenou a drží stejnou šířku jako ony —
   i když klient žádné údaje nevyplní.
   --------------------------------------------------------------- */

.makler-pruh {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    width: 100%;
    margin: 0.75rem 0 0.25rem;
    padding: 0.6rem 0.9rem;
    border-radius: 12px;
    background-color: var(--color, #36364f);
    color: #fffbf8;
    text-decoration: none;
    transition: background-color 0.25s ease, transform 0.25s ease;
}

.makler-pruh:hover,
.makler-pruh:focus-visible {
    background-color: #4a4a68;
    transform: translateY(-2px);
}

.makler-pruh-foto {
    flex: none;
    width: 2.9rem;
    height: 2.9rem;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #fffbf84d;
}

.makler-pruh-udaje {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
    flex: 1 1 auto;
}

.makler-pruh-jmeno {
    font-family: var(--header_text, inherit);
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.2;
}

.makler-pruh-kontakty {
    display: flex;
    flex-wrap: wrap;
    gap: 0.15rem 0.75rem;
    font-size: 0.8rem;
    opacity: 0.75;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

/* Pravá část pruhu — má být vidět, že se na ni dá kliknout. */
.makler-pruh-vyzva {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.55rem 0.9rem;
    border-radius: 999px;
    background-color: var(--main-green, #6ad1e3);
    color: var(--color, #36364f);
    font-family: var(--header_text, inherit);
    font-size: 1.05rem;
    font-weight: 700;
    /* Bez tohohle má text kolem sebe vysoký řádek a šipka vedle něj
       pak vypadá posunutá, i když je na střed. */
    line-height: 1;
    white-space: nowrap;
    transition: transform 0.25s ease;
}

.makler-pruh-vyzva svg {
    flex: none;
    display: block;
}

.makler-pruh:hover .makler-pruh-vyzva {
    transform: scale(1.04);
}

.makler-pruh-vyzva svg {
    transition: transform 0.25s ease;
}

.makler-pruh:hover .makler-pruh-vyzva svg {
    transform: translateY(2px);
}

/* Skok na formulář má být plynulý a nesmí schovat jeho hlavičku
   pod přilepenou navigací. */
html {
    scroll-behavior: smooth;
}

.makler-karta {
    scroll-margin-top: calc(var(--vyska-listy) + 7rem);
}

/* Na mobilu: kolečko s fotkou vlevo, vedle něj telefon a pod ním e-mail,
   a teprve pod tím tlačítko přes celou šířku. Jméno se sem nevejde —
   je vidět v hlavičce formuláře dole na stránce. */
@media (max-width: 767px) {
    .makler-pruh {
        flex-wrap: wrap;
        gap: 0.6rem 0.85rem;
    }

    .makler-pruh-jmeno {
        display: none;
    }

    .makler-pruh-kontakty {
        flex-direction: column;
        gap: 0.2rem;
        font-size: 0.85rem;
        opacity: 0.9;
    }

    .makler-pruh-vyzva {
        flex: 1 1 100%;
        justify-content: center;
        font-size: 1rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    .makler-pruh,
    .makler-pruh-vyzva,
    .makler-pruh-vyzva svg {
        transition: none;
    }

    .makler-pruh:hover,
    .makler-pruh:hover .makler-pruh-vyzva {
        transform: none;
    }
}

/* ---------------------------------------------------------------
   20) Kontakt na mobilu (body 5 a 6)
   --------------------------------------------------------------- */

@media (max-width: 991px) {
    /* Fotka na pozadí: při „cover" se na úzkém displeji tak přiblížila,
       že z klienta zbyl kus trupu. Necháme ji ve dvojnásobku šířky okna
       a přichytíme vlevo nahoru — tím je vidět celá postava i podpis.
       Zbytek plochy vyplní černá, která navazuje na tmavou část fotky. */
    .hero-kentakt {
        background-color: #060606;
        background-size: 200% auto;
        /* Posun dolů, ať klientovi obličej nezakrývá plovoucí navigace. */
        background-position: left 3.5rem;
        background-repeat: no-repeat;
    }

    .kontaktform {
        text-align: center;
    }

    .kontaktform .kontaktformheading {
        text-align: center;
        line-height: 1.25;
    }

    /* Souvětí pod nadpisem mělo z editoru natvrdo 18 bodů — na mobilu
       zabralo půl obrazovky. `!important` proto, že velikost je zapsaná
       přímo v atributu style. */
    .kontaktform .p.white.kontakt,
    .kontaktform .p.white.kontakt span {
        font-size: 1rem !important;
        line-height: 1.5;
        text-align: center;
        margin-left: 0;
        margin-right: 0;
        padding-left: 0;
        padding-right: 0;
    }

    /* Souhlas: zaškrtávátko na jedné lince s textem, ne nad ním. */
    .contact9_form .form_checkbox {
        display: flex;
        align-items: center;
        gap: 0.6rem;
        text-align: left;
    }

    .contact9_form .form_checkbox-icon {
        flex: none;
        margin: 0;
    }

    .contact9_form .form_checkbox-label {
        margin: 0;
        font-size: 0.85rem;
        line-height: 1.35;
    }

    /* Tlačítko Odeslat doprostřed. */
    .contact9_form .margin-bottom {
        display: flex;
        justify-content: center;
    }

    .contact9_form .button-dark {
        margin-left: auto;
        margin-right: auto;
    }

    /* Kontaktní údaje dole pod sebou a na střed. */
    .kontaktlist {
        text-align: center;
    }

    .kontakt-type {
        align-items: center;
    }

    .kontakt-con {
        justify-content: center;
    }

    .kontakt-type .text-style-link {
        text-align: center;
    }
}

/* ---------------------------------------------------------------
   21) Kontakt na počítači — fotka v pozadí už se nepřibližuje
   --------------------------------------------------------------- */

/* Fotka je 1920 × 1080, sekce s formulářem je ale o půl obrazovky vyšší
   než širší. Původní „cover" ji proto musel roztáhnout na výšku sekce
   (na Full HD na 130 %) a pravou třetinu snímku zahodit. Klient tím byl
   nepřirozeně velký a jeho podpis odplul doprostřed levé strany.

   Fotku proto vztahujeme k oknu prohlížeče, ne k výšce sekce
   (`background-attachment: fixed`). Na Full HD tím vyjde přesně ve svém
   rozlišení 1:1:
     * podpis začíná 38 px = 1 cm od levého okraje obrazovky,
     * klient je vidět celý a v přirozené velikosti,
     * fotka se nezvětšuje nad svoje rozlišení, takže je ostrá,
     * není vidět, kde snímek končí — vyplní celé okno a formulář
       přes něj projede.

   Mobilní pravidlo (bod 20) zůstává zvlášť: `fixed` se na telefonech
   chová nespolehlivě, tam se fotka přichytává obyčejně. */
@media (min-width: 992px) {
    .hero-kentakt {
        background-image: url('../images/JaroslavFiserKontakt.jpg');
        background-attachment: fixed;
        background-position: left top;
        background-repeat: no-repeat;
        background-size: cover;
        background-color: #060606;
    }
}

/* ---------------------------------------------------------------
   22) Fotka na úvodní stránce — poměr stran po doplnění rozměrů
   --------------------------------------------------------------- */

/* Do značky <img> jsme doplnili `width` a `height`, aby prohlížeč znal
   poměr stran ještě před stažením fotky a stránka pod ní neposkakovala.
   HTML ale tyhle atributy překládá i na CSS výšku, a protože šířku dává
   šablona v procentech, fotka se pak vytáhla na 1890 px a rozhodila
   celou hlavičku. `height: auto` ji vrátí zpátky k poměru stran. */
.jaroslavfiser {
    height: auto;
}

/* ---------------------------------------------------------------
   23) Detail nemovitosti — dlouhý text v obsahu nerozhodí rozvržení
   --------------------------------------------------------------- */

/* Dvousloupcové rozvržení detailu mělo v původních stylech šířku sloupců
   zapsanou jako `minmax(min-content, 1.5fr)`. Slovo „min-content" znamená
   „sloupec nesmí být užší než nejdelší nezlomitelný kus textu v něm".
   Stačilo tedy, aby klient napsal do odpovědi v FAQ dlouhé slovo bez mezer
   (třeba omylem přidržený prst na klávesnici) a sloupec s textem si řekl
   o pět tisíc pixelů: fotka vedle něj se zmáčkla na pár pixelů, boxíky
   s údaji se roztáhly a celá stránka se dala posouvat do strany.

   Sloupce proto mají minimum nulové — víc než polovinu místa si nevezmou,
   ať je v nich cokoli. A dlouhé slovo se radši zlomí (pravidla níž), než
   aby přetékalo. Platí jen pro počítač; na mobilu je rozvržení jednosloupcové
   a řeší si ho původní styly samy. */
@media (min-width: 992px) {
    .nemovitost-detail-grid {
        grid-template-columns: minmax(0, 1.5fr) minmax(0, 1.5fr);
    }
}

/* Dlouhý text bez mezer se zlomí i uprostřed slova. Radši nehezké zlomení
   než text, který leze mimo stránku. */
.nemovitost-popislong p,
.nemovitost-faq .question-text,
.nemovitost-faq .paragraph-3,
.nemovitost-adresa,
.nemovitost-nazev {
    overflow-wrap: anywhere;
}

/* ---------------------------------------------------------------
   24) Otázky a odpovědi na detailu nemovitosti — rozbalování
   --------------------------------------------------------------- */

/* Otázka je teď opravdové <button>, ať jde ovládat i klávesnicí. Tlačítko
   si ale prohlížeč kreslí po svém, takže mu vracíme vzhled řádku z původních
   stylů: přes celou šířku, text zleva, bez rámečku a bez šedého podkladu.
   Horní linku mezi otázkami necháváme, ta k rozvržení patří. */
.nemovitost-faq-question {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    margin: 0;
    border: 0;
    border-top: 1px solid #050a0b26;
    background: none;
    font: inherit;
    color: inherit;
    text-align: left;
}

.nemovitost-faq-question:focus-visible {
    outline: 2px solid var(--main-green, #6ad1e3);
    outline-offset: 2px;
}

/* Odpověď je zavřená na nulové výšce a při rozbalení dostane výšku textu.
   Konkrétní hodnotu dopočítá skript (na „auto" se přechod animovat nedá)
   a po dojetí přechodu ji přepne na „auto", aby se odpověď umě přizpůsobila,
   když se okno zúží. Kdyby skript nedojel, odpověď zůstane zavřená — proto
   je v šabloně `aria-expanded`, aby to poznala i čtečka. */
.nemovitost-faq .product-header5_details {
    height: 0;
    overflow: hidden;
    transition: height 0.3s ease;
}

/* Odsazení řešíme uvnitř odpovědi, ne odstupem zvenčí: vnější odstup se
   do zavřené výšky nepočítá, takže by mezi zavřenými otázkami zůstávala
   mezera, která tam nepatří. */
.nemovitost-faq .product-header5_details > * {
    margin: 0;
    padding-bottom: 1rem;
}

/* Znaménko „+" se po rozbalení otočí na „×" — jinak není poznat,
   že je otázka otevřená. */
.nemovitost-faq .product-header5_accordion-icon {
    flex: 0 0 auto;
    transition: transform 0.3s ease;
}

.nemovitost-faq.je-otevrena .product-header5_accordion-icon {
    transform: rotate(45deg);
}

@media (prefers-reduced-motion: reduce) {
    .nemovitost-faq .product-header5_details,
    .nemovitost-faq .product-header5_accordion-icon {
        transition: none;
    }
}


/* ---------------------------------------------------------------
   25) Zaškrtnutý souhlas ve formulářích musí být vidět
   --------------------------------------------------------------- */

/* Webflow kreslí zaškrtávátko jako obyčejný <div> a skutečný <input> úplně
   schovává. Obarvit ten div měl jeho vlastní skript — jenže na naše
   formuláře se nenavázal, takže po kliknutí se vizuálně nestalo nic.
   Klient pak hlásil, že souhlas nejde zaškrtnout, přitom zaškrtnutý byl
   (proto se dotaz odeslal). Řešíme to čistě v CSS, bez skriptu.

   Kvůli tomu je v šablonách <input> napsaný PŘED tím <div>em: potřebujeme
   sousedský selektor, který v CSS míří jen dopředu. Na vzhled to nemá vliv,
   protože input je stejně odsunutý mimo. */
.form_checkbox input[type="checkbox"]:checked + .form_checkbox-icon {
    background-color: #050a0b;
    border-color: #050a0b;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 13l4 4L19 7' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 50%;
    background-size: 0.75rem;
}

/* Obtažení při ovládání klávesnicí — jinak člověk nepozná, kde stojí. */
.form_checkbox input[type="checkbox"]:focus-visible + .form_checkbox-icon {
    outline: 2px solid var(--main-green, #6ad1e3);
    outline-offset: 2px;
}