/* =========== GLOBÁLNE ŠTÝLY A PREMENNÉ =========== */
:root {
    --color-primary: #0A2E36;   /* Tmavomodrá (príklad) */
    --color-secondary: #F2A950; /* Zlatá/oranžová akcent (príklad) */
    --color-accent: #ADD8E6;    /* Svetlomodrá/tyrkysová (príklad) */
    --color-text: #333333;      /* Tmavosivá pre text */
    --color-text-light: #ffffff;/* Biela pre text na tmavom pozadí */
    --color-background: #ffffff;
    --color-light-gray: #f8f9fa;/* Svetlosivé pozadie pre niektoré sekcie */

    --font-primary: 'Montserrat', sans-serif;
    --font-secondary: 'Playfair Display', serif; /* Pre nadpisy */

    --container-width: 1200px;
    --padding-section-vertical: 80px; /* Vertikálny padding pre sekcie */
    --padding-section-horizontal: 15px; /* Horizontálny padding pre kontajnery v sekciách */
}

/* Základný reset a box-sizing */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    font-size: 16px; 
}

body {
    font-family: var(--font-primary);
    color: var(--color-text);
    background-color: var(--color-background);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body.side-menu-open { /* Zabrání skrolovaniu stránky, keď je bočné menu otvorené */
    overflow: hidden;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-secondary);
    color: var(--color-primary);
    line-height: 1.3;
    margin-bottom: 0.75em;
}

h1 { font-size: clamp(2.8rem, 5vw, 4rem); } /* Clamp pre responzívny titulok */
h2.section-title { /* Špecifický štýl pre nadpisy sekcií */
    font-size: clamp(2rem, 4vw, 2.8rem);
    text-align: center; /* Predvolene centrované, upravíme v sekciách ak treba inak */
    margin-bottom: 40px; /* Väčší margin pod nadpisom sekcie */
}
h3 { font-size: 1.75rem; }
h4 { font-size: 1.25rem; }

p {
    margin-bottom: 1em;
}
p.section-intro { /* Úvodný text sekcie */
    font-size: 1.1rem;
    color: #555; /* Mierne svetlejší text */
    max-width: 700px; /* Obmedzenie šírky pre lepšiu čitateľnosť */
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 40px; /* Odsadenie pod úvodným textom */
}


a {
    color: var(--color-secondary);
    text-decoration: none;
    transition: color 0.3s ease;
}

a:hover, a:focus {
    color: var(--color-primary); /* Alebo tmavší odtieň --color-secondary */
}

img.img-responsive { /* Pre obrázky, ktoré sa majú prispôsobiť rodičovi */
    max-width: 100%;
    height: auto;
    display: block;
}

.container {
    width: 100%;
    max-width: var(--container-width);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--padding-section-horizontal);
    padding-right: var(--padding-section-horizontal);
}
.container-fluid { /* Pre sekcie, ktoré majú ísť na plnú šírku s vnútorným paddingom */
    width: 100%;
    padding-left: var(--padding-section-horizontal);
    padding-right: var(--padding-section-horizontal);
}

.section-padding {
    padding-top: var(--padding-section-vertical);
    padding-bottom: var(--padding-section-vertical);
}
.section-bg-light { 
    background-color: var(--color-light-gray);
}

.btn {
    display: inline-block;
    padding: 0.8em 1.8em; /* Trochu väčší padding */
    border-radius: 25px; /* Viac zaoblené */
    text-align: center;
    font-weight: bold;
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.2s ease;
    cursor: pointer;
    border: 1px solid transparent; /* Pre konzistentnosť */
    text-transform: uppercase;
    font-size: 0.9rem;
    letter-spacing: 0.5px;
}

.btn-primary {
    background-color: var(--color-secondary);
    color: var(--color-text-light);
    border-color: var(--color-secondary);
}
.btn-primary:hover, .btn-primary:focus {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-text-light);
    transform: translateY(-2px);
}
.btn-secondary { /* Ak by ste potrebovali iný typ tlačidla */
    background-color: transparent;
    color: var(--color-primary);
    border: 1px solid var(--color-primary);
}
.btn-secondary:hover, .btn-secondary:focus {
    background-color: var(--color-primary);
    color: var(--color-text-light);
}
.btn-lg {
    padding: 1em 2.5em;
    font-size: 1.1rem;
}

.text-center { text-align: center; }
.font-weight-bold { font-weight: bold; }

