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

   ZÁKLAD

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



body {

    margin: 0;

    background-color: #fbf8f3;

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

    color: #111;

}



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

   HORNÍ MENU

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



.main-nav {

    position: sticky; /* referenční bod pro logo*/

    top: 0;

    z-index: 1000;

    display: flex;

    justify-content: center;

    gap: 40px;

    padding: 25px 0;

    background-color: #ffffff;

}



.main-nav a {

    text-decoration: none;

    font-size: 0.95em;

    letter-spacing: 1px;

    color: #000;

    font-weight: 400;

    text-transform: uppercase;

    position: relative;

}



/* podtržení při hoveru */

.main-nav a::after {

    content: "";

    position: absolute;

    left: 0;

    bottom: -6px;

    width: 0;

    height: 1px;

    background-color: #000;

    transition: width 0.3s ease;

}



.main-nav a:hover::after {

    width: 100%;

}



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

   HORNÍ MENU – MOBIL

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



@media (max-width: 700px) {



    .main-nav {

        flex-wrap: wrap;           /* ✅ zalomení */

        gap: 16px;                 /* ✅ menší mezery */

        padding: 16px 12px;        /* ✅ menší výška pruhu */

    }



    .main-nav a {

        font-size: 0.85em;         /* ✅ menší text */

        letter-spacing: 0.5px;

        white-space: nowrap;       /* ✅ žádné lámání textu */

    }

}



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

   LOGO – DOMOVSKÁ STRÁNKA

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



.main-nav {

    position: sticky; /* referenční bod pro logo */

    top: 0;

    z-index: 1000;

}



/* logo ukotvené k pruhu */

.site-logo {

    position: absolute;

    left: 80px;

    bottom: 550px;    /* ✅ polovina výšky loga */

    z-index: 1100;

}



.site-logo img {

    height: 180px;     /* ✅ logo je 80px vysoké */

    width: auto;

    display: block;

}





@media (max-width: 900px) {

    .site-logo {

        left: 10px;

        bottom: -30px;

    }



    .site-logo img {

        height: 60px;

    }

}





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

   NADPISY

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



/* Hlavní nadpis – jen úvod */

.home-title {

    text-align: center;

    font-family: 'Baguet Script', cursive;

    font-size: 4em;

    margin: 30px 0;

}



/* Nadpisy stránek */

.page-title {

    max-width: 1200px;

    margin: 60px auto 30px;

    padding: 0 20px;

    font-family: 'Baguet Script', cursive;

    font-size: 3em;

    font-weight: 300;

    text-align: left;

}



.page-title::after {

    content: "";

    display: block;

    width: 90px;

    height: 1px;

    background-color: #999;

    margin-top: 12px;

}





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

   PODNADPISY – H3

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



.content h3 {

    margin-top: 40px;

    margin-bottom: 12px;

    font-size: 1.4em;

    font-weight: 500;

    color: #333;

}





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

   OBECNÝ KONTEJNER STRÁNKY

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



.page {

    max-width: 1200px;

    margin: 0 auto 80px;

    padding: 0 20px;

}



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

   ROZLOŽENÍ STRÁNEK (MODIFIKÁTORY)

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



/* Kontakt – text + mapa */

.page--contact {

    display: grid;

    grid-template-columns: 1fr 1.3fr;

    gap: 80px;

}



/* Ceník – text + fotka */

.page--pricelist {

    display: grid;

    grid-template-columns: 3fr 1.5fr;

    gap: 80px;

}



/* --------------- GALERIE – DOMOVSKÁ STRÁNKA-----------  */





.gallery {

    display: flex;

    height: 400px;

}



.slot {

    position: relative;

    flex: 1;

    overflow: hidden;

}



.layer {

    position: absolute;

    inset: 0;

    background-size: cover;

    background-position: center;

    transition: opacity 1.5s ease-in-out;

}



.layer.bottom {

    z-index: 1;

    opacity: 1;

}



.layer.top {

    z-index: 2;

    opacity: 0;

}







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

   INDEX – GALERIE (MOBIL)

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



@media (max-width: 600px) {



    .gallery {

        height: 220px;   /* ✅ výrazně nižší */

    }

}





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

   GALERIE – MALÉ NÁHLEDY

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







