/* ========================================================== */
/* ZÁKLADNÍ NASTAVENÍ A CHOVÁNÍ STRÁNKY */
/* ========================================================== */

html, body {
    max-width: 100%;
    overflow-x: hidden; /* Toto zakáže horizontální skrollování */
    position: relative;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: "Playfair Display", serif;
    color: white;
    background: #332b3b;
    background-image: url("assets/wood_bg.jpg"); 
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
    
    /* OPRAVA PŘETEČENÍ: */
    margin: 0;
    padding: 0;
    width: 100%;
    overflow-x: hidden; /* Toto zabrání horizontálnímu posunu */
    
    /* RÁMEČEK: */
    /* Používáme border-box, aby rámeček netlačil stránku ven */
    box-sizing: border-box; 
    border-left: 3px solid #74a74e;
    border-right: 3px solid #74a74e;
    border-bottom: 3px solid #74a74e;
    border-top: none; 
    
    position: relative; 
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

body::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: -1;
}

/* ========================================================== */
/* LIŠTY (TOP BAR A HEADER) - FIXNÍ A POSUVNÉ */
/* ========================================================== */

.top-bar {
    background: #171717;
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 55px; 
    font-size: 14px;
    
    position: fixed;
    top: 0;      /* Změněno z 3px na 0 */
    left: 0;     /* Změněno z 3px na 0 */
    right: 0;    /* Změněno z 3px na 0 */
    height: 34px; 
    
    z-index: 1001;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.top-bar img {
    width: 34px;
    height: 34px;
    margin-right: 8px;
    cursor: pointer;
}

.social-icon.facebook {
    width: 27.5px;
    height: 27.5px;
    object-fit: contain;
    transition: transform 0.3s ease;
    filter: brightness(0.8);
}

.header {
    background: #1d1d1d;
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* Změna: Na mobilech použijeme menší padding v media query, 
       zde ponecháme základ pro PC */
    padding: 10px 4%; 
    
    position: fixed;
    top: 50px;
    left: 0;
    right: 0;
    
    z-index: 1000;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.logo-section {
    display: flex;
    align-items: center;
    flex-shrink: 0; 
}

.logo {
    width: 175px;
    margin-left: 8px; 
}

/* ZÁKLADNÍ NASTAVENÍ (PC i Mobil) */
.logo-link {
    display: flex !important;
    align-items: center !important; /* Vertikálně srovná logo a text na střed */
    gap: 5px !important; /* Přesná mezera mezi logem a textem */
    text-decoration: none;
}

.logo-img-main {
    width: 75px !important;  /* Zvětšeno z 50px na 80px pro lepší dominanci */
    height: 75px !important; /* Pevná výška zajistí, že se to nezmáčkne */
    object-fit: contain !important; /* Pojistka proti deformaci */
    filter: drop-shadow(0 0 15px rgba(150, 195, 99, 0.4)); /* Trochu silnější záře */
    transition: transform 0.3s ease;
    
    /* Pokud je pila moc vysoko oproti jménu, odkomentuj (smaž lomítka) řádek níže: */
    /* margin-top: 5px; */ 
}

.logo-link:hover .logo-img-main {
    transform: rotate(15deg); /* Efekt: pila se při najetí pohne */
}

.company-name {
    margin: 0 !important; /* Zrušíme ten margin-left: -100px, co tam byl dřív */
    white-space: nowrap; /* Zabrání rozdělení názvu do dvou řádků */
    font-size: 1.2rem;
    font-weight: 600;
}

.nav {
    display: flex;
    justify-content: flex-end; 
    gap: 20px; 
    margin-left: auto; 
}

.nav a {
    padding: 0 5px; 
    color: #fff;
    text-decoration: none;
    font-size: 1em;
}

.nav a:hover {
    color: #96c363;
}
/* TEXT VEDLE LOGA */
.brand-text {
    display: flex;
    flex-direction: column; /* Text pod sebou */
    line-height: 1.1;
}

.brand-title {
    color: #96c363 !important; /* První slovo zeleně */
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 3px;
}

.brand-name {
    color: white !important;
    font-size: 1.8rem; /* Pořádný název */
    font-weight: 700;
    font-family: "Playfair Display", serif;
}

/* MOBILNÍ VERZE */
@media only screen and (max-width: 992px) {
    .header {
        /* Zmenšíme vnitřní okraje na mobilu, aby zbylo víc místa pro logo */
        padding: 10px 15px !important; 
    }

    .brand-text {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .brand-name {
        /* Zabrání tomu, aby Hudec skočil pod logo */
        white-space: nowrap !important; 
        /* Pokud je text stále moc velký, o kousek ho zmenši */
        font-size: 1.1rem !important; 
    }
    
    .logo-img-main {
        /* Ujisti se, že logo má rozumnou velikost */
        height: 45px !important; 
        width: auto !important;
    }
}

/* --- Dropdown Menu --- */
.dropdown {
    position: relative;
    display: inline-block;
    padding: 0 5px; 
}

.dropdown-content {
    display: none; 
    position: absolute;
    background-color: #1d1d1d; 
    min-width: 200px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.4);
    z-index: 10;
    padding: 5px 0;
    right: 0; 
    
    opacity: 0; 
    transform: translateY(-10px); 
    transition: opacity 0.3s ease-out, transform 0.3s ease-out; 
    pointer-events: none; 
}

.dropdown:hover .dropdown-content {
    display: block;
    opacity: 1; 
    transform: translateY(0); 
    pointer-events: auto;
}

.dropdown-content a {
    color: #fff;
    padding: 12px 16px;
    text-decoration: none;
    display: block; 
    text-align: left;
    font-size: 1em; 
    margin: 0; 
    white-space: nowrap;
}

.dropdown-content a:hover {
    background-color: #333;
    color: #96c363;
}

/* ========================================================== */
/* POPTÁVKOVÉ OKNO (MODAL) - KOMPLETNÍ OPRAVA */
/* ========================================================== */

/* Pozadí přes celou obrazovku při otevření */
.poptavka-modal {
    display: none; 
    position: fixed;
    z-index: 9999;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(5px);
    overflow-y: auto;
}

/* Hlavní zelený box - nyní obsahuje úplně vše (text i form) */
.poptavka-content {
    background: #1d1d1d;
    margin: 50px auto;
    padding: 40px;
    border: 2px solid #74a74e; /* Rámeček je nyní zde */
    max-width: 650px;
    width: 90%;
    position: relative;
    color: white;
    box-sizing: border-box;
    text-align: center; /* Zarovná nadpis a popis na střed uvnitř rámu */
}

/* Úprava samotného formuláře uvnitř boxu */
.poptavka-content form {
    background: transparent; /* Odstraněno duplicitní pozadí */
    border: none;            /* Odstraněn duplicitní rámeček */
    padding: 0;
    margin: 0;
    width: 100%;
    text-align: left;        /* Pole formuláře zůstanou zarovnaná doleva pro čitelnost */
}

/* Nadpis a doprovodný text */
.poptavka-content h2 { 
    color: #96c363; 
    margin: 0 0 10px 0; 
    font-size: 2em;
}

.poptavka-content p {
    margin: 0 0 25px 0;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.5;
}

/* Zavírací křížek */
.close-poptavka {
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 35px;
    cursor: pointer;
    color: #777;
    line-height: 1;
    z-index: 10;
    transition: color 0.3s;
}

.close-poptavka:hover { color: #fff; }

/* --- Stylování polí formuláře --- */

.form-row { 
    display: flex; 
    gap: 15px; 
    margin-bottom: 15px; 
    width: 100%;
}

.poptavka-content input, 
.poptavka-content select, 
.poptavka-content textarea {
    flex: 1; 
    width: 100%;
    padding: 12px;
    background: #2a2a2a;
    border: 1px solid #444;
    color: white;
    font-family: inherit;
    box-sizing: border-box; 
    transition: border-color 0.3s;
}

.poptavka-content textarea {
    display: block;
    margin-bottom: 15px;
    resize: vertical; 
    min-height: 100px;
}

.poptavka-content input:focus, 
.poptavka-content textarea:focus,
.poptavka-content select:focus {
    border-color: #96c363;
    outline: none;
}

/* --- Příloha a Tlačítko --- */

.file-input-wrapper { margin: 15px 0; }

.file-input-wrapper label {
    display: block;
    padding: 12px;
    background: #333;
    border: 1px dashed #74a74e;
    text-align: center;
    cursor: pointer;
    transition: 0.3s;
}

.file-input-wrapper label:hover {
    background: #3a3a3a;
    border-color: #96c363;
}

.file-input-wrapper input[type="file"] {
    display: none;
}

.btn-odeslat {
    background: #74a74e;
    color: black;
    border: none;
    padding: 15px 30px;
    font-weight: bold;
    width: 100%;
    cursor: pointer;
    font-size: 1.1em;
    transition: 0.3s;
    margin-top: 10px;
}

.btn-odeslat:hover { 
    background: #96c363; 
    transform: translateY(-2px);
}

/* Responzivita pro mobilní zařízení */
@media (max-width: 600px) {
    .poptavka-content {
        padding: 25px 20px;
        margin: 20px auto;
    }
    
    .form-row {
        flex-direction: column;
        gap: 10px;
    }
}

/* ========================================================== */
/* KONTEJNERY OBSAHU */
/* ========================================================== */

.landing, .page-content {
    padding-top: 130px; 
    position: relative; 
    z-index: 1; 
    flex: 1 0 auto;
}

.original-content {
    padding: 50px 40px 120px; 
    text-align: left;
    position: relative;
    z-index: 2; 
}

.original-content h1 {
    font-size: 3em; 
    margin-bottom: 10px;
    color: #96c363; 
}

.subtitle {
    font-size: 1.1em;
    max-width: 700px;
    line-height: 1.5;
    margin-bottom: 40px;
}

.big-logo-box {
    width: 85%;
    max-width: 900px;
    border: 3px solid #74a74e;
    padding: 25px;
    margin-bottom: 40px;
    background-color: rgba(0,0,0,0.15);
}

.big-logo-box img {
    width: 100%;
    opacity: 0.9;
    display: block;
    filter: drop-shadow(0 0 35px rgba(0, 0, 0, 1));
}

/* ========================================================== */
/* STRÁNKA SLUŽBY (sluzby.html) - VIZUÁLNĚ VYLEPŠENO */
/* ========================================================== */

.services-intro-title {
    padding: 60px 20px;      /* Větší prostor pro vzdušnost */
    text-align: center;
    max-width: 600px;        /* Mírně širší pro lepší čitelnost */
    margin: 60px auto 80px;  
    background-color: rgba(0, 0, 0, 0.6); 
    border: 2px solid #74a74e; /* Výraznější ohraničení */
    box-shadow: 0 15px 35px rgba(0,0,0,0.7);
    border-radius: 4px;      /* Jemné zaoblení */
}

.services-intro-title h1 {
    font-size: 3.5em;
    color: #96c363;
    margin-top: 0;
    margin-bottom: 25px;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.services-intro-title p {
    font-size: 1.3em;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.9);
}

/* Sekce dodavatelů */
.supplier-section {
    padding: 40px;
    max-width: 1000px;
    margin: 0 auto 100px;
    background: rgba(255, 255, 255, 0.03); /* Velmi jemné podbarvení sekce */
    border-left: 4px solid #74a74e;        /* Zvýrazňující linka na boku */
}

.supplier-section h2 {
    font-size: 2.8em;
    color: #96c363; 
    margin-bottom: 30px;
    text-align: left;
}

/* Vylepšení sekce Služby */
.service-tiles-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto 80px;
}

.tile {
    padding: 35px;
    text-align: left;
    background: rgba(20, 20, 20, 0.4); /* Tmavší pozadí pro lepší čitelnost bílé */
    border: 1px solid rgba(149, 195, 99, 0.2);
    border-radius: 8px;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    position: relative;
    display: flex;
    flex-direction: column;
}

.tile:hover {
    background: rgba(29, 29, 29, 0.8);
    border-color: #96c363;
    transform: translateY(-8px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.5);
}

.tile-icon {
    font-size: 2.5em;
    margin-bottom: 15px;
}

.tile h3 {
    font-size: 1.8em;
    margin: 0 0 15px 0;
    color: #96c363;
    position: relative;
    padding-bottom: 12px;
}

.tile h3::after {
    content: "";
    position: absolute;
    bottom: 0; left: 0;
    width: 40px; height: 2px;
    background: #74a74e;
    transition: width 0.3s ease;
}

.tile:hover h3::after {
    width: 80px;
}

/* Styl pro seznamy výhod */
.tile-list {
    list-style: none;
    padding: 0;
    margin: 20px 0;
    flex-grow: 1; /* Tlačí odkaz dolů, aby byly karty srovnané */
}

.tile-list li {
    padding: 6px 0 6px 25px;
    position: relative;
    font-size: 0.95em;
    color: rgba(255, 255, 255, 0.8);
}

.tile-list li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: #96c363;
    font-weight: bold;
}

/* Odkaz do galerie */
.tile-link {
    margin-top: 20px;
    color: #96c363;
    text-decoration: none;
    font-weight: bold;
    font-size: 0.9em;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: 0.3s;
}

.tile-link:hover {
    color: white;
    padding-left: 5px;
}

.tile-schody {
    grid-column: 1 / -1; /* Schody přes celou šířku na desktopu */
}

@media (max-width: 900px) {
    .tile-schody { grid-column: auto; }
}

/* ========================================================== */
/* ROZCESTNÍK (NAŠE PRÁCE / WORK HUB) */
/* ========================================================== */

.work-hub {
    text-align: center;
}

.hub-intro h1 {
    font-size: 3em;
    color: #96c363;
    margin-bottom: 10px;
}

.hub-grid {
    display: flex;         
    flex-wrap: wrap;       
    justify-content: center; 
    gap: 20px;             
    padding: 40px;
    max-width: 1200px;
    margin: 0 auto;
}

.hub-item {
    width: calc(33.333% - 20px); 
    min-width: 300px;      
    height: 250px;
    border: 1px solid rgba(149, 195, 99, 0.3); /* Jemný zelený okraj */
    text-decoration: none;
    position: relative;
    overflow: hidden; /* Nutné pro odlesk */
    border-radius: 12px;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    background-size: cover;
    background-position: center;
    box-shadow: 0 10px 20px rgba(0,0,0,0.3);
}

/* SVĚTELNÝ ODLESK (PŘEBLEŠK) */
.hub-item::before {
    content: "";
    position: absolute;
    top: 0;
    left: -150%;
    width: 50%;
    height: 100%;
    background: linear-gradient(
        to right, 
        rgba(255, 255, 255, 0) 0%, 
        rgba(255, 255, 255, 0.3) 50%, 
        rgba(255, 255, 255, 0) 100%
    );
    transform: skewX(-25deg);
    z-index: 3;
}

/* EFEKT PŘI NAJETÍ MYŠÍ */
.hub-item:hover {
    transform: translateY(-8px) scale(1.02);
    border-color: #96c363;
    box-shadow: 0 15px 30px rgba(0,0,0,0.6), 0 0 15px rgba(150, 195, 99, 0.3);
}

/* Aktivace odlesku při hoveru */
.hub-item:hover::before {
    left: 150%;
    transition: all 0.7s ease;
}

/* ÚPRAVA OVERLAY (Ztmavení pod textem) */
.hub-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.4); /* Původní ztmavení */
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.4s ease;
    z-index: 2;
    backdrop-filter: blur(0px); /* Příprava pro rozostření */
}