/* =========== SITE HEADER =========== */
.site-header {
    background-color: rgba(255, 255, 255, 0.95); 
    padding: 15px 0;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000; 
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
    transition: background-color 0.3s ease;
}
.site-header.scrolled { /* Príklad pre zmenu hlavičky pri scrolle (vyžaduje JS) */
    background-color: var(--color-background);
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo img {
    max-height: 80px; 
    vertical-align: middle; /* Lepšie zarovnanie ak je vedľa textu */
}

/* --- Top Header Navigation (Desktop) --- */
.top-header-nav {
    margin-left: auto; 
    margin-right: 30px; 
}
.top-header-nav ul {
    list-style: none;
    display: flex;
}
.top-header-nav li {
    margin-left: 28px; 
}
.top-header-nav li:first-child {
    margin-left: 0;
}
/* Styling pre pätičku */
.site-footer {
    background-color: #333; /* Tmavé pozadie */
    color: #fff; /* Biely text */
    padding: 20px 0;
    text-align: center; /* Základné zarovnanie pre istotu */
}

.site-footer .container {
    max-width: 1200px; /* Ak máš nejaký max-width pre kontajner */
    margin: 0 auto; /* Centrovanie kontajnera */
    padding: 0 15px; /* Vnútorné odsadenie kontajnera */
}

/* Flexbox pre obsah pätičky */
.footer-content {
    display: flex; /* Použijeme Flexbox */
    justify-content: space-between; /* Rozloží obsah na kraje (copyright vľavo, ikony vpravo) */
    align-items: center; /* Vertikálne zarovná na stred */
    flex-wrap: wrap; /* Aby sa zalomilo na menších obrazovkách, ak je málo miesta */
}

.site-footer p {
    margin: 0; /* Odstránime predvolené okraje odstavca */
}

/* Styling pre sociálne ikony */
.social-icons {
    display: flex; /* Použijeme Flexbox pre ikony, aby boli vedľa seba */
    gap: 20px; /* Väčšia medzera medzi ikonkami (môžeš zmeniť hodnotu) */
}

.social-icons a {
    color: #fff; /* Farba ikoniek */
    font-size: 24px; /* Veľkosť ikoniek */
    text-decoration: none; /* Odstráni podčiarknutie */
    transition: color 0.3s ease; /* Jemný prechod pri hoveri */
}

.social-icons a:hover {
    color: #007bff; /* Farba pri nabehnutí myšou (príklad: modrá) */
}

/* Media query pre responzívnosť */
@media (max-width: 768px) {
    .footer-content {
        flex-direction: column; /* Na menších obrazovkách pod seba */
        text-align: center; /* Zarovnať na stred */
    }

    .site-footer p {
        margin-bottom: 10px; /* Pridáme medzeru pod copyrightom na mobiloch */
    }

    .social-icons {
        margin-top: 10px; /* Medzera nad ikonkami na mobiloch */
    }
}
.top-header-nav a {
    color: var(--color-primary); 
    text-decoration: none;
    font-weight: 600; 
    padding: 10px 0px; /* Vertikálny padding, horizontálny nie je nutný */
    text-transform: uppercase;
    font-size: 0.8rem; /* Mierne menšie */
    position: relative;
    transition: color 0.3s ease;
    letter-spacing: 0.5px;
}
.top-header-nav a:hover,
.top-header-nav a:focus {
    color: var(--color-secondary);
}
.top-header-nav a::after {
    content: '';
    position: absolute;
    bottom: 5px; 
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 2px;
    background-color: var(--color-secondary);
    transition: width 0.3s ease;
}
.top-header-nav a:hover::after,
.top-header-nav a.active::after { 
    width: 100%;
}

/* --- Hamburger Menu Toggle --- */
.menu-toggle {
    display: block; 
    background: none;
    border: none;
    font-size: 24px; 
    cursor: pointer;
    color: rgb(255, 255, 255); 
    z-index: 1200; 
    position: relative; 
    padding: 5px; /* Pre lepšiu klikateľnú plochu */
}
.menu-toggle-icon {
    display: block;
    width: 25px;
    height: 2px;
    background-color: var(--color-secondary);
    position: relative;
    transition: background-color 0s 0.3s;
}
.menu-toggle-icon::before,
.menu-toggle-icon::after {
    content: '';
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: var(--color-secondary);
    transition: transform 0.3s ease;
}
.menu-toggle-icon::before { top: -7px; }
.menu-toggle-icon::after { bottom: -7px; }

.menu-toggle.active .menu-toggle-icon { background-color: transparent; }
.menu-toggle.active .menu-toggle-icon::before { transform: translateY(7px) rotate(45deg); }
.menu-toggle.active .menu-toggle-icon::after { transform: translateY(-7px) rotate(-45deg); }

/* --- Side Menu (.main-navigation.side-menu) --- */
.side-menu {
    position: fixed;
    top: 0;
    right: 0;
    width: 320px;
    max-width: 85%;
    height: 100vh; /* Celá výška viewportu */
    background-color: var(--color-primary);
    color: var(--color-text-light);
    /* padding: 70px 30px 30px; */ /* TOTO ODSTRÁŇ ALEBO UPRAV */
    box-shadow: -5px 0px 20px rgba(0,0,0,0.25);
    transform: translateX(100%);
    transition: transform 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);
    z-index: 1100;
    display: flex;
    flex-direction: column;
    /* overflow-y: auto; */ /* Toto už máš, ale pre kontrolu */
    /* pridávame padding len cez vnútorné elementy */
}

.side-menu.active {
    transform: translateX(0%);
}

.close-menu-btn {
    position: absolute;
    top: 20px;
    right: 25px;
    background: none;
    border: none;
    color: var(--color-text-light);
    font-size: 2.8rem;
    font-weight: 300;
    line-height: 1;
    padding: 0;
    cursor: pointer;
    /* Zabezpečí, že tlačidlo nezaberá zbytočne veľa miesta */
    width: 40px; /* Príklad pevnej šírky/výšky, aby sa nekrútilo */
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.close-menu-btn:hover {
    color: rgb(255, 255, 255);
}

.side-menu ul {
    list-style: none;
    padding: 0;
    margin: 0; /* Resetujeme margin */
    flex-grow: 1; /* Nechá zoznam zabrať všetok dostupný priestor */
    padding-top: 90px; /* Odsadenie od vrchu, aby menu nezačínalo hneď pod zatváracím tlačidlom */
    padding-bottom: 30px; /* Dôležité: Dostatok priestoru na spodku na skrolovanie */
    overflow-y: auto; /* Ak je zoznam príliš dlhý, iba tento zoznam sa bude skrolovať */
    /* Skúste sem pridať pozadie, aby ste videli hranice ul elementu */
    /* background-color: rgba(0,255,0,0.1); */
}
.side-menu li {
    margin-bottom: 8px;
}
.side-menu a {
    display: block;
    padding: 15px 20px;
    color: var(--color-text-light);
    text-decoration: none;
    font-size: 1.2rem;
    border-radius: 5px;
    transition: background-color 0.2s ease, color 0.2s ease;
    font-weight: 500;
}
.side-menu a:hover,
.side-menu a:focus {
    background-color: rgb(255, 255, 255);
    color: var(--color-primary);
}

/* Úprava pre mobilné zobrazenie, ak by bolo 100px príliš veľa/málo */
@media (max-width: 767px) {
    .side-menu {
        width: 280px; /* Užšie bočné menu na mobiloch */
    }
    .side-menu ul {
        padding-top: 80px; /* Menšie odsadenie pre mobily */
        padding-bottom: 20px; /* Menšie odsadenie zdola pre mobily */
    }
    .side-menu a {
        font-size: 1.1rem;
        padding: 12px 15px;
    }
}

@media (max-width: 480px) {
    .side-menu {
        max-width: 100%; /* Menu môže zabrať celú šírku */
        width: 100%;
    }
    .side-menu ul {
        padding-top: 70px; /* Ešte menšie odsadenie pre veľmi malé obrazovky */
        padding-bottom: 15px; /* Ešte menšie odsadenie zdola */
    }
}

/* --- Page Overlay --- */
.page-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.6); /* Trochu tmavšie */
    z-index: 1050; 
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0s linear 0.4s; 
}
.page-overlay.active {
    opacity: 1;
    visibility: visible;
    transition-delay: 0s; 
}

