@import url('https://googleapis.com');


/* === 01. ZÁKLAD === */

/*
   box-sizing: border-box

   Padding a border se započítávají do deklarované šířky
   a výšky prvku. Díky tomu se s rozměry pracuje
   předvídatelněji.
*/
* {
    box-sizing: border-box;
}

/*
   Plynulé skrolování při kliknutí na odkaz v menu,
   např. z "Kontakt" na #kontakt.
*/
html {
    scroll-behavior: smooth;
}

/*
   Prohlížeč má u <body> standardně vlastní okraj.
   Ten odstraníme, protože rozložení stránky chceme
   řídit sami.
*/
body {
    margin: 0;

    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

    font-size: 16px;
    line-height: 1.6;

    color: #fafafa;
    background: #1A2536;
}

/*
   Obrázky se nikdy neroztáhnou mimo svého kontejneru.
   height: auto zachová jejich poměr stran.
*/
img {
    max-width: 100%;
    height: auto;
}



/* === 02. HLAVIČKA A MENU === */

/*
   Hlavička je stále nahoře při skrolování.

   "z-index" zajišťuje, že bude nad obsahem stránky.
*/
.header {
    position: fixed;
    top: 0;
    left: 0;

    width: 100%;

    z-index: 1000;

    display: flex;
    align-items: center;

    padding: 15px 30px;

    /*
       Lehce průhledné pozadí umožní, aby pod menu
       byla stále trochu vidět fotografie.
    */
    background: rgba(0, 0, 0, 0.35);

    /*
       Pokud prohlížeč efekt podporuje, pozadí pod menu
       se lehce rozmaže.
    */
    backdrop-filter: blur(5px);
}

/*
   Logo / jméno vlevo.
   "margin-right: auto" odstrčí navigaci úplně doprava.
*/
.logo {
    margin-right: auto;

    color: #fffd91;;

    text-decoration: none;

    font-size: 1.2rem;
    font-weight: bold;

    text-transform: uppercase;
}

/*
   Navigace na desktopu je obyčejný flexbox.
*/
.navigation {
    display: flex;
    gap: 60px;
}

.navigation a {
    color: #fffd91;

    text-decoration: none;

    font-size: 1.1rem;
    text-transform: uppercase;

    transition: opacity 0.2s;
}

/*
   Jednoduchá reakce při najetí myší.
*/
.navigation a:hover {
    opacity: 0.65;
}



/* === 03. HAMBURGER MENU === */

/*
   Checkbox používáme jako jednoduchý přepínač
   pro mobilní menu.

   Na desktopu není potřeba zobrazovat ani checkbox,
   ani hamburger.
*/
.menu-toggle,
.menu-button {
    display: none;
}



/* === 04. OBECNÉ VLASTNOSTI SEKCE === */

/*
   Každá hlavní sekce zabere minimálně celou výšku
   obrazovky.

   Pokud bude obsah vyšší než obrazovka, sekce se
   automaticky zvětší.
*/
.section {
    min-height: 100vh;

    display: flex;
    align-items: center;
    justify-content: center;

    /*
       Horní padding je větší kvůli fixnímu menu.
       Bez něj by menu mohlo překrývat začátek obsahu.
    */
    padding: 100px 30px 70px;
}

.section:not(:first-of-type):not(:last-of-type) {
        border-bottom: 0.2px solid rgba(255, 255, 255, 0.4);
} /* Úzká bílá linka na spodní straně xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */


/* === 05. SEKCE S FOTOGRAFIÍ === */

/*
   "position: relative" umožní, aby overlay a obsah
   byly umístěny relativně k této sekci.
*/
.section-photo {
    position: relative;

    /*
       Fotografie vyplní celý prostor sekce.

       Pokud poměr fotografie a sekce není stejný,
       část fotografie se ořízne.
    */
    background-size: cover;

    /*
       Při ořezu se snažíme zachovat střed fotografie.
    */
    background-position: center;

    color: white;
}

