/*=============== GOOGLE FONTS ===============*/

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap");

/*=============== VARIABLES CSS ===============*/

:root {

 --primary-color: #5C4033; /* Hnědá barva z loga */

    --bg-light: #f9f9f9;

    --bg-dark: #e0e0e0;

    --text-color: #333;

    --max-width: 1440px;

    --header-height: 100px; /* Přibližná výška hlavičky */



/*========== Font and typography ==========

  5rem = 8px | 1rem = 16px ...*/

  --body-font: "Poppins", sans-serif;

  --normal-font-size: .938rem;

  --small-font-size: .813rem;

  --smaller-font-size: .75rem;



/*========== Font weight ==========*/

  --font-medium: 500;

  --font-semi-bold: 600;



  /*========== z index ==========*/

  --z-tooltip: 10;

  --z-fixed: 100;

  --z-index: 100;



/*=== FONT WEIGHT ===*/

    --font-weight-light: 300;

    --font-weight-regular: 400;

    --font-weight-medium: 500;

    --font-weight-bold: 700;

    --font-weight-bold-extra: 800;

    --font-weight-weight: 1000;



/*=== COLORS ===*/

    --color-white: #FFF;

    --color-black: #141414;

    --color-black0: #000000;

    --color-light-grey: #F2F2F2;    /*white/grey*/

    --color-silver: #C2C2C2;

    --color-brown: #443D3D;         /*light brown*/

    --color-blue: #3E76AA;          /*UCLA blue*/

    --color-red: #C56053;           /*indian red*/

    --color-yellow: #f6ba02;        



/*=== FONT SIZE ===*/   

    --font-size-tiny: 0.625rem;         /*10px*/

    --font-size-small: 0.75rem;         /*12px*/

    --font-size-normal: 1rem;           /*16px*/

    --font-size-medium: 1.25rem;        /*20px*/

    --font-size-big: 1.5rem;            /*24px*/

    --font-size-big2: 1.75;             /*28px*/

    --font-size-bigger: 2rem;           /*32px*/

    --font-size-biggest: 2.5rem;        /*40px*/

    --font-size-large: 4rem;            /*64px*/





/*=============== BASE ===============*/

* {

  box-sizing: border-box;

  padding: 0;

  margin: 0;

}



html {

  scroll-behavior: smooth;

  scroll-padding-top: 80px;

}



body {

  font-family: var(--body-font);

  font-size: var(--normal-font-size);

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

  color: var(--text-color);

  line-height: 1.6;

}



img, form{

  max-width: 100%;

}



ul {

  list-style: none;

}



a {

  text-decoration: none;

}



/*=============== REUSABLE CSS CLASSES ===============*/

/* --- KONTEJNER (Šířka 1440px) --- */

.container {

    max-width: var(--max-width);

    margin: 0 auto; /* Vycentrování */

    padding: 0 20px; /* Odsazení */

    width: 100%;

}





.site-header {

    background-color: #fff;

    padding: 10px 0;

    position: sticky; /* Menu se "přilepí" k hornímu okraji při scrollování */

    top: 0;

    z-index: 1000;

    box-shadow: 0 2px 10px rgba(0,0,0,0.05); 

}



.header-content {

    display: flex;

    justify-content: space-between; /* Logo vlevo, menu vpravo */

    align-items: center;

    height: var(--header-height);

}



.logo img {

    height: 80px; 

    display: block;

}



/* --- NAVIGACE --- */

.main-nav ul {

    list-style: none;

    display: flex;

    gap: 30px;

}



.main-nav a {

    text-decoration: none;

    color: var(--color-black);

    font-size: 1.4rem;

    font-weight: 600;

    transition: color 0.3s ease;

}



.main-nav a:hover {

    color: var(--primary-color) !important;

    text-decoration: underline;

    transition: all 0.3s ease;

}





.hamburger {

    display: none;

    cursor: pointer;

}



.bar {

    display: block;

    width: 30px;

    height: 5px;

    

    margin: 5px auto;

    transition: all 0.3s ease-in-out;

    background-color: #333; /* Barva čárek burgeru */

}



/* --- NOVÉ: RESPONZIVITA PRO MOBILY --- */

@media (max-width: 768px) {

    /* Zobrazíme hamburger */

    .hamburger {

        display: block;

        z-index: 1001; /* Aby byl nad menu */

    }



    /* Animace burgeru na křížek, když je aktivní */

    .hamburger.active .bar:nth-child(2) {

        opacity: 0;

    }

    .hamburger.active .bar:nth-child(1) {

        transform: translateY(8px) rotate(45deg);

    }

    .hamburger.active .bar:nth-child(3) {

        transform: translateY(-8px) rotate(-45deg);

    }



    

    .main-nav {

        position: fixed;

        left: -100%; /* Schované vlevo mimo obrazovku */

        top: 70px; /* Posunuto pod hlavičku (uprav dle výšky hlavičky) */

        gap: 0;

        flex-direction: column;

        background-color: #fff;

        width: 100%;

        text-align: center;

        transition: 0.3s;

        box-shadow: 0 10px 10px rgba(0,0,0,0.1);

        padding-bottom: 20px;

    }



    /* Když JS přidá třídu .active, menu vyjede */

    .main-nav.active {

        left: 0;

    }



    .main-nav ul {

        flex-direction: column; /* Položky pod sebe */

        gap: 20px;

        padding: 20px 0;

    }

}





/* --- SEKCE --- */

.page-section {

    min-height: 100vh; /* Sekce na celou výšku okna */

    padding: 50px 0;

    display: flex;

    align-items: center; /* Vertikální centrování obsahu (volitelné) */

    

    

}



.page-section h2 {

    font-size: 3rem;

    color: #4A3428 !important;

    margin-bottom: 20px;

}



/* ---======= HERO SEKCE (Kavárna) =======--- */

#kavarna{

  padding-top: 0;

}



