/* --- Základní reset a nastavení --- */
* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: 'Montserrat', sans-serif;
    color: #000;
    background-color: #f9f9f9;

    padding-top: 95px; 
}

/* --- NOVÁ OPRAVA KOTEV (ANCHOR LINKS) --- */
html {
    scroll-padding-top: 95px !important; /* !! ZÁRUKA FIXU: Musí odpovídat výšce navbaru !! */
    scroll-behavior: smooth; 
}
/* --- KONEC OPRAVY --- */

h1, h2, h3, p {
    margin: 0 0 1rem 0;
}

/* ###################################################### */
/* ###               DESKTOP VERZE                    ### */
/* ###################################################### */

/* --- Navigace (DESKTOP) --- */
.navbar {
    background-color: #ffffff;
    border-bottom: 1px solid #eee;
    
    position: fixed; 
    top: 0;
    z-index: 1000;
    width: 100%;
}

.navbar-container {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center; 
    padding: 1.5rem 0;
    max-width: 1200px;
    margin: 0 auto;
    gap: 2rem; 
}

.nav-toggle {
    display: none;
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0;
    justify-self: start;
    transition: color 0.3s ease; 
    color: #000; 
}

.navbar .logo {
    justify-self: start;
}
.navbar .logo img {
    /* VELIKOST LOGA (DESKTOP) */
    max-height: 45px;
    display: block; 
}

.navbar .main-nav {
    justify-self: center;
    /* --- TVOJE ZAROVNÁNÍ DESKTOP --- */
    position: relative;
    top: 3px;
}
.navbar .main-nav ul {
    list-style: none;
    display: flex;
    gap: 2rem;
    margin: 0;
    padding: 0;
}
.navbar .main-nav a {
    text-decoration: none;
    color: #000;
    font-weight: 700;
    font-size: 0.9rem;
    text-transform: uppercase;
    transition: color 0.3s ease, background-color 0.3s ease;
}

.navbar .header-right {
    justify-self: end;
    display: flex;
    align-items: center;
    gap: 1.5rem;

    /* --- TVOJE ZAROVNÁNÍ DESKTOP --- */
    position: relative;
    top: 3px;
}
.header-phone {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 700;
    text-decoration: none;
    color: #000;
    white-space: nowrap;
    transition: color 0.3s ease;
}

.header-admin-link {
    font-size: 1.2rem;
    cursor: pointer;
    transition: color 0.3s ease;
    color: #000;
}

.header-user {
    display: none; 
}


/* ... (Ostatní styly pro desktop zůstávají stejné) ... */

/* === 1. HERO SEKCE (<img> tag) === */
#hero-fullwidth {
    position: relative; 
    line-height: 0; 
}
#hero-fullwidth img {
    width: 100%; 
    height: auto; 
    display: block; 
}
.hero-img-mobil { display: none; }
.hero-img-desktop { display: block; }
.hero-text-overlay {
    position: absolute;
    bottom: 0; 
    left: 50%; 
    transform: translateX(-50%); 
    z-index: 10;
    width: 100%;
    max-width: 1200px; 
    padding: 3rem 1rem; 
    text-shadow: 0 2px 5px rgba(0,0,0,0.5);
}
.hero-text-overlay h1 {
    font-size: 4.5rem; 
    font-weight: 700; 
    color: #fff; 
    text-align: left; 
    margin: 0;
    line-height: 1.3; 
}
.line-mobil { display: none; }
.line-desktop { display: inline; }


/* === 2. SEKCE PRONÁJEM (TEXT + FORMULÁŘ) === */
#pronajem-skladu {
    padding: 3rem 0; 
}
.pronajem-container {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.2fr 1fr; 
    gap: 3rem; 
    align-items: start;
}
.pronajem-text {
    padding: 1rem;
    font-size: 1.1rem;
    line-height: 1.7;
}
.pronajem-text h2 {
    font-size: 2.2rem;
    margin-bottom: 1.5rem;
}
.form-panel {
    background-color: #ff7c14;
    color: #ffffff;
padding: 3rem; 
    border-radius: 16px;
}
.form-panel h2 {
    font-size: 2rem;
}
.form-panel p {
    margin-bottom: 1.5rem;
}


