/* ============================================================
   ZÁKLAD / RESET
   - Minimalistický reset, aby styly vypadaly všude podobně.
   - Úmyslně jednoduché kvůli přehlednosti a snadné úpravě.
============================================================ */
*, *::before, *::after { box-sizing: border-box; } /* Okraje a padding započítávají šířku/výšku */
html, body { margin: 0; padding: 0; }             /* Zrušení defaultních okrajů dokumentu */
img { max-width: 100%; height: auto; display: block; } /* Obrázky jsou responzivní */
a { color: inherit; text-decoration: none; }       /* Odkazy dědí barvu, bez podtržítka (změňte dle brandu) */
ul { margin: 0; padding: 0; list-style: none; }    /* Reset seznamů */
html { scroll-behavior: smooth; }                  /* Plynulé rolování při kliknutí na kotvy */

/* ============================================================
   PROMĚNNÉ TÉMATU
   - Změnou barev níže změníte celé UI.
============================================================ */
:root{
    --bg: #0a0e14;          /* Základní pozadí (tmavé) */
    --bg-2:#0f1420;         /* Přechodové pozadí */
    --text:#e8f1ff;         /* Hlavní barva textu */
    --muted: #c6deff;        /* Tlumený text (popisy) */

    --primary:#63ffd1;      /* Hlavní akcent (mint/cyan) */
    --accent:#4da3ff;       /* Druhý akcent (chladná modrá) */
    --hot:#ff7aa8;          /* Doplňkový růžový akcent */

    --glass: rgba(255,255,255,0.06); /* „Skleněné“ pozadí pro prvky */
    --border: rgba(255,255,255,0.12);/* Jemné okraje panelů */
    --radius:18px;                        /* Zaoblení karet */
    --shadow: 0 10px 30px rgba(0,0,0,0.35);/* Stín karet */
    --maxw: 1100px;                        /* Max šířka kontejneru */
}

/* Světlý režim (pokud systém preferuje světlo) */
/*
@media (prefers-color-scheme: light){
    :root{
        --bg:#f6f9ff;
        --bg-2:#edf3ff;
        --text:#0f1420;
        --muted: #c6dfff;
        --glass: rgba(0,0,0,0.06);
        --border: rgba(0,0,0,0.12);
    }
}
*/

/* ============================================================
   ZÁKLADNÍ TYPOGRAFIE A POZADÍ
============================================================ */
body{
    font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial; /* Základní fonty */
    line-height: 1.6;                 /* Příjemnější řádkování */
    color: var(--text);               /* Barva textu */
    background:                        /* Vícevrstvé pozadí: dva radiální odlesky + gradient */
            radial-gradient(1200px 800px at 80% -10%, rgba(99,255,209,0.12), transparent 50%),
            radial-gradient(900px 600px at 20% 10%, rgba(77,163,255,0.12), transparent 50%),
            linear-gradient(180deg, var(--bg), var(--bg-2));
    -webkit-font-smoothing: antialiased; /* Vyhlazení textu */
    text-rendering: optimizeLegibility;  /* Lepší čitelnost */
}

.container{ width:min(var(--maxw), 92vw); margin-inline:auto; } /* Pevná max šířka + responsivita */

/* ============================================================
   HLAVIČKA / NAVIGACE
============================================================ */
.site-header{
    position: sticky; top:0; z-index:1000; /* Lepí se nahoře při scrollu, z-index nad obsahem */
    backdrop-filter: saturate(160%) blur(10px); /* Skleněný efekt (když prohlížeč podporuje) */
    background: linear-gradient(180deg, rgba(0,0,0,0.45), transparent); /* Přechod pozadí */
    border-bottom: 1px solid transparent; /* Jemná linka dole (po „přilepení“ ztmavne) */
    transition: border-color .3s ease, background .3s ease; /* Plynulé změny při scrollu */
}
.site-header.is-stuck{ background: rgba(0,0,0,0.45); border-color: var(--border); } /* Stav po scrollu */

.header-inner{
    display:flex; align-items:center; justify-content:space-between; /* Rozložení loga a navigace */
    padding: 14px 0; /* Vertikální vnitřní odsazení */
}

