:root {
        --hlavni-barva: #fbfbf9;
        --tmava-barva: #2c2a2a;
        --svetla-barva: ;
        --text-barva: #b80c0c;
}

body {
    font-family: 'Montserrat', sans-serif;
    margin: 0;
    padding: 0;
    overflow-x: hidden; /* Zabrání nechtěnému vodorovnému skrolování */
}



/* --- Vyladěné Menu a Logo --- */
.hlavni-menu {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    max-width: 1200px;
    margin: 0 auto;
    background-color: var(--hlavni-barva);
}




.logo {
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--text-barva);
    text-decoration: none; /* Logo je teď odkaz, tak ať není podtržené */
    /* Zarovnání odkazu s logem */
    display: flex;
    align-items: center;
    /* tvoje předchozí vlastnosti pro text tu klidně můžou zůstat */
    margin-left: 0;
}
/* Nastavení samotného obrázku loga */
.logo img {
    height: 100px; /* Tady si upravíš výšku loga, aby hezky sedělo do menu */
    width: auto;  /* Zaručí, že se logo nedeformuje a zachová si poměr stran */
}
    

.odkazy {
    list-style: none;
    display: flex;
    gap: 30px;
    margin: 0;
    padding: 0;
    align-items: center; /* Aby bylo tlačítko rezervace zarovnané s textem */
}

/* Tady patří ty vlastnosti pro samotné textové odkazy */
.odkazy a {
    text-decoration: none;               /* Zruší podtržení */
    color: var(--text-barva);            /* Nastaví tvoji barvu textu */
    font-weight: 500;
    transition: color 0.3s ease;         
}

.odkazy a:hover {
    color: var(--tmava-barva);          /* Přebarvení při najetí myší */
}
/* Tlačítko hamburgeru schováme na počítači */
.menu-toggle {
    display: none;
    font-size: 2rem;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--tmava-barva);
}

/* --- MAGIE PRO MOBILY (Když je obrazovka užší než 768 pixelů) --- */
@media (max-width: 1024px) {
    .menu-toggle {
        display: block; /* Na mobilu hamburger ukážeme */
    }

    .odkazy {
        display: none; /* Normálně ty odkazy na mobilu schováme */
        flex-direction: column; /* Dáme je pod sebe */
        position: absolute;
        top: 100%; /* Rozbalené menu začíná pod skutečnou výškou hlavičky. */
        left: 0;
        width: 100%;
        background-color: var(--hlavni-barva);
        box-shadow: 0 4px 6px rgba(0,0,0,0.1);
        padding: 20px 0;
        gap: 20px;
    }

    .odkazy.aktivni {
        display: flex; /* Tahle třída se přidá přes Javascript a menu vyjede */
    }

    .odkazy li {
        text-align: center; /* V mobilním menu chceme texty uprostřed */
    }
}