.hero-section {

    padding-top: 30px;

    padding-bottom: 30px;

}





.hero-box {

    position: relative; /*  Udrží "absolutní" prvky uvnitř */

    height: 80vh;      /* Výška sekce */

    width: 100%;

    border-radius: 30px; 

    overflow: hidden;    

    box-shadow: 0 10px 30px rgba(0,0,0,0.1);

    

    display: flex;

    align-items: center;

    text-align: center;

}







.hero-image {

    position: absolute; /* Vytrhne obrázek z toku, aby mohl být "v pozadí" */

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    

    /* sets how the content of a replaced element, should be resized to fit its container. */

    object-fit: cover; 

    

    z-index: 1; /* Nejnižší vrstva */

}



/* 2. Ztmavovací vrstva */

.hero-overlay {

    position: absolute;

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

    background: rgba(0, 0, 0, 0.5); /* 30% černá */

    z-index: 2; /* Vrstva nad obrázkem */

}



/* 3. Text a obsah */

.hero-content {

    position: absolute; /* Aby reagoval na z-index */

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    z-index: 3;

    

    /* 2. Flexbox pro rozmístění Nahoře / Dole */

    display: flex;

    flex-direction: column;         /* Prvky pod sebou */

    justify-content: space-between; 

    align-items: center;            

    color: #fff;

    

    /* Odsazení od krajů  */

    padding-top: 60px;    

    padding-bottom: 60px; 

    padding-left: 20px;   /* Bezpečná zóna pro mobily */

    padding-right: 20px;

}





.hero-text-group p {

    max-width: 750px;   /* Omezení šířky textu */

}



/* nadpisy a tlačítko ... */

.hero-content h1 {

    font-size: 3.5rem;

    font-weight: 700;

    margin-bottom: 1.5rem;

    text-shadow: 0 2px 4px rgba(0,0,0,0.3);

}



.hero-content p {

    font-size: 1.2rem;

    font-weight: 300 !important;

    line-height: 1.6;

    margin-bottom: 2.5rem;

    text-shadow: 0 1px 3px rgba(0,0,0,0.3);

}