.logo{ /* Odkaz s logem a názvem firmy */
    display:inline-flex; align-items:center; gap:12px;
    font-family: Orbitron, Inter, system-ui, sans-serif; font-weight:800; letter-spacing:.06em;
}
.logo-core{ /* Badge s iniciálami RS */
    width:40px; height:40px; display:grid; place-items:center; border-radius:12px;
    background: linear-gradient(135deg, var(--primary), var(--accent)); /* Barevný přechod */
    color:#0a0d14; box-shadow: 0 0 30px rgba(99,255,209,.5), 0 0 30px rgba(77,163,255,.4) inset; /* Glow efekt */
    font-weight:800;
}
.logo-text{ opacity:.95; } /* Lehké ztlumení textu, aby badge vynikl */
.logo .accent{ color: var(--primary); } /* Zvýraznění slova STAV akcentem */

.nav ul{ display:flex; gap:22px; } /* Horizontální menu s mezerami */
.nav a{
    padding:8px 12px; border-radius:999px; color:var(--muted);
    transition: color .2s ease, background .2s ease, box-shadow .2s ease;
}
.nav a:hover, .nav a:focus-visible{
    color:var(--text); background:var(--glass); box-shadow:0 0 0 1px var(--border);
}

/* Tlačítko hamburgeru – na desktopu skryté */
.menu-toggle{
    display:none;
    background:none;
    border:none;
    width:42px;
    height:42px;
    border-radius:12px;
    padding:8px;
    cursor:pointer;

    /* ↓ aby byly čárky pod sebou a uprostřed */

    align-items:center;
    justify-content:center;
    flex-direction:column;
    gap:6px;
}
.menu-toggle .bar{
    /* ↓ krátké, aby se vešly do tlačítka */
    width:26px;            /* dříve 120px → proto byla vidět „jen jedna“ */
    height:2px;
    background:var(--text);
    border-radius:2px;
    transition: transform .3s ease, opacity .3s ease;
}

@media (max-width: 820px){ /* Mobilní režim menu */
    .menu-toggle{ display:flex; } /* Na mobilech zobrazit hamburger */
    .nav{
        position:absolute;
        top:100%;           /* přímo pod .site-header */
        left:0;
        right:0;
        transform: translateY(-200%); /* výchozí: schované nad okrajem */
        background: rgba(0,0,0,.6);
        border-bottom:1px solid var(--border);
        backdrop-filter: blur(8px);
        transition: transform .3s ease;
        z-index: 1001;      /* nad obsahem */
    }
    .nav.open{ transform: translateY(0); } /* Otevření menu */
    .nav ul{ padding:14px clamp(16px,4vw,26px); gap:8px; } /* Vnitřní odsazení mobilního menu */
    .nav a{ display:block; padding:12px 14px; } /* Odkazy přes celou šířku */
}

/* ============================================================
   HERO SEKCE
   - Obrázek v pozadí + tmavý overlay součástí background-image.
============================================================ */
.hero{
    position: relative;             /* Potřebné pro stacking context (např. sticky header) */
    padding: clamp(110px, 14vw, 180px) 0; /* Vysoký blok, aby vynikla fotka */
    isolation: isolate;             /* Zamezí prolnutí efektů z jiných vrstev (bezpečné) */
    min-height: 60vh;               /* Alespoň 60 % výšky okna – hero má „tah“ */
}
.hero--with-image{
    /* Dvě vrstvy background-image:
       1) lineární gradient = tmavý overlay (kvůli čitelnosti textu)
       2) samotný obrázek
    */
    background-image:
            linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.35) 55%, rgba(0,0,0,0.55) 100%),
            url("media/hero/home_bg_img.jpg"); /* CESTA k pozadí (nahrajte na FTP) */
    background-size: cover;         /* Obrázek vyplní oblast se zachováním poměru stran */
    background-position: center;    /* Srovnat na střed */
    background-repeat: no-repeat;   /* Bez opakování dlaždic */
}
@media (min-width: 1600px){ /* Na velkých displejích použijte větší obrázek (volitelné) */
    .hero--with-image{
        background-image:
                linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.35) 55%, rgba(0,0,0,0.55) 100%),
                url("media/hero/home_bg_img.jpg");
    }
}

