/* =========================================================

   CSS PROMĚNNÉ (Připraveno pro Admin rozhraní)

   ========================================================= */

:root {

    /* Základní paleta */

    --bg-body: #f0f4f8;

    --bg-card: #ffffff;

    --text-main: #4a5568;

    --heading-main: #1a365d;

    --accent: #e63946;

    

    /* Tlačítka */

    --primary-btn: #2563eb;

    --primary-btn-hover: #1d4ed8;

    

    /* Barvy ze Swiper sekce */

    --primary-color: #2B547E; 

    --accent-color: #e0f7f4; 

    

    /* Rozložení a UI */

    --border-color: #e2e8f0;

    --nav-height: 80px;

    --transition-speed: 0.3s;

}



/* =========================================================

   RESET A ZÁKLAD

   ========================================================= */

* {

    box-sizing: border-box;

    margin: 0;

    padding: 0;

}



html {

    scroll-behavior: smooth;

}



body {

    font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

    background-color: var(--bg-body);

    color: var(--text-main);

    line-height: 1.6;

    font-weight: 400;

    font-size: 16px;

    -webkit-font-smoothing: antialiased;

    -moz-osx-font-smoothing: grayscale;

}

input, textarea, select, button {

    font-family: inherit;

}



/* =========================================================

   HLAVIČKA A NAVIGACE (Roztáhnuto do stran na PC)

   ========================================================= */

.header {

    background-color: var(--bg-card);

    border-bottom: 1px solid var(--border-color);

    position: sticky;

    top: 0;

    z-index: 1000;

    width: 100%;

}



.header-container {

    width: 100%;

    max-width: 100%;

    height: var(--nav-height);

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 0 3.5rem;

}



@media (max-width: 1024px) {

    .header-container {

        padding: 0 1.5rem;

    }

}



.logo {

    font-weight: 700;

    font-size: 1.35rem;

    color: var(--heading-main);

    text-decoration: none;

    letter-spacing: -0.015em;

    z-index: 1001;

}



/* Desktop Menu */

.main-nav {

    display: flex;

    align-items: center;

}



.nav-list {

    display: flex;

    list-style: none;

    gap: 2rem;

    align-items: center;

}



.nav-link {

    color: var(--text-main);

    text-decoration: none;

    font-weight: 500;

    font-size: 0.95rem;

    transition: color var(--transition-speed);

}



.nav-link:hover {

    color: var(--accent);

}



.btn-login {

    background-color: var(--primary-btn);

    color: #fff !important;

    padding: 0.6rem 1.2rem;

    border-radius: 6px;

    font-weight: 600;

    transition: background-color var(--transition-speed);

}



.btn-login:hover {

    background-color: var(--primary-btn-hover);

}



/* =========================================================

   TLAČÍTKO MOBILNÍHO MENU (Původní animace)

   ========================================================= */

.menu-toggle {

    display: none;

    background: none;

    border: none;

    cursor: pointer;

    width: 30px;

    height: 24px;

    position: relative;

    z-index: 1001;

}



.hamburger, .hamburger::before, .hamburger::after {

    content: '';

    display: block;

    width: 100%;

    height: 2px;

    background-color: var(--heading-main);

    position: absolute;

    transition: transform var(--transition-speed), opacity var(--transition-speed);

}



.hamburger { top: 11px; }

.hamburger::before { top: -8px; }

.hamburger::after { top: 8px; }



/* Aktivní stav hamburgeru */

.menu-toggle.active .hamburger { background: transparent; }

.menu-toggle.active .hamburger::before { transform: translateY(8px) rotate(45deg); }

.menu-toggle.active .hamburger::after { transform: translateY(-8px) rotate(-45deg); }



/* =========================================================

   HERO SEKCE

   ========================================================= */

.hero-section {

    text-align: center;

    padding: 6rem 1.5rem;

    max-width: 920px;

    margin: 0 auto;

    min-height: 60vh;

    display: flex;

    flex-direction: column;

    justify-content: center;

}