/* --- Úvodní Slider --- */
.sekce-slider {
    margin-top: 0;
    position: relative;
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.slider-kontejner {
    position: relative;
    width: 100%;
    max-width: 2000px; /* Omezení, aby se slider roztáhnul jen do šířky fotek */
    aspect-ratio: 1920 / 900; /* Plocha slideru odpovídá poměru všech tří obrázků. */
    height: auto;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Vnitřní plocha pro samotné obrázky */
.slider-obrazky {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 0;
    overflow: hidden;
}

.slide {
    position: absolute;
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%;
    opacity: 0;
    transition: opacity 0.8s ease-in-out;
    display: flex;
    align-items: center;
    justify-content: center;
    background-size: cover; /* Vyplní celou kartu i u bočních slajdů. */
    background-position: center;
    background-repeat: no-repeat;
}

/* Přiřazení fotek k jednotlivým slajdům */
.slide-1 {
    background-image: url('Uvodni_slider/pozition8.png'); 
    object-position: 50% 0%;
}

.slide-2 {
    background-image: url('Uvodni_slider/pozition7.png'); 
}

.slide-3 {
    background-image: url('Uvodni_slider/pozition4.png'); 
}

.slide-4 {
    background-image: url('Uvodni_slider/pozition5.png'); 
}

/*.slide-5 {
    background-image: url('Uvodni_slider/pozition4.png'); 
}*/

.slide.aktivni {
    opacity: 1; 
    z-index: 1;
}


/* --- Ovládání Slideru --- */
.slider-sipka {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 55px;
    height: 55px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    font-size: 1.8rem;
    cursor: pointer;
    z-index: 10;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(2px);
    color: var(--tmava-barva);
    transition: background 0.3s, color 0.3s;
}

/* Šipka na hover zůstává bílá */
.slider-sipka:hover { 
    background: white;
}

/* Nové správné nastavení: */
.predchozi { 
    left: 30px; 
}

.dalsi { 
    right: 30px; 
}

.slider-tecky {
    position: absolute;
    bottom: clamp(10px, 2.5vw, 25px);
    width: 100%;
    text-align: center;
    z-index: 10;
}

.tecka {
    cursor: pointer;
    height: 14px;
    width: 14px;
    margin: 0 5px;
    background-color: rgba(255, 255, 255, 0.6);
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.3s;
    border: 2px solid var(--tmava-barva);
}

.tecka.aktivni, .tecka:hover {
    background-color: var(--hlavni-barva);
}


/* Úprava pro mobily */
@media (max-width: 1024px) {
    .slide h1 { font-size: 2rem; }
    .slide-obsah { margin: 0 20px; padding: 25px; }
    .slider-sipka {
        width: 44px;
        height: 44px;
        font-size: 1.4rem;
    }
    .predchozi { left: 10px; }
    .dalsi { right: 10px; }
}
/* Přilepení hlavičky navrch stránky */
header {
    position: sticky; /* Hlavička drží nahoře a zároveň rezervuje místo nad sliderem. */
    top: 0; /* Přilepí se úplně nahoru (0 pixelů od okraje) */
    left: 0;
    width: 100%; /* Aby menu bylo roztažené přes celou šířku */
    background-color: var(--hlavni-barva); /* Menu musí mít plnou barvu, jinak by prosvítal text pod ním */
    box-shadow: 0 2px 10px rgba(0,0,0,0.1); /* Jemný stín, který menu oddělí od zbytku webu */
    z-index: 1000; /* Zaručí, že menu bude ležet VŽDY nad vším ostatním (nad sliderem, nad fotkami) */
}


/* --- Nový vzhled služeb: Řádky s fotkou vlevo a cenou vpravo --- */
.sekce-sluzby {
    background-color: var(--hlavni-barva);
    padding: 100px 20px;
    text-align: center;
    scroll-margin-top: 80px; /* Výška tvého menu + malá rezerva navíc */
}

.sekce-sluzby  h1 {
    color: var(--text-barva);
}

.sekce-sluzby p {
    color:var(--text-barva);
}

.kategorie-sluzeb {
    max-width: 1100px;
    margin: 40px auto 0;
    text-align: left;
}

.kategorie-sluzeb > h3 {
    font:biro script plans ;
    font-size: 1.8rem;
    color: var(--text-barva);
    border-bottom: 2px solid var(--text-barva);
    padding-bottom: 10px;
    margin-bottom: 25px;
}

.seznam-sluzeb {
    display: flex;
    flex-direction: column;
    gap: 20px; /* Mezeru mezi jednotlivými službami pod sebou */
}

/* Jedna řádková položka */
.polozka-sluzba {
    display: flex;
    align-items: center; /* Zarovná věci na střed na výšku */
    background-color: var(--hlavni-barva);
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.7);
    gap: 20px; /* Mezera mezi fotkou, textem a cenou */
    transition: transform 0.4s ease, background-color 0.4s ease;
    width: 90%;          /* Uděláme je o malinko užší, aby měly prostor pro posun */
    margin: 0 auto;      /* Drží je pohromadě na středu */
    
}

/* 2. Liché položky (1, 3, 5) pošleme mírně DOLEVA */
.seznam-sluzeb .polozka-sluzba:nth-child(odd) {
    transform: translateX(-20px);
}
/*#ff6969 */
/* 4. HOVER pro liché položky (zůstane posunutí doleva + přidáme zvednutí nahoru) */
.seznam-sluzeb .polozka-sluzba:nth-child(odd):hover {
    transform: translateX(0px) translateY(0px);
    background-color: #fae5c8;
}

/* 3. Sudé položky (2, 4, 6) pošleme mírně DOPRAVA */
.seznam-sluzeb .polozka-sluzba:nth-child(even) {
    transform: translateX(20px);
}

/* 5. HOVER pro sudé položky (zůstane posunutí doprava + přidáme zvednutí nahoru) */
.seznam-sluzeb .polozka-sluzba:nth-child(even):hover {
    transform: translateX(0px) translateY(0px);
    background-color: #fae5c8;
    color:var(--hlavni-barva);
}

.polozka-sluzba:hover {
    transform: translateY(0px); /* Jemné nadzvednutí při přejetí myší */
    background-color: aquamarine; /* Změna pozadí (můžeš si sem dát jakoukoliv svou barvu, např. var(--hlavni-barva) s nějakou průhledností) */
    
} 


/* Malá fotka vlevo */
.sluzba-foto {
    width: 180px;
    height: 180px;
    object-fit: cover; /* Zaručí, že se fotka neroztáhne, ale hezky se ořízne */
    border-radius: 8px;
    flex-shrink: 0; /* Zabrání zmenšování fotky, kdyby byl text dlouhý */
}



/* Prostřední část s názvem a popisem */
.sluzba-obsah {
    flex-grow: 1; /* Zabere veškerý volný prostor uprostřed */
}

.sluzba-obsah h4 {
    color: var(--tmava-barva);
    margin: 0 0 5px 0;
    font-size: 1.2rem;
    transition: color 0.4 ease;
}

.sluzba-obsah p {
    color: var(--tmava-barva);
    font-size: 0.9rem;
    margin: 0;
    line-height: 1.5;
}

/* Cena vprava */
.sluzba-cena {
    font-size: 1rem;
    font-weight: bold;
    color: var(--tmava-barva);
    white-space: nowrap; /* Zabrání tomu, aby se cena (např. 950 Kč) rozbila na dva řádky */
    padding-left: 15px;
}

/* --- Sekce Kontakt --- */
.sekce-kontakt {
    background-color: var(--text-barva); /* Tvoje tmavá/výrazná barva jako pozadí */
    color: var(--hlavni-barva); /* Bíci text pro dobrou čitelnost na tmavém pozadí */
    padding: 110px 20px 0px 20px;
    scroll-margin-top: 80px;
}

.kontakt-obsah-wrapper {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    text-align: center;
}

.sekce-kontakt h3 {
    font-size: 2.2rem;
    margin-bottom: 5px;
    color: var(--hlavni-barva);
}

.kontakt-perex {
    font-size: 1.1rem;
    margin-top: 0;
    margin-bottom: 50px;
    opacity: 0.9;
    color:var(--hlavni-barva);
}

/* Mřížka pro kontakty */
.kontakt-grid {
    display: grid;
    /* Vlevo fotka (pevnější šířka), vpravo zbytek */
    grid-template-columns: 420px 1fr; 
    grid-template-rows: auto auto;
    gap: 40px;
    align-items: start;
    margin-bottom: 60px;
    text-align: left;
}

/* 1. Fotka vlevo - zabere oba řádky na výšku */
.kontakt-karta.foto-karta {
    grid-row: span 2;
    padding: 0;
    border: none;
    background: transparent;
}

.vchod-foto {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 15px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.7);
}