/*
   Tmavá průhledná vrstva přes fotografii.

   Je zde hlavně kvůli čitelnosti textu.
*/
.section-overlay {
    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

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

/*
   Obsah musí být nad overlayem.

   "position: relative" + "z-index" ho dostane
   před průhlednou vrstvu.
*/
.hero-content,
.content {
    position: relative;
    z-index: 1;

    width: 100%;
    max-width: 1300px;

    margin: 0 auto;
}


/* === OBECNÉ PARAMETRY CONTENTU === */

.content h2 {
    margin-top: 0;
    margin-bottom: 35px;

    font-size: clamp(1.8rem, 4.5vw, 2.6rem);
    line-height: 1.25;
    
    font-weight: 500; /* Střední tučnost, drží strukturu */
    letter-spacing: -0.01em;
    /* color: #ffffff;  */
    color: #fffd91;
}

.content h3 {
    margin-top: 45px;
    margin-bottom: 15px;

    font-size: clamp(1.2rem, 2.8vw, 1.6rem);
    line-height: 1.35;
    
    font-weight: 400; /* Regular – krásně tenký a elegantní podnadpis */
    letter-spacing: 0.02em;
    /* color: #cbd5e1; ;  */
    color: #ffffff; 
}

.content p,ul {
    margin-bottom: 22px;
    
    font-size: 1rem; /* Zůstává 16px z body */
    line-height: 1.65; /* Nepatrně zvětšeno z 1.6 pro ještě větší vzdušnost mezi řádky */
    
    font-weight: 350; /* Zjemnění z 400 na "Book" tloušťku – text okamžitě zlehkne */
    letter-spacing: 0.01em; /* Miniaturní rozestup, aby se tenčí písmo skvěle četlo */
    color: #e2e8f0; /* Jemný posun barvy, aby text nepůsobil tak "ostře" jako nadpisy */
}

.content a {
    color: #38bdf8; /* Jasná, moderní nebeská modrá – skvěle svítí na tmavém pozadí */
    text-decoration: none;
    border-bottom: 1px solid rgba(56, 189, 248, 0.3); /* Jemná spodní linka místo tlustého podtržení */
    transition: border-color 0.2s ease, color 0.2s ease; /* Hladký efekt při najetí */
}

.content a:hover {
    color: #7dd3fc; /* Při najetí odkaz ještě o něco víc zazáří */
    border-bottom-color: #7dd3fc;
}


/* === ÚVODNÍ SEKCE === */

.hero {
    /*
       Hlavní fotografie webu.
    */
    background-image: url("images/hero.jpg");

    text-align: center;
}

.hero-content {
    max-width: 1000px;
}

.hero h1 {
    margin: 0;

    /*
       clamp(minimum, preferovaná velikost, maximum)

       Nadpis se tedy přizpůsobuje velikosti obrazovky,
       ale nikdy nebude příliš malý ani příliš velký.
    */
    font-size: clamp(2.5rem, 7vw, 6rem);

    font-family: Georgia, 'Times New Roman', Times, serif;
    color: #fffd91;

    text-transform: uppercase;

    line-height: 1.5;    
}

.hero .subtitle {
    margin-top: 90px;
    margin-bottom: 90px;

    font-size: clamp(1.2rem, 3vw, 1.7rem);

    
}

.hero,
.hero .subtitle
/*.content h2*/ {
    text-shadow:
        0 5px 7px rgba(0, 0, 0, 0.9),
        0 0 18px rgba(0, 0, 0, 0.6);
}


/* === SLUZBY === */

.sluzby {
    background-image: url("xxx");
}


/* === MUJ OBRAZEK === */

.muj-obrazek {
    background-image: url("images/about.jpg");
}


/* === REFERENCE === */

.reference {
    background-image: url("images/reference.jpg");
}

.reference {
    margin-top: 40px;
}

.reference-item {
    margin-bottom: 30px;

    padding-bottom: 20px;

    border-bottom: 1px solid rgba(255, 255, 255, 0.4);
}

.reference-item:last-child {
    /*
       Poslední položka už nepotřebuje oddělovací čáru.
    */

    border-bottom: none;
}

.reference-item h3 {
    margin-bottom: 5px;
}


/* === KONTAKT === */

/*
   Kontaktní sekce záměrně nemá fotografii.

   Je to jednoduchý příklad toho, že ne všechny
   sekce musí vypadat stejně.
*/
.kontakt {
    background: #f2f2f2; /* Výjimečně bílé pozadí */
}

.kontakt h2 {
    margin-top: 0;
    margin-bottom: 35px;

    font-size: clamp(1.8rem, 4.5vw, 2.6rem); /* Stejné měřítko */
    line-height: 1.25;
    
    font-weight: 500; /* Střední tučnost, drží strukturu */
    letter-spacing: -0.01em;
    color: #0f172a; /* Temně břidlicová černo-modrá, působí luxusněji než čistá černá */
}

.kontakt h3 {
    margin-top: 45px;
    margin-bottom: 15px;

    font-size: clamp(1.2rem, 2.8vw, 1.6rem); /* Stejné měřítko */
    line-height: 1.35;
    
    font-weight: 400; /* Tenčí elegantní podnadpis */
    letter-spacing: 0.02em;
    color: #475569; /* Tlumená břidlicově šedá, která krásně ustoupí do pozadí */
}

.kontakt p {
    margin-bottom: 22px;
    
    font-size: 1rem;
    line-height: 1.65;
    
    font-weight: 400; /* Standardní tloušťka pro skvělou čitelnost na světlém */
    letter-spacing: 0.01em;
    color: #334155; /* Příjemná tmavě šedá, která je měkčí na oči než čistá černá */
}

.kontakt a {
    color: #0284c7; /* Sytější modrá – zajišťuje perfektní kontrast a čitelnost na bílém podkladu */
    text-decoration: none;
    border-bottom: 1px solid rgba(2, 132, 199, 0.3); /* Jemná spodní linka */
    transition: border-color 0.2s ease, color 0.2s ease;
}

.kontakt a:hover {
    color: #0369a1; /* Při najetí modrá elegantně ztmavne */
    border-bottom-color: #0369a1;
}

.kontakt-detail {
    margin-top: 40px;
}


/* === KONTAKT OLD === */

/*
   Kontaktní sekce záměrně nemá fotografii.

   Je to jednoduchý příklad toho, že ne všechny
   sekce musí vypadat stejně.
*/
.kontakt-old {
    background: #f2f2f2;

    color: #222;
}

.kontakt-detail-old {
    margin-top: 40px;
}

.kontakt-old a {
    color: inherit;
}



/* ==== PATIČKA === */

.footer {
    padding: 25px 20px;

    text-align: center;

    font-size: 0.85rem;

    background: #222;
    color: #fff;
}














/* === 11. MOBILNÍ ZOBRAZENÍ === */

/*
   Od této chvíle měníme některé vlastnosti pro menší
   obrazovky.

   768 px je pouze náš výchozí breakpoint. Později ho
   můžeme změnit podle skutečného vzhledu stránky.
*/
@media (max-width: 768px) {

    /* --- HLAVIČKA --- */

    .header {
        padding: 15px 20px;
    }

    /*
       Hamburger je na desktopu schovaný.
       Na mobilu ho zobrazíme jako tři čárky.
    */
    .menu-button {
        display: flex;

        flex-direction: column;
        justify-content: space-between;

        width: 28px;
        height: 22px;

        cursor: pointer;
    }

    .menu-button span {
        display: block;

        width: 100%;
        height: 2px;

        background: white;

        transition: 0.2s;
    }

    /*
       Mobilní navigace je normálně schovaná.
    */
    .navigation {
        position: absolute;

        top: 100%;
        left: 0;

        width: 100%;

        display: none;

        flex-direction: column;

        gap: 0;

        background: rgba(0, 0, 0, 0.90);
    }

    .navigation a {
        padding: 15px 20px;

        border-top: 1px solid rgba(255, 255, 255, 0.15);
    }

    /*
       Pokud je checkbox zaškrtnutý, zobrazíme navigaci.

       Toto je celý mechanismus hamburgeru.
       JavaScript není potřeba.
    */
    .menu-toggle:checked ~ .navigation {
        display: flex;
    }

    /* --- SEKCE --- */

    .section {
        padding: 100px 20px 60px;
    }

    /*
       Na mobilu trochu zvětšíme řádkování,
       protože delší text se na úzkém displeji
       čte příjemněji.
    */
    .content {
        line-height: 1.7;
    }

    /*
       Mobilní displej může mít fotografii výrazně
       více oříznutou, proto je overlay o něco tmavší.
    */
    .section-overlay {
        background: rgba(0, 0, 0, 0.15);
    }

}











/* OLD::::::::::::::::::::::::::::::::::::::::::::::::::::::O MNE
.content h2 {
    margin-top: 0;
    margin-bottom: 30px;

    font-size: clamp(2rem, 5vw, 3.2rem);

    line-height: 1.2;
}

.content p {
    margin-bottom: 20px;
} 
*/