.cta-button {

    display: inline-block;

    background-color: #F3EBE6;

    color: #5C4033;

    padding: 15px 40px;

    font-size: 1.1rem;

    font-weight: 600;

    text-decoration: none;

    border-radius: 5px;

    transition: all 0.3s ease;

}



.cta-button:hover {

    background-color: #fff;

    transform: translateY(-3px);

}



/*=============== MENU SECTION (Speciální nabídka) ===============*/





.menu-section {

    background-color: #F2E6D8; 

    text-align: center;        /* Zarovnání nadpisů na střed */

}



#menu {

    min-height: 80vh;      

    padding-bottom: 200px; 

}



.section-title {

    font-size: 2.5rem;

    text-transform: uppercase; 

    letter-spacing: 1px;

}



#menu .section-title {

    margin-bottom: 100px; /* Zvětšíme mezeru (původně bylo globálně 50px) */

}



/* Grid Layout */

.menu-grid {

    display: grid;

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

    gap: 80px; /* Mezera mezi kartami */

}



/* Styl Karty */

.menu-card {

    background-color: #fff; 

    border-radius: 20px;   

    overflow: hidden;       /* Aby obrázek nepřetékal přes rohy */

    box-shadow: 0 20px 40px rgba(0,0,0,0.1); /* 3D efekt */

    transition: transform 0.3s ease, box-shadow 0.3s ease;

    display: flex;

    flex-direction: column;

}



.menu-card:hover {

    transform: translateY(-10px); /* Efekt zvednutí při najetí myší */

}





.card-image {

    height: 400px; /* Fixní výška */

    width: 100%;

    padding: 15px; /* Odstup obrázku od kraje karty (podle designu) */

}



.card-image img {

    width: 100%;

    height: 100%;

    object-fit: cover; /* Obrázek vyplní prostor a nedeformuje se */

    border-radius: 15px; 

}



/* --- OBSAH KARTY  --- */

.card-content {

    padding: 0 20px 30px 20px; 

    text-align: center;

    

    flex-grow: 1;           /* 1. Roztáhne tento blok na celou zbylou výšku karty */

    display: flex;          /* 2. Uvnitř obsahu zapneme taky flexbox */

    flex-direction: column; /* 3. Prvky (nadpis, text, tlačítko) pod sebe */

}





/* Texty v kartě */

.card-content h3 {

    font-size: 1.8rem;

    margin-bottom: 10px;

    color: #000;

    font-family: var(--heading-font);

}



.card-content p {

    font-size: 1rem;

    color: #666;

    margin-bottom: auto;  /* stejná výška tlačítek */

    padding: 0 20px; 

}





.btn-outline {

    display: inline-block;

    padding: 12px 30px;

    border: 2px solid #D6C0B0; /* Barva rámečku (světle hnědá) */

    border-radius: 10px;

    color: var(--primary-color);

    font-weight: 600;

    font-size: 0.9rem;

    text-transform: uppercase;

    letter-spacing: 1px;

    transition: all 0.3s ease;



    margin-top: 20px;

    align-self: center;;

}



.btn-outline:hover {

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

    border-color: var(--primary-color);

    color: #fff;

}



@media (max-width: 1224px) {

    .menu-grid {

       

        gap: 60px;

    }

} 



@media (max-width: 1024px) {

    .menu-grid {

       

        gap: 40px;

    }

} 



/* RESPONSIVITA (Mobil) */

@media (max-width: 900px) {

    .menu-grid {

        grid-template-columns: 1fr; /* Na mobilu jen 1 sloupec (karty pod sebou) */

        max-width: 400px; /* Omezení šířky karet na mobilu */

        margin: 0 auto;

        gap: 30px;

    }

}







/*=============== ABOUT SECTION (Náš Příběh) ===============*/



#pribeh {

   

    background-color: #4A3428 !important; 

    color: #F3EBE6; 

    min-height: 60vh;

}