/* 2. Horní pravá karta: Kontakty & Otevírací doba */
.kontakt-karta.info-karta {
    background: transparent; /* Bez rámečku, čistý vzhled jako v Canvě */
    border: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

/* Nadpisy v kartách */
.kontakt-karta h3 {
    font-size: 1.4rem;
    margin-top: 0;
    margin-bottom: 12px;
    color: var(--hlavni-barva);
}

.kontakt-karta p {
    margin: 6px 0;
    font-size: 1rem;
    color: var(--hlavni-barva);
}

.kontakt-karta a {
    color: var(--hlavni-barva);
    text-decoration: underline;
}

/* Sociální sítě */
.kontakt-socialni-radek {
    margin: 15px 0;
}

.kontakt-socialni-radek p {
    margin: 6px 0;
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--hlavni-barva);
}

.kontakt-ikonka {
    font-size: 1.1rem;
    color: var(--hlavni-barva);
    width: 20px;
    text-align: center;
}

/* Tlačítko rezervace uprostřed pravého sloupce (nebo pod kontakty) */
.spodni-rezervace-box {
    width: 100%;
    text-align: left; /* Tlačítko bude hezky na středu bloku */
    padding-left: 200px;
    margin-top: 60px;
    margin-bottom: 0px;
}

.tlacitko-rezervace {
    display: inline-block;
    background-color: transparent;
    color: var(--hlavni-barva);
    border: 1px solid var(--hlavni-barva); /* Elegantní tenký rámček jako v Canvě */
    padding: 10px 30px;
    border-radius: 30px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.7);
    text-decoration: none;
    font-weight: 500;
    font-size: 1.1rem;
    transition: all 0.3s ease;
}

.tlacitko-rezervace:hover {
    background-color: var(--hlavni-barva);
    color: var(--text-barva); /* Po najetí se prohodí barvy */
}

/* 3. Dolní pravá karta: Adresa a mapa */
.kontakt-karta.mapa-karta {
    background: transparent;
    border: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    text-align: left;
    margin-top: 0px;
}

.adresa-text {
    margin-bottom: 30px;
}

.adresa-text h3 {
    font-size: 1.2rem;
    margin-bottom: 4px;
}

.adresa-text p {
    margin: 0;
    font-size: 0.95rem;
}

