/* --- Základní nastavení a proměnné --- */

:root {

    --primary: #c94e08; /* Cihlová oranžová */

    --secondary: #1a2a3a; /* Tmavě modrá */

    --light: #f4f4f4;

    --dark: #111;

    --text: #333;

    --white: #fff;

}



* { margin: 0; padding: 0; box-sizing: border-box; }



html { scroll-behavior: smooth; }



body {

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

    color: var(--text);

    line-height: 1.6;

    background-color: var(--white);

}



h1, h2, h3, .logo {

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

    font-weight: 700;

}



.container {

    max-width: 1100px;

    margin: 0 auto;

    padding: 0 20px;

}



a { text-decoration: none; color: inherit; }

ul { list-style: none; }



/* --- Tlačítka --- */

.btn {

    padding: 12px 25px;

    border-radius: 5px;

    font-weight: bold;

    cursor: pointer;

    transition: 0.3s;

    display: inline-block;

    text-align: center;

}



.btn-primary {

    background-color: var(--primary);

    color: var(--white);

    border: 2px solid var(--primary);

}

.btn-primary:hover { background-color: #a84005; border-color: #a84005; }



.btn-outline {

    background-color: transparent;

    color: var(--white);

    border: 2px solid var(--white);

    margin-left: 10px;

}

.btn-outline:hover { background-color: var(--white); color: var(--dark); }



/* --- Navigace --- */

.navbar {

    background: var(--secondary);

    color: var(--white);

    padding: 15px 0;

    position: sticky;

    top: 0;

    z-index: 1000;

}



.nav-flex {

    display: flex;

    justify-content: space-between;

    align-items: center;

}



.logo { font-size: 1.5rem; letter-spacing: 1px; }

.logo span { color: var(--primary); }



.nav-links { display: flex; gap: 20px; align-items: center; }

.nav-links a { font-size: 0.95rem; font-weight: 500; transition: color 0.3s; }

.nav-links a:hover { color: var(--primary); }

.nav-links .active-link { color: var(--primary); }



.btn-nav {

    background: var(--primary);

    padding: 8px 18px;

    border-radius: 4px;

}

.btn-nav:hover { color: var(--white) !important; background: #a84005; }



.burger { display: none; cursor: pointer; }

.burger div { width: 25px; height: 3px; background-color: var(--white); margin: 5px; transition: 0.3s; }



/* --- Hero Sekce --- */

.hero {

    height: 85vh;

    background-position: center;

    background-repeat: no-repeat;

    background-size: cover;

    position: relative;

    display: flex;

    align-items: center;

    color: var(--white);

}



.hero-overlay {

    position: absolute;

    top: 0; left: 0; width: 100%; height: 100%;

    /* Tady je globální nastavení pro PC (0.55 = hodně tmavé) */

    background: rgba(0, 0, 0, 0.55);

}



.hero-content {

    position: relative;

    z-index: 2;

    text-align: center;

    width: 100%;

}



.hero h1 { font-size: 3rem; margin-bottom: 20px; }

.hero p { font-size: 1.2rem; margin-bottom: 30px; opacity: 0.9; }



/* --- Sekce obecně --- */

.section { padding: 80px 0; }

.section-title { text-align: center; font-size: 2.2rem; margin-bottom: 50px; color: var(--secondary); }

.section-subtitle { text-align: center; margin-top: -40px; margin-bottom: 50px; color: #aaa; }

.dark-bg { background-color: var(--secondary); }

.white { color: var(--white); }



/* --- Služby Grid --- */

.services-grid {

    display: grid;

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

    gap: 30px;

}



.service-card {

    background: var(--white);

    padding: 30px;

    border-radius: 8px;

    box-shadow: 0 5px 15px rgba(0,0,0,0.1);

    text-align: center;

    transition: transform 0.3s;

    border-bottom: 4px solid transparent;

}

.service-card:hover {

    transform: translateY(-10px);

    border-bottom: 4px solid var(--primary);

}

.service-card .icon { 

    font-size: 3rem; 

    margin-bottom: 15px; 

    color: var(--primary); 

}



/* --- Slider Před a Po --- */

.comparison-slider-wrapper {

    width: 100%; max-width: 800px; margin: 0 auto; position: relative;

}

.comparison-slider {

    position: relative; width: 100%; height: 450px;

    overflow: hidden; border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,0.3);

}

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

.base-image { width: 100%; height: 100%; }

.overlay-image {

    position: absolute; top: 0; left: 0; height: 100%; width: 50%;

    overflow: hidden; border-right: 3px solid var(--primary); z-index: 10;

}

.slider-range {

    position: absolute; top: 50%; left: 0; width: 100%;

    transform: translateY(-50%); z-index: 20; opacity: 0; cursor: ew-resize; height: 100%; margin: 0;

}

.slider-handle {

    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);

    width: 40px; height: 40px; background: var(--primary); border-radius: 50%;

    z-index: 15; pointer-events: none; display: flex; justify-content: center; align-items: center;

    box-shadow: 0 0 10px rgba(0,0,0,0.5);

}

.slider-handle::before { content: '↔'; color: white; font-weight: bold; }



/* --- O nás (Split) --- */

.split-layout { display: flex; align-items: center; gap: 50px; }

.split-layout > div { flex: 1; }

.split-layout img { width: 100%; border-radius: 8px; box-shadow: 0 5px 15px rgba(0,0,0,0.2); }

.check-list li { margin-bottom: 10px; font-size: 1.1rem; }



/* --- Galerie (naseprace.html) --- */

.gallery-grid {

    display: grid;

    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));

    gap: 20px;

}