.hub-item:hover .hub-overlay {
    background: rgba(116, 167, 78, 0.3); /* Ozelenění při hoveru */
    backdrop-filter: blur(2px); /* Jemné rozostření fotky při najetí */
}

.hub-overlay h3 {
    color: white;
    font-size: 1.8em;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-shadow: 2px 2px 8px rgba(0,0,0,0.8);
    transition: all 0.3s ease;
}

.hub-item:hover h3 {
    transform: scale(1.1);
    letter-spacing: 3px;
}

/* ========================================================== */
/* PŘIŘAZENÍ KONKRÉTNÍCH OBRÁZKŮ (Změň názvy souborů dle tvých aktiv) */
/* ========================================================== */

.item-kuchyne { background-image: url("assets/kuchyne_bg.jpg"); }
.item-koupelny { background-image: url("assets/koupelny_bg.jpg"); }
.item-deti { background-image: url("assets/detske_pokoje_bg.jpg"); }
.item-skrine { background-image: url("assets/skrine_bg.jpg"); }
.item-obyvak { background-image: url("assets/obyvak_bg.jpg"); }
.item-pergoly { background-image: url("assets/pergoly_bg.jpg"); }
.item-ostatni { background-image: url("assets/ostatni_bg.jpg"); }

/* ========================================================== */
/* SEKCE O NÁS - MODERNIZACE */
/* ========================================================== */