.hero-inner{ text-align:center; position: relative; z-index: 1; } /* Text uvnitř hero, nad pozadím */
h1{
    font-family: Orbitron, Inter, system-ui, sans-serif; /* Futuristický nadpis */
    font-size: clamp(2rem, 4vw + 1rem, 3.6rem);          /* Responsivní velikost */
    line-height:1.1; margin:0 0 14px;                    /* Řádkování + spodní mezera */
}
.lead{
    color:var(--muted);               /* Tlumený odstín pro podnadpis */
    margin:0 auto 28px;               /* Vodorovné zarovnání doprostřed + spodní mezera */
    font-size: clamp(1rem, .6vw + .9rem, 1.25rem); /* Responsivní velikost textu */
    max-width: 60ch;                  /* Max šířka pro pohodlné čtení */
    text-shadow: -1px 5px 4px #000000; /* shadow aby txt byl citelnejsi */
}
.btn{
    display:inline-block; padding:12px 20px; border-radius:999px; /* Kulaté tlačítko */
    background: linear-gradient(135deg, var(--primary), var(--accent)); /* Barevný přechod tlačítka */
    color:#0a0d14; font-weight:800; box-shadow: var(--shadow);          /* Tmavý text na světlém tlačítku */
    transition: transform .15s ease, box-shadow .2s ease;               /* Hezký hover efekt */
}
.btn:hover{ transform: translateY(-1px); box-shadow: 0 12px 22px rgba(0,0,0,.4); } /* Hover posun + stín */
.btn:active{ transform: translateY(0); } /* Kliknutí vrátí tlačítko zpět */
.glow{ text-shadow: 0 0 12px rgba(99,255,209,.5), 0 0 24px rgba(77,163,255,.45); } /* Neonový nádech nadpisu */

/* ============================================================
   OBECNÉ SEKCE + TYPOGRAFIE
============================================================ */
.section{ padding: clamp(50px, 6vw, 90px) 0; } /* Vnější odsazení sekcí */
.section-title{
    font-family: Orbitron, Inter, system-ui, sans-serif; /* Příbuzný font nadpisu */
    font-size: clamp(1.4rem, 2.2vw + 0.6rem, 2.1rem);    /* Responsivní velikost */
    margin: 0 0 18px;                                    /* Spodní mezera */
}
.prose p{ margin:12px 0; color:var(--text); }          /* Základní odstavce v „prose“ kontejnerech */
.prose p + p{ color:var(--muted); }                    /* Druhý a další odstavec v tlumenější barvě */
.bullets{ margin-top:12px; display:grid; gap:6px; }    /* Seznam benefitů jako grid */
.bullets li::before{ content: "▸ "; color: var(--primary); } /* „Šipka“ před bodem */

/* ============================================================
   SLUŽBY (karty v gridu)
============================================================ */
.services-grid{
    display:grid; gap: clamp(14px, 2vw, 20px); /* Mezera mezi kartami */
    grid-template-columns: repeat(12, 1fr);    /* 12 sloupcový grid (desktop) */
}
.service{
    grid-column: span 6;                       /* Každá karta zabere 6/12 (2 na řádek) na desktopu */
    background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)); /* Jemný přechod */
    border:1px solid var(--border); border-radius: var(--radius); /* Rámeček + zaoblení */
    box-shadow: var(--shadow); padding: clamp(16px, 2.5vw, 24px); /* Vnitřní odsazení a stín */
}
.service h3{ margin:0 0 8px; font-size:1.15rem; } /* Nadpis služby */
.service p{ color:var(--muted); margin:0 0 10px; } /* Krátký popis v tlumené barvě */
.service ul{ display:grid; gap:6px; } /* Výčtové body jako grid (lepší svislé zarovnání) */

@media (max-width: 900px){ .service{ grid-column: span 12; } } /* Na mobilech 1 karta na řádek */

/* ============================================================
   GALERIE (grid náhledů)
============================================================ */
.grid{
    display:grid; grid-template-columns: repeat(12, 1fr); /* 12 sloupců (flexibilní) */
    gap: clamp(10px, 2vw, 20px);                           /* Mezera mezi položkami */
}
.card{
    grid-column: span 6; /* 2 sloupce na řádek (desktop) */
    background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
    border:1px solid var(--border); border-radius: var(--radius);
    box-shadow: var(--shadow); overflow:hidden; cursor:pointer; /* Cursor pointer = klikací */
    transition: transform .2s ease, box-shadow .2s ease, filter .2s ease; /* Jemné animace */
}
.card:hover{ transform: translateY(-2px); box-shadow: 0 18px 30px rgba(0,0,0,.45); filter: brightness(1.06); } /* Hover efekt */
.card img{ aspect-ratio: 3 / 2; object-fit: cover; }  /* Jednotný poměr stran náhledů */
.card figcaption{ padding:12px 14px; color:var(--muted); border-top:1px solid var(--border); background: rgba(0,0,0,.2); }

