/* ZÁKLADNÍ PROMĚNNÉ */

:root {

    --primary-color: #2c2c2c;

    --secondary-color: #555;

    --accent-color: #A52A2A;

    --nav-bg: rgba(255, 255, 255, 0.95);

    --light-grey: #e8e8e8;

}



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



body {

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

    color: var(--primary-color);

    line-height: 1.6;

    min-height: 100vh;

    position: relative;

    display: flex;

    flex-direction: column;

    margin: 0;

}



/* POZADÍ (SPOLEČNÉ PRO VŠECHNY STRÁNKY) */

body::before {

    content: "";

    position: fixed;

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

    z-index: -1;

    background-image: url('foto/background.jpg');

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;

    opacity: 0.25;

}



/* HLAVIČKA A NAVIGACE */

header {

    background: var(--nav-bg);

    padding: 15px 0;

    border-bottom: 1px solid rgba(0,0,0,0.05);

    position: sticky;

    top: 0;

    z-index: 100;

    backdrop-filter: blur(5px);

}



nav {

    display: flex;

    justify-content: space-between;

    align-items: center;

    max-width: 1100px;

    margin: 0 auto;

    padding: 0 20px;

}



.logo a { display: block; color: var(--primary-color); text-decoration: none; padding: 5px 0; }

.logo-main { display: inline-block; font-family: 'Playfair Display', serif; font-size: 1.8rem; font-weight: 700; line-height: 1; }

.logo-alias { display: inline-block; font-family: 'Roboto', sans-serif; font-size: 0.8rem; font-weight: 400; color: var(--secondary-color); margin-left: 15px; text-transform: uppercase; letter-spacing: 2px; }



.nav-links a {

    color: var(--secondary-color);

    text-decoration: none;

    margin-left: 25px;

    font-size: 1rem;

    text-transform: uppercase;

    letter-spacing: 0.5px;

    transition: color 0.3s ease;

    font-weight: 500;

}

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



/* OBSAH - SPOLEČNÉ */

section { flex: 1; padding: 80px 20px; max-width: 1100px; margin: 0 auto; width: 100%; }



.content-card {

    background: rgba(255, 255, 255, 0.85);

    padding: 40px;

    border-radius: 12px;

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

    backdrop-filter: blur(5px);

}



/* Třída pro centrování textu (použito v kontaktu) */

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



h2 {

    font-family: 'Playfair Display', serif;

    font-size: 2.5rem;

    color: var(--primary-color);

    margin-bottom: 40px;

    text-align: center;

    border-bottom: 2px solid var(--accent-color);

    display: table;

    margin-left: auto;

    margin-right: auto;

    padding-bottom: 5px;

}



/* PATIČKA */

footer {

    text-align: center;

    padding: 40px 20px;

    background-color: rgba(255,255,255,0.9);

    color: var(--secondary-color);

    font-size: 0.9rem;

    border-top: 1px solid rgba(0,0,0,0.05);

    margin-top: auto;

}



/* --- SPECIFICKÉ PRO INDEX.HTML (O MNĚ) --- */

#about-me .content-flex { display: flex; gap: 50px; align-items: center; }

#about-me img { width: 300px; height: 400px; border-radius: 8px; object-fit: cover; box-shadow: 0 10px 20px rgba(0,0,0,0.1); }

#about-me .text-content { flex: 1; }

#about-me p { font-size: 1.1rem; color: #444; margin-bottom: 20px; }

.btn {

    display: inline-block; padding: 12px 30px; background-color: var(--primary-color); color: white;

    text-decoration: none; border-radius: 4px; margin-top: 10px; transition: background 0.3s;

    text-transform: uppercase; font-size: 0.9rem; letter-spacing: 1px;

}

.btn:hover { background-color: var(--accent-color); }



/* --- SPECIFICKÉ PRO GALERIE.HTML --- */

.gallery-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; }

.gallery-item { overflow: hidden; border-radius: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.05); transition: transform 0.3s ease; cursor: pointer; }

.gallery-item:hover { transform: scale(1.02); }

.gallery-item img, .gallery-item video { width: 100%; height: 350px; object-fit: cover; display: block; background: #000; }

.gallery-caption {

    background-color: rgba(255, 255, 255, 0.9); padding: 15px; text-align: center;

    font-size: 1rem; color: var(--primary-color); font-weight: 400; backdrop-filter: blur(2px);

}



/* --- SPECIFICKÉ PRO KONTAKT.HTML --- */

.social-section { margin-bottom: 40px; }

.social-section p { font-size: 1.2rem; margin-bottom: 20px; }

.contact-intro { font-size: 1.2rem; margin-bottom: 20px; }



.social-btn {

    display: inline-block; margin-top: 10px; padding: 10px 25px;

    color: white; text-decoration: none;

    border-radius: 50px; font-weight: 500; transition: opacity 0.3s;

    margin: 5px;

}

.social-btn:hover { opacity: 0.9; }

.btn-ig { background-color: #E1306C; }

.btn-pin { background-color: #E60023; }

.btn-pro { background-color: #000; }



form { display: flex; flex-direction: column; gap: 15px; text-align: left; margin-top: 20px; }

label { font-weight: 500; font-size: 0.9rem; color: var(--secondary-color); }

input, textarea {

    width: 100%; padding: 12px; border: 1px solid #ccc; border-radius: 4px;

    font-family: 'Roboto', sans-serif; font-size: 1rem; background: rgba(255,255,255,0.9);

}

textarea { resize: vertical; min-height: 120px; }

button.btn-submit {

    padding: 12px 30px; background-color: var(--primary-color); color: white;

    border: none; border-radius: 4px; cursor: pointer; font-size: 1rem;

    text-transform: uppercase; letter-spacing: 1px; transition: background 0.3s;

    align-self: center;

}

button.btn-submit:hover { background-color: var(--accent-color); }



/* Zprávy formuláře (úspěch/chyba) */

.form-message { display: none; margin-bottom: 20px; padding: 15px; border-radius: 4px; text-align: center; font-weight: 500; }

.form-message.success { background-color: #d4edda; color: #155724; border: 1px solid #c3e6cb; }

.form-message.error { background-color: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; }



/* LIGHTBOX (Zvětšení obrázků) */

.lightbox {

    display: none; /* Ve výchozím stavu skryté */

    position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%;

    background-color: rgba(0,0,0,0.95); /* Tmavé pozadí */

    justify-content: center; align-items: center; flex-direction: column;

}

.lightbox-content { max-width: 90%; max-height: 80vh; object-fit: contain; border-radius: 4px; }

.lightbox-caption { color: #ccc; margin-top: 15px; font-family: 'Roboto', sans-serif; font-weight: 300; }

.close, .prev, .next {

    position: absolute; color: white; font-size: 40px; font-weight: bold; cursor: pointer; user-select: none; padding: 10px; transition: 0.3s;

}

.close { top: 20px; right: 30px; }

.prev { left: 20px; top: 50%; transform: translateY(-50%); }

.next { right: 20px; top: 50%; transform: translateY(-50%); }

.close:hover, .prev:hover, .next:hover { color: var(--accent-color); }



/* RESPONSIVNÍ ÚPRAVY */

@media (max-width: 768px) {

    nav { flex-direction: column; padding-top: 20px; }

    .logo { margin-bottom: 15px; text-align: center; }

    .nav-links { margin-top: 10px; }

    .nav-links a { margin: 0 10px; }

    h2 { font-size: 2rem; }

    #about-me .content-flex { flex-direction: column; }

    #about-me img { width: 100%; max-width: 350px; height: auto; }

    .content-card { padding: 25px; }

}