@font-face {
    font-family: 'House of cards';
    src: url('./../fonts/House of cards W03 Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'House of cards';
    src: url('./../fonts/House of cards W03 Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}
@font-face {
    font-family: 'House of cards';
    src: url('./../fonts/House of cards W03 Regular It.ttf') format('truetype');
    font-weight: normal;
    font-style: italic;
}
@font-face {
    font-family: 'House of cards';
    src: url('./../fonts/House of cards W03 Bold Italic.ttf') format('truetype');
    font-weight: bold;
    font-style: italic;
}

:root {
    --barva-pozadi-hlavni: #D4C8B9;
    --barva-sekce1: #D4C8B9;
    --barva-sekce2: #D4C8B9;
    --barva-sekce3: #aaaaaa;
    --barva-footer: #000;
    --barva-textu-footer: #ffffff;
    --barva-textu-sluzby: #ffffff;
    --barva-pozadi-sluzby: #2D2910;
    --barva-textu: #000000;
    --barva-textu-nadpisu: #000;
    --barva-textu-nav: #efefef;
    --barva-textu-nav-aktiv: #ffffff;
    --barva-aktivniho-odkazu: #000000;
    --font-hlavni: 'House of cards', sans-serif;
    --font-hlavni-2: 'Lora', serif;
    --barva-ramecku: #B7A377;
    --barva-pozadi-karty: rgba(255, 255, 255, 0.95);
    --barva-open-time: #2D2910;
    --barva-open-time-ramecek: #D4C8B9;
    --barva-open-time-text: #D4C8B9;
    --button-rezervace-text: #000000;
    --button-header: #D4C8B9;
    --button-header-hover: #2D2910;
    --button-header-hover-border: #D4C8B9;
    --_border-width: 2px;
    --_border-radius: 20px;

}

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

html, body {
    font-family: var(--font-hlavni-2);
    scroll-behavior: smooth;
}



h2 {
    color: var(--barva-textu-nadpisu);
    font-family: var(--font-hlavni);
    font-size: 3.2rem;
    font-weight: normal;
}

header {
    --_header-height: 96vh;
    height:var(--_header-height);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    top: 0;
    z-index: 0;
    row-gap: 5.5rem;
}

header .logo {
    font-size: 3rem;
    color: white;
    margin-top: -2rem;
}

header .buttons, header .buttons a {
    column-gap: 1.5rem;
    row-gap: 1.5rem;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
    text-decoration: none;
}
header .buttons a {
    background-color: var(--button-header);
    color: var(--barva-textu-nadpisu);
    border: solid 1px var(--button-header-hover-border);
    opacity: 1;
    transition: opacity 0.3s;
    border-radius: 0;
    cursor: pointer;
    width: 200px;
    height: 50px;
    font-size: 25px;
    font-family: 'House of Cards', serif;
}
header .buttons a:hover, header .buttons a:focus-within {
    opacity: 1;
    background: linear-gradient(73.9deg, #B7A377 19.48%, #EAD5AC 62.26%, #B7A377 105.04%);
}
/*header .buttons a:nth-of-type(2) {
    background-color: #222c3a;
    color: white;
    border: solid 2px white;
}*/

header .hide {
    opacity: 0;
    transition: all 0.3s ease-in-out;
}

main {
    background-color: var(--barva-pozadi-hlavni);
    position: absolute;
    width: 100%;
    z-index: 10;
}

main::before {
    content: "";
    position: absolute;
    background-image: url('./../img/patern.svg');
    width: 100%;
    height: 31px;
    z-index: 9;
    opacity: 1;
    margin-top: -11px;
    background-repeat: round;
    border: 1 solid black;
}

section {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: start;
}

.sekce1 {
    margin-top: calc(-6vh - 3rem);
    display: grid;
    grid-template-areas:
        "img1 open-time"
        "img1 nadpis"
        "img1 about-us";
    grid-template-columns: repeat(2, calc(2 * 220px - 3rem));
    grid-template-rows: 200px auto 1fr;
    gap: 3rem;
    row-gap: 1rem;
    align-items: start;
    z-index: 20;
}

.sekce1 .img1 { grid-area: img1;  z-index: 20;}
.sekce1 .open-time { grid-area: open-time; }
.sekce1 .nadpis { grid-area: nadpis; }
.sekce1 .about-us { grid-area: about-us; }

.sekce1 .img1 img {
    width: 100%;
    height: auto;
}

.sekce1 .open-time { 
    position: relative;
    padding: var(--_border-radius);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 200px;
    width: 100%;
    color: var(--barva-open-time-text);
    background: var(--barva-open-time);
    mask: radial-gradient(calc(var(--_border-radius) - var(--_border-width)) at calc(var(--_border-radius) - var(--_border-width)) calc(var(--_border-radius) - var(--_border-width)),#0000 98%, var(--barva-open-time-ramecek)) calc(var(--_border-width) - var(--_border-radius)) calc(var(--_border-width) - var(--_border-radius));
    z-index: 20;
}
.sekce1 .open-time:before {
    z-index: 10;
    content: "";
    position: absolute;
    inset: 0;
    background: var(--barva-open-time-ramecek);
    mask: radial-gradient(var(--_border-radius) at var(--_border-radius) var(--_border-radius), #0000 calc(98% - var(--_border-width)), #000 calc(100% - var(--_border-width)) 98%, #0000) calc(0px - var(--_border-radius)) calc(0px - var(--_border-radius)), linear-gradient(90deg, #000 calc(2 * var(--_border-width)), #0000 0) calc(0px - var(--_border-width)) 50% / 100% calc(100% - 2 * var(--_border-radius) + var(--_border-width)) repeat-x, linear-gradient(#000 calc(2 * var(--_border-width)), #0000 0) 50% calc(0px - var(--_border-width)) / calc(100% - 2 * var(--_border-radius) + var(--_border-width)) 100% repeat-y;
}

.sekce1 .open-time div.title {
    font-size: 1.7rem;
    font-weight: bold;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0px;
}
.sekce1 .open-time hr {
    width: 85%;
    border: none;
    border-top: 1px dashed var(--barva-open-time-text);
    margin: 1rem 0;
}
.sekce1 .open-time .time {
    display: flex;
    flex-direction: row;
    align-items: center;
    color: var(--barva-open-time-text);
    text-align: center;
    width: 70%;
    justify-content: space-between;
    font-size: 1.5rem;
}
.sekce1 .open-time .time div:nth-of-type(1) {
    display: inline-block;
    font-weight: bold;
    letter-spacing: 2px;
    text-align: left;
}
.sekce1 .open-time .time div:nth-of-type(2) {
    display: inline-block;
    font-weight: normal;
    text-align: right;
}

.sekce1 .nadpis {
    margin-top: 2rem;
}

.sekce1 .about-us {
    font-size: 1.1rem;
    color: var(--barva-textu);
}

.sekce2 {
    background-color: var(--barva-sekce2);
    display: grid;
    grid-template-areas:
    "nadpis"
    "table";
    grid-template-rows: auto 1fr;
    gap: 2rem;
    align-items: center;
    justify-items: center;
    padding-bottom: 4rem;
}

.sekce2 .nadpis { grid-area: nadpis; }
.sekce2 .table { 
    grid-area: table; 
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    width: calc(4 * 220px);
}

.service-card {
    position: relative;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    color: var(--barva-textu-sluzby);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 1rem;
    height: 320px;
    width: var(--_card-width, 220px);
    text-align: center;
    border: 2px solid var(--barva-open-time-ramecek);
    margin: -1px;
}

.service-card .info {
    transition: all 0.3s ease-in-out;
}

.service-card .info .service-name {
    font-size: 1.2rem;
    font-weight: bold;
    margin-bottom: 0.5rem;
}

.service-card .info hr {
    margin: 0.5rem 7%;
    border: none;
    border-top: 1px dashed var(--barva-textu-sluzby);
}

.service-card .info .service-price {
    font-size: 1rem;
    letter-spacing: 1px;
}
.service-card .info .service-price::before {
    content: "- ";
}
.service-card .info .service-price::after {
    content: " Kč -";
}

.service-card .extra .button {
    z-index: 20;
    width: 100%;
    height: 35px;
    border: none;
    background: var(--barva-sekce1);
    opacity: 0.8;
    font-family: var(--font-hlavni);
    font-size: 1rem;
    letter-spacing: 2px;
    font-weight: bold;
    display: flex;
    justify-self: center;
    justify-content: center;
    align-items: center; 
    text-decoration: none;
    color: var(--button-rezervace-text);
    margin-inline: auto;
}

.service-card .extra .button:hover {
    opacity: 1;
    background: linear-gradient(73.9deg, #B7A377 19.48%, #EAD5AC 62.26%, #B7A377 105.04%);
}

.service-card .extra {
    display: none;
}

.service-card .extra p {
    text-align: center;
    font-size: 0.9rem;
    color: var(--barva-textu-sluzby);
}

.service-card:before {
    z-index: 10;
    content: "";
    position: absolute;
    inset: 0;
    background: var(--barva-open-time-ramecek);
    mask: radial-gradient(var(--_border-radius) at var(--_border-radius) var(--_border-radius), #0000 calc(98% - var(--_border-width)), #000 calc(100% - var(--_border-width)) 98%, #0000) calc(0px - var(--_border-radius)) calc(0px - var(--_border-radius)), linear-gradient(90deg, #000 calc(2 * var(--_border-width)), #0000 0) calc(0px - var(--_border-width)) 50% / 100% calc(100% - 2 * var(--_border-radius) + var(--_border-width)) repeat-x, linear-gradient(#000 calc(2 * var(--_border-width)), #0000 0) 50% calc(0px - var(--_border-width)) / calc(100% - 2 * var(--_border-radius) + var(--_border-width)) 100% repeat-y;
    visibility: hidden;
    cursor: default;
}

.service-card:hover, .service-card:focus-within {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    /* transform: scale(1.05); */
    margin: -19px;
    height: 356px;
    width: calc(var(--_card-width, 220px) + 36px);
    z-index: 1;
    justify-content: space-between;
    padding: 40px;
    mask: radial-gradient(calc(var(--_border-radius) - var(--_border-width)) at calc(var(--_border-radius) - var(--_border-width)) calc(var(--_border-radius) - var(--_border-width)),#0000 98%, var(--barva-open-time-ramecek)) calc(var(--_border-width) - var(--_border-radius)) calc(var(--_border-width) - var(--_border-radius));
    border: none;
}

.service-card:hover:before, .service-card:focus-within:before {
    visibility: visible;
}

.service-card:hover .extra,
.service-card:focus-within .extra {
    display: flex;
    flex-direction: column;
    justify-content: center;

}

.sekce3 {
    background-color: var(--barva-sekce3);
    display: none;
}

footer {
    background-color: var(--barva-footer);
    color: var(--barva-textu-footer);
    padding: 3rem;
    padding-bottom: 2rem;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    line-height: 1.2rem;
}

footer a {
    color: var(--barva-textu-footer);
    text-decoration: none;
}

.footer-table>div{
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.footer-table>div div+div {
    margin-left: 0.3rem;
}

footer .list-nav-footer {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.2rem;
}

.footer-table>div>div:nth-of-type(1) {
    font-weight: bold;
    margin-bottom: 0.2rem;
}

footer .footer-table-mobile {
    display: none;
}

footer .footer-table {
    height: min-content;
    width: calc(4 * 220px);
    display: grid;
    grid-template-columns: 3fr 3fr 4fr 2fr;
    grid-template-rows: auto 1fr;
    grid-template-areas:
    "f-logo f-open-time f-address f-quick-nav"
    "f-logo f-social-sites f-contact f-quick-nav";
    gap: 1.5rem;
    align-items: start;
}

.f-logo {
    grid-area: f-logo;
    width: 100%;
}
.f-logo img {
    height: 80%;
}

.f-open-time {
    grid-area: f-open-time;
}

.f-address {
    grid-area: f-address;
}

.f-quick-nav {
    grid-area: f-quick-nav;
}
.f-social-sites {
    grid-area: f-social-sites;
}

.f-contact {
    grid-area: f-contact;
}

.footer-column {
    flex-grow: 1;
}

.footer-column.wide {
    flex: 2;
}

footer.copyright-footer {
    background-color: var(--barva-footer);
    color: var(--barva-textu-footer);
    padding: 0.5rem;
    text-align: center;
    font-size: 0.8rem;
    border-top: 1px solid var(--barva-textu-footer);
    font-family: var(--font-hlavni-1);
}

@media screen and (max-width: 920px) {
    .sekce2 .table {
        width: calc(3 * 220px);
    }
    footer .footer-table {
        width: calc(3 * 220px);
        grid-template-columns: 3fr 3fr 3fr;
        grid-template-rows: auto auto auto;
        grid-template-areas:
        "f-logo f-open-time f-address"
        "f-social-sites f-contact f-quick-nav"
        ". f-contact f-quick-nav";
    }

    .sekce1 {
        width: calc(3 * 220px);
        grid-template-columns: repeat(2, 1fr);
        margin-inline: auto;
    }
    .sekce1 .open-time div.title {
        font-size: 1.5rem;
    }
    .sekce1 .open-time .time {
        font-size: 1.3rem;
        width: 85%;
    }
}

@media screen and (max-width: 700px) {
    .sekce2 .table {
        width: calc(2 * 220px);
    }
    footer .footer-table {
        width: calc(2 * 220px);
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto auto auto auto;
        grid-template-areas:
        "f-logo f-open-time"
        "f-social-sites f-address"
        "f-contact f-address"
        "f-contact f-quick-nav";
    }

    h2 {
        text-align: center;
    }

    .sekce1 {
        width: calc(2 * 220px);
        grid-template-columns: 1fr;
        margin-inline: auto;
        grid-template-areas:
        "open-time"
        "nadpis"
        "about-us"
        "img1";
        row-gap: 2rem;
    }
    .sekce1 .open-time div.title {
        font-size: 1.5rem;
    }
    .sekce1 .open-time .time {
        font-size: 1.3rem;
        width: 85%;
    }
    .sekce1 .nadpis {
        text-align: center;
        margin-top: 0;
    }
    .sekce1 .about-us {
        text-align: center;
    }

}

@media (max-width: 768px) {
    header .buttons {
        flex-direction: column;
    }

    footer {
        flex-direction: column;
    }

    .footer-column {
        flex: 1 1 100%;
    }
}

@media only screen and (max-width: 600px) {
    header .logo {
        width: 80%;
        height: auto;
    }

    header .logo img {
        width: 100%;
        height: auto;
    }

    header .buttons a {
        width: 200px;
        height: 40px;
        font-size: 1.4rem;
    }

    /* .sekce2 {
        grid-template-areas:
            "nadpis"
            "table";
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr;
    } */
    /* .sekce2 .table {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0rem;
        flex-grow: 1;
        flex-wrap: wrap;
        justify-content: center;
    } */
    /* .service-card {
        width: 100%;
        max-width: 400px;
    } */
    /* .service-card .info {
        text-align: center;
    } */

    /* footer .footer-table {
        grid-template-columns: 1fr;
        grid-template-rows: repeat(5, auto);
        grid-template-areas:
            "f-open-time"
            "f-address"
            "f-quick-nav"
            "f-social-sites"
            "f-contact";
        width: 100%;
    } */
    /* footer .footer-table .f-logo{
        display: none;
    } */
}

@media screen and (max-width: 490px) { 
    footer .footer-table-mobile {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        row-gap: 1rem;
        flex-wrap: nowrap;
        width: 100%;
    }
    footer .footer-table{
        display: none;
    }
    footer .footer-table-mobile * {
        text-align: center;
    }
    .footer-table-mobile hr {
        width: 100%;
        border: none;
        border-top: 1px solid var(--barva-sekce1);
    }
    .footer-table-mobile h3 {
        font-weight: bold;
        font-size: 1.5rem;
        margin-bottom: 0.8rem;
    }
    footer {
        padding: 2rem 1rem;
    }

    .footer-table-mobile .f-social-sites .social-icons {
        display: flex;
        justify-content: center;
    }
    .footer-table-mobile .f-social-sites .social-icons a {
        width: min-content;
        display: block;
    }
    .footer-table-mobile .f-social-sites .social-icons a i {
        font-size: 2rem;
        background: white;
        color: black;
        height: 40px;
        display: flex;
        align-content: center;
        justify-content: center;
        align-items: center;
        border-radius: 8px;
    }
    footer .list-nav-footer {
        align-items: center;
    }

    header {
        --_header-height: 92vh;
        height:var(--_header-height);
        row-gap: 3rem;
        padding: 0 1rem;
    }

    .sekce1 {
        width: calc(2 * 160px);
        grid-template-rows: auto auto auto auto;
        padding: 0;
    }
    .sekce1 .open-time div.title {
        font-size: 1.5rem;
    }
    .sekce1 .open-time .time {
        font-size: 1.2rem;
    }

    .sekce1 .open-time {
        height: 160px;
    }




    .sekce2 .table { 
        width: calc(2 * 160px);
    }
    .service-card {
        width: 160px;
        height: 185px;
        --_border-radius_mobile: calc(var(--_border-radius) * 0.5);
        --_border-width_mobile: calc(var(--_border-width) * 0.5);
        border-width: 1px;
    }
    .service-card .info .service-name {
        font-size: 1rem;
    }

    .service-card:before {
        mask: radial-gradient(var(--_border-radius_mobile) at var(--_border-radius_mobile) var(--_border-radius_mobile), #0000 calc(98% - var(--_border-width_mobile)), #000 calc(100% - var(--_border-width_mobile)) 98%, #0000) calc(0px - var(--_border-radius_mobile)) calc(0px - var(--_border-radius_mobile)), linear-gradient(90deg, #000 calc(2 * var(--_border-width_mobile)), #0000 0) calc(0px - var(--_border-width_mobile)) 50% / 100% calc(100% - 2 * var(--_border-radius_mobile) + var(--_border-width_mobile)) repeat-x, linear-gradient(#000 calc(2 * var(--_border-width_mobile)), #0000 0) 50% calc(0px - var(--_border-width_mobile)) / calc(100% - 2 * var(--_border-radius_mobile) + var(--_border-width_mobile)) 100% repeat-y;
        visibility: hidden;
        cursor: default;
    }
    
    .service-card:hover, .service-card:focus-within {
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        /* transform: scale(1.05); */
        margin: -10px;
        height: calc(185px + 20px - var(--_border-width_mobile) * 2);
        width: calc(160px + 20px - var(--_border-width_mobile) * 2);
        z-index: 1;
        justify-content: space-between;
        padding: 12px;
        mask: radial-gradient(calc(var(--_border-radius_mobile) - var(--_border-width_mobile)) at calc(var(--_border-radius_mobile) - var(--_border-width_mobile)) calc(var(--_border-radius_mobile) - var(--_border-width_mobile)),#0000 98%, var(--barva-open-time-ramecek)) calc(var(--_border-width_mobile) - var(--_border-radius_mobile)) calc(var(--_border-width_mobile) - var(--_border-radius_mobile));
        border: none;
        display: flex;
        justify-content: space-evenly;
    }

    .service-card:hover .info,
    .service-card:focus-within .info {
        display: none;
    }

    .service-card .extra p {
        font-size: 0.8rem;
        opacity: 0.8;
    }

    .service-card .extra .button {
        font-size: 0.9rem;
        height: 30px;
        width: calc(100% - 16px);
    }
}