.about-hero-refined {
    height: 40vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: rgba(0,0,0,0.4);
    border-bottom: 2px solid #74a74e;
    margin-bottom: 60px;
}

.hero-overlay-text h1 {
    font-size: 3.5em;
    color: #96c363;
    margin-bottom: 10px;
    text-shadow: 2px 2px 10px rgba(0,0,0,0.5);
}

.hero-overlay-text p {
    font-size: 1.3em;
    font-style: italic;
    color: #fff;
}

.story-grid {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 60px;
    max-width: 1200px;
    margin: 0 auto 100px;
    padding: 0 40px;
    align-items: center;
}

.story-text h2 {
    font-size: 2.8em;
    color: #96c363;
    margin-bottom: 25px;
}

.story-text p {
    line-height: 1.8;
    margin-bottom: 20px;
    font-size: 1.15em;
    color: rgba(255,255,255,0.9);
}

.about-stats {
    display: flex;
    gap: 40px;
    margin-top: 50px;
    border-top: 1px solid rgba(149, 195, 99, 0.3);
    padding-top: 35px;
}

.stat-item {
    text-align: center;
}

.stat-number {
    display: block;
    font-size: 2.8em;
    font-weight: bold;
    color: #96c363;
}

.stat-label {
    font-size: 0.85em;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: rgba(255,255,255,0.7);
}

.story-image-box {
    border: 3px solid #74a74e;
    padding: 20px;
    background: rgba(255,255,255,0.03);
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

.story-img-placeholder {
    width: 100%;
    height: auto;
    display: block;
}

.about-values-refined {
    padding: 100px 40px;
    background: rgba(0,0,0,0.25);
    text-align: center;
}

.about-values-refined h2 {
    font-size: 2.5em;
    color: #96c363;
    margin-bottom: 60px;
}

.values-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    max-width: 1200px;
    margin: 0 auto;
}

.value-card {
    background: rgba(29, 29, 29, 0.7);
    padding: 50px 35px;
    border: 1px solid #74a74e;
    transition: all 0.4s ease;
}

.value-card:hover {
    background: rgba(29, 29, 29, 1);
    transform: translateY(-12px);
    box-shadow: 0 15px 35px rgba(0,0,0,0.4);
}

.value-icon-box {
    font-size: 3.5em;
    margin-bottom: 25px;
}

.value-card h3 {
    color: #96c363;
    margin-bottom: 15px;
    font-size: 1.6em;
}

.about-cta-refined {
    padding: 120px 40px;
    text-align: center;
}

.cta-box {
    max-width: 850px;
    margin: 0 auto;
    border: 2px solid #96c363;
    padding: 60px;
    background: rgba(149, 195, 99, 0.04);
}

.cta-buttons {
    margin-top: 40px;
    display: flex;
    justify-content: center;
    gap: 25px;
}

.btn-outline {
    background: transparent;
    border: 2px solid #fff;
}

.btn-outline:hover {
    background: #fff;
    color: #000;
    border-color: #fff;
}

/* ========================================================== */
/* ÚVODNÍ STRÁNKA - TLAČÍTKA A TEXT NAD GALERIÍ */
/* ========================================================== */

.services-section {
    padding: 0 40px 80px; 
}

/* OPRAVENO: Centrování pouze textu nad galerií */
.section-text-container {
    padding-top: 40px;
    text-align: center; 
    margin-bottom: 50px;
}

.section-text-container h2 {
    font-size: 2.5em; 
    color: #96c363; 
    margin-bottom: 20px;
}

.section-text-container p {
    font-size: 1.1em;
    max-width: 850px;
    margin: 0 auto; /* Centrování bloku textu */
    line-height: 1.6;
}

.gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr); 
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto 50px;
}

.gallery img {
    width: 100%;
    height: auto;
    object-fit: cover;
    border: 3px solid #74a74e; 
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
    transition: transform 0.3s ease;
}

/* TLAČÍTKA VYCENTROVANÁ NA STŘED */
.btn {
    display: table; 
    margin: 40px auto; 
    padding: 12px 50px;
    border: 2px solid #74a74e;
    color: white;
    text-decoration: none;
    font-size: 1.2em;
    transition: 0.3s;
    text-align: center;
}

.btn:hover {
    background: #74a74e;
    color: black;
}

.services-contact-section {
    padding: 80px 40px;
}

.contact-box {
    width: 100%;
    text-align: center;
}

.contact-box h2 {
    font-size: 2.5em; 
    color: #96c363; 
    margin-bottom: 30px;
}

/* ========================================================== */
/* KONTAKTNÍ STRÁNKA - REFINED */
/* ========================================================== */

.contact-hero {
    text-align: center;
    padding: 60px 20px;
    background: rgba(0,0,0,0.2);
    margin-bottom: 40px;
}

.contact-hero h1 {
    font-size: 3em;
    color: #96c363;
    margin-bottom: 10px;
}

.contact-main-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    max-width: 1200px;
    margin: 0 auto 80px;
    padding: 0 40px;
}