@media (max-width: 900px){ .card{ grid-column: span 12; } } /* Na mobilech 1 sloupec */

/* === „Zobrazit další“ pod galerií === */
.gallery-more{
    display: grid;
    place-items: center;
    margin-top: 18px;
}
.more-btn{
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: linear-gradient(135deg, var(--primary), var(--accent));
    color: #0a0d14;
    font-weight: 800;
    box-shadow: var(--shadow);
    cursor: pointer;
    transition: transform .15s ease, box-shadow .2s ease, filter .2s ease;
}
.more-btn:hover{ transform: translateY(-1px); box-shadow: 0 12px 22px rgba(0,0,0,.4); }
.more-btn:active{ transform: translateY(0); }
.more-arrow{ font-size: 1rem; line-height: 1; }


/* ============================================================
   LIGHTBOX (overlay pro zobrazení větších fotek)
============================================================ */
.lightbox[hidden]{ display:none !important; } /* Úplné skrytí pokud je nastaven atribut hidden */
.lightbox{
    position: fixed; inset:0; z-index: 2000; /* Přes celou obrazovku a nad vším */
    display:grid; place-items:center;        /* Centrovat obsah */
    background: rgba(0,0,0,.75);             /* Ztmavení pozadí */
    padding: 20px;                           /* Vnitřní odsazení kvůli okrajům */
}
.lightbox-img{
    max-width: min(100%, 1100px); /* Omezit max šířku obrázku */
    max-height: 80vh;             /* Omezit výšku (aby zůstala místa pro ovládání) */
    border-radius: 14px;          /* Zaoblení rohů obrázku */
    box-shadow: 0 20px 50px rgba(0,0,0,.6); /* Stín */
    border: 1px solid var(--border);        /* Jemný rámeček */
    background: #000;                        /* Bezpečná barva pozadí při načítání */
}
/* Tlačítka ovládání lightboxu */
.lightbox-close,
.lightbox-prev,
.lightbox-next{
    position: absolute; top: 50%; transform: translateY(-50%); /* Vertikální centrování */
    background: var(--glass); border:1px solid var(--border); color: var(--text);
    width: 44px; height: 44px; border-radius: 12px; /* Velikost a tvar tlačítek */
    display:grid; place-items:center; font-size: 28px; line-height: 1; /* Zarovnání symbolů */
    cursor:pointer; transition: background .2s ease, transform .1s ease; /* Hover/active efekty */
}
.lightbox-close{ top: 28px; right: 28px; transform: none; font-size: 30px; } /* Zavřít v rohu */
.lightbox-prev{ left: 28px; }   /* Šipka vlevo */
.lightbox-next{ right: 28px; }  /* Šipka vpravo */
.lightbox-close:hover,
.lightbox-prev:hover,
.lightbox-next:hover{ background: rgba(255,255,255,.12); } /* Hover efekt tlačítek */

.lightbox-caption{
    margin-top: 12px; color: var(--text); text-align:center; max-width: 90vw; /* Popisek pod obrázkem */
    text-shadow: 0 1px 2px rgba(0,0,0,.6); /* Lehké stínování textu pro čitelnost */
}

.more-btn[aria-expanded="true"] .more-arrow {
    transform: rotate(180deg); /* Otočí šipku při expanded=true */
    transition: transform .2s ease;
}


/* ============================================================
   PATIČKA
============================================================ */
.site-footer{
    padding: 40px 0 70px; text-align:center; color:var(--muted); /* Vnější odsazení a barva textu */
    border-top: 1px solid var(--border);                         /* Oddělovací linka shora */
    background: linear-gradient(180deg, transparent, rgba(0,0,0,.2)); /* Jemné prolnutí */
}

/* ============================================================
   PŘÍSTUPNOST: OMEZENÍ POHYBU
============================================================ */
@media (prefers-reduced-motion: reduce){ /* Pokud uživatel preferuje méně animací */
    html{ scroll-behavior: auto; }          /* Vypnout hladké rolování */
    .btn, .card{ transition: none !important; } /* Vypnout přechody */
}