/* --- ZÁKLADNÍ NASTAVENÍ A PROMĚNNÉ (ŠEDÁ PALETA) --- */

:root {

    --bg-dark: #212121;

    /* Tmavě šedá (grafitová), ne čistá černá */

    --bg-card: #2b2b2b;

    /* O něco světlejší šedá pro karty */

    --text-main: #e0e0e0;

    /* Světle šedý text (ne zářivě bílý) */

    --text-muted: #9e9e9e;

    /* Tlumená šedá */

    --accent: #dcdcdc;

    /* Stříbrná/Platinová pro zvýraznění */

    --accent-hover: #ffffff;

    /* Bílá pro hover */

}



* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}



body {

    font-family: 'Montserrat', sans-serif;

    background-color: var(--bg-dark);

    color: var(--text-main);

    line-height: 1.6;

}



h1,

h2,

h3 {

    text-transform: uppercase;

    letter-spacing: 2px;

    font-weight: 600;

}



a {

    text-decoration: none;

    color: inherit;

    transition: 0.3s;

}



.container {

    max-width: 1000px;

    margin: 0 auto;

    padding: 0 20px;

}



/* --- NAVIGACE --- */

nav {

    background-color: rgba(33, 33, 33, 0.95);

    /* Odpovídá --bg-dark */

    padding: 20px 0;

    position: sticky;

    top: 0;

    z-index: 1000;

    border-bottom: 1px solid #333;

}



.nav-container {

    display: flex;

    justify-content: space-between;

    align-items: center;

}



.logo-text {

    font-weight: 700;

    font-size: 1.2rem;

    letter-spacing: 3px;

    color: var(--accent);

}



.nav-links {

    list-style: none;

    display: flex;

    gap: 25px;

    align-items: center;

}



.nav-links a {

    font-size: 0.85rem;

    font-weight: 500;

    text-transform: uppercase;

    letter-spacing: 1px;

    color: var(--text-muted);

}



.nav-links a:hover {

    color: var(--accent-hover);

}



.btn-nav {

    border: 1px solid var(--text-muted);

    padding: 8px 16px;

    color: var(--text-main);

}



.btn-nav:hover {

    border-color: var(--accent-hover);

    background-color: rgba(255, 255, 255, 0.05);

}



/* --- HERO SEKCE (ČERNOBÍLÁ) --- */

.hero {

    /* Místo 90vh dáme menší výšku, např. 60% výšky okna. Můžeš zkusit i 50vh nebo 70vh. */

    height: 60vh;

    min-height: 400px;

    /* Pojistka, aby to na mobilech nebylo moc nízké */



    /* Pozadí a filtr zůstávají stejné */

    background-image: url('https://images.unsplash.com/photo-1599351431202-1e0f0137d9c8?q=80&w=2071&auto=format&fit=crop');

    background-size: cover;

    background-position: center;

    position: relative;

    display: flex;

    align-items: center;

    /* Vertikální vycentrování obsahu */

    text-align: center;

}



/* Tmavý překryv přes fotku, aby byl text čitelný */

.overlay {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background: rgba(33, 33, 33, 0.85);

    /* Šedý filtr, ne černý */

    backdrop-filter: grayscale(100%);

    /* Pojistka pro rozostření barev */

}



.hero-content {

    position: relative;

    z-index: 2;

    width: 100%;

    display: flex;

    flex-direction: column;

    align-items: center;

    /* Přidáme padding, abychom kontrolovali mezeru nad logem a pod tlačítkem */

    padding: 40px 0;

}



.main-logo {

    max-width: 300px;

    margin-bottom: 15px;

}



.slogan {

    font-size: 1.2rem;

    font-weight: 300;

    text-transform: uppercase;

    letter-spacing: 4px;

    color: var(--text-muted);

    /* Tlumená barva */

    margin-bottom: 40px;

    font-style: italic;

    border-top: 1px solid #444;

    /* Linka nad sloganem pro styl */

    padding-top: 15px;

}



.btn-primary {

    background-color: transparent;

    border: 1px solid var(--accent);

    color: var(--accent);

    padding: 15px 40px;

    font-weight: 600;

    text-transform: uppercase;

    letter-spacing: 2px;

    display: inline-block;

}



.btn-primary:hover {

    background-color: var(--accent);

    color: var(--bg-dark);

}



/* --- CENÍK SLUŽEB --- */

.services {

    padding: 100px 0;

    background-color: var(--bg-dark);

}



.services h2 {

    text-align: center;

    font-size: 2rem;

    margin-bottom: 10px;

    color: var(--accent);

}



.service-note {

    text-align: center;

    color: var(--text-muted);

    margin-bottom: 60px;

}



.price-list {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));

    gap: 30px;

}



.service-item {

    background-color: transparent;

    padding: 20px 0;

    border-bottom: 1px solid #333;

}



.service-top {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 10px;

}