.mapa-wrapper {
    width: 100%;
    height: 250px;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.7);
}
/* Obal pro dva sloupce v horní pravé kartě */
.info-dva-sloupce {
    display: flex;
    justify-content: flex-start;
    width: 100%;
    gap: 100px;
    margin-bottom: 0px;
}

.info-sloupec-levy, .info-sloupec-pravy {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* --- Spodní Zápatí s logy partnerů --- */
.spodni-zapati {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding: 40px 20px 20px 20px;
    text-align: center;
    margin-top: 40px;
}

.partneri-nadpis {
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 25px;
    opacity: 0.8;
}

.partneri-loga {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 40px;
    flex-wrap: wrap;
    margin-bottom: 30px;
}

.partneri-loga img {
    height: 40px; /* Jednotná výška pro loga partnerů, šířka se dopočítá */
    filter: brightness(0) invert(1); /* Převede loga do bílé barvy, aby ladila s tmavým pozadím */
    opacity: 0.85;
    transition: opacity 0.3s;
}

.partneri-loga img:hover {
    opacity: 1;
}

.copyright {
    font-size: 0.85rem;
    opacity: 0.6;
    margin-top: 20px;
    color:var(--hlavni-barva);
}

/* Responzivita pro mobily */
@media (max-width: 900px) {
    .kontakt-grid {
        grid-template-columns: 1fr; /* Na mobilu se karty naskládají pod sebe */
    }
}

.sekce-o-mne {
    padding: 100px 20px;
    scroll-margin-top: 80px;
    background-color: var(--text-barva);
    color: var(--hlavni-barva);
}

.o-mne-grid {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 50px; /* Mezeru mezi fotkou a textem si můžeš upravit */
}

.o-mne-foto {
    flex: 1;
}

.o-mne-foto img {
    width: 70%;
    height: auto;
    border-radius: 15px;
    object-fit: cover;
    border-radius: 70px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.7);
}

.o-mne-obsah {
    flex: 1;
    text-align: left;
}

.sekce-o-mne h2, .sekce-o-mne p {
    color: var(--hlavni-barva);
}