.about-content {

    display: flex;

    align-items: center;

    gap: 60px;

    padding: 40px 0;

}





.about-image {

    flex: 1;

}



.about-image img {

    width: 100%;

    height: auto;

    border-radius: 30px;

    box-shadow: 0 20px 40px rgba(0,0,0,0.4); 

    object-fit: cover;

    max-height: 500px;

}





.about-text {

    flex: 1;

    color: #F3EBE6; 

}



.about-text h2 {

    font-size: 3rem;

    margin-bottom: 40px;

    text-align: left;

    color: #F2E6D8 !important; 

}



.about-text p {

    margin-bottom: 25px;

    font-size: 1.15rem;

    line-height: 1.8;

    opacity: 0.9;

    

}





.about-motto {

    font-weight: 500;

    font-size: 1.3rem;

    margin-top: 40px;

    font-family: var(--heading-font);

    color: #D6C0B0; 

}



/* --- RESPONSIVITA --- */

@media (max-width: 968px) {

    .about-content {

        flex-direction: column;

        gap: 40px;

        text-align: center;

    }

    

    .about-text h2 {

        text-align: center;

    }

}





/*=============== WORKSHOP SECTION (Tvořilna) ===============*/



#tvorilna {

    background-color: #e6e6e6; 

    color: #5C4033; 

    padding-bottom: 80px;

}



/* Hlavička a úvodní text */

.section-header {

    text-align: center;

    margin-bottom: 50px;

    max-width: 800px;

    margin-left: auto;

    margin-right: auto;

}



.section-header h2 {

    font-size: 3rem;

    margin-bottom: 20px;

    color: var(--primary-color);

}



.section-intro {

    font-size: 1.1rem;

    line-height: 1.6;

    color: #5C4033;

}



/* --- HLAVNÍ KARTA (Wrapper) --- */

.workshop-card {

    background-color: #fff; /* Bílé pozadí karty */

    border-radius: 30px;

    box-shadow: 0 20px 50px rgba(0,0,0,0.08);

    overflow: hidden; /* Aby obrázek nepřetekl z kulatých rohů */

    

    display: flex; /* Flexbox zajistí stejnou výšku sloupců */

    align-items: stretch; /* Roztáhne obsah na celou výšku */

}



/* LEVÁ STRANA (Obsah) */

.workshop-content {

    flex: 3; /* Zabere 60% šířky (3 díly z 5) */

    padding: 50px;

}



/* PRAVÁ STRANA (Obrázek) */

.workshop-image {

    flex: 2; /* Zabere 40% šířky (2 díly z 5) */

    position: relative;

    min-height: 300px; 



    /* Oříznutí rohů, aby obrázek nepřečuhoval přes kulaté rohy karty */

    border-top-right-radius: 30px;

    border-bottom-right-radius: 30px;

    overflow: hidden;

}



.workshop-image img {

    position: absolute; 

    top: 0;

    left: 0;

    width: 100%;

    height: 100%; /* Roztáhne se přesně na výšku rodiče (textu) */

    object-fit: cover; /* Ořízne se, aby se nedeformoval */

}





.course-group h3 {

    font-size: 1.5rem;

    margin-bottom: 20px;

    color: var(--color-black0);

    font-family: var(--body-font); 

    font-weight: 600;

}



.course-list {

    list-style: none;

}





.course-item {

    display: flex;

    flex-wrap: wrap; /* Aby se to na menším monitoru zalomilo */

    align-items: center;

    gap: 15px;

    padding: 10px 0;

    border-bottom: 1px solid #eee;

    font-size: 1rem;



    transition: all 0.3s ease; 

    

    border-left: 4px solid transparent; 

    cursor: pointer; /* Změní kurzor na ručičku, aby to vypadalo klikatelně */

}



.course-item:last-child {

    border-bottom: none;

}





.c-date { 

  font-weight: 600; 

  min-width: 100px; 

}