.contact-info-cards {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.info-card {
    background: rgba(29, 29, 29, 0.7);
    border: 1px solid #74a74e;
    padding: 25px;
    display: flex;
    flex-direction: column;
    transition: 0.3s;
}

.info-card:hover {
    background: rgba(29, 29, 29, 1);
    transform: translateX(10px);
}

.info-icon { font-size: 2em; margin-bottom: 10px; }
.info-card h3 { color: #96c363; margin-bottom: 5px; }
.info-card p a { color: #fff; text-decoration: none; font-size: 1.2em; font-weight: bold; }
.info-card span { font-size: 0.9em; color: rgba(255,255,255,0.6); margin-top: 5px; }

.billing-box {
    background: rgba(149, 195, 99, 0.05);
    border: 1px dashed #74a74e;
    padding: 25px;
    margin-bottom: 20px;
}

.billing-box h3 { color: #96c363; margin-bottom: 10px; }

.contact-map-refined {
    border: 2px solid #74a74e;
}

/* Sekce Proces */
.process-section {
    padding: 80px 40px;
    background: rgba(0,0,0,0.3);
    text-align: center;
}

.process-section h2 {
    font-size: 2.5em;
    color: #96c363;
    margin-bottom: 50px;
}

.process-steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
}

.step {
    position: relative;
    padding: 20px;
}

.step-number {
    width: 50px;
    height: 50px;
    background: #74a74e;
    color: #000;
    font-weight: bold;
    font-size: 1.5em;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
}

.step h4 { color: #96c363; margin-bottom: 10px; font-size: 1.2em; }
.step p { font-size: 0.95em; color: rgba(255,255,255,0.8); line-height: 1.5; }

/* ========================================================== */
/* GALERIE REALIZACÍ - PROJEKTY */
/* ========================================================== */

.project-gallery {
    padding: 60px 40px;
    text-align: center;
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Tři sloupce */
    gap: 20px;
    max-width: 1200px;
    margin: 40px auto;
}

.gallery-item {
    position: relative;
    aspect-ratio: 4 / 3; /* Jednotný rozměr pro všechny fotky */
    overflow: hidden;
    border: 2px solid #74a74e;
    background: #1d1d1d;
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ořízne fotku tak, aby vyplnila čtverec */
    transition: transform 0.5s ease;
}

.gallery-item:hover img {
    transform: scale(1.1); /* Jemné přiblížení při hoveru */
}

/* Text, který se objeví při najetí na fotku */
.item-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

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

.item-overlay span {
    color: #96c363;
    font-size: 1.2em;
    font-weight: bold;
    text-transform: uppercase;
    border: 1px solid #96c363;
    padding: 10px 20px;
}

/* ========================================================== */
/* NOVÉ: SJEDNOCENÍ IKON SOCIÁLNÍCH SÍTÍ (TOP BAR) */
/* ========================================================== */

.socials {
    display: flex;
    align-items: center; /* Zarovná ikony na středovou osu */
    gap: 15px;           /* Mezera mezi ikonami */
}

.socials a {
    display: flex;
    align-items: center;
}
.socials a:hover img {
    transform: translateY(-5px);
    filter: brightness(1);
}

.socials a img {
    height: 24px;        /* Pevná sjednocená výška pro Instagram i FB */
    width: auto;         /* Šířka se dopočítá podle poměru stran */
    display: block;
    transition: transform 0.3s ease;
    filter: brightness(1);
}

.social-icon.facebook {
    height: 22px;        /* Optická korekce pro Facebook, aby nepůsobil větší */
    object-fit: contain;
}

/* ========================================================== */
/* NOVÉ: STYL PRO GALERIE REALIZACÍ (PŘÍSPĚVKY S DATEM) */
/* ========================================================== */

/* Hlavní kontejner pro stránky jako Kuchyně, Skříně atd. */
.project-page-container {
    padding: 160px 20px 80px;
    max-width: 1500px;
    margin: 0 auto;
}

/* Toto pravidlo v style.css sjednotí karty napříč celým webem */
.project-page-container .gallery-card {
    height: 520px !important; /* Pevná výška karty */
    display: flex !important;
    flex-direction: column !important;
}

.project-page-container .main-photo {
    height: 300px !important; /* Pevná výška prostoru pro fotku */
    width: 100% !important;
    overflow: hidden !important;
}

.project-page-container .main-photo img {
    height: 100% !important;
    width: 100% !important;
    object-fit: cover !important; /* Ořízne fotku tak, aby vyplnila prostor */
}


.gallery-card {
    background: rgba(255, 255, 255, 0.05); 
    backdrop-filter: blur(12px);           
    -webkit-backdrop-filter: blur(12px);
    color: white;
    padding: 25px;
    border: 1px solid rgba(255, 255, 255, 0.1); 
    border-radius: 15px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); 
    cursor: pointer;
    
    /* KLÍČOVÉ ZMĚNY PRO STEJNOU VELIKOST: */
    width: 100%;            /* Vyplní sloupec gridu */
    max-width: 400px;       /* Maximální šířka jako u prvních dvou */
    height: 520px;          /* Pevná výška celé karty (uprav dle potřeby) */
    display: flex;
    flex-direction: column;
    margin: 0 auto;
    box-sizing: border-box;
    overflow: hidden;
}

/* MODERNÍ GLASSMORPHISM TLAČÍTKO NA SPODKU KARTY */
.view-link {
    display: block !important;
    background: rgba(255, 255, 255, 0.03) !important; /* Velmi jemné prosvítání */
    backdrop-filter: blur(8px) !important; /* Rozmazání pozadí pod tlačítkem */
    -webkit-backdrop-filter: blur(8px);
    padding: 15px 10px !important;
    text-align: center !important;
    color: #96c363 !important; /* Tvoje zelená */
    text-decoration: none !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
    font-size: 0.75rem !important;
    font-weight: bold !important;
    
    /* Přesné napojení na spodní část karty */
    margin: 20px -20px -20px -20px !important; 
    border-radius: 0 0 15px 15px !important;
    border-top: 1px solid rgba(150, 195, 99, 0.15) !important;
    
    transition: all 0.4s ease !important;
}

/* VÝRAZNÝ EFEKT PŘI NAJETÍ MYŠÍ */
.gallery-card:hover {
    transform: translateY(-10px) scale(1.02);   /* Karta se nadzvedne a mírně zvětší */
    background: rgba(255, 255, 255, 0.12);      /* Sklo se více "rozsvítí" */
    border-color: #96c363;                      /* Rámeček se přebarví na tvou zelenou */
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6), 
                0 0 20px rgba(150, 195, 99, 0.4); /* Přidá zelenou záři (glow) kolem karty */
}

/* Úprava textů uvnitř, aby na tmavém skle zářily */
.gallery-card:hover .full-date {
    color: white; /* Datum se při hoveru přepne na čistě bílou pro kontrast */
    text-shadow: 0 0 10px rgba(150, 195, 99, 0.8);
}

.gallery-card:hover .link-text {
    color: white;
    letter-spacing: 1px; /* Text se mírně roztáhne */
    transition: 0.3s;
}

/* Aby fotka uvnitř taky reagovala */
.gallery-card:hover .main-photo img {
    filter: brightness(1.1); /* Fotka se mírně prosvětlí */
    transform: scale(1.03);
    transition: 0.4s;
}

/* Příprava pro odlesk na kartě */
.gallery-card {
    position: relative;
    overflow: hidden; /* Důležité: aby odlesk nevyjel ven z karty */
}

/* Samotný efekt odlesku */
.gallery-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%; /* Začíná mimo kartu vlevo */
    width: 50%;
    height: 100%;
    background: linear-gradient(
        to right, 
        rgba(255, 255, 255, 0) 0%, 
        rgba(255, 255, 255, 0.2) 50%, 
        rgba(255, 255, 255, 0) 100%
    );
    transform: skewX(-25deg); /* Naklonění odlesku */
    transition: none;
    z-index: 2;
}

/* Animace odlesku při hoveru */
.gallery-card:hover::before {
    left: 150%; /* Přejede celou kartu doprava */
    transition: all 0.6s ease;
}

/* EFEKT PŘI NAJETÍ MYŠÍ NA CELOU KARTU */
.gallery-card:hover .view-link {
    background: rgba(150, 195, 99, 0.1) !important; /* Lehké zezelenání při hoveru */
    letter-spacing: 3px !important; /* Text se jemně roztáhne */
    color: #fff !important; /* Text zbělá */
}
/* Hlavička karty s datem */
.card-header { 
    display: flex; 
    align-items: center; 
    gap: 20px; 
    margin-bottom: 20px; 
}

/* Zelené kolečko s číslem dne */
.date-circle {
    background: #96c363;
    color: white;
    width: 55px; 
    height: 55px;
    border-radius: 50%;
    display: flex; 
    align-items: center; 
    justify-content: center;
    font-weight: bold; 
    font-family: sans-serif;
}

/* Velké datum vedle kolečka */
.full-date { 
    color: #96c363; 
    font-size: 1.8em; 
    font-weight: bold; 
}

/* Hlavní náhledová fotografie */
.main-photo img { 
    width: 100%; 
    height: 300px;       /* Tady si nastavíš výšku náhledu (např. 250px až 350px) */
    object-fit: cover;   /* DŮLEŽITÉ: Obrázek se ořízne, aby vyplnil prostor a nedeformoval se */
    display: block; 
    border-radius: 2px;
    transition: transform 0.3s ease;
}

/* Patička karty s popisky */
.card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px solid #eee;
    font-size: 0.9em;
    color: #777;
}