/* Obsah se na úzkých obrazovkách vejde bez vodorovného posouvání. */
@media (max-width: 900px) {
    .kontakt-grid { grid-template-columns: minmax(0, 1fr); }
    .kontakt-karta { min-width: 0; overflow-wrap: anywhere; }
    .info-dva-sloupce { flex-direction: column; gap: 20px; }
    .spodni-rezervace-box { padding-left: 0; box-sizing: border-box; }
    .tlacitko-rezervace { max-width: 100%; box-sizing: border-box; }
    .partneri-loga img { max-width: 100%; object-fit: contain; }

    .polozka-sluzba {
        box-sizing: border-box;
        width: 100%;
        flex-direction: column;
        align-items: flex-start;
    }
    .seznam-sluzeb .polozka-sluzba:nth-child(n) { transform: none; }
    .sluzba-obsah { min-width: 0; overflow-wrap: anywhere; }
    .sluzba-foto { max-width: 100%; }
    .sluzba-cena { padding-left: 0; }
}
@media (max-width: 1024px) {
    .logo { margin-left: 0; min-width: 0; }
    .logo img { width: min(240px, 65vw); height: auto; }
    .menu-toggle { flex-shrink: 0; }
}
/* Staleks má v souboru velké průhledné okraje nad a pod nápisem. */
.partneri-loga img.logo-staleks {
    height: 200px;
    margin-block: -80px;
}
/* Shodné proporce hlavičky a slideru na desktopových monitorech. */
@media (min-width: 1025px) {
    .hlavni-menu,
    .slider-kontejner {
        width: 80%;
        max-width: 2000px;
        box-sizing: border-box;
    }
    .hlavni-menu { padding: 15px 0; gap: 20px; }
    .logo img { height: clamp(60px, 4vw, 100px); width: auto; }
    .odkazy { gap: clamp(16px, 1.5vw, 30px); }
    .odkazy a { white-space: nowrap; }
}
/* Kontakty se vejdou i do menších desktopových oken. */
.kontakt-grid { grid-template-columns: minmax(0, 420px) minmax(0, 1fr); }
.kontakt-karta { min-width: 0; overflow-wrap: anywhere; }
.info-dva-sloupce { flex-wrap: wrap; gap: clamp(20px, 4vw, 100px); }
.spodni-rezervace-box { box-sizing: border-box; padding-left: 0; text-align: center; }
@media (max-width: 900px) {
    .kontakt-grid { grid-template-columns: minmax(0, 1fr); }
}
/* Výraznější nadpis sekce O mně s jemným posunem. */
.sekce-o-mne h2 {
    font-size: clamp(1.7rem, 2.1vw, 2.35rem);
    line-height: 1.2;
    transform: translate(-30px, -33px);
}
@media (max-width: 1024px) {
    .sekce-o-mne h2 { transform: translate(-12px, -21px); }
}
/* Fotka a celý medailonek mají na desktopu společnou výšku. */
.o-mne-grid {
    max-width: 1600px;
    display: grid;
    grid-template-columns: minmax(0, 0.36fr) minmax(0, 0.64fr);
    align-items: stretch;
    gap: clamp(30px, 4vw, 70px);
}
.o-mne-foto {
    position: relative;
    aspect-ratio: 924 / 1442;
    min-width: 0;
}
.o-mne-foto img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.o-mne-obsah { min-width: 0; align-self: center; }
.o-mne-obsah p {
    font-size: 1rem;
    line-height: 1.45;
    margin: 0 0 0.85em;
}
.o-mne-obsah p:last-child { margin-bottom: 0; }
@media (max-width: 1024px) {
    .o-mne-grid { grid-template-columns: minmax(0, 1fr); gap: 55px; }
    .o-mne-foto { width: min(100%, 420px); justify-self: center; }
    .o-mne-obsah { width: 100%; }
}
/* Desktop: kompaktní medailonek bez roztahování odstavců podle výšky fotky. */
@media (min-width: 1025px) {
    .o-mne-grid {
        max-width: 1200px;
        grid-template-columns: 330px minmax(0, 1fr);
        align-items: start;
        gap: 48px;
    }
    .o-mne-foto { width: 330px; }
    .o-mne-obsah {
        position: relative;
        box-sizing: border-box;
        min-height: calc(330px * 1442 / 924);
        padding-block: 64px;
        height: auto;
        align-self: start;
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 20px;
    }
    .sekce-o-mne h2 {
        position: absolute;
        top: 0;
        left: 0;
        transform: none;
        margin: 0;
    }
    .o-mne-obsah p {
        font-size: clamp(0.75rem, calc(1vw + 2px), 1rem);
        max-width: 90%;
        word-spacing: 0.06em;
        line-height: 1.45;
        margin: 0;
    }
}
.rezervacni-pruh {
    background-color: var(--text-barva);
    padding: calc(clamp(28px, 4vw, 50px) * 2 + 0.66rem + 11px) 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.rezervacni-pruh .tlacitko-rezervace {
    box-sizing: border-box;
    max-width: 100%;
    text-align: center;
}
.rezervacni-pruh .tlacitko-rezervace:focus-visible {
    outline: 3px solid var(--hlavni-barva);
    outline-offset: 5px;
}
.rezervacni-pruh .tlacitko-rezervace {
    font-size: clamp(1.25rem, 1.7vw, 1.6rem);
    padding: 14px clamp(26px, 3.5vw, 48px);
    border-radius: 40px;
}
/* Kompaktnější pruh se stejnou velikostí tlačítka. */
.rezervacni-pruh {
    --velikost-tlacitka: clamp(1.1rem, 1.5vw, 1.35rem);
    padding-block: clamp(24px, 3vw, 40px);
}
.rezervacni-pruh .tlacitko-rezervace {
    font-size: var(--velikost-tlacitka);
    line-height: 1.2;
}
/* Sousední snímky vykukují po stranách; hlavní snímek drží původní rozměry. */
@media (min-width: 1025px) {
    .slider-obrazky { overflow: visible; isolation: isolate; }
    .slide {
        opacity: 0;
        transform: translateX(0) scale(1);
        transition: transform 0.65s ease, opacity 0.65s ease;
        pointer-events: none;
    }
    .slide.slide-predchozi {
        opacity: 0.9;
        transform: translateX(-72%) perspective(1400px) rotateY(28deg) scale(0.88);
        z-index: 0;
    }
    .slide.slide-dalsi {
        opacity: 0.9;
        transform: translateX(72%) perspective(1400px) rotateY(-28deg) scale(0.88);
        z-index: 0;
    }
    .slide.aktivni {
        opacity: 1;
        transform: translateX(0) scale(1);
        z-index: 2;
    }
}
@media (prefers-reduced-motion: reduce) {
    .slide { transition: none; }
}
/* Prostor a stíny zvýrazňují karty zasunuté za hlavním snímkem. */
@media (min-width: 1025px) {
    .sekce-slider { padding-block: 26px; }
    .slide {
        backface-visibility: hidden;
        box-shadow: 0 20px 38px rgba(44, 42, 42, 0.25);
    }
    .slide.aktivni { box-shadow: 0 16px 32px rgba(44, 42, 42, 0.3); }
}
/* Jemné rohy hlavního snímku i bočních karet. */
.slide { border-radius: clamp(10px, 1.2vw, 20px); }
@media (max-width: 1024px) {
    .slider-obrazky { border-radius: clamp(10px, 1.2vw, 20px); }
}
/* Tři téměř celé karty vedle sebe, prostřední vystupuje dopředu. */
.sekce-slider {
    padding-block: clamp(48px, 7vw, 110px);
    padding-top: calc(clamp(48px, 7vw, 110px) + 24px);
}
.slider-kontejner {
    width: 34%;
    max-width: 820px;
}
.slider-obrazky { overflow: visible; isolation: isolate; }
.slide {
    opacity: 0;
    transform: translateX(0) scale(1);
    transition: transform 0.7s ease, opacity 0.7s ease;
    pointer-events: none;
    backface-visibility: hidden;
    box-shadow: 0 22px 38px rgba(44, 42, 42, 0.24);
}
.slide.slide-predchozi {
    opacity: 0.88;
    transform-origin: right center;
    transform: translateX(-48%) perspective(1100px) rotateY(28deg) scale(0.92);
    z-index: 0;
}
.slide.slide-dalsi {
    opacity: 0.88;
    transform-origin: left center;
    transform: translateX(48%) perspective(1100px) rotateY(-28deg) scale(0.92);
    z-index: 0;
}
.slide.aktivni {
    opacity: 1;
    transform: translateX(0) scale(1);
    z-index: 2;
    box-shadow: 0 24px 45px rgba(44, 42, 42, 0.34);
}
@media (max-width: 1024px) {
    .slider-kontejner { width: 38%; }
    .slider-sipka { width: 36px; height: 36px; font-size: 1.2rem; }
    .predchozi { left: 6px; }
    .dalsi { right: 6px; }
    .tecka { width: 9px; height: 9px; margin: 0 3px; }
    .slider-tecky { bottom: 5px; }
}
@media (prefers-reduced-motion: reduce) {
    .slide { transition: none; }
}
/* Vyšší hlavní karta bez změny rozměrů bočních karet. */
.slide.aktivni {
    height: 152.0875%;
    top: -26.04375%;
    width: 115%;
    left: -7.5%;
    background-size: cover;
}
/* Tečky pod spodním okrajem zvětšené hlavní karty. */
.sekce-slider {
    padding-bottom: calc(clamp(48px, 7vw, 110px) + 48px);
}
.slider-tecky {
    top: calc(126.04375% + 22px);
    bottom: auto;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}
.slider-tecky .tecka.aktivni,
.slider-tecky .tecka:hover { background-color: var(--text-barva); }
/* Skryje šipky i ve starší otevřené verzi HTML. */
.slider-sipka { display: none !important; }
.slider-tecky .tecka {
    width: 8px;
    height: 8px;
    border: 1px solid rgba(44, 42, 42, 0.18);
    background-color: rgba(44, 42, 42, 0.12);
    margin: 0 5px;
}
.slider-tecky .tecka.aktivni { background-color: rgba(44, 42, 42, 0.38); }
.slider-tecky .tecka:hover { background-color: rgba(44, 42, 42, 0.5); }
/* Fotogalerie: nekonečná řada, na desktopu pět viditelných fotografií. */
.sekce-galerie {
    padding: clamp(48px, 6vw, 90px) 20px;
    background: var(--hlavni-barva);
    scroll-margin-top: 140px;
}
.sekce-galerie h2 {
    margin: 0 0 36px;
    text-align: center;
    color: var(--tmava-barva);
    font-size: clamp(1.8rem, 2.5vw, 2.5rem);
}
.galerie-okno { overflow: hidden; padding-block: 14px 30px; }
.galerie-grid {
    --galerie-pocet: 5;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - (var(--galerie-pocet) - 1) * 12px) / var(--galerie-pocet));
    gap: 12px;
    width: 100%;
    margin: 0 auto;
}
.galerie-karta {
    position: relative;
    display: block;
    min-width: 0;
    color: var(--text-barva);
    text-decoration: none;
    font-size: 0.8rem;
    border-radius: 12px;
}
.galerie-karta img {
    display: block;
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    object-position: center 60%;
    border-radius: 12px;
    transition: filter 0.2s ease;
}
.galerie-karta > span {
    position: absolute;
    inset: auto 0 0;
    display: flex;
    justify-content: center;
    gap: 8px;
    padding: 24px 8px 12px;
    color: white;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
    border-radius: 0 0 12px 12px;
    opacity: 0;
    transition: opacity 0.2s ease;
}
.galerie-karta:hover > span,
.galerie-karta:focus-visible > span { opacity: 1; }
.galerie-karta:hover img { filter: brightness(1.06); }
.galerie-karta:focus-visible { outline: 2px solid var(--text-barva); outline-offset: 3px; }
@media (max-width: 1024px) {
    .galerie-grid { --galerie-pocet: 3; }
}
@media (max-width: 700px) {
    .galerie-grid { --galerie-pocet: 2; }
}
@media (max-width: 440px) {
    .galerie-grid { --galerie-pocet: 1; }
}
/* Výřez pánské pedikúry ponechává celý palec v obrázku. */
.sluzba-foto-panska-pedikura {
    object-position: 50% 75%;
}