.c-name { 

  flex-grow: 1; /* Název zabere volné místo */

  font-weight: 500; } 

  

.c-time { 

  color: #666; 

}

.c-price { 

  font-weight: 600; 

  color: #5C4033; 

}





.simple-row .c-desc { 

    flex-grow: 1;   /*protáhnutí text s button na celý řádek*/

}





.divider {

    /*border: 0;*/

    height: 1px;

    background: #D6C0B0;

    margin: 30px 0;

    opacity: 0.5;

}



/* --- STATUS BADGES (Štítky) --- */

.c-status {

    font-size: 0.75rem;

    font-weight: 700;

    text-transform: uppercase;

    padding: 4px 10px;

    border-radius: 20px;

    white-space: nowrap;

}



.status-free {

    background-color: #D4EDDA;

    color: #155724;

}



.status-last {

    background-color: #FFEBAA; /* Oranžová z wireframu */

    color: #856404;

}



.status-full {

    background-color: #F8D7DA;

    color: #721C24;

}



@media (max-width: 1140px) {

     .workshop-image {

        display: none;

    }

}



/* ---===== RESPONSIVITA =====--- */

@media (min-width: 969px){



/* 2. HOVER EFEKT NA DESKTOPU (Řádky) */

.course-item:hover {

        background-color: #fffaf4; 

        transform: scale(1.02); /* Zvětšení - jen lehce (1.02x), aby se nerozbil text */

        box-shadow: 0 10px 25px rgba(0,0,0,0.08);

        

        /* Zajistí, že zvětšený řádek bude nad ostatními */

        z-index: 10;

        position: relative;

    }

}





@media (max-width: 968px) {

/* 3. HOVER EFEKT NA MOBILU (Karty) */

    .course-item:hover {

        transform: translateY(-5px);    /* Na mobilu kartu posuneme nahoru (lift effect) */

        box-shadow: 0 15px 30px rgba(0,0,0,0.17);

        background-color: #fff;

        border-color: transparent; /* Schováme rámeček, stín stačí */

    }

    

    .course-item:focus { /*kliknutí*/

        outline: 2px solid #5C4033; /* Zvýraznění při zaměření */

        outline-offset: 2px;

    }



    .course-item:active {

        transform: scale(0.98); /* Jemné zmáčknutí */

        box-shadow: 0 2px 10px rgba(0,0,0,0.05);

    }

    .workshop-card {

        flex-direction: column-reverse; /* Obrázek nahoru */

        background: transparent;

        box-shadow: none;

        overflow: visible;

        align-items: stretch;

    }

    

    .workshop-image {

        display: none;

    }

    

    .workshop-image img{

        display: none;

    }



    .workshop-content {

        padding: 0;

    }



    .course-group {

        background-color: #fff;

        border-radius: 20px;

        padding: 20px;

        margin-bottom: 25px; 

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

    }



    /* Nadpisy sekcí na střed */

    .course-group h3 {

       margin-top: 0;

        margin-bottom: 15px;

        font-size: 1.3rem;

        text-align: center;

        padding-left: 5px;

    }



    /* 4. KONTEJNER PRO KARTY (Flexbox s zalamováním) */

    .course-list {

        display: flex;

        flex-wrap: wrap; /* TOTO JE KLÍČOVÉ: Povolí zalamování na další řádek */

        gap: 10px; /* Mezera mezi kartičkami */

    }





    /* 5. JEDNOTLIVÉ KARTY (Nyní jako bloky) */

    .course-item {

      

        width: calc(50% - 5px);   /* 50% - 1/2 gap = 2 vedle sebe */

        min-width: 150px; 

        flex-grow: 1; /* vyplněná místa */



        /* Vzhled karty */

        background-color: #fcfcfc; 

        border: 1px solid #eee;

        border-radius: 12px;

        padding: 15px;

        

        /* Flex uvnitř karty (položky pod sebou) */

        display: flex;

        flex-direction: column;

        justify-content: space-between; /* Roztáhne obsah (cena dolů) */

        gap: 5px;

        

        margin-bottom: 0; /* Margin už řeší 'gap' v rodiči */

    }



    

    /* Úpravy textů pro mobilní kartu */

    .c-name {

        font-size: 1rem;

        font-weight: 700;

        color: var(--primary-color);

        order: -1; /* Název první */

        line-height: 1.3;

        padding: 0;

        margin-bottom: 5px;

    }



    .c-date {

        font-size: 0.8rem;

        color: #888;

        font-weight: 600;

        text-transform: uppercase;

        width: auto;

    }



    /* Čas a cena */

    .c-time, .c-price, .c-status {

        width: auto;

        min-width: auto;

        text-align: left;

        font-size: 0.85rem;

    }



    .c-time {

        color: #666;

        font-size: 0.8rem;

    }



    .c-price {

       

        font-weight: 700;

        color: #5C4033;

        margin-top: 5px;

    }



    .c-status {

        margin-left: 0;

        margin-top: 5px;

        align-self: center;

        font-size: 0.7rem;

        padding: 3px 8px;

    }

    

    /* Skryjeme oddělovací čáry */

    .divider { 

      display: none; 

    }

}