/* === 3. STYLY PRO FORMULÁŘ (UVNITŘ ORANŽOVÉHO BOXU) === */
.contact-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.form-group {
    display: flex;
    flex-direction: column;
}
.form-group label, .form-group-checkbox label {
    font-size: 0.85rem;
    margin-bottom: 0.25rem;
    color: #fff; 
}
.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form select {
    padding: 0.75rem;
    border: none;
    border-radius: 4px;
    font-family: 'Montserrat', sans-serif;
    font-size: 1rem;
}
.form-group-checkbox {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.form-group-checkbox label {
    margin-bottom: 0;
}
.form-group-checkbox a {
    color: #fff;
    font-weight: 700;
}
.btn-submit {
    padding: 1rem;
    background-color: #ffffff;
    color: #ff7c14;
    border: none;
    border-radius: 4px;
    font-size: 1.1rem;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.2s, transform 0.2s ease;
}
.btn-submit:hover {
    background-color: #f0f0f0;
    transform: scale(1.02);
}


/* ###################################################### */
/* ###               RESPONZIVITA (MOBIL)             ### */
/* ###################################################### */

@media (max-width: 900px) {

    body {
        padding-top: 75px;
    }
    
    /* --- NOVÁ OPRAVA KOTEV PRO MOBIL --- */
    html {
        scroll-padding-top: 75px !important; /* !! ZÁRUKA FIXU PRO MOBIL !! */
    }
    /* --- KONEC OPRAVY --- */

    /* === 1. HLAVIČKA (MOBIL) === */
    
    .navbar-container {
        grid-template-columns: 1fr auto;
        justify-content: space-between; 
        gap: 1.5rem; 
        padding: 1rem;
        
        width: 100%;
        max-width: none;
        margin: 0;
        
        align-items: center;
    }

    .nav-toggle {
        display: block;
        grid-column: 2; 
        justify-self: end;
        font-size: 1.4rem;
    }
    
    .navbar .logo {
        grid-column: 1; 
        justify-self: start;
        /* --- TVOJE ZAROVNÁNÍ MOBIL --- */
        position: relative;
        top: -1px;
        left: 5px;
    }
    .navbar .logo img {
        /* Velikost loga na mobilu */
        max-height: 40px; 
    }
    
    .navbar .header-right {
        grid-column: 2; 
        justify-self: end;
    }

    .header-phone,
    .header-admin-link {
        display: none; 
    }


    /* === 2. MOBILNÍ MENU (BURGER) === */
    
    .navbar .main-nav {
        display: block; 
        position: absolute; 
        top: 100%;         
        left: 0;
        width: 100%;
        background: #fff; 
        border-bottom: 1px solid #eee;
        transform: translateY(-150%); 
        opacity: 0;
        visibility: hidden;
        transition: transform 0.3s ease, opacity 0.3s ease, visibility 0.3s ease;
        
        justify-self: auto; 
    }
    
    .navbar[data-nav-open="true"] .main-nav {
        transform: translateY(0);
        opacity: 1;
        visibility: visible;
        background: #fff; 
    }

    .main-nav ul {
        flex-direction: column; 
        gap: 0;
        width: 100%;
    }
    .main-nav a {
        display: block;
        padding: 1rem;
        text-align: center;
        border-top: 1px solid #f0f0f0;
    }

    /* === 3. NOVÉ SEKCE (MOBIL) === */
    
    .hero-img-mobil {
        display: block;
    }
    .hero-img-desktop {
        display: none;
    }

    .line-mobil { display: inline; }
    .line-desktop { display: none; }


    .hero-text-overlay {
        padding: 1.5rem; 
    }
    .hero-text-overlay h1 {
        font-size: 2.2rem; 
        line-height: 1.4; 
    }


    #pronajem-skladu {
        padding: 2rem 1rem; 
    }
    .pronajem-container {
        grid-template-columns: 1fr; 
        gap: 2rem;
    }
    .pronajem-text {
        padding: 0; 
        font-size: 1rem;
    }
    .form-panel {
        padding: 2rem;
    }
    .form-row {
        grid-template-columns: 1fr;
    }
}


/* ###################################################### */
/* ###       DOPLNĚNÍ PRO "ŠMRNC" (HOVERY ATD.)       ### */
/* ###################################################### */