.gallery-grid {

    max-width: 1200px;

    margin: 60px auto;

    padding: 0 20px;



    display: grid;

    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));

    gap: 20px;

}



.gallery-grid img {

    width: 100%;        /* ✅ obrázek se přizpůsobí sloupci */

    height: auto;

    display: block;

    border-radius: 8px;

}



.gallery-grid img {

    transition: transform 0.2s ease;

}



.gallery-grid img:active {

    transform: scale(0.96);

}



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

   LIGHTBOX – PROHLÍŽENÍ FOTEK

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



.lightbox {

    position: fixed;

    inset: 0;

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

    display: none;

    align-items: center;

    justify-content: center;

    z-index: 2000;

    cursor: pointer;

}



.lightbox img {

    max-width: 90vw;

    max-height: 90vh;

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

    border-radius: 6px;

}





.lightbox {

    touch-action: pan-y;

}





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

   GALERIE – MOBIL

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



@media (max-width: 600px) {



    .gallery-grid {

        grid-template-columns: repeat(auto-fill, 110px); /* ✅ malé náhledy */

        gap: 12px;

        justify-content: center;

    }



    .gallery-grid img {

        width: 90px;            /* ✅ STEJNÉ jako sloupec */

        height: auto;

        border-radius: 5px;

    }

}



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

   KONTAKT

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



.contact {

    max-width: 420px;

}



.contact p {

    margin: 0 0 14px;

    line-height: 1.6;

}



.contact strong {

    font-weight: 500;

}



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

   SOCIÁLNÍ SÍTĚ – KONTAKT

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



.social {

    margin-top: 12px;     /* mezera pod GPS */

}



.social a {

    display: inline-flex;

    align-items: center;

}



.social img {

    width: 40px;          /* velikost ikonky */

    height: auto;

    display: block;

}



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

   MAPA – STATICKÝ OBRÁZEK

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



.map {

    border-radius: 8px;

    overflow: hidden;

}



.map img {

    width: 100%;

    height: auto;

    display: block;

}



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

   CENÍK

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



.pricelist {

    max-width: 520px;

}



.price-row {

    display: grid;

    grid-template-columns: 1fr auto;

    gap: 40px;

    padding: 22px 0;

    border-bottom: 1px solid #d9d9d9;

}



.price-row strong {

    font-weight: 500;

}



.section-title {

    margin-top: 60px;

    margin-bottom: 20px;

    font-weight: 500;

}



.note {

    font-size: 0.9em;

    color: #555;

    line-height: 1.6;

    margin-top: 20px;

}



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

   FOTKA CENÍKU

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



.side-image {

    align-self: start;

    overflow: hidden;

    max-height: 420px;        /* ✅ OMEZENÍ VÝŠKY */

}



.side-image img {

    width: 130%;              /* ✅ VÍC DO ŠÍŘKY */

    height: 100%;

    object-fit: contain;        /* ✅ OŘÍZNE VÝŠKU */

    transform: translateX(-10%);

    border-radius: 8px;

    display: block;

}





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

   REZERVACE – ROZLOŽENÍ

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



.page--reservation {

    display: grid;

    grid-template-columns: 1fr 1.4fr;

    gap: 80px;

}



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

   REZERVACE – FORMULÁŘ

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



.page--reservation form {

    max-width: 420px;

    justify-self: start;

}



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

   REZERVACE – KALENDÁŘ

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



#calendar-wrapper {

    max-width: 700px;

}



#calendar {

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

}



/* společné – celá buňka */

.fc-daygrid-day.day-full,

.fc-daygrid-day.day-checkin,

.fc-daygrid-day.day-checkout {

    background-size: cover !important;

}



/* PLNĚ OBSAZENO */

.fc-daygrid-day.day-full {

    background-color: #8b6f4e !important;

    color: #fff;

}



/* PŘÍJEZD – SPODNÍ DIAGONÁLA */