/* =========== HERO SEKCIA =========== */
.hero-section {
    position: relative;
    height: 100vh;
    display: flex; /* Kľúčové pre centrovanie .hero-content */
    align-items: center; /* Vertikálne centrovanie .hero-content */
    justify-content: center; /* Horizontálne centrovanie .hero-content */
    text-align: center; /* Centrovanie textu vnútri .hero-content */
    overflow: hidden;
    color: var(--color-text-light);
	background-color: var(--color-primary);
}
.hero-bg-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; 
    z-index: 1; 
    transform: scale(1.0); 
}
.hero-bg-image.hero-animated-zoom {
    animation-name: kenburnsZoomInOut;
    animation-duration: 25s;          
    animation-timing-function: ease-in-out; 
    animation-iteration-count: infinite; 
    animation-direction: alternate;      
    transform-origin: center center;     
}
@keyframes kenburnsZoomInOut {
    0% { transform: scale(1.0); }
    100% { transform: scale(1.12); } /* Mierne väčší zoom */
}
.hero-overlay { /* Tento overlay je špecifický pre hero sekciu */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Stmavené podľa požiadavky */
    z-index: 2; 
}
.hero-content {
    position: relative; 
    z-index: 3;       
    padding: 20px;
    max-width: 800px; /* Prípadne obmedzte maximálnu šírku textového bloku pre lepšiu čitateľnosť */
    /* Ak by text stále nebol centrovaný, explicitne pridajte: */
    /* text-align: center; */ /* Toto by malo byť zdedené z .hero-section, ale pre istotu */
    /* Uistite sa, že marginy nebránia flex centrovaniu: */
    /* margin-left: auto; */ /* Pre prípad, že by mal .hero-content fixnú šírku a nebol by flex itemom */
    /* margin-right: auto; */
}
.hero-title {
    color: var(--color-text-light);
    text-shadow: 1px 1px 5px rgba(0,0,0,0.6);
    /* ... ostatné vaše štýly pre .hero-title ... */
}
.hero-subtitle {
    color: var(--color-text-light);
    text-shadow: 1px 1px 4px rgba(0,0,0,0.6);
    /* ... ostatné vaše štýly pre .hero-subtitle ... */
}
.scroll-down-indicator {
    position: absolute;
    bottom: 40px; 
    left: 50%;
    transform: translateX(-50%);
    font-size: 2.5rem; 
    color: var(--color-text-light); 
    animation: bounce 2s infinite;
    opacity: 1; 
    z-index: 3;
    text-shadow: 0px 0px 8px rgba(0, 0, 0, 0.7); 
}
.btn-hero {
    /* ... vaše štýly pre .btn-hero ... */
    /* Tlačidlo ako inline-block sa vycentruje vďaka text-align: center na rodičovi */
}
@keyframes bounce { /* Zostáva rovnaká */
    0%, 20%, 50%, 80%, 100% { transform: translateX(-50%) translateY(0); }
    40% { transform: translateX(-50%) translateY(-10px); }
    60% { transform: translateX(-50%) translateY(-5px); }
}

