/* ==================== MODERNÍ DESIGN 2026 - Henry Dobkov ==================== */

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

body {
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    background: #f8f4ed;
    color: #3c2f2f;
    line-height: 1.7;
}

.container {
    display: flex;
    min-height: 100vh;
}


/* ==================== LEVÉ MENU ==================== */

.sidebar {
    width: 280px;
    background: linear-gradient(180deg, #5c4033 0%, #3f2a22 100%);
    color: #f5e8d3;
    padding: 35px 25px;
    position: fixed;
    height: 100%;
    box-shadow: 4px 0 20px rgba(0,0,0,.15);
    z-index: 100;
}

.logo h2 {
    font-size: 2rem;
    color: #f5d9a0;
    text-align: center;
    margin-bottom: 45px;
    text-shadow: 0 2px 5px rgba(0,0,0,.3);
}


.sidebar ul {
    list-style: none;
}

.sidebar ul li {
    margin: 10px 0;
}

.sidebar ul li a {
    display: block;
    padding: 15px 22px;
    color: #f5e8d3;
    text-decoration: none;
    border-radius: 14px;
    transition: .4s;
    font-weight: 500;
}

.sidebar ul li a:hover {
    background: rgba(255,255,255,.15);
    transform: translateX(10px);
    color: white;
}



/* ==================== HLAVNÍ OBSAH ==================== */

.content {
    margin-left: 280px;
    width: calc(100% - 280px);
    padding: 50px;
    max-width: 1600px;
}



/* ==================== HERO ==================== */

.hero {
    position: relative;
    border-radius: 30px;
    overflow: hidden;
    margin-bottom: 50px;
    height: 780px;
    width: 100%;
    background: #3c2f2f;
    box-shadow: 0 20px 50px rgba(92,64,51,.3);
}


.hero img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position:center;
    transition:.8s;
}


.hero:hover img {
    transform:scale(1.02);
}



.hero-logo {

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    pointer-events:none;

}



/* horní text */

.top-text {
    font-size:40px;
    font-weight:700;
    letter-spacing:1px;
    text-anchor:middle;
    fill:#f5d9a0;
    filter:drop-shadow(0 5px 10px rgba(0,0,0,.8));
}



/* spodní text */

.bottom-text {

    fill:#f5d9a0;

    font-size:80px;

    font-weight:800;

    letter-spacing:4px;

    text-anchor:middle;

    text-shadow:
    0 5px 18px rgba(0,0,0,.9);

}


/* ==================== OBECNÉ KARTY ==================== */


.card,
.dog-card {

    background:white;
    border-radius:30px;
    padding:45px;
    margin:50px 0;

    box-shadow:
        0 15px 40px rgba(0,0,0,.08);

    transition:.4s;
}



.card:hover,
.dog-card:hover {

    transform:translateY(-8px);

    box-shadow:
        0 25px 50px rgba(92,64,51,.18);
}




/* ==================== PSI ==================== */


.main-photo {

    display:block;

    width:85%;

    max-width:1200px;

    height:auto;

    margin:0 auto 40px;

    border-radius:22px;

}



.dog-info {

    margin-bottom:40px;

}



.dog-info h2 {

    color:#5c4033;

    font-size:clamp(1.8rem,2vw,3rem);

    margin-bottom:20px;

}



.dog-info p {

    margin-bottom:15px;

    color:#444;

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

    line-height:1.8;

}




/* ==================== GALERIE ==================== */


.dog-gallery {

    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(220px,1fr));

    gap:20px;

}



.dog-gallery img {

    width:100%;

    height:220px;

    object-fit:cover;

    border-radius:16px;

    cursor:pointer;

    transition:.3s;

}


.dog-gallery img:hover {

    transform:scale(1.05);

}




/* ==================== FOOTER ==================== */


footer {

    text-align:center;

    padding:30px;

    background:#5c4033;

    color:#f5e8d3;

    margin-top:auto;

}




/* ==================== LIGHTBOX ==================== */


.lightbox {

    display:none;

    position:fixed;

    top:0;

    left:0;

    width:100vw;

    height:100vh;

    background:rgba(0,0,0,.97);

    z-index:9999;

    align-items:center;

    justify-content:center;

}



.lightbox.active {

    display:flex;

}



.lightbox img {

    max-width:96%;

    max-height:96%;

    border-radius:15px;

}



.close {

    position:absolute;

    top:30px;

    right:40px;

    color:white;

    font-size:45px;

    cursor:pointer;

}




/* ==================== MOBIL ==================== */


@media(max-width:900px){


    .container {

        display:block;

    }


    .sidebar {

        width:100%;

        height:auto;

        position:relative;

    }


    .content {

        margin-left:0;

        width:100%;

        padding:20px;

    }



    .hero {

        height:520px;

        border-radius:20px;

    }



    .card,
    .dog-card {

        padding:25px;

        margin:30px 0;

        border-radius:20px;

    }



    .main-photo {

        width:100%;

    }



    .dog-gallery {

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

    }

}



@media(max-width:500px){


    .dog-gallery {

        grid-template-columns:1fr;

    }


    .wave-title {

        font-size:1.8rem;

    }

}