.link-text { 
    color: #96c363; 
    font-weight: bold; 
}

/* ========================================================== */
/* NOVÉ: LIGHTBOX SYSTÉM (PROHLÍŽEČ FOTEK) */
/* ========================================================== */

.lightbox {
    display: none; /* Schované, dokud se neklikne na kartu */
    position: fixed;
    z-index: 9999;
    inset: 0;
    background: rgba(18, 17, 15, 0.85);
    backdrop-filter: blur(15px); 
    -webkit-backdrop-filter: blur(15px);
    overflow-y: auto;
    padding: 40px 20px;
}

/* Kontejner pro fotky v prohlížeči */
.lightbox-content {
    display: grid;
    /* Zvětšili jsme minimální šířku na 400px, aby fotky byly dominantnější */
    grid-template-columns: repeat(3, 1fr);
    gap: 15px; /* Větší mezery pro vzdušnější design */
    padding: 20px;
    max-width: 90%;
    margin: 0 auto;
    justify-items: center;
}

.lightbox-content img {
    width: 100%;
    height: 300px;              /* Sjednocená výška pro čistou mřížku */
    object-fit: cover;
    border-radius: 10px;        /* Zaoblené rohy ladí se "skleněným" stylem */
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    filter: brightness(0.85) grayscale(0.2); /* V klidu jsou fotky trochu utlumené */
}

/* EFEKT PŘI NAJETÍ NA PODFOTKU */
.lightbox-content img:hover {
    transform: scale(1.04) translateY(-5px); /* Jemné vyskočení */
    filter: brightness(1.1) grayscale(0);    /* Rozzáření a plné barvy */
    border-color: #96c363;                  /* Zelený rámeček */
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.7), 
                0 0 20px rgba(150, 195, 99, 0.4); /* Zelená záře */
}

/* Volitelný detail: Pokud chceš, aby i podfotky měly šikmý odlesk */
.lightbox-content {
    position: relative;
}

/* Responzivita pro menší monitory a mobily */
@media (max-width: 1024px) {
    .lightbox-content {
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    }
    .lightbox-content img {
        height: 350px;
    }
}

@media (max-width: 600px) {
    .lightbox-content {
        grid-template-columns: 1fr; /* Na mobilu jedna velká fotka pod sebou */
        padding: 15px;
    }
    .lightbox-content img {
        height: auto; /* Na mobilu zachovat přirozený poměr */
        max-height: 500px;
    }
}

/* Skrytý kontejner pro doplňkové fotky v HTML */
.hidden-photos { 
    display: none; 
}

/* Oprava pro Full-screen modal */
#fullScreenModal {
    display: none; /* JavaScript to změní na flex */
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    background: rgba(18, 17, 15, 0.85); 
    backdrop-filter: blur(15px); 
    -webkit-backdrop-filter: blur(15px);
    z-index: 9999 !important; /* Musí být vyšší než cokoli jiného */
    cursor: pointer;
}

#fullScreenImage {
    max-width: 90vw;
    max-height: 90vh;
    margin: auto;
    display: block;
    object-fit: contain;
    border: 2px solid rgba(255,255,255,0.2);
    box-shadow: 0 0 50px rgba(0,0,0,1);
}

/* Křížek pro zavření */
.close-lightbox {
    position: absolute;
    top: 20px;
    right: 30px;
    color: white;
    font-size: 50px;
    font-weight: bold;
    cursor: pointer;
    z-index: 10000;
}

#project-container {
    display: grid !important;
    /* Vytvoří 3 sloupce, ale pokud jich je méně, vycentruje je */
    grid-template-columns: repeat(auto-fit, minmax(350px, 400px)); 
    gap: 30px;
    max-width: 1300px;
    margin: 0 auto;
    justify-content: center; /* Klíčové pro vycentrování alb na středu */
    counter-reset: project-counter;
}


/* EXTRÉMNÍ ZMENŠENÍ LOGA V KOLEČKU */
.date-circle {
    width: 32px !important;            /* Kompaktnější kolečko */
    height: 32px !important;
    background-color: #96c363 !important;
    border-radius: 50%;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 0 !important;
    box-shadow: 0 0 10px rgba(150, 195, 99, 0.4);
    overflow: hidden;
}

.custom-circle-icon {
    width: 18px !important;            /* Ideální malá velikost */
    height: 18px !important;
    object-fit: contain !important;
    /* Tato kombinace filtrů udělá z čehokoliv čistě bílou ikonu */
    filter: brightness(0) invert(1) contrast(200%) !important;
    display: block !important;
    opacity: 1 !important;
}
/* ========================================================== */
/* VYLEPŠENÝ VZHLED ŘAZENÍ (SORT) */
/* ========================================================== */

/* HLAVNÍ KONTEJNER - Teď drží oba prvky pohromadě */
.sort-container {
    display: flex !important;
    justify-content: space-between !important; /* ROZHODUJÍCÍ: Button doleva, řazení doprava */
    align-items: center !important; /* Srovná je na středovou osu */
    width: 100% !important;
    max-width: 1300px !important;
    margin: 20px auto 40px !important; /* Odsazení celého řádku */
    padding: 0 20px !important;
    box-sizing: border-box !important;
    position: relative !important;
}