.navbar .main-nav a:hover {
    color: #ff7c14;
}
@media (max-width: 900px) {
    .navbar .main-nav a:hover {
        background-color: #f5f5f5; 
    }
}

.header-phone:hover,
.header-admin-link:hover {
    color: #ff7c14;
}

.nav-toggle:hover {
    color: #555;
}

.nav-toggle i {
    transition: transform 0.3s ease-in-out;
}
.navbar[data-nav-open="true"] .nav-toggle i {
    transform: rotate(180deg);
}


/* ###################################################### */
/* ###          NOVÉ SEKCE (OBSAH STRÁNKY)            ### */
/* ###################################################### */

/* --- Globální třída pro kontejnery sekcí --- */
.section-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 5rem 1.5rem;
}

/* --- Obecné nadpisy sekcí --- */
section h2 {
    font-size: 2.5rem;
    font-weight: 700;
    text-align: center;
    margin-bottom: 1.5rem;
}
.section-subtitle {
    text-align: center;
    font-size: 1.1rem;
    color: #555;
    margin-top: -1rem;
    margin-bottom: 3rem;
}

/* --- Tlačítko (podobné tomu z formuláře) --- */
.btn-primary {
    display: inline-block;
    padding: 1rem 2rem;
    background-color: #ff7c14;
    color: #ffffff;
    border: none;
    border-radius: 4px;
    font-size: 1.1rem;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    text-align: center;
    transition: background-color 0.2s, transform 0.2s ease;
}
.btn-primary:hover {
    background-color: #e06c12;
    transform: scale(1.02);
}


/* ====================================================== */
/* === STYLY PRO SEKCI BEZPEČNOSTNÍ POKYNY (PDF) - NOVÉ ÚPRAVY === */
/* ====================================================== */

/**
 * Předpoklad: Špatný PDF reader je iframe (nebo podobný element) 
 * hned za h2 "Bezpečnostní pokyny". Zkusíme jej stylovat přímo.
 *
 * NOVÁ STRATEGIE: Zkusíme stylovat iframe, aby vypadal moderněji a širší.
 */

/* Stylování pro element embedující PDF (pravděpodobně iframe) */
.section-container iframe[src$=".pdf"], 
.section-container embed[src$=".pdf"],
.pdf-display {
    /* Základní rozvržení */
    display: block;
    margin: 2rem auto;
    width: 100%; /* Plná šířka kontejneru */
    max-width: 850px; /* Omezení, aby nebyl příliš široký */
    height: 600px; /* Dostatečná výška pro zobrazení obsahu */
    
    /* Moderní vzhled */
    border: 1px solid #ddd;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    
    /* Některé prohlížeče vyžadují toto pro skrytí lišty (nemusí fungovat všude!) */
    /* border: none; */ 
}


/* Styl pro stažení PDF - ten zůstává jako doplňkové CTA */
.pdf-wrapper {
    /* Kontejner pro moderní "PDF Box" */
    margin: 2rem auto; 
    padding: 3rem;
    max-width: 600px; 
    text-align: center;
    
    /* Moderní černý vzhled */
    background-color: #222222; 
    color: #ffffff;
    border-radius: 12px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3); 
    
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
}

/* Zajištění, že se skryje jen element s nechtěným zobrazením */
.pdf-display {
    /* Původní reader se skryje, ale moderní zobrazení PDF (iframe) zůstane. */
    /* Tato třída by měla být aplikována pouze na nechtěný div, který obtěžuje. */
    /* display: none !important; */
    /* visibility: hidden; */
}


/* Úprava tlačítka primární barvy uvnitř černého boxu */
.pdf-wrapper .btn-primary {
    background-color: #ff7c14; 
    color: #ffffff; 
    padding: 1.25rem 3rem; 
    font-size: 1.2rem;
}

.pdf-wrapper .btn-primary:hover {
    background-color: #e06c12;
    transform: scale(1.05); 
}

/* Úprava responzivity pro menší displeje */
@media (max-width: 600px) {
    .pdf-wrapper {
        padding: 2rem 1rem;
    }
    .pdf-wrapper .btn-primary {
        width: 100%; 
        padding: 1rem 2rem;
        font-size: 1.1rem;
    }
    
    /* PDF embed na mobilu */
    .section-container iframe[src$=".pdf"], 
    .section-container embed[src$=".pdf"] {
        height: 400px; /* Menší výška na mobilu */
    }
}
/* ====================================================== */
/* === KONEC NOVÝCH STYLŮ === */
/* ====================================================== */