/*=============== GALLERY SECTION ===============*/



.gallery-section {

    background-color: #fff; 

    /*Žádná fixní výška => aby se sekce natáhla podle obrázků */

}



.gallery-masonry {

    display: flex;

    gap: 20px; 

}



.gallery-col {

    flex: 1 1 0; /* Každý sloupec zabere stejnou šířku (1/3) */

    min-width: 0;

    display: flex;

    flex-direction: column; 

    gap: 20px; 

}



.gallery-item {

    position: relative;

    border-radius: 12px; 

    overflow: hidden; 

    box-shadow: 0 4px 15px rgba(0,0,0,0.08); /* Jemný stín */

    transition: transform 0.3s ease, box-shadow 0.3s ease;

}



/* Aby obrázky nepřetékaly a zachovaly poměr stran */

.gallery-item img {

    width: 100%;

    height: auto;

    display: block; /* Odstraní mezeru pod obrázkem */

    object-fit: cover;

    transition: transform 0.5s ease; /* Plynulý přechod pro zoom */

}





.gallery-item:hover {

    transform: translateY(-5px); /* Celá položka se lehce nadzvedne */

    box-shadow: 0 8px 25px rgba(0,0,0,0.15); /* Zvýrazní se stín */

}



.gallery-item:hover img {

    transform: scale(1.05); /* přiblížení obrázku */

}



/* --- RESPONZIVITA --- */

/* Pro tablety (např. pod 992px) - změna na 2 sloupce */

@media (max-width: 992px) {

    .gallery-masonry {

        flex-wrap: wrap; /* Povolí zalamení */

    }

    .gallery-col {

        flex: 1 1 calc(50%-10px); /* Sloupce budou mít šířku cca 50% */

        /*min-width: 300px; /* Minimální šířka sloupce */

    }



    #galerie{

        min-height: 80vh;

    }

}



/* změna na 1 sloupec */

@media (max-width: 768px) {

    .gallery-masonry {

        flex-direction: row;

        flex-wrap: wrap; /* Sloupce se poskládají pod sebe */

    }

    .gallery-col {

       flex: 1 1 calc(50%-10px); /* Každý "sloupec" (nyní blok obrázků) zabere celou šířku */

    }



    #galerie{

        min-height: 60vh;

    }

}



@media (max-width: 540px) {

    



    #galerie{

        min-height: 40vh;

    }

}



/*=============== CONTACT SECTION ===============*/



#kontakt {

    background-color: #4A3428 !important; 

    color: #F2E6D8;

    padding-bottom: 60px;

    min-height: auto;

}





#kontakt .section-header {

    text-align: center;

    margin-bottom: 50px; 

}



#kontakt .section-header h2 {

    font-size: 3rem;

    color: #F2E6D8 !important;

    font-weight: 700;

}