/* TVŮJ BACK BUTTON - Upravený pro vložení do kontejneru */
.back-btn-modern {
    display: inline-flex !important; /* Změna na flex pro lepší centrování */
    align-items: center !important;
    margin: 0 !important; /* Resetujeme marginy, o pozici se stará kontejner */
    color: #96c363 !important;
    text-decoration: none !important;
    font-weight: bold !important;
    text-transform: uppercase;
    font-size: 0.85rem;
    transition: all 0.3s ease;
}

.back-btn-modern:hover {
    color: white !important;
    transform: translateX(-5px); /* Jemný efekt při najetí */
}

/* BLOK SE SELECTEM - Obalíme label a select, aby držely spolu vpravo */
.sort-controls-right {
    display: flex !important;
    align-items: center !important;
    gap: 15px;
}

/* TVŮJ LABEL */
.sort-container label {
    font-family: "Playfair Display", serif;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9rem;
    letter-spacing: 1px;
    margin: 0 !important; /* Reset marginu */
}

/* TVŮJ SELECT - Zůstává beze změny, jen přidána jedna pojistka */
#sort-select {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(150, 195, 99, 0.3);
    color: white;
    padding: 10px 20px;
    border-radius: 8px;
    font-family: "Playfair Display", serif;
    cursor: pointer;
    outline: none;
    transition: all 0.3s ease;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%2396c363' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 15px center;
    padding-right: 45px;
    margin: 0 !important;
}

#sort-select:hover {
    border-color: #96c363;
    background-color: rgba(150, 195, 99, 0.1);
    box-shadow: 0 0 15px rgba(150, 195, 99, 0.2);
}

/* Úprava možností (options) uvnitř selectu */
#sort-select option {
    background: #1d1d1d; /* Tmavé pozadí pro seznam */
    color: white;
    padding: 10px;
}


/* Kontejner pro nadpis s efektem skla */
.category-badge {
    position: absolute !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    background: rgba(255, 255, 255, 0.03) !important;
    backdrop-filter: blur(10px);
    padding: 5px 30px !important;
    border-radius: 50px !important;
    border: 1px solid rgba(150, 195, 99, 0.2) !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2) !important;
}

/* Samotný text nadpisu */
.category-title {
    margin: 0 !important;
    font-family: "Playfair Display", serif !important;
    color: #fff !important;
    font-size: 1.2rem !important;
    text-transform: uppercase !important;
    letter-spacing: 4px !important; /* Elegantní rozestupy */
    font-weight: 600 !important;
    
    /* Jemná zelená záře */
    text-shadow: 0 0 10px rgba(150, 195, 99, 0.5) !important;
}

/* Úprava pro mobily, aby se to nekrylo s tlačítky */
@media (max-width: 900px) {
    .category-badge {
        position: relative !important;
        left: 0 !important;
        transform: none !important;
        margin: 10px auto !important;
        width: fit-content !important;
    }
    
    .sort-container {
        flex-direction: column !important;
        height: auto !important;
        gap: 15px !important;
    }
}
/* ========================================================== */
/* VYLEPŠENÝ VZHLED STRÁNKOVÁNÍ */
/* ========================================================== */

.pagination-container {
    display: flex !important;
    justify-content: center;
    align-items: center;
    gap: 40px; /* Větší mezera pro vzdušnost */
    margin: 80px auto 50px;
    width: 100%;
    padding: 30px 0;
    border-top: 1px solid rgba(150, 195, 99, 0.15); /* Jemná dělící linka */
}

.pag-btn {
    background: rgba(255, 255, 255, 0.08); /* Trochu výraznější základ */
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(150, 195, 99, 0.6); /* Jasnější zelená linka v základu */
    color: #96c363;
    padding: 8px 15px;
    cursor: pointer;
    border-radius: 50px;
    font-family: "Playfair Display", serif;
    font-weight: 600;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.4s ease;
    opacity: 1; /* Základní stav pro aktivní tlačítko */
    white-space: nowrap !important;
}

/* EFEKT PŘI NAJETÍ NA AKTIVNÍ TLAČÍTKO */
.pag-btn:hover:not(:disabled) {
    background: #96c363;
    color: #1d1d1d;
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(150, 195, 99, 0.4);
}
/* Aktivní proklik (stisknutí) */
.pag-btn:active:not(:disabled) {
    transform: translateY(-1px);
}

/* Vzhled čísla stránky */
.page-numbers {
    font-family: "Playfair Display", serif;
    font-size: 1.1rem;
    color: white;
    font-weight: 400;
    letter-spacing: 1px;
    position: relative;
    padding: 5px 15px;
}

.page-numbers::after {
    content: "";
    position: absolute;
    bottom: -5px;
    left: 50%;
    transform: translateX(-50%);
    width: 30px;
    height: 2px;
    background: #96c363;
    border-radius: 2px;
}

/* STAV PRO VYPNUTÉ TLAČÍTKO (když nejde jít dál/zpět) */
.pag-btn:disabled {
    opacity: 0.35 !important; /* Viditelnější než předtím, ale stále utlumené */
    cursor: default; /* Šipka místo ruky dává najevo, že nejde kliknout */
    border-color: rgba(255, 255, 255, 0.2); /* Šedobílý rámeček místo zeleného */
    color: rgba(255, 255, 255, 0.5); /* Vybledlý text */
    background: rgba(255, 255, 255, 0.03); /* Minimální podbarvení */
    transform: none !important; /* Zakáže nadzvednutí při najetí */
    box-shadow: none !important; /* Žádná záře */
}
/* ========================================================== */
/* VYLEPŠENÝ FOOTER */
/* ========================================================== */

.footer {
    background: linear-gradient(to bottom, #1d1d1d, #141414);
    color: #fff;
    padding: 80px 40px 30px;
    border-top: 2px solid #74a74e;
    margin-top: auto; /* Tlačí footer dolů u krátkých stránek */
}

.footer-container {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.5fr 1fr 1.5fr; /* Rozdělení na 3 nestejné sloupce */
    gap: 60px;
}

.footer-about p {
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.6;
    margin-top: 20px;
    max-width: 300px;
}

.footer-logo-img {
    max-width: 220px;
    height: auto;
}

.footer h3 {
    color: #96c363;
    font-size: 1.4em;
    margin-bottom: 25px;
    position: relative;
    padding-bottom: 10px;
}

/* Linka pod nadpisem v patičce */
.footer h3::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 40px;
    height: 2px;
    background: #74a74e;
}

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

.footer ul li {
    margin-bottom: 12px;
}

.footer a {
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    transition: all 0.3s ease;
}

.footer a:hover {
    color: #96c363;
    padding-left: 5px; /* Jemný pohyb při hoveru */
}

.footer-contact p {
    margin-bottom: 10px;
    color: rgba(255, 255, 255, 0.8);
}

.footer-social-links {
    margin-top: 25px;
    display: flex;
    gap: 15px;
}

.footer-social-links img {
    width: 28px;
    height: 28px;
    transition: transform 0.3s ease;
    filter: brightness(0.8);
}

.footer-social-links a:hover img {
    transform: translateY(-5px);
    filter: brightness(1);
}

.footer-bottom {
    margin-top: 60px;
    padding-top: 25px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    text-align: center;
    font-size: 0.85em;
    color: rgba(255, 255, 255, 0.4);
}

/* --- RESPONZIVITA PRO FOOTER --- */
@media (max-width: 992px) {
    .footer-container {
        grid-template-columns: 1fr 1fr;
        gap: 40px;
    }
}