/* Boční karty mají rozměry přední karty a mírné perspektivní natočení. */
.slide.slide-predchozi,
.slide.slide-dalsi {
    width: 115%;
    height: 152.0875%;
    top: -26.04375%;
    left: -7.5%;
    background-size: cover;
    opacity: 1;
    transform-origin: center;
}
.slide.slide-predchozi {
    transform: translateX(-54%) perspective(2400px) rotateY(24deg) scale(0.93);
}
.slide.slide-dalsi {
    transform: translateX(54%) perspective(2400px) rotateY(-24deg) scale(0.93);
}

/* Výřez klasické manikúry je posunutý směrem dolů. */
.sluzba-foto-klasicka-manikura {
    object-position: 50% 75%;
}

/* Jemná hloubka fotek bez změny rozměrů posuvné řady. */
.galerie-karta {
    background: white;
    box-shadow: 0 3px 0 rgba(70, 45, 45, 0.16),
                0 8px 14px -5px rgba(45, 25, 25, 0.24),
                0 16px 24px -12px rgba(45, 25, 25, 0.22);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.galerie-karta::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65),
                inset 0 -2px 3px rgba(0, 0, 0, 0.12);
}
@media (hover: hover) {
    .galerie-karta:hover {
        transform: translateY(-6px);
        box-shadow: 0 3px 0 rgba(70, 45, 45, 0.16),
                    0 12px 18px -5px rgba(45, 25, 25, 0.28),
                    0 22px 28px -12px rgba(45, 25, 25, 0.24);
    }
}
@media (prefers-reduced-motion: reduce) {
    .galerie-karta { transition: none; }
    .galerie-karta:hover { transform: none; }
}