/* --- 1. SEKCE: Jak to funguje --- */
#jak-to-funguje {
    background-color: #ffffff; /* Bílé pozadí */
}
.funguje-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}
.step-item {
    text-align: center;
    padding: 1.5rem;
}
.step-item h3 {
    font-size: 1.3rem;
    margin-bottom: 0.5rem;
}
.step-item p {
    font-size: 0.95rem;
    line-height: 1.6;
    color: #333;
}
.step-icon {
    font-size: 2.5rem;
    color: #ff7c14;
    margin-bottom: 1.5rem;
    display: inline-block;
}


/* --- 2. SEKCE: Ceník --- */
#cenik {
    background-color: #f9f9f9; /* Lehce šedé pozadí */
}
.cenik-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
    background-color: #ffffff;
    padding: 3rem;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}
.cenik-img img {
    width: 100%;
    height: auto;
    border-radius: 8px;
}
.cenik-info h3 {
    font-size: 2rem;
    margin-bottom: 0.25rem;
}
.cenik-rozmery {
    font-size: 1.1rem;
    color: #555;
    margin-bottom: 1.5rem;
}
.cenik-cena {
    font-size: 3rem;
    font-weight: 700;
    color: #ff7c14;
    margin-bottom: 0.5rem;
}
.cenik-cena span {
    display: block;
    font-size: 1rem;
    font-weight: 400;
    color: #333;
}
.cenik-vyhody {
    list-style: none;
    padding: 0;
    margin: 2rem 0;
}
.cenik-vyhody li {
    font-size: 1rem;
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
}
.cenik-vyhody li i {
    color: #28a745; /* Zelená fajfka */
    margin-right: 0.75rem;
}


/* --- 3. SEKCE: Další služby --- */
#sluzby {
    background-color: #ffffff;
}
.sluzby-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
}
.sluzba-item {
    background-color: #f9f9f9;
    padding: 2.5rem;
    border-radius: 8px;
    transition: all 0.3s ease;
}
.sluzba-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 20px rgba(0,0,0,0.05);
}
.sluzba-icon {
    font-size: 2.5rem;
    color: #ff7c14;
    margin-bottom: 1.5rem;
}
.sluzba-item h3 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
}
.sluzba-item p {
    line-height: 1.7;
    color: #333;
}


/* --- 4. SEKCE: Reference --- */
#reference {
    background-color: #f9f9f9;
}
.reference-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}
.reference-item {
    background: #fff;
    padding: 2rem;
    border-radius: 8px;
    border-top: 4px solid #ff7c14;
    box-shadow: 0 5px 15px rgba(0,0,0,0.03);
}
.reference-item blockquote {
    margin: 0 0 1rem 0;
    font-style: italic;
    line-height: 1.7;
    color: #333;
    position: relative;
}
/* Odsazení pro uvozovky */
.reference-item blockquote::before {
    content: '“';
    position: absolute;
    top: -10px;
    left: -15px;
    font-size: 3rem;
    color: #ff7c14;
    opacity: 0.2;
    font-style: normal;
}
.reference-autor {
    font-weight: 700;
    text-align: right;
    color: #000;
}


/* --- 5. SEKCE: Kontakt --- */
#kontakt {
    background-color: #333;
    color: #f0f0f0;
}
#kontakt h2 {
    color: #ffffff;
}
.kontakt-grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 3rem;
}
.kontakt-info h3 {
    font-size: 1.8rem;
    color: #ff7c14;
    margin-bottom: 1rem;
}
.kontakt-info p {
    line-height: 1.7;
    font-size: 1.1rem;
    margin-bottom: 2rem;
}
.kontakt-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 1.5rem;
    font-size: 1.1rem;
}
.kontakt-item i {
    font-size: 1.3rem;
    color: #ff7c14;
    margin-right: 1.5rem;
    margin-top: 0.25rem;
    width: 20px; /* Zarovnání ikon */
}
.kontakt-item a {
    color: #ffffff;
    text-decoration: none;
    transition: color 0.2s;
}
.kontakt-item a:hover {
    color: #ff7c14;
}
.kontakt-mapa iframe {
    border-radius: 8px;
    height: 100%;
    min-height: 400px;
    width: 100%;
}