.service-top h3 {

    font-size: 1rem;

    color: var(--text-main);

    letter-spacing: 1px;

}



.price {

    color: var(--accent);

    font-weight: 700;

    font-size: 1.1rem;

    white-space: nowrap;

    flex-shrink: 0;

    margin-left: 15px;

}



.service-desc {

    font-size: 0.9rem;

    color: var(--text-muted);

}



/* --- RYCHLÝ KONTAKT --- */

.quick-contact {

    background-color: #262626;

    /* Mírně odlišená šedá */

    padding: 60px 0;

    border-top: 1px solid #333;

    border-bottom: 1px solid #333;

}



.contact-flex {

    display: flex;

    justify-content: center;

    align-items: flex-start;

    /* Zarovná karty k hornímu okraji, aby neujížděly */

    gap: 80px;

    /* Zvětšil jsem mezeru, vypadá to vzdušněji */

    flex-wrap: wrap;

}



/* Zbytek zůstává stejný, jen pro jistotu, že se karty chovají stejně */

.contact-card {

    display: flex;

    flex-direction: column;

    align-items: center;

    text-align: center;

    min-width: 180px;

    padding: 10px;

    text-decoration: none;

    /* Odstraní podtržení odkazů */

}



.contact-card:hover {

    background-color: #333;

}



.contact-card .icon,

.insta-icon {

    display: flex;

    /* Flexbox pro vycentrování obsahu ikony */

    justify-content: center;

    align-items: center;

    height: 50px;

    /* Pevná výška pro oba symboly stejně! */

    width: 50px;

    /* Pevná šířka */

    margin: 0 auto 15px auto;

    /* Vycentrování boxu + mezera pod ním */

    line-height: 1;

    /* Reset řádkování */

}



/* Specifická úprava pro telefon (emoji) */ß

.contact-card .icon {

    font-size: 2.5rem;

    /* Velikost emoji */

    color: var(--text-muted);

}



.insta-card:hover .insta-icon {

    color: var(--accent);

    /* Po najetí zbělá */

    transform: scale(1.1);

}



.contact-card .label {

    font-size: 0.8rem;

    text-transform: uppercase;

    color: #666;

    margin-bottom: 5px;

    letter-spacing: 1px;

}



.contact-card .value {

    font-size: 1.1rem;

    font-weight: 500;

    color: var(--text-main);

}



/* --- LOKACE --- */

.location {

    padding: 80px 0;

    background-color: var(--bg-dark);

}



.split-layout {

    display: flex;

    flex-wrap: wrap;

    gap: 40px;

    align-items: center;

}



.info-box,

.map-box {

    flex: 1;

    min-width: 300px;

}



.centered-info {

    text-align: center;

}



.info-box h2 {

    color: var(--accent);

    margin-bottom: 30px;

}



address {

    font-style: normal;

    font-size: 1rem;

    margin-bottom: 40px;

    line-height: 1.8;

    color: var(--text-muted);

}



address strong {

    color: var(--text-main);

    font-size: 1.2rem;

}



.map-box iframe {

    /* Filtr pro mapu, aby taky nebyla moc barevná */

    filter: grayscale(100%) invert(90%);

}



/* --- FOOTER --- */

footer {

    padding: 40px 0;

    text-align: center;

    font-size: 0.75rem;

    color: #555;

    text-transform: uppercase;

    letter-spacing: 2px;

    background-color: #1a1a1a;

}



/* --- MOBIL --- */

@media (max-width: 768px) {

    .nav-container {

        flex-direction: column;

        gap: 15px;

    }



    .slogan {

        font-size: 1rem;

    }



    .split-layout {

        flex-direction: column;

    }



    .contact-flex {

        gap: 30px;

    }

}



/* --- GALERIE --- */

.gallery {

    padding: 80px 0;

    /* Dáme pozadí barvu karet, aby se sekce lehce oddělila od ceníku */

    background-color: var(--bg-card); 

}



.gallery h2 {

    text-align: center;

    font-size: 2rem;

    margin-bottom: 50px;

    color: var(--accent);

}



.gallery-grid {

    display: grid;

    /* Zvětšili jsme minimální šířku z 220px na 400px. 

       Tím pádem budou na počítači 2 obří fotky vedle sebe místo 4 malých. */

    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));

    gap: 30px;

    /* Trochu jsem zvětšil i mezeru mezi nimi (z 20px na 30px), ať to dýchá */

}



.gallery-img {

    width: 100%;

    /* Zvětšili jsme výšku z 300px na 450px, aby fotky nebyly moc úzké nudle */

    height: 450px;

    object-fit: cover;

    border-radius: 4px;

    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);

    transition: transform 0.3s ease, box-shadow 0.3s ease;

}



.gallery-img:hover {

    transform: translateY(-5px); /* Po najetí myší fotka lehce povyskočí */

    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);

}