/* Gel přímo na hranici sekcí: bez přidané výšky, v barvách webu. */
.gel-3d {
    --gel-barva: var(--text-barva);
    --gel-obrazek: url('Fotky/gel-plynuly.svg');
    position: relative;
    height: 0;
    z-index: 1;
    pointer-events: none;
}
.gel-3d-bily {
    --gel-barva: var(--hlavni-barva);
    --gel-obrazek: url('Fotky/gel-plynuly.svg');
}
.gel-3d-tvar {
    position: absolute;
    top: -1px;
    right: 0;
    width: clamp(200px, 30vw, 500px);
    display: block;
    isolation: isolate;
}
.gel-3d-tvar::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--gel-barva);
    -webkit-mask: var(--gel-obrazek) center / 100% 100% no-repeat;
    mask: var(--gel-obrazek) center / 100% 100% no-repeat;
}
.gel-3d img {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    visibility: hidden; /* Barvu vykresluje pouze maska, přesně podle pozadí sekce. */
}
@media (max-width: 700px) {
    .gel-3d-tvar { width: 170px; }
}


/* Telefon: jeden snímek přes celou šířku a nadpis O mně nad fotografií. */
@media (max-width: 767px) {
    .sekce-slider { padding: 0; }
    .slider-kontejner {
        width: 100%;
        max-width: none;
        aspect-ratio: 1422 / 953;
    }
    .slider-obrazky {
        height: 100%;
        overflow: hidden;
        border-radius: 0;
    }
    .sekce-slider .slide,
    .sekce-slider .slide.aktivni,
    .sekce-slider .slide.slide-predchozi,
    .sekce-slider .slide.slide-dalsi {
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        transform: none;
        border-radius: 0;
        box-shadow: none;
        background-size: contain;
        background-position: center;
        opacity: 0;
        transition: opacity .7s ease;
    }
    .sekce-slider .slide.aktivni { opacity: 1; }
    .sekce-slider .slider-tecky { display: none; }
    .o-mne-grid > h2 {
        margin: 0;
        transform: none;
        text-align: center;
    }
    .o-mne-grid { row-gap: 32px; }
}
@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
    .sekce-slider .slide { transition: none; }
}