/* =========== SEKCIA VITAJTE =========== */
.welcome-section { /* Môže byť .section-bg-light alebo bez */ }
.welcome-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 40px;
    align-items: center;
    text-align: left; /* Text v tejto sekcii doľava */
}
.welcome-section .section-title, 
.welcome-section .section-intro { /* Aby nadpis a úvodný text neboli centrované globálnym štýlom */
    text-align: left;
    margin-left: 0;
    margin-right: 0;
    max-width: none; /* Ak bol predtým obmedzený */
}
.welcome-text-content .subsection-title {
    font-size: 1.5rem;
    color: var(--color-secondary);
    margin-top: 1.5em;
}
.welcome-image-content img {
    border-radius: 8px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

/* =========== VODNÉ ŠPORTY - ŠTÝLOVANÝ CAROUSEL =========== */
@media (max-width: 767px) { 
    /* ... vaše ostatné mobilné štýly ... */

    .styled-carousel-container {
        padding: 0; 
        /* overflow: hidden; */ /* Toto by už malo byť na .styled-carousel-track-wrapper, 
                                   ale ak by to pomohlo, môžete experimentálne pridať aj sem, 
                                   hoci by to nemalo byť primárne riešenie pre tento problém. */
    }

    .styled-carousel-track-wrapper {
        width: 100%;
        overflow: hidden; /* Toto je kľúčový element pre orezanie */
        position: relative; /* Pre istotu, aby bol jasný kontext pre orezanie */
    }

.styled-carousel-track {
    display: flex;
    gap: 0 !important; /* Vynútenie nulovej medzery */
    padding: 0;
    margin: 0;
}

.styled-carousel-slide {
    flex-shrink: 0; /* Dôležité, aby sa slide nezmenšoval */
    width: 100%;    /* Toto by malo platiť, ak JS nenastavuje inline šírku */
                    /* Ale keďže JS bude nastavovať presnú šírku, toto je len fallback */
    height: auto; 
    aspect-ratio: 4 / 3; /* Alebo váš preferovaný pomer */
    /* ... ostatné štýly pre slide ... */
}
        /* Pre istotu resetujeme padding a margin aj na samotnom slide */
        padding: 0;
        margin: 0;
        box-sizing: border-box; /* Toto by malo byť globálne, ale pre istotu */

        /* Experiment: Skúsime pridať overflow: hidden aj na samotný slide, 
           ak by jeho vnútorný obsah (napr. obrázok s object-fit) spôsoboval mikro-overflow */
        overflow: hidden; 
    }

    /* Obrázok vnútri slidu (.slide-bg-image) by mal byť už správne nastavený na 100% šírky a výšky rodiča 
       s object-fit: cover, čo je v poriadku. */
    
    /* ... ostatné mobilné štýly pre .slide-content, .btn-slide-info, .styled-carousel-button ... */
    /* Napríklad, ak chcete šípky viac prekryť slide, aby sa zmenšila šanca vidieť okraj ďalšieho */
    .styled-carousel-button.prev {
        left: 5px; /* Trochu bližšie k stredu, ďalej od úplného okraja */
        /* background-color: rgba(0,0,0,0.3); Farba pozadia šípok pre lepšiu viditeľnosť na obrázku */
    }
    .styled-carousel-button.next {
        right: 5px; /* Trochu bližšie k stredu */
        /* background-color: rgba(0,0,0,0.3); */
    }
}
#vodne-sporty .section-title,
#vodne-sporty .section-intro { /* Nadpis a úvod v tejto sekcii doľava */
    text-align: left;
    margin-left: 0; /* Ak je rodič .container */
    margin-right: 0; /* Ak je rodič .container */
    max-width: none;
}
/* Úprava pre .styled-carousel-container */
.styled-carousel-container {
    position: relative;
    width: 100%;
    /* padding: 0 40px; */ /* ODSTRÁNIME TENTO RIADOK alebo ho zmeníme na padding: 0; */
    box-sizing: border-box;
    margin-top: 30px;
    overflow: hidden; /* Toto je dôležité, ponechajte */
}
.styled-carousel-track-wrapper {
    width: 100%;
    overflow: hidden; 
}
.styled-carousel-track {
    display: flex;
    gap: 15px; 
    padding: 10px 0; 
    transition: transform 0.5s cubic-bezier(0.25, 0.1, 0.25, 1); 
}
.styled-carousel-slide {
    position: relative; 
    flex: 0 0 450px; /* Pevná šírka slidu (podľa logov) */
    width: 450px; 
    height: 450px; /* Výška slidu (bola 700x700, potom logy ukázali 450) */
    border-radius: 10px; 
    overflow: hidden; 
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
.styled-carousel-slide:hover {
    transform: translateY(-5px) scale(1.02);
    box-shadow: 0 8px 16px rgba(0,0,0,0.2);
}
.styled-carousel-slide.active { /* Ak budete pridávať triedu pre aktívny slide JS-kom */
    transform: scale(1.05); 
    box-shadow: 0 10px 25px rgba(0,0,0,0.25);
}
.slide-bg-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; 
    z-index: 1;
    transition: transform 0.4s ease;
}
.styled-carousel-slide:hover .slide-bg-image {
    transform: scale(1.1); 
}
.slide-overlay { /* Prekrytie pre text na slide */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.7) 100%); 
    z-index: 2;
}
.slide-content {
    position: absolute;
    bottom: 25px; 
    left: 25px;
    right: 25px;
    z-index: 3;
    color: #fff;
    text-align: left; 
}
.slide-content h3 {
    font-family: var(--font-secondary); 
    font-size: 1.8rem; /* Upravená veľkosť pre 450px slide */
    color: #fff;
    margin: 0 0 10px 0;
    line-height: 1.1;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
}
.btn-slide-info {
    display: inline-block;
    padding: 8px 15px;
    background-color: var(--color-secondary); 
    color: var(--color-primary); 
    border: 1px solid var(--color-secondary); 
    border-radius: 20px; 
    text-decoration: none;
    font-weight: bold;
    font-size: 0.8rem;
    text-transform: uppercase;
    transition: background-color 0.3s ease, color 0.3s ease;
}
.btn-slide-info:hover {
    background-color: transparent;
    color: var(--color-secondary); 
    border-color: var(--color-secondary);
}
.styled-carousel-button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(255, 255, 255, 0.8); 
    color: var(--color-primary); 
    border: none;
    font-size: 1.5rem; 
    padding: 0; /* Aby sa presne vycentrovala ikona */
    width: 45px;  
    height: 45px; 
    line-height: 45px; /* Vertikálne centrovanie ikony */
    text-align: center;
    cursor: pointer;
    z-index: 20;
    transition: background-color 0.3s ease, color 0.3s ease;
    border-radius: 50%; 
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}
.styled-carousel-button:hover {
    background-color: var(--color-secondary);
    color: #fff;
}
.styled-carousel-button.prev { left: -15px; }
.styled-carousel-button.next { right: -15px; }
.styled-carousel-button:disabled { /* Štýl pre deaktivované tlačidlá */
    opacity: 0.5;
    cursor: default;
}


/* =========== BAZÉNY A JACUZZI =========== */
.pools-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    margin-top: 30px;
}
.pool-item {
    text-align: center;
    background-color: #fff;
    padding-bottom: 20px;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.08);
    overflow: hidden;
}
.pool-item h4 {
    margin-top: 15px;
    margin-bottom: 10px;
    color: var(--color-primary);
    font-size: 1.3rem;
}
.pool-item p {
    padding: 0 15px;
    font-size: 0.95rem;
}
.pool-image {
    width: 100%;
    height: 240px; /* Upravená výška */
    object-fit: cover;
}
.reservation-cta { text-align: center; margin-top: 40px; }

/* =========== EVENTY =========== */
.event-types-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 30px;
    margin-top: 30px;
}
.event-type-item {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.08);
    overflow: hidden; 
    display: flex; 
    flex-direction: column; 
}
.event-type-image {
    width: 100%;
    height: 220px; 
    object-fit: cover;
    display: block; 
}
.event-item-content { 
    padding: 20px 25px 25px; 
    flex-grow: 1; 
}
.event-item-content h4 { 
    color: var(--color-secondary);
    margin-top: 0; 
    margin-bottom: 10px;
    font-size: 1.4rem;
}
/* =========== EVENTY - ZVÝRAZNENIE VIP POLOŽKY =========== */

.event-type-item {
    /* Vaše existujúce štýly pre .event-type-item zostávajú */
    /* Napr. background-color, border-radius, box-shadow, overflow, display, flex-direction */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Pridáme transition pre plynulý hover efekt */
}

.event-type-item:hover { /* Jemný hover efekt pre všetky karty */
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.12);
}

.event-item-highlighted {
    border: 3px solid var(--color-secondary); /* Výrazné orámovanie vo farbe akcentu */
    transform: scale(1.05); /* Mierne zväčšenie položky (napr. o 5%) */
    z-index: 10; /* Aby bola vizuálne nad ostatnými, ak by sa prekrývala pri zväčšení */
    position: relative; /* Potrebné pre správne fungovanie z-indexu v grid/flex layoute */
    /* Pôvodný box-shadow z .event-type-item bude tiež aplikovaný a zväčšený */
}