@media (max-width: 600px) {
    .footer {
        padding: 60px 20px 20px;
    }
    .footer-container {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .footer h3::after {
        left: 50%;
        transform: translateX(-50%);
    }
    .footer-about p {
        max-width: 100%;
    }
    .footer-social-links {
        justify-content: center;
    }
    .footer a:hover {
        padding-left: 0;
    }
}

/* ========================================================== */
/* RESPONZIVITA (MEDIA QUERIES) - AKTUALIZOVANÁ SEKCE */
/* ========================================================== */

@media (max-width: 992px) {
    /* Rámeček na mobilu/tabletu raději zrušíme, aby nezabíral místo */
    body { border: none; }

    .top-bar, .header {
        position: static; /* Lišta přestane být fixní pro více místa */
        transform: none !important;
        transition: none;
        padding: 15px 20px;
        height: auto;
        flex-direction: column;
        width: 100%;
    }
    
    .logo-section { 
        width: 100%; 
        justify-content: center; 
        margin-bottom: 15px;
    }
    
    .company-name {
    font-size: 17px;
    font-weight: 600;
    margin-left: 15px; /* Přidána mezera od loga */
    white-space: nowrap; 
}

    .logo { width: 140px; }
    
    .nav { 
        width: 100%; 
        text-align: center; 
        justify-content: center; 
        margin-top: 10px;
        flex-wrap: wrap;
        gap: 15px;
        margin-left: 0; /* Centrování menu */
    }

    /* Zobrazení dropdown menu na mobilu */
    .dropdown-content {
        position: static;
        width: 100%;
        opacity: 1;
        transform: none;
        pointer-events: auto;
        box-shadow: none;
        border: 1px solid #333;
        margin-top: 5px;
        display: block; /* V mobilním režimu může být rozbalené nebo ovládané JS */
    }
    
    .landing, .page-content { padding-top: 20px; }
    
    /* Přechod na jeden sloupec u většiny gridů */
    .story-grid, .values-grid, .hub-grid, .contact-main-grid, .process-steps, .service-tiles-grid { 
        grid-template-columns: 1fr; 
    }
    
    .gallery { 
        grid-template-columns: repeat(2, 1fr); 
        gap: 20px; 
    }

    /* Úprava samotné karty */
.gallery-card {
    background: white;
    width: 100%; /* Karta vyplní svůj sloupec v gridu */
    margin: 0;   /* Odstraníme vnější okraje, o mezeru se stará 'gap' v gridu */
    display: flex;
    flex-direction: column;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}
    
    .footer-content { 
        flex-direction: column; 
        text-align: center; 
        align-items: center;
    }
    
    .footer-links-grid { 
        grid-template-columns: repeat(2, 1fr); 
        margin: 30px 0; 
        max-width: 100%; 
        margin-left: 0;
        gap: 20px;
    }
    
    .footer-logo-img { width: 200px; height: auto; }

    .hub-item { width: 100%; max-width: 400px; }
    
    .cta-buttons { flex-direction: column; }
    .about-stats { justify-content: center; flex-wrap: wrap; }

    .info-card:hover { transform: none; }
    .step { border-bottom: 1px solid rgba(149, 195, 99, 0.2); padding-bottom: 30px; }
    .step:last-child { border-bottom: none; }
}



@media (max-width: 768px) {
    .hub-item { width: 100%; }
    .poptavka-content { width: 95%; margin: 20px auto; padding: 20px; }
    .form-row { flex-direction: column; gap: 10px; }
}

@media (max-width: 600px) {
    .gallery { grid-template-columns: 1fr; }
    .top-bar { flex-direction: column; padding: 10px; height: auto; }
    .nav { flex-direction: column; gap: 10px; margin-top: 10px; }
    .services-tiles-grid { grid-template-columns: 1fr; grid-gap: 30px 0; }
    .tile-schody { grid-column: 1 / 2; }
    .original-content h1 { font-size: 2em; }
    .big-logo-box { width: 100%; padding: 10px; }
}
/* ========================================================== */
/* NOVÉ STYLY PRO ŠIPKY A FULLSCREEN (PŘIDÁNO) */
/* ========================================================== */

.nav-arrow {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    color: white;
    font-size: 60px;
    font-weight: bold;
    cursor: pointer;
    padding: 20px;
    z-index: 10001;
    transition: 0.3s;
    text-shadow: 0 0 10px rgba(0,0,0,0.8);
    user-select: none;
}

.nav-arrow:hover { color: #96c363; }
.prev-arrow { left: 10px; }
.next-arrow { right: 10px; }

.fullscreen-modal {
    display: none;
    position: fixed;
    top: 0; 
    left: 0;
    width: 100%; 
    height: 100%;
    background: rgba(0,0,0,0.95);
    z-index: 10000;
    align-items: center;
    justify-content: center;
}

@media (max-width: 992px) {
    /* Oprava bílého místa nahoře po zrušení fixního menu */
    .landing, .page-content { 
        padding-top: 20px !important; 
    }

    /* Oprava loga a názvu */
    .company-name {
        margin-left: 10px !important;
        font-size: 1.2rem;
    }

    /* Galerie na tabletech - 2 sloupce jsou čitelnější než 3 nebo 1 */
    .gallery, .gallery-grid, .project-container {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 600px) {
    /* Na úplně malých mobilech vše do jednoho sloupce */
    .gallery, .gallery-grid, .project-container, .footer-container {
        grid-template-columns: 1fr !important;
    }
    
    /* Zmenšení nadpisů, aby se nelámaly divně */
    .original-content h1, .services-intro-title h1 {
        font-size: 1.8rem !important;
    }

    /* Karty projektů - zrušení fixní výšky, aby se text vešel */
    .gallery-card {
        height: auto !important;
        min-height: 450px;
    }
}

/* Oprava pro tablety (šířka pod 1024px) */
@media (max-width: 1024px) {
    #project-container {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important; /* Dva sloupce */
        gap: 12px !important; /* Mezera mezi kartami */
        
        /* Zmenšení celkové šířky a vycentrování */
        width: 92% !important; 
        max-width: 500px !important; /* Aby to na větších mobilech nebylo moc široké */
        margin: 0 auto !important; /* Tohle to hodí na střed */
        padding: 20px 0 !important;
    }

    .gallery-card {
        /* Zrušíme fixní výšku, aby se karta přizpůsobila obsahu */
        height: auto !important;
        min-height: 480px !important;
    }

    .main-photo img {
        height: 250px !important; /* Na tabletu stačí menší náhled */
    }
}

/* Oprava pro mobily (šířka pod 600px) */
@media (max-width: 600px) {
    #project-container {
        /* Na mobilu musí být jedna fotka přes celou šířku */
        grid-template-columns: 1fr !important;
        gap: 25px !important;
    }

/* SKLENĚNÁ KARTA - celkové zmenšení */
    .gallery-card {
        width: 100%;
        margin: 0 !important;
        padding: 8px !important;
        box-sizing: border-box;
        border-radius: 12px !important;
        
        /* Skleněný efekt */
        background: rgba(255, 255, 255, 0.12) !important;
        backdrop-filter: blur(10px) !important;
        -webkit-backdrop-filter: blur(10px) !important;
        border: 1px solid rgba(255, 255, 255, 0.15) !important;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2) !important;
    }

/* Úprava textu uvnitř skleněné karty, aby byl lépe čitelný */
.gallery-card .full-date {
    color: #ffffff !important; /* Bílá barva textu na skle vypadá nejlépe */
    text-shadow: 0 2px 4px rgba(0,0,0,0.5) !important;
}

.gallery-card .link-text {
    color: #e0e0e0 !important;
    font-weight: 600 !important;
}

/* Efekt při najetí myší (na PC) */
.gallery-card:hover {
    transform: translateY(-5px) !important;
    background: rgba(255, 255, 255, 0.25) !important;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.4) !important;
}
}