/* Telefon: menší medailonek, kompaktní služby a dvě fotografie v galerii. */
@media (max-width: 767px) {
    .o-mne-grid > h2 {
        text-align: left;
        justify-self: start;
    }
    .o-mne-foto { width: min(70%, 294px); }

    .polozka-sluzba {
        display: grid;
        grid-template-columns: clamp(76px, 23vw, 110px) minmax(0, 1fr);
        grid-template-areas: "foto obsah" "foto cena";
        column-gap: 14px;
        row-gap: 10px;
        padding: 16px;
        align-items: start;
    }
    .sluzba-foto {
        grid-area: foto;
        width: 100%;
        height: auto;
        aspect-ratio: 1;
        align-self: start;
    }
    .sluzba-obsah { grid-area: obsah; }
    .sluzba-obsah h4 { font-size: 1.05rem; }
    .sluzba-cena {
        grid-area: cena;
        padding-left: 0;
        align-self: start;
    }

    .galerie-grid { --galerie-pocet: 2; }
    .galerie-karta > span {
        font-size: .65rem;
        padding: 16px 4px 7px;
        gap: 3px;
    }
}

/* Telefon: menší odstup od slideru a pořadí nadpis, text, fotografie. */
@media (max-width: 767px) {
    .sekce-o-mne { padding-top: 40px; }
    .o-mne-grid > h2 { grid-row: 1; }
    .o-mne-grid > .o-mne-obsah { grid-row: 2; }
    .o-mne-grid > .o-mne-foto { grid-row: 3; }
}

.galerie-napoveda {
    margin: 8px 0 0;
    text-align: center;
    color: var(--tmava-barva);
    font-size: .85rem;
    line-height: 1.5;
}

/* Mobilní oddělení slideru, úspornější galerie a kontakt se sítěmi vedle fotky. */
@media (max-width: 767px) {
    .sekce-slider { flex-direction: column; }
    .sekce-slider::after {
        content: '';
        display: block;
        width: 100%;
        height: calc(var(--vyska-headeru, 100px) / 2);
        min-height: calc(var(--vyska-headeru, 100px) / 2);
        flex-shrink: 0;
        background: var(--hlavni-barva);
    }
    .sekce-galerie { padding-bottom: 24px; }
    .galerie-okno { padding-bottom: 14px; }
    .galerie-napoveda { margin-top: 0; }

    .kontakt-grid {
        grid-template-columns: minmax(0, .36fr) minmax(0, .64fr);
        grid-template-rows: auto auto auto;
        column-gap: 18px;
        row-gap: 28px;
        align-items: center;
    }
    .kontakt-grid > .foto-karta { grid-column: 1; grid-row: 1; }
    .kontakt-grid > .foto-karta .vchod-foto {
        display: block;
        height: auto;
        max-height: 210px;
        object-fit: cover;
    }
    .kontakt-grid > .info-sloupec-pravy {
        grid-column: 2;
        grid-row: 1;
        min-width: 0;
        overflow-wrap: anywhere;
    }
    .kontakt-grid > .info-sloupec-pravy p {
        display: flex;
        align-items: center;
        gap: 6px;
        margin: 14px 0;
        font-size: .85rem;
        line-height: 1.4;
    }
    .kontakt-grid > .info-sloupec-pravy a { color: var(--hlavni-barva); }
    .kontakt-grid > .info-sloupec-pravy .kontakt-ikonka { flex-shrink: 0; }
    .kontakt-grid > .info-karta { grid-column: 1 / -1; grid-row: 2; }
    .kontakt-grid > .mapa-karta { grid-column: 1 / -1; grid-row: 3; }
}

/* Krátká informace pod ceníkem se na telefonu vejde na jeden řádek. */
@media (max-width: 767px) {
    .sekce-sluzby > p {
        font-size: clamp(11px, 2.97vw, 15.4px);
        line-height: 1.4;
    }
}

/* Mobil: pouze úzký stín pod fotkou, bez širokého ořezaného stínu. */
@media (max-width: 767px) {
    .galerie-karta,
    .galerie-karta:hover {
        box-shadow: 0 3px 0 rgba(70, 45, 45, 0.16);
    }
}

/* Telefon: deset značek ve třech kompaktních řadách 4 + 4 + 2. */
@media (max-width: 767px) {
    .partneri-loga {
        display: grid;
        grid-template-columns: repeat(8, minmax(0, 1fr));
        gap: 18px 10px;
        align-items: center;
        justify-items: center;
        margin-bottom: 24px;
    }
    .partneri-loga img,
    .partneri-loga img.logo-staleks {
        grid-column: span 2;
        width: 100%;
        max-width: 90px;
        height: 36px;
        margin: 0;
        object-fit: contain;
    }
    .partneri-loga img:nth-child(9) { grid-column: 3 / span 2; }
    .partneri-loga img:nth-child(10) { grid-column: 5 / span 2; }
    /* Ořízne pouze prázdné okraje souboru Staleks. */
    .partneri-loga img.logo-staleks { object-fit: cover; }
}