.contact-wrapper {

    display: flex;

    align-items: flex-start; 

    gap: 60px;

    padding-bottom: 40px;

}



/* --- OBRÁZEK --- */

.contact-image {

    flex: 1;

    position: relative;

}



.contact-image img {

    width: 100%;

    height: auto;

    border-radius: 30px;

    box-shadow: 0 20px 40px rgba(0,0,0,0.5);

    object-fit: cover;

    max-height: 550px; 

}



/* --- TEXTOVÁ ČÁST --- */

.contact-info {

    flex: 1;

    text-align: left;

    padding-top: 10px; 

}





.info-block {

    margin-bottom: 30px;

}



.info-block h3 {

    font-size: 1.2rem;

    color: #D6C0B0; 

    text-transform: uppercase;

    letter-spacing: 1px;

    margin-bottom: 10px;

    font-weight: 600;

}



.info-block p {

    font-size: 1.1rem;

    line-height: 1.6;

    color: #F2E6D8;

}





.opening-hours {

    list-style: none;

    padding: 0;

    max-width: 400px;

}



.opening-hours li {

    display: flex;

    justify-content: space-between;

    align-items: flex-end;

    margin-bottom: 8px;

    font-size: 1.1rem;

}



.opening-hours .dots {

    flex-grow: 1;

    border-bottom: 1px dotted rgba(242, 230, 216, 0.3);

    margin: 0 10px 5px 10px;

}





.contact-links a {

    color: #F2E6D8;

    text-decoration: none;

    transition: color 0.3s ease;

    display: inline-block;

    margin-bottom: 5px;

    font-size: 1.15rem;

}



.contact-links a:hover {

    color: #fff;

    text-decoration: underline;

}





.social-links {

    margin-top: 40px;

    display: flex;

    gap: 15px;

}



.social-btn {

    padding: 12px 25px;

    border: 1px solid #F2E6D8;

    border-radius: 30px;

    color: #F2E6D8;

    text-decoration: none;

    font-weight: 600;

    text-transform: uppercase;

    font-size: 0.9rem;

    transition: all 0.3s ease;

}



.social-btn:hover {

    background-color: #F2E6D8;

    color: #4A3428;

    transform: translateY(-3px);

}





.main-footer {

    background-color: #030303;

    color: white !important;

    text-align: center;

    font-size: 1rem;

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

}



/* --- RESPONSIVITA --- */

@media (max-width: 968px) {

    .contact-wrapper {

        flex-direction: column;

        gap: 40px;

        text-align: center;

        align-items: center;

    }

    

    .contact-info {

        text-align: center;

        width: 100%;

    }

    

    .opening-hours {

        margin: 0 auto;

    }

    

    .social-links {

        justify-content: center;

    }



    .contact-image img  {

        max-width: 600px;

    }

}





/*========= GOOGLE MAP ============*/

.map-wrapper {

    width: 100%;

    max-width: 100%;

    overflow: hidden; 

    border-radius: 10px; 

    box-shadow: 0 4px 15px rgba(0,0,0,0.1); /* Jemný stín*/

}



.map-wrapper iframe {

    width: 100%; /* Roztáhne mapu na celou šířku kontejneru */

    display: block; /* Odstraní spodní mezeru, kterou dělají inline elementy */

    height: 300px; /* Výška mapy - můžeš změnit dle potřeby */

}



/* Úprava pro mobily - menší výška mapy, aby nezabrala celý displej */

@media (max-width: 768px) {

    .map-wrapper iframe {

        height: 300px;

    }

}



.reveal {

    opacity: 0;

    transform: translateY(30px);

    transition: all 0.6s ease-out; /* Rychlost animace */

}



/* Konečný stav - prvek je vidět a na svém místě */

.reveal.active {

    opacity: 1;

    transform: translateY(0);

}



/* Aby se nenačítalo vše naráz, dáme obrázkům malé zpoždění */

.reveal-delay {

    transition-delay: 0.1s;

}





}