/* ###################################################### */
/* ###          RESPONZIVITA PRO NOVÉ SEKCE           ### */
/* ###################################################### */

@media (max-width: 900px) {

    body {
        padding-top: 75px;
    }
    
    /* --- NOVÁ OPRAVA KOTEV PRO MOBIL --- */
    html {
        scroll-padding-top: 75px !important; /* !! ZÁRUKA FIXU PRO MOBIL !! */
    }
    /* --- KONEC OPRAVY --- */

    section h2 {
        font-size: 2rem;
    }
    
    .section-container {
        padding: 3rem 1rem;
    }

    /* Mřížky s 3 sloupci -> 1 sloupec */
    .funguje-grid,
    .reference-grid {
        grid-template-columns: 1fr;
    }
    
    /* Mřížky s 2 sloupci -> 1 sloupec */
    .cenik-grid,
    .sluzby-grid,
    .kontakt-grid {
        grid-template-columns: 1fr;
    }

    .cenik-grid {
        gap: 2rem;
        padding: 2rem;
    }

    /* Obrácení pořadí u kontaktu, aby byla mapa nahoře */
    .kontakt-grid {
        gap: 2rem;
    }
    .kontakt-info {
        order: 2; /* Info bude druhé */
    }
    .kontakt-mapa {
        order: 1; /* Mapa bude první */
    }
    
    /* --- GALERIE --- */
    .gallery-grid {
        grid-template-columns: repeat(2, 1fr); /* 2x2 na tabletu */
    }
    .gallery-thumb {
        height: 200px;
    }
}

@media (max-width: 600px) {
    .footer-grid {
        grid-template-columns: 1fr; /* 1 sloupec na mobilu */
        gap: 2.5rem;
    }
    .gallery-grid {
        grid-template-columns: 1fr; /* 1 sloupec na malém mobilu */
    }
    .modal-content {
        padding-top: 30px;
        width: 95%;
    }
}


/* ###################################################### */
/* ###       STYLY PRO BLOG (PŘIDÁNO Z blog.php)      ### */
/* ###################################################### */

/* Stránka s výpisem článků (blog.php) */
.blog-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 4rem 1.5rem; /* Odsazení od hlavičky a patičky */
}
.blog-header { text-align: center; margin-bottom: 4rem; }
.blog-header h1 { font-size: 3rem; font-weight: 700; margin-bottom: 10px; }
.blog-header p { font-size: 1.2rem; color: #555; max-width: 60ch; margin: 0 auto; line-height: 1.6; }

.article-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 2rem;
}
.article-card {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.07);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.article-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 30px rgba(0,0,0,0.1);
}

/* --- OPRAVA OBRÁZKU BLOGU (16:9) --- */
.article-card-image {
    width: 100%;
    aspect-ratio: 16 / 9; /* Poměr stran 16:9 */
    object-fit: cover;
}

.article-card-content {
    padding: 1.5rem; /* 24px */
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* Zajistí, že obsah roztáhne kartu */
}
.article-card-content h3 {
    margin-top: 0;
    font-size: 1.3rem;
    font-weight: 700;
    line-height: 1.4;
    min-height: calc(1.3rem * 1.4 * 2); 
}
.article-card-content p {
    color: #555;
    flex-grow: 1;
    margin-bottom: 1.5rem; /* 24px */
    line-height: 1.6;
    font-size: 0.9rem;
}

.btn-read-more {
    background-color: #ff7c14;
    color: #ffffff;
    border: none;
    cursor: pointer;
    text-decoration: none;
    border-radius: 4px;
    font-weight: 700;
    display: inline-block;
    font-family: 'Montserrat', sans-serif;
    padding: 0.75rem 1.5rem; /* 12px 24px */
    font-size: 0.9rem;
    text-align: center;
    transition: background-color 0.2s ease, transform 0.2s ease;
    align-self: flex-start; /* Zarovná tlačítko dolů */
}
.btn-read-more:hover {
    background-color: #e06c12;
    transform: scale(1.02);
}

