/* =========================================================
   PROJEKTY - SEZNAM
========================================================= */

.projects-intro {
    max-width: 850px;

    margin-bottom: 38px;
}

.projects-list {
    display: flex;
    flex-direction: column;

    gap: 26px;
}


/* =========================================================
   PROJECT CARD
========================================================= */

.project-card {
    display: grid;

    grid-template-columns:
        minmax(260px, 36%)
        minmax(0, 1fr);

    overflow: hidden;

    border:
        1px solid rgba(73, 48, 31, .06);

    border-radius:
        24px;

    background:
        #fff;

    box-shadow:
        0 8px 26px rgba(73, 48, 31, .06);

    transition:
        transform var(--transition),
        box-shadow var(--transition);
}

.project-card:hover {
    transform:
        translateY(-4px);

    box-shadow:
        0 14px 34px rgba(73, 48, 31, .10);
}


/* Fotografie */

.project-card__image {
    min-height: 250px;

    overflow: hidden;
}

.project-card__image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition:
        transform .4s ease;
}

.project-card:hover .project-card__image img {
    transform:
        scale(1.035);
}


/* Obsah */

.project-card__content {
    padding:
        30px
        34px;

    display: flex;
    flex-direction: column;

    align-items: flex-start;
}


/* Štítek */

.project-card__label {
    margin-bottom: 12px;

    padding:
        6px
        12px;

    border-radius:
        100px;

    color:
        var(--color-green-dark);

    background:
        #eef6df;

    font-size:
        12px;

    font-weight:
        800;

    text-transform:
        uppercase;
}


/* Nadpis */

.project-card h2 {
    margin:
        0
        0
        12px;

    font-size:
        clamp(23px, 2vw, 30px);

    line-height:
        1.2;
}

.project-card h2 a {
    color:
        var(--color-brown);

    text-decoration:
        none;
}

.project-card h2 a:hover,
.project-card h2 a:focus-visible {
    color:
        var(--color-green-dark);
}


/* Perex */

.project-card p {
    max-width:
        720px;

    margin:
        0
        0
        24px;

    color:
        var(--color-text-light);

    font-size:
        16px;

    line-height:
        1.65;
}


/* Více */

.project-card__more {
    margin-top:
        auto;

    display:
        inline-flex;

    align-items:
        center;

    gap:
        9px;

    color:
        var(--color-green-dark);

    font-size:
        14px;

    font-weight:
        800;

    text-decoration:
        none;

    text-transform:
        uppercase;
}

.project-card__more span {
    font-size:
        20px;

    transition:
        transform var(--transition);
}

.project-card__more:hover span {
    transform:
        translateX(5px);
}


/* =========================================================
   PROJEKT - DETAIL
========================================================= */

.project-detail {
    max-width:
        1050px;

    margin-inline:
        auto;
}

.project-detail__header {
    max-width:
        850px;

    margin-bottom:
        34px;
}

.project-detail__header h2 {
    margin:
        12px
        0
        15px;

    font-size:
        clamp(30px, 3vw, 42px);

    line-height:
        1.15;
}

.project-detail__image {
    margin:
        0
        0
        42px;

    overflow: hidden;

    border-radius:
        24px;

    box-shadow:
        0 10px 30px rgba(73, 48, 31, .08);
}

.project-detail__image img {
    width: 100%;

    display: block;

    aspect-ratio:
        16 / 7;

    object-fit:
        cover;
}

.project-detail__content {
    max-width:
        820px;
}


@media (max-width: 800px) {

    .project-card {
        grid-template-columns:
            1fr;
    }

    .project-card__image {
        min-height:
            230px;

        aspect-ratio:
            16 / 8;
    }

}


@media (max-width: 550px) {

    .project-card {
        border-radius:
            20px;
    }

    .project-card__content {
        padding:
            24px
            22px;
    }

    .project-card__image {
        min-height:
            0;

        aspect-ratio:
            16 / 9;
    }

}