.gallery-item {

    position: relative;

    overflow: hidden;

    border-radius: 8px;

    cursor: pointer;

    box-shadow: 0 4px 10px rgba(0,0,0,0.1);

    height: 250px; /* Fixní výška pro zarovnání */

}



.gallery-item img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: transform 0.5s ease;

}



.gallery-item:hover img {

    transform: scale(1.1);

}



.gallery-overlay {

    position: absolute;

    bottom: 0; left: 0; width: 100%;

    padding: 20px;

    background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);

    color: white;

    opacity: 0;

    transition: 0.3s;

}



.gallery-item:hover .gallery-overlay { opacity: 1; }



/* Lightbox (zvětšení obrázku) */

.lightbox {

    position: fixed;

    top: 0; left: 0; width: 100%; height: 100%;

    background: rgba(0,0,0,0.9);

    display: none; /* skryté defaultně */

    justify-content: center;

    align-items: center;

    z-index: 2000;

    padding: 20px;

}

.lightbox.active { display: flex; }

.lightbox img { max-width: 90%; max-height: 90%; border: 3px solid var(--white); border-radius: 5px; }

.lightbox-close {

    position: absolute; top: 30px; right: 30px;

    font-size: 3rem; color: white; cursor: pointer;

}



/* --- Kontakt (HLAVNÍ KONTEJNER) --- */

.contact-section { background: var(--light); }

.contact-box {

    background: var(--white); padding: 40px; border-radius: 10px;

    max-width: 900px;

    margin: 0 auto; box-shadow: 0 5px 20px rgba(0,0,0,0.05); text-align: center;

}



/* ROZDĚLENÍ KONTAKTU */

.contact-split {

    display: flex;

    gap: 40px;

    text-align: left;

    margin-top: 30px;

    align-items: flex-start;

}



.contact-left {

    flex: 2; /* Formulář širší */

}



.contact-right {

    flex: 1; /* QR užší */

    background: #f8f9fa;

    padding: 20px;

    border-radius: 8px;

    text-align: center;

    border: 1px solid #eee;

}



.contact-right h3 {

    font-size: 1.2rem;

    margin-bottom: 15px;

    color: var(--secondary);

}



/* TOTO JE VELIKOST PRO PC */

.qr-box img {

    width: 100%;

    max-width: 150px;

    height: auto;

    display: block;

    margin: 0 auto;

}



.small-text { font-size: 0.8rem; color: #888; margin-top: 10px; }



/* Detaily kontaktu (telefon, email) */

.contact-details {

    display: flex; justify-content: space-between; margin-bottom: 25px; flex-wrap: wrap; gap: 15px;

}

.contact-details a { color: var(--primary); font-weight: bold; }



.contact-form input, .contact-form textarea {

    width: 100%; padding: 12px; margin-bottom: 15px; border: 1px solid #ddd; border-radius: 4px; font-family: inherit;

}

.full-width { width: 100%; }



/* --- Footer --- */

footer {

    background: var(--secondary); color: #888; text-align: center; padding: 20px; font-size: 0.9rem;

}



/* --- Responsive (MOBIL) --- */

@media (max-width: 768px) {

    /* Oprava menu */

    .nav-links {

        position: absolute; right: 0px; top: 60px;

        background: var(--secondary); flex-direction: column; width: 100%;

        padding: 20px 0; transform: translateY(-150%); transition: 0.3s;

    }

    .nav-links.active { transform: translateY(0); }

    .burger { display: block; }

    

    /* OPRAVA HERO PRO MOBIL */

    .hero {

        height: 80vh;

        background-image: url('img/hero.webp') !important;

        background-position: center !important;

    }



    /* ZDE JE ZMĚNA OPAKOVACÍ BARVY (PRŮHLEDNOST) */

    .hero-overlay {

        /* 0.3 = 30% viditelnost černé (světlejší) */

        background: rgba(0, 0, 0, 0.3);

    }



    .hero h1 { font-size: 2rem; margin-top: 20px; }

    

    .hero-btns {

        display: flex;

        flex-direction: column;

        gap: 15px;

        width: 100%;

        max-width: 300px;

        margin: 0 auto;

    }

    .btn-outline { margin-left: 0; }

    

    .split-layout { flex-direction: column; }

    .comparison-slider { height: 300px; }

    

    /* KONTAKT NA MOBILU */

    .contact-split {

        flex-direction: column;

        gap: 30px;

    }

    .contact-left, .contact-right {

        width: 100%;

    }

    .contact-details { flex-direction: column; }

    

    /* OPRAVA VELIKOSTI QR KÓDU NA MOBILU */

    .qr-box img {

        max-width: 120px !important;

    }

}