/* Voliteľné: Ak chcete iný hover efekt pre zvýraznenú položku */
.event-item-highlighted:hover {
    transform: scale(1.08) translateY(-5px); /* Trochu väčší zoom a posun pri hover */
    box-shadow: 0 12px 30px rgba(0,0,0,0.18); /* Výraznejší tieň pri hover */
    border-color: var(--color-primary); /* Zmena farby orámovania pri hover */
}

/* Úprava pre grid, aby sa prispôsobil zväčšenej položke, ak je to potrebné */
/* Väčšinou 'transform: scale()' neovplyvní layout okolitých prvkov, 
   ale vizuálne ich môže prekryť. Ak by to spôsobovalo problémy v grid-e,
   mohli by sme zvážiť úpravu gridu alebo marginov. 
   Pre jednoduchý scale by to však malo byť v poriadku. */

@media (max-width: 992px) { /* Na menších tabletoch */
    .event-item-highlighted {
        transform: scale(1.03); /* Mierne menšie zväčšenie na tabletoch */
    }
    .event-item-highlighted:hover {
        transform: scale(1.05) translateY(-3px);
    }
}

@media (max-width: 767px) { /* Na mobiloch */
    .event-types-grid {
        /* Ak sa položky zobrazujú pod sebou (1 stĺpec), zväčšenie nemusí byť také výrazné
           alebo môže byť úplne odstránené, aby sa predišlo prílišnému posunu obsahu. */
    }
    .event-item-highlighted {
        transform: scale(1); /* Na mobiloch žiadne predvolené zväčšenie */
        border-width: 2px; /* Tenšie orámovanie */
        /* Ak chcete aj na mobiloch zväčšenie, ponechajte scale alebo ho zmenšite, napr. scale(1.02) */
    }
     .event-item-highlighted:hover {
        transform: scale(1.02) translateY(-3px); /* Len jemný hover efekt na mobiloch */
    }
}

/* =========== FOOTER =========== */
.site-footer {
    background-color: var(--color-primary);
    color: rgba(255,255,255,0.8);
    padding-top: 40px;
    padding-bottom: 40px;
    text-align: center;
    font-size: 0.9rem;
}
.site-footer p {
    margin-bottom: 0;
}
.site-footer a {
    color: var(--color-secondary);
}
.site-footer a:hover {
    color: #fff;
}


/* =========== RESPONZÍVNE ÚPRAVY =========== */
@media (max-width: 992px) { 
    .top-header-nav {
        display: none; 
    }
    /* Môžete pridať ďalšie úpravy pre tablety, ak sú potrebné */
    .styled-carousel-slide {
        /* Na tabletoch môžu byť slidy menšie, ak 450px je príliš veľa */
        /* flex-basis: 380px; width: 380px; height: 380px; */
    }
    .slide-content h3 {
        font-size: 1.6rem;
    }
}

@media (max-width: 767px) {
    h1 { font-size: 2.2rem; }
    h2.section-title { font-size: 1.8rem; margin-bottom: 30px; }
    p.section-intro { font-size: 1rem; margin-bottom: 30px; }
    
    .header-container {
        /* Na mobiloch môže byť menej paddingu v kontajneri hlavičky */
    }
    .logo img {
        max-height: 40px;
    }
    .menu-toggle {
        font-size: 20px; /* Menšia hamburger ikona */
    }
    .side-menu {
        width: 280px; /* Užšie bočné menu na mobiloch */
    }
    .side-menu a {
        font-size: 1.1rem;
        padding: 12px 15px;
    }

    .hero-subtitle {
        font-size: 1.1rem;
    }
    .scroll-down-indicator {
        font-size: 2rem;
        bottom: 25px;
    }

    .welcome-grid,
    .pools-grid,
    .event-types-grid {
        /* Na mobiloch sa grid itemy zoradia pod seba (1 stĺpec) vďaka auto-fit, minmax */
        gap: 20px; /* Menšie medzery */
    }
    #vodne-sporty .section-title,
    #vodne-sporty .section-intro,
    .welcome-section .section-title,
    .welcome-section .section-intro {
        text-align: center; /* Na mobiloch môžeme nadpisy sekcií centrovať */
        padding: 0 10px; /* Aby text nebol nalepený na okraje */
    }

    .styled-carousel-container {
        padding: 0 10px; /* Menší padding pre carousel na mobiloch, šípky budú bližšie */
    }
    .styled-carousel-slide {
        /* Na mobiloch budú slidy pravdepodobne zaberať väčšinu šírky */
        flex-basis: 85vw; /* Príklad: slide bude 85% šírky viewportu */
        width: 85vw;
        height: auto; /* Výška sa prispôsobí pomeru strán alebo nastavte fixnú */
        aspect-ratio: 1 / 1; /* Pre štvorcové slidy, ak obrázky dovolia */
    }
     .slide-content h3 {
        font-size: 1.4rem;
    }
    .btn-slide-info {
        font-size: 0.75rem;
        padding: 6px 12px;
    }
    .styled-carousel-button { /* Šípky na mobiloch */
        width: 35px;
        height: 35px;
        line-height: 35px;
        font-size: 1.2rem;
    }
    .styled-carousel-button.prev { left: 0px; } /* Šípky úplne na kraji alebo mierne vnútri */
    .styled-carousel-button.next { right: 0px; }


    .section-padding { /* Menší padding na mobiloch */
        padding-top: 50px;
        padding-bottom: 50px;
    }
}

@media (max-width: 480px) {
    /* Ďalšie jemné úpravy pre veľmi malé obrazovky, ak sú potrebné */
    .side-menu {
        max-width: 100%; /* Menu môže zabrať celú šírku */
        width: 100%;
    }
    .styled-carousel-slide {
        flex-basis: 90vw; 
        width: 90vw;
    }
     .slide-content h3 {
        font-size: 1.2rem;
    }
    .btn-slide-info {
        font-size: 0.7rem;
    }
}
/* kontajner widgetu musí byť relatívny */
#ww_c60725e8ad33b {
  position: relative !important;
}