.hero-content {

    animation: fadeInUp 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;

    opacity: 0;

    transform: translateY(20px);

}



.hero-title {

    color: var(--heading-main);

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

    font-weight: 700;

    text-transform: uppercase;

    line-height: 1.1;

    margin-bottom: 1.25rem;

    letter-spacing: -0.02em;

}



.hero-title span {

    color: var(--accent);

}



.hero-text {

    font-size: clamp(1rem, 2vw, 1.25rem);

    color: var(--text-main);

    margin-bottom: 2.5rem;

}



.hero-actions {

    display: flex;

    gap: 1rem;

    justify-content: center;

    flex-wrap: wrap;

}



.btn {

    display: inline-block;

    padding: 0.85rem 2rem;

    border-radius: 8px;

    font-weight: 600;

    text-decoration: none;

    text-transform: uppercase;

    font-size: 0.875rem;

    transition: all 0.2s ease;

    cursor: pointer;

}



.btn-primary {

    background-color: var(--primary-btn);

    color: #ffffff;

    border: 2px solid var(--primary-btn);

}



.btn-primary:hover {

    background-color: var(--primary-btn-hover);

    transform: translateY(-2px);

}



.btn-secondary {

    background-color: transparent;

    color: var(--heading-main);

    border: 2px solid var(--heading-main);

}



.btn-secondary:hover {

    background-color: var(--heading-main);

    color: #ffffff;

    transform: translateY(-2px);

}



@keyframes fadeInUp {

    to {

        opacity: 1;

        transform: translateY(0);

    }

}



/* =========================================================

   STŘEDISKA (SWIPER)

   ========================================================= */

.strediska-wrapper { 

    padding: 2rem 1.5rem 5rem 1.5rem; 

    max-width: 1200px; 

    margin: 0 auto; 

}



.strediska-heading { 

    text-align: center; 

    font-size: 2rem; 

    color: var(--primary-color); 

    margin-bottom: 2rem; 

    font-weight: 700;

}



.swiper-strediska { 

    padding-bottom: 2rem; 

}



.swiper-slide { 

    background: var(--bg-card); 

    border-radius: 12px; 

    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); 

    overflow: hidden; 

    cursor: pointer; 

    transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.3s ease; 

}



.swiper-slide:hover { 

    transform: translateY(-5px); 

    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);

}



.stredisko-img { 

    width: 100%; 

    height: 260px;

    object-fit: cover; 

}



.stredisko-title { 

    text-align: center; 

    font-weight: 700; 

    font-size: 1.2rem; 

    padding: 1rem 0 0.2rem; 

    color: var(--heading-main);

}



.stredisko-location { 

    text-align: center; 

    font-size: 0.95rem; 

    color: var(--text-main); 

    padding-bottom: 1.2rem; 

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 4px;

}



@media (min-width: 768px) { 

    .swiper-wrapper { 

        display: grid !important; 

        grid-template-columns: repeat(4, 1fr); 

        gap: 24px; 

    } 

    .swiper-slide { 

        width: auto !important; 

    } 

    .swiper-strediska { 

        overflow: visible !important; 

    } 

}



/* =========================================================

   MOBILNÍ OPTIMALIZACE

   ========================================================= */

@media (max-width: 768px) {

    .menu-toggle {

        display: block;

    }



    .main-nav {

        position: fixed;

        top: 0;

        right: -100%;

        width: 100%;

        height: 100vh;

        

        /* Zvolené čisté iOS Glassmorphism pozadí */

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

        backdrop-filter: blur(16px);

        -webkit-backdrop-filter: blur(16px);

        border-left: 1px solid rgba(255, 255, 255, 0.3);

        

        flex-direction: column;

        justify-content: center;

        transition: right 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);

        z-index: 1000;

    }



    .main-nav.open {

        right: 0;

    }



    .nav-list {

        flex-direction: column;

        gap: 2.5rem;

    }



    .nav-link {

        font-size: 1.45rem;

        font-weight: 600;

        color: var(--heading-main);

        text-transform: uppercase;

        letter-spacing: 0.05em;

    }

}