/* ========================================================== */
/* KONEČNÁ OPRAVA MOBILNÍHO VZHLEDU */
/* ========================================================== */
@media (max-width: 992px) {
    /* Logo a Hamburger do jedné linky */
    .header {
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
        position: relative !important;
        /* PRVNÍ ČÍSLO: nahoře/dole (10px) */
        /* DRUHÉ ČÍSLO: vpravo (40px) - tohle ji posune od kraje */
        /* ČTVRTÉ ČÍSLO: vlevo (20px) */
        padding: 10px 40px 10px 20px !important; 
        height: auto !important;
        width: 100% !important;
        box-sizing: border-box !important;
        top: 100%;
    }

    /* Vynucení zobrazení loga */
    .logo-section {
        display: flex !important;
        margin: 0 !important;
        width: auto !important;
    }

    .brand-text {
        display: flex !important;
        flex-direction: column !important;
        text-align: left !important;
    }

    .nav {
        display: none; 
        flex-direction: column !important;
        align-items: center !important;
        position: absolute !important;
        top: 64px !important; 
        left: 0 !important;
        width: 100% !important;
        /* Efekt skla */
        background: rgba(26, 26, 26, 0.98) !important; 
        backdrop-filter: blur(10px);
        z-index: 9999 !important;
        padding: 0 !important;
        margin: 0 !important;
        border-bottom: 3px solid #74a74e !important;
    }

    .nav a {
        display: block !important;
        width: 100% !important;
        padding: 18px 0 !important;
        color: #ffffff !important;
        text-transform: uppercase;
        letter-spacing: 2px;
        font-size: 0.9rem;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
        transition: 0.3s;
    }

    /* Skrytí té obří mezery, co tam zbyla */
    .landing, .page-content {
        padding-top: 20px !important;
    }

   /* Základní stav podmenu na mobilu - schované */
    .dropdown-content {
        position: static !important;
        display: none !important; /* Natvrdo schovat */
        background: rgba(149, 195, 99, 0.05) !important;
        width: 100% !important;
        padding: 0 !important;
        transition: all 0.3s ease;
    }

    /* Stav, když je dropdown AKTIVNÍ (po kliknutí) */
    .dropdown.active .dropdown-content {
        display: block !important; /* Ukáže se */
    }

    /* Otočení šipky při otevření (dobrý detail pro uživatele) */
    .dropdown.active > a {
        color: #96c363 !important;
    }

   /* TOTO JE KLÍČOVÉ: Vynucené zobrazení při aktivaci */
    .nav.active {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        flex-direction: column !important;
        position: absolute !important;
        top: 64px !important; /* Musí odpovídat výšce hlavičky */
        left: 0 !important;
        width: 100% !important;
        background: #1a1a1a !important;
        z-index: 99999 !important;
        padding: 20px 0 !important;
    }
}

/* EXTRÉMNÍ VYNUZENÍ HAMBURGERU */
@media only screen and (max-width: 992px) {
    .menu-toggle {
        display: flex !important; /* Musí tam být !important */
        visibility: visible !important;
        opacity: 1 !important;
        width: 40px !important;
        height: 40px !important;
        position: relative !important;
        z-index: 99999 !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        cursor: pointer !important;
    }

    .menu-toggle span {
        display: block !important;
        width: 30px !important;
        height: 3px !important;
        background-color: #ffffff !important; /* Bílá barva čárek */
        margin: 4px 0 !important;
    }
}

/* Tato část zajistí fixní pozadí na mobilu */
@media only screen and (max-width: 992px) {
    body {
        /* Vypneme původní pozadí, aby se nehýbalo */
        background: #1a1a1a !important; 
    }

    body::before {
        content: "";
        position: fixed; /* Klíč pro "locknutí" pozadí */
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        /* Cesta k tvému obrázku dřeva */
        background-image: url('assets/wood_bg.jpg'); 
        /* Nastavení stejného měřítka jako na PC */
        background-size: cover; 
        background-position: center center;
        background-repeat: no-repeat;
        /* Vrstva musí být pod vším ostatním */
        z-index: -1; 
        /* Volitelné: jemné ztmavení, aby text lépe vynikl */
        filter: brightness(0.7);
    }
}

@media only screen and (max-width: 992px) {
    /* HLAVNÍ KONTEJNER */
    #project-container {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important; 
        width: 100% !important;
        padding: 5px 0 !important; /* Méně místa nahoře/dole */
        gap: 12px !important;
    }

    /* KARTA - Kompaktnější verze pro malé displeje */
    .gallery-card {
        width: 90% !important; /* Trochu širší na velmi malém displeji */
        max-width: 310px !important; 
        margin: 0 auto !important;
        /* Minimální padding pro úsporu místa */
        padding: 10px 10px 6px 10px !important; 
        
        background: rgba(255, 255, 255, 0.1) !important;
        backdrop-filter: blur(15px) !important;
        -webkit-backdrop-filter: blur(15px) !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
        border-radius: 15px !important;
    }

    /* OBRÁZEK - Snížení na 160px pro rozměr 375x667 */
    .gallery-card .main-photo img {
        width: 100% !important;
        height: 300px !important; /* Klíčové zmenšení pro malý displej */
        object-fit: cover !important; 
        border-radius: 8px !important;
        margin-bottom: 0 !important;
    }

    /* TEXTY - Datum a fajfka blíž k sobě */
    .gallery-card .full-date {
        color: #b1cf86 !important;
        font-size: 1rem !important;
        font-weight: 700 !important;
        margin: 0 0 5px 5px !important;
    }

    /* SPODNÍ ČÁST - Odstranění "díry" pod fotkou */
    .gallery-card .link-text {
        color: #b1cf86 !important;
        font-size: 0.9rem !important;
        margin-top: 5px !important; /* Minimální mezera pod fotkou */
        padding-top: 5px !important;
        border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
        display: block !important;
    }

    /* STRÁNKOVÁNÍ - Aby se vešlo na šířku 375px */
    .pagination-container {
        display: flex !important;
        justify-content: center !important;
        gap: 5px !important;
        padding: 15px 5px !important;
    }

    .pag-btn {
        padding: 6px 10px !important;
        font-size: 12px !important;
    }
}

/* Styl pro vyskakovací okno */
.modal-overlay {
    display: flex; /* Změní se na none v JS pro zavření */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 9999;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(5px);
}

.modal-content {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 30px;
    border-radius: 20px;
    max-width: 450px;
    width: 90%;
    text-align: center;
    color: white;
    position: relative;
    box-shadow: 0 15px 35px rgba(0,0,0,0.5);
}

.close-btn {
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 30px;
    cursor: pointer;
    color: #b1cf86; /* Zelená z tvého loga */
}

.modal-content h2 { color: #b1cf86; margin-bottom: 20px; }

.modal-contacts {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin: 20px 0;
}

.contact-link {
    background: #b1cf86;
    color: #1a1a1a;
    padding: 10px 20px;
    border-radius: 10px;
    text-decoration: none;
    font-weight: bold;
}

.modal-note { font-size: 0.85rem; opacity: 0.8; margin-top: 15px; }