/* Stránka detailu článku (clanek.php) */
.article-container {
    max-width: 800px; /* Užší obsah pro lepší čitelnost */
    margin: 0 auto;
    padding: 4rem 1.5rem;
}
.article-header {
    margin-bottom: 2rem;
}
.article-header h1 {
    font-size: 2.8rem;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 1rem;
}
.article-header p {
    font-size: 1.2rem;
    color: #555;
    line-height: 1.7;
    font-weight: 500;
}
.article-main-image {
    width: 100%;
    height: auto;
    max-height: 450px;
    object-fit: cover;
    border-radius: 8px;
    margin-bottom: 2rem;
}

/* Stylování obsahu z TinyMCE */
.article-content {
    line-height: 1.8;
    font-size: 1.1rem;
    color: #333;
}
.article-content h2 {
    font-size: 1.8rem;
    font-weight: 700;
    margin-top: 2.5rem;
    margin-bottom: 1rem;
}
.article-content h3 {
    font-size: 1.5rem;
    font-weight: 700;
    margin-top: 2rem;
    margin-bottom: 1rem;
}
.article-content p {
    margin-bottom: 1.5rem;
}
.article-content ul,
.article-content ol {
    margin-bottom: 1.5rem;
    padding-left: 1.5rem;
}
.article-content li {
    margin-bottom: 0.5rem;
}
.article-content a {
    color: #ff7c14;
    text-decoration: underline;
}
.article-content blockquote {
    margin: 1.5rem 0;
    padding: 1rem 1.5rem;
    border-left: 4px solid #ff7c14;
    background-color: #f9f9f9;
    font-style: italic;
    color: #555;
}
.article-content img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin: 1.5rem 0;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}

.back-to-blog {
    display: inline-block;
    margin-top: 3rem;
    color: #555;
    text-decoration: none;
    font-weight: 700;
}
.back-to-blog:hover {
    color: #ff7c14;
}

/* Responzivita pro blog */
@media (max-width: 900px) {
    .blog-container {
         padding: 3rem 1rem;
    }
    .blog-header h1 {
        font-size: 2.2rem;
    }
    .blog-header p {
        font-size: 1rem;
    }
    .article-container {
        padding: 2rem 1rem;
    }
    .article-header h1 {
        font-size: 2rem;
    }
}

/* ###################################################### */
/* --- SEKCE: GALERIE A LIGHTBOX --- */
/* ###################################################### */

#galerie {
    background-color: #ffffff;
}
.gallery-grid {
    display: grid;
    /* 4 sloupce na desktopu */
    grid-template-columns: repeat(4, 1fr); 
    gap: 1.5rem;
}
.gallery-item {
    overflow: hidden;
    border-radius: 8px;
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    line-height: 0;
}
.gallery-item:hover {
    transform: scale(1.03);
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}
.gallery-thumb {
    width: 100%;
    height: 250px; /* Pevná výška, protože aspect-ratio je příliš vysoké */
    object-fit: cover;
    display: block;
}

/* --- Modal/Lightbox Styles --- */
.image-modal {
    display: none; 
    position: fixed;
    z-index: 99999;
    padding-top: 60px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.9);
    backdrop-filter: blur(5px);
    transition: opacity 0.3s ease;
}
.modal-content {
    margin: auto;
    display: block;
    width: 90%;
    max-width: 1000px;
    max-height: 90vh;
    border-radius: 8px;
}
.modal-close {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
    cursor: pointer;
}
.modal-close:hover,
.modal-close:focus {
    color: #ff7c14;
    text-decoration: none;
    cursor: pointer;
}


/* ###################################################### */
/* ###              NOVÁ PATIČKA (FOOTER)             ### */
/* ###################################################### */

.site-footer {
    background-color: #ffffff;
    border-top: 1px solid #eee;
    padding-top: 4rem;
    color: #333;
}

.footer-main {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1.5fr 1.5fr 1fr;
    gap: 2.5rem;
}

.footer-about .footer-logo {
    max-width: 180px; 
    margin-bottom: 1rem;
}

.footer-about p {
    font-size: 0.9rem;
    line-height: 1.6;
    color: #555;
    padding-right: 1rem; 
}

.footer-links h3 {
    font-size: 0.9rem;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 1.5rem;
    color: #000;
}