/* overlay úplne v pravom hornom rohu */
#ww_c60725e8ad33b::after {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;       /* úplne pri vrchnej hrane */
  right: 0 !important;     /* úplne pri pravej hrane */
  width: 24px !important;  /* šírka “i” ikonky – uprav podľa potreby */
  height: 24px !important; /* výška “i” ikonky – uprav podľa potreby */
  background-color: transparent !important;
  opacity: 0 !important;
  pointer-events: all !important;
  z-index: 9999 !important;
}
  
/* =========== ŠTÝLY PRE PODSTRÁNKU KONTAKT (kontakt.php) =========== */

/* --- Hero sekcia pre podstránku (rovnaké ako pre bazeny.php, eventy.php) --- */
.subpage-fullwidth-hero {
    width: 100%;
    height: 45vh; 
    min-height: 280px;
    max-height: 400px;
    background-size: cover;
    background-position: center center; /* Môžete upraviť napr. na 'center 60%' ak chcete inú časť obrázku */
    background-repeat: no-repeat;
    position: relative; 
	background-color: var(--color-primary);
}

.page-hero-overlay { 
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.0); /* Tmavosť prekrytia, upravte podľa potreby */
    z-index: 1;
}

.subpage-fullwidth-hero .container { 
    position: relative;
    z-index: 2; 
    height: 100%; 
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center; /* Titulok bude centrovaný */
}

/* Titulok v hero sekcii podstránky (h1.page-title) */
/* Predpokladám, že štýl pre h1.page-title už máte globálne alebo z iných podstránok. Ak nie: */
h1.page-title { 
    font-size: clamp(2.2rem, 5vw, 3.5rem); 
    color: var(--color-text-light);
    text-shadow: 1px 1px 5px rgba(0,0,0,0.7); 
    margin-bottom: 0;
    font-weight: 700; 
}

/* --- Úvodná sekcia podstránky s nadpisom a popisom --- */
.subpage-introduction {
    background-color: var(--color-white);
    /* padding-top a padding-bottom rieši .section-padding */
}
/* Predvolené štýly pre všetky zariadenia (alebo pre desktop, ak už máte definované) */
.subpage-introduction.section-padding {
    padding-top: 100px; /* Pôvodná (väčšia) hodnota pre desktop a iné zariadenia */
    padding-bottom: 100px; /* Pôvodná (väčšia) hodnota */
}

/* --- */

/* Media Query pre mobilné zariadenia (napr. obrazovky do 768px šírky) */
@media (max-width: 768px) {
    .subpage-introduction.section-padding {
        padding-top: 40px; /* Zmenšená hodnota pre mobil */
        padding-bottom: 40px; /* Zmenšená hodnota pre mobil */
    }

    /* Ak ste predtým nastavili farbu textu na bielu a chcete ju len pre mobil, môžete to spraviť takto: */
    /*
    .subpage-introduction .subpage-main-title,
    .subpage-introduction .subpage-description {
        color: white;
    }
    */
}
/* Nadpis a popis v .subpage-introduction */
.subpage-introduction .subpage-main-title,
.subpage-introduction .subpage-description {
    text-align: left; /* Zarovnanie doľava podľa poslednej požiadavky */
    margin-left: 0;
    margin-right: 0;
    max-width: none; /* Bez obmedzenia šírky, ak bolo predtým globálne centrované */
    color: var(--color-primary); /* Nastaví farbu textu na bielu */
}

h2.subpage-main-title { /* Napr. "Nájdete Nás Tu" */
    font-size: clamp(1.8rem, 3.5vw, 2.8rem); 
    color: var(--color-primary);
    margin-bottom: 15px; /* Menšia medzera pod týmto nadpisom */
    font-weight: 700;
    /* text-align: left; už je vyššie */
}

p.subpage-description { /* Popis pod h2.subpage-main-title */
    font-size: 1.1rem;
    line-height: 1.7;
    color: #444;
    margin-bottom: 40px; /* Väčšia medzera pred blokmi s kontakt. údajmi */
    /* text-align: left; už je vyššie */
}

/* --- Bloky s kontaktnými informáciami --- */
.contact-info-blocks-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Responzívny grid, 1-2 stĺpce */
    gap: 25px; /* Medzery medzi blokmi */
}

@media (min-width: 992px) { /* Na väčších obrazovkách môžu byť 2 stĺpce pre info bloky */
    .contact-info-blocks-container {
         grid-template-columns: repeat(2, 1fr);
         gap: 35px;
    }
}

.contact-info-block {
    background-color: var(--color-light-gray); 
    padding: 25px;
    border-radius: 8px;
    /* box-shadow: 0 3px 10px rgba(0,0,0,0.05); */ /* Voliteľný jemný tieň */
}

.contact-info-block h4 {
    font-size: 1.25rem; /* Zväčšené pre lepšiu hierarchiu */
    color: var(--color-primary);
    margin-top: 0;
    margin-bottom: 15px; /* Väčšia medzera pod H4 */
    font-weight: 600;
    border-bottom: 1px solid #ddd; /* Jemná oddeľovacia čiara */
    padding-bottom: 10px;
}

.contact-info-block p {
    margin-bottom: 10px;
    font-size: 1rem;
    color: #333;
    line-height: 1.6;
}
.contact-info-block p:last-child {
    margin-bottom: 0;
}

.contact-info-block p strong {
    font-weight: 600;
    color: var(--color-primary); /* Zvýraznenie kľúčových častí */
}

.contact-info-block a {
    color: var(--color-secondary);
    font-weight: 500;
    word-break: break-word; /* Pre dlhé emailové adresy */
}
.contact-info-block a:hover {
    text-decoration: underline;
    color: var(--color-primary);
}

/* --- Sekcia s mapou --- */
.map-section {
    margin-top: 60px;
    padding-top: 40px;
    border-top: 1px solid #eaeaea; /* Jemnejšia horná deliaca čiara */
}

/* Použijeme existujúcu triedu .contact-section-title pre nadpis mapy,
   ale zabezpečíme jej centrovanie, ak by globálne nebolo. */