.fc-daygrid-day.day-checkin {

    background-image:

        linear-gradient(135deg,

            transparent 50%,

            #8b6f4e 50%) !important;

}



/* ODJEZD – HORNÍ DIAGONÁLA */

.fc-daygrid-day.day-checkout {

    background-image:

        linear-gradient(315deg,

            transparent 50%,

            #8b6f4e 50%) !important;

}



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

   MOBIL

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



@media (max-width: 900px) {

    .page--contact,

    .page--pricelist,

    .page--reservation {

        grid-template-columns: 1fr;

        gap: 40px;

    }

}

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

   FORMULÁŘE

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



form label {

    display: block;

    margin-top: 18px;

    font-size: 0.9em;

}



form input,

form textarea {

    width: 100%;

    padding: 10px;

    margin-top: 6px;

    border-radius: 6px;

    border: 1px solid #ccc;

    font-size: 0.95em;

}



form textarea {

    resize: vertical;

}



form button {

    margin-top: 30px;

    padding: 14px;

    width: 100%;

    font-size: 1em;

    border: none;

    border-radius: 30px;

    background-color: #8b6f4e;

    color: #fff;

    cursor: pointer;

}



form button:hover {

    background-color: #6f563c;

}



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

  

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

   REGISTRACE HOSTŮ – LAYOUT

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



/* hlavní kontejnery (login + formulář) */

.container {

    max-width: 600px;

    margin: 40px auto;          /* ✅ vycentrování */

    padding: 30px;

    background: #ffffff;

    border-radius: 12px;

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

}



/* nadpisy uvnitř boxu */

.container h2 {

    margin-top: 0;

    text-align: center;

}



/* formulář – vše pod sebe */

.container label {

    display: block;

    margin-top: 16px;

    font-weight: 500;

}



.container input {

    width: 100%;

    padding: 10px;

    margin-top: 6px;

    border-radius: 6px;

    border: 1px solid #ccc;

    font-size: 1em;

}









.container button {

    width: auto;

    padding: 6px 14px;

    font-size: 0.85em;

    border-radius: 20px;

    margin-top: 14px;

}

   



.container button:hover {

    background-color: #6f563c;

}



/* chybové / info hlášky */

.error {

    margin-top: 15px;

    text-align: center;

    color: red;

}



/* skrytí po přihlášení */

.hidden {

    display: none;

}



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

   HOSTÉ – JEDEN POD DRUHÝM

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



.guest {

    border-top: 1px solid #ddd;

    margin-top: 25px;

    padding-top: 25px;

}



.guest h3 {

    margin-top: 0;

}



/* tlačítko odebrat hosta */

.guest button {

    background-color: #b84c4c;

}



.guest button:hover {

    background-color: #933a3a;

}



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

   SPODNÍ BÍLÝ PÁS

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



.page-end {

    width: 100vw;

    height: 80px;

    background-color: #ffffff;

    margin-top: 60px;

}



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

   MOBIL

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



@media (max-width: 900px) {



    .page--contact,

    .page--pricelist {

        grid-template-columns: 1fr;

        gap: 40px;

    }



    .page-title {

        text-align: center;

    }



    .page-title::after {

        margin-left: auto;

        margin-right: auto;

    }

}



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

   TEXTOVÝ OBSAH

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



.content {

    max-width: 900px;        /* ✅ optimální šířka pro čtení */

    margin: 60px auto;       /* ✅ vycentrování + prostor nahoře/dole */

    padding: 0 20px;         /* ✅ rezerva na mobil */

}



.content p {

    line-height: 1.75;       /* ✅ vzdušnější text */

    margin-bottom: 1.4em;   /* ✅ odstupy mezi odstavci */

    font-size: 1.05em;      /* ✅ lehce větší text */

}



.content h2 {

    margin-bottom: 20px;

}



.content h3 {

    margin-top: 40px;

    margin-bottom: 16px;

}



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

   TEXT – MOBIL

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



@media (max-width: 600px) {



    .content {

        max-width: 420px;   /* ✅ UŽŠÍ BLOK – KLÍČOVÉ */

        margin: 40px auto;

        padding: 0 20px;

    }



    .content p {

        font-size: 1em;

        line-height: 1.8;

    }



    .content h2 {

        font-size: 1.9em;

    }



    .content h3 {

        font-size: 1.35em;

    }

}