.footer-links ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-links li {
    margin-bottom: 0.75rem;
}

.footer-links a {
    color: #555;
    text-decoration: none;
    font-size: 0.9rem;
    transition: color 0.2s;
}

.footer-links a:hover {
    color: #ff7c14;
}

.social-links {
    display: flex;
    gap: 1rem;
}
.social-links a {
    font-size: 1.4rem; 
    color: #333;
}
.social-links a:hover {
    color: #ff7c14;
}

.footer-bottom-bar {
    text-align: center;
    padding: 1.5rem;
    margin-top: 3rem;
    border-top: 1px solid #eee;
}

.footer-bottom-bar p {
    margin: 0;
    font-size: 0.85rem;
    color: #888;
}

/* ###################################################### */
/* ###          RESPONZIVITA PRO NOVÉ SEKCE           ### */
/* ###################################################### */

@media (max-width: 900px) {
    /* --- GALERIE --- */
    .gallery-grid {
        grid-template-columns: repeat(2, 1fr); /* 2x2 na tabletu */
    }
    .gallery-thumb {
        height: 200px;
    }
    
    section h2 {
        font-size: 2rem;
    }
    
    .section-container {
        padding: 3rem 1rem;
    }

    /* Ostatní mřížky */
    .funguje-grid,
    .reference-grid {
        grid-template-columns: 1fr;
    }
    
    .cenik-grid,
    .sluzby-grid,
    .kontakt-grid {
        grid-template-columns: 1fr;
    }

    .cenik-grid {
        gap: 2rem;
        padding: 2rem;
    }

    /* Obrácení pořadí u kontaktu, aby byla mapa nahoře */
    .kontakt-grid {
        gap: 2rem;
    }
    .kontakt-info {
        order: 2; 
    }
    .kontakt-mapa {
        order: 1; 
    }
    
    .footer-grid {
        grid-template-columns: 1fr 1fr; 
    }
    
    .footer-about {
        grid-column: 1 / -1; 
    }
}

@media (max-width: 600px) {
    .footer-grid {
        grid-template-columns: 1fr; 
        gap: 2.5rem;
    }
    .gallery-grid {
        grid-template-columns: 1fr; /* 1 sloupec na malém mobilu */
    }
    .modal-content {
        padding-top: 30px;
        width: 95%;
    }
}


/* ========================================= */
/* WHATSAPP TLAČÍTKO               */
/* ========================================= */
.whatsapp-float {
    position: fixed;
    width: 60px;
    height: 60px;
    bottom: 40px;
    right: 40px;
    background-color: #25d366;
    color: #FFF;
    border-radius: 50px;
    text-align: center;
    font-size: 30px;
    box-shadow: 2px 2px 3px #999;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: transform 0.3s ease;
}

.whatsapp-float:hover {
    background-color: #128C7E;
    transform: scale(1.1);
    color: #FFF;
}

/* Plovoucí ikona whatsapp na mobilu */
@media (max-width: 900px) {
    .whatsapp-float {
        width: 50px;
        height: 50px;
        bottom: 20px;
        right: 20px;
        font-size: 25px;
    }
}


/* ========================================= */
/* COOKIE LIŠTA                              */
/* ========================================= */
.cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #222;
    color: #fff;
    padding: 1rem;
    z-index: 9999; /* Musí být nad vším */
    box-shadow: 0 -2px 10px rgba(0,0,0,0.2);
}

.cookie-content {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0 1rem;
}

.cookie-content p {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.4;
}

.cookie-content a {
    color: #ff7c14;
    text-decoration: underline;
}

.btn-cookie {
    background-color: #ff7c14;
    color: #fff;
    border: none;
    padding: 0.5rem 1.5rem;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 700;
    font-family: 'Montserrat', sans-serif;
    white-space: nowrap;
    transition: background-color 0.2s;
}

.btn-cookie:hover {
    background-color: #e06c12;
}

/* Na mobilu dáme text a tlačítko pod sebe */
@media (max-width: 700px) {
    .cookie-content {
        flex-direction: column;
        text-align: center;
    }
    .btn-cookie {
        width: 100%;
    }
    /* Posuneme Whatsapp trochu nahoru, aby nebyl pod lištou, když je aktivní */
    .whatsapp-float {
        bottom: 100px; 
    }
}