.map-section .contact-section-title { 
    display: block; 
    text-align: center; /* Uistíme sa, že je centrovaný */
    border-bottom: none; /* Bez spodnej čiary, ak ju mala globálne */
    margin-bottom: 30px;
    font-size: 1.8rem; /* Konzistentná veľkosť s ostatnými podnadpismi */
    color: var(--color-primary);
}

.map-container {
    width: 100%;
    height: 450px; 
    border-radius: 8px;
    overflow: hidden; 
    box-shadow: 0 8px 20px rgba(0,0,0,0.1); /* Výraznejší tieň pre mapu */
}

.map-container iframe {
    width: 100%;
    height: 100%;
    border: 0;
}
/* =========== ŠTÝLY PRE CENNÍK (cennik.php) =========== */

#pricelist-details { /* Hlavný kontajner pre cenník */
    /* .section-bg-light a .section-padding už sú aplikované v HTML */
}

.pricelist-category {
    margin-bottom: 60px; /* Väčšia medzera medzi kategóriami */
    padding-bottom: 30px;
}
.pricelist-category:not(:last-child) { /* Oddeľovač medzi kategóriami, okrem poslednej */
    border-bottom: 1px solid #dde HubSpotBot aie8;
}


.category-title { /* Pre H3 nadpisy kategórií ako "Vstupné...", "Vodné Športy" */
    font-size: 2rem; /* Výraznejší nadpis kategórie */
    color: var(--color-primary);
    margin-bottom: 35px;
    text-align: center; 
    text-transform: uppercase; /* Veľké písmená pre hlavné kategórie */
    letter-spacing: 1px;
}

.sport-price-section { /* Pre podsekcie v rámci Vodných športov, napr. "Wakeboarding" */
    margin-bottom: 40px;
    padding: 20px;
    background-color: #fff; /* Biele pozadie pre každú športovú sekciu pre odlíšenie */
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}
.sport-price-section:last-child {
    margin-bottom: 0;
}

.sport-price-section h4 { /* Pre H4 nadpisy ako "Wakeboarding", "Paddleboarding" */
    font-size: 1.6rem;
    color: var(--color-secondary); 
    margin-bottom: 25px;
    padding-bottom: 10px;
    border-bottom: 1px dotted #ccc;
    /* text-align: left; */ /* Ak chcete doľava */
}

.pricelist-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Responzívny grid */
    gap: 30px; /* Medzera medzi položkami v grid-e */
}

.price-item { /* Kontajner pre jednotlivé skupiny cien */
    background-color: var(--color-background); /* Ak je .sport-price-section biele, toto môže byť jemne sivé, alebo naopak */
                                                /* Ak .sport-price-section nie je biele, toto môže byť biele */
    padding: 25px;
    border-radius: 6px;
    /* box-shadow: 0 3px 8px rgba(0,0,0,0.06); */ /* Jemný tieň ak je na inom pozadí */
    border: 1px solid #eee; /* Jemný okraj */
}
.price-item.full-width-item { /* Ak chcete, aby položka zabrala celý riadok v grid-e */
    grid-column: 1 / -1; 
}

.price-item h5 { /* Pre podnadpisy v .price-item, napr. "Jednorazové Jazdy" */
    font-size: 1.15rem;
    color: var(--color-primary);
    font-weight: 600;
    margin-bottom: 15px;
    padding-bottom: 8px;
    border-bottom: 1px solid #e5e5e5;
}

.price-item p {
    margin-bottom: 10px;
    font-size: 1rem;
    display: flex; 
    justify-content: space-between; 
    align-items: baseline; /* Zarovnanie textu a ceny na jednu úroveň */
    border-bottom: 1px dashed #f0f0f0; /* Jemná čiara pod každou cenovou položkou */
    padding-bottom: 8px;
}
.price-item p:last-of-type { /* Posledný p v bloku nebude mať čiaru */
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.price-item p .item-name {
    color: #333;
    margin-right: 10px; /* Medzera medzi názvom a cenou */
}
.price-item p .price {
    font-weight: bold;
    color: var(--color-primary);
    white-space: nowrap; /* Zabraňuje zalomeniu ceny */
}
.price-item .note {
    font-size: 0.85rem;
    color: #666;
    margin-top: 12px;
    display: block; 
    justify-content: flex-start; 
    line-height: 1.4;
    border-bottom: none; /* Poznámky nemajú čiaru pod sebou */
    padding-bottom: 0;
}
.price-item .note a {
    color: var(--color-secondary);
    font-weight: 500;
}
.price-item .note a:hover {
    text-decoration: underline;
}

/* Sekcia s dôležitými poznámkami na konci cenníka */
.pricelist-notes {
    margin-top: 50px; /* Odsadenie od poslednej kategórie */
    /* background-color: transparent; */ /* Alebo iné pozadie */
    /* padding už je v HTML, ak je tam .section-padding */
}
.pricelist-notes h4 { /* Nadpis "Dôležité Informácie" */
    /* Štýly už môžu byť definované, ak používate rovnakú triedu inde */
    font-size: 1.5rem;
    color: var(--color-primary);
    text-align: center;
    margin-bottom: 25px;
}
.notes-list {
    list-style-type: none; /* Bez odrážok */
    padding-left: 0;
    font-size: 0.95rem;
    color: #555;
    max-width: 800px; /* Pre lepšiu čitateľnosť */
    margin: 0 auto; /* Centrovanie zoznamu */
    text-align: center; /* Alebo doľava: text-align: left; */
}
.notes-list li {
    margin-bottom: 10px;
    padding-left: 20px; /* Odsadenie pre vlastnú odrážku */
    position: relative;
}
.notes-list li::before { /* Vlastná odrážka */
    content: "›"; /* Alebo iný symbol, napr. •, ✓ */
    position: absolute;
    left: 0;
    color: var(--color-secondary);
    font-weight: bold;
    font-size: 1.2em; /* Veľkosť odrážky */
    line-height: 1;
}
/* =========== ŠTÝLY PRE PODSTRÁNKU VODNÉ ŠPORTY (vodne-sporty.php) =========== */

#watersports-details-page {
    /* .section-padding a .section-bg-light už sú aplikované v HTML */
}

.watersport-entry {
    background-color: var(--color-background); /* Biele pozadie pre každú položku športu */
    margin-bottom: 60px; /* Medzera medzi jednotlivými športmi */
    padding: 30px; /* Vnútorný padding karty */
    border-radius: 12px; /* Väčšie zaoblenie */
    box-shadow: 0 8px 25px rgba(0,0,0,0.09); /* Výraznejší tieň */
}
.watersport-entry:last-child {
    margin-bottom: 0;
}

.watersport-layout {
    display: grid;
    grid-template-columns: 1fr; /* Jeden stĺpec na mobiloch */
    gap: 30px; /* Medzera medzi galériou a popisom */
    align-items: flex-start; 
}

@media (min-width: 992px) { /* Dva stĺpce na desktope */
    .watersport-layout {
        grid-template-columns: 0.8fr 1.2fr; /* Galéria menšia, text väčší priestor */
                                         /* Alebo 1fr 1fr pre rovnaké stĺpce */
        gap: 40px;
    }
    /* Pre striedavé rozloženie */
    .watersport-entry.layout-reversed .watersport-layout {
        grid-template-columns: 1.2fr 0.8fr; /* Text vľavo, galéria vpravo */
    }
    .watersport-entry.layout-reversed .watersport-gallery {
        grid-column: 2 / 3; /* Galéria sa posunie do druhého stĺpca */
        grid-row: 1 / 2;    /* Zostane v prvom riadku */
    }
    .watersport-entry.layout-reversed .watersport-description {
        grid-column: 1 / 2; /* Popis sa posunie do prvého stĺpca */
        grid-row: 1 / 2;
    }
}

.watersport-gallery {
    /* Kontajner pre obrázky */
}

.gallery-main-image {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3; /* Pomer strán pre hlavný obrázok, napr. 16/9 alebo 4/3 */
    object-fit: cover;
    border-radius: 8px;
    margin-bottom: 15px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    display: block;
}

.gallery-thumbnails {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); /* Responzívne thumbnailky */
    gap: 10px;
}

.gallery-thumbnails img {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3; /* Rovnaký pomer strán ako hlavný obrázok, alebo iný */
    object-fit: cover;
    border-radius: 6px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
    cursor: pointer; 
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.gallery-thumbnails img:hover {
    transform: scale(1.08);
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}

.watersport-description h3 {
    font-size: 2.2rem; /* Veľký nadpis pre každý šport */
    color: var(--color-primary);
    margin-top: 0; /* Ak je prvý element v .watersport-description */
    margin-bottom: 8px;
    font-weight: 700;
}

.watersport-description .sport-tagline {
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--color-secondary); /* Akcentová farba */
    margin-bottom: 25px;
    display: block;
}

.watersport-description h4 { /* Podnadpisy ako "Pre Začiatočníkov" */
    font-size: 1.2rem;
    color: var(--color-primary);
    font-weight: 600;
    margin-top: 25px;
    margin-bottom: 10px;
}

.watersport-description p {
    font-size: 1rem; /* Dobrá čitateľná veľkosť */
    line-height: 1.75;
    margin-bottom: 18px;
    color: #444;
}
.watersport-description p:last-of-type {
    margin-bottom: 0;
}
.watersport-description strong {
    font-weight: 600;
    color: var(--color-text);
}

.sport-cta { /* Tlačidlo "Cenník..." */
    margin-top: 30px;
    display: inline-block; 
}
/* =========== ŠTÝLY PRE PODSTRÁNKU JEDLO A DRINKY (jedlo-drinky.php) =========== */

#gastronomy-details-page {
    /* .section-padding a .section-bg-light už sú aplikované v HTML */
}

.menu-section {
    margin-bottom: 50px; /* Medzera medzi hlavnými sekciami (Jedlá, Nápoje) */
}
.menu-section:last-child {
    margin-bottom: 0;
}

.menu-category-title { /* Pre H3 nadpisy ako "Naše Špeciality...", "Osviežujúce Nápoje" */
    font-size: 2rem;
    color: var(--color-primary);
    text-align: center;
    margin-bottom: 40px;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding-bottom: 15px;
    border-bottom: 2px solid var(--color-secondary);
    display: inline-block; /* Aby border nešiel na celú šírku */
    left: 50%; /* Pre centrovanie inline-block elementu s borderom */
    position: relative;
    transform: translateX(-50%);
}

.menu-subcategory-title { /* Pre H4 nadpisy podkategórií */
    font-size: 1.5rem;
    color: var(--color-secondary);
    margin-top: 30px; /* Odsadenie od predchádzajúceho gridu */
    margin-bottom: 25px;
    /* text-align: center; */ /* Alebo doľava podľa preferencie */
    border-bottom: 1px dotted #ccc;
    padding-bottom: 10px;
}
.menu-section > .menu-subcategory-title:first-of-type { /* Prvý podnadpis v sekcii nemá horný margin */
    margin-top: 0;
}


.menu-items-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Responzívny grid */
    gap: 30px;
}

.menu-item {
    background-color: var(--color-background); /* Biele pozadie pre položku */
    border-radius: 8px;
    box-shadow: 0 6px 15px rgba(0,0,0,0.08);
    overflow: hidden; /* Aby obrázok rešpektoval zaoblenie */
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.menu-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.12);
}

.menu-item-image {
    width: 100%;
    height: 220px; /* Fixná výška obrázku, upravte */
    object-fit: cover; /* Obrázok vyplní priestor, môže byť orezaný */
}

.menu-item-content {
    padding: 20px;
    flex-grow: 1; /* Ak by popisky mali rôznu dĺžku, obsah sa roztiahne */
    display: flex;
    flex-direction: column;
}

.menu-item-name { /* H5 nadpis položky */
    font-size: 1.3rem;
    color: var(--color-primary);
    margin-top: 0;
    margin-bottom: 8px;
    font-weight: 600;
}

.menu-item-description {
    font-size: 0.9rem;
    color: #555;
    line-height: 1.6;
    margin-bottom: 15px;
    flex-grow: 1; /* Popis zaberie dostupný priestor */
}

.menu-item-price {
    font-size: 1.2rem;
    font-weight: bold;
    color: var(--color-secondary);
    margin-top: auto; /* Zatlačí cenu na spodok karty, ak je popis krátky */
    text-align: right;
}