/* =========================================================
   PODSTRÁNKA
========================================================= */

.subpage {
    padding-bottom: 70px;
}


/* =========================================================
   HLAVIČKA PODSTRÁNKY
========================================================= */

.subpage-header {
    padding:
        15px
        0
        0;

    background:
        #f7f3e8;

    border-bottom:
        1px solid rgba(73, 48, 31, .06);
    
    margin-inline: 15px;

    border-radius: 0 0 22px 22px;
}

.breadcrumbs {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 9px;

    margin-bottom: 14px;

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

    font-size: 14px;
    font-weight: 600;
}

.breadcrumbs a {
    color:
        var(--color-green-dark);

    transition:
        color var(--transition);
}

.breadcrumbs a:hover,
.breadcrumbs a:focus-visible {
    color:
        var(--color-green);
}

.breadcrumbs__separator {
    color:
        #a99b8b;
}

.subpage-title {
    position: relative;

    margin: 0;

    padding-bottom: 13px;

    color:
        var(--color-brown);

    font-size:
        clamp(34px, 3vw, 48px);

    font-weight: 800;

    line-height: 1.1;
}

.subpage-title::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: 0;

    width: 76px;
    height: 5px;

    border-radius: 100px;

    background:
        var(--color-green);

    transform:
        rotate(-2deg);
}


/* =========================================================
   HLAVNÍ LAYOUT
========================================================= */

.subpage-main {
    padding-top: 45px;
}

.subpage-layout {
    display: grid;

    grid-template-columns:
        285px
        minmax(0, 1fr);

    gap:
        clamp(35px, 5vw, 70px);

    align-items: start;
}


/* =========================================================
   SIDEBAR
========================================================= */

.subpage-sidebar {
    min-width: 0;
}

.side-nav {
    overflow: hidden;

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

    border-radius:
        20px;

    background:
        #fff;

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

.side-nav__title {
    margin: 0;

    padding:
        19px
        22px;

    color:
        #fff;

    background:
        var(--color-green);

    font-size:
        18px;

    font-weight:
        800;
}

.side-nav__list {
    margin: 0;
    padding: 10px 0;

    list-style: none;
}

.side-nav__list li {
    margin: 0;
}

.side-nav__list a {
    position: relative;

    display: block;

    padding:
        11px
        22px;

    color:
        var(--color-text);

    font-size:
        15px;

    font-weight:
        700;

    line-height:
        1.35;

    transition:
        color var(--transition),
        background-color var(--transition),
        padding-left var(--transition);
}

.side-nav__list a:hover,
.side-nav__list a:focus-visible {
    color:
        var(--color-green-dark);

    background:
        #f4f8ec;

    padding-left:
        27px;
}

.side-nav__list a.is-active {
    color:
        var(--color-green-dark);

    background:
        #eef6df;
}

.side-nav__list a.is-active::before {
    content: "";

    position: absolute;

    left: 0;
    top: 7px;
    bottom: 7px;

    width: 4px;

    border-radius:
        0 5px 5px 0;

    background:
        var(--color-green);
}


/* =========================================================
   OBSAH PODSTRÁNKY
========================================================= */

.subpage-content {
    min-width: 0;
    max-width: 950px;
}

.subpage-content > :first-child {
    margin-top: 0;
}

.subpage-content h2 {
    margin:
        0
        0
        22px;

    color:
        var(--color-brown);

    font-size:
        clamp(26px, 2vw, 34px);

    font-weight:
        800;

    line-height:
        1.2;
}

.subpage-content h3 {
    margin:
        36px
        0
        14px;

    color:
        var(--color-brown);

    font-size:
        22px;

    font-weight:
        800;

    line-height:
        1.3;
}

.subpage-content p {
    margin:
        0
        0
        20px;

    color:
        var(--color-text);

    font-size:
        17px;

    line-height:
        1.75;
}

.subpage-content .lead {
    color:
        #4f473f;

    font-size:
        20px;

    font-weight:
        600;

    line-height:
        1.65;
}

.subpage-content ul,
.subpage-content ol {
    margin:
        0
        0
        24px;

    padding-left:
        26px;

    font-size:
        17px;

    line-height:
        1.7;
}

.subpage-content li {
    margin-bottom:
        8px;
}

.subpage-content a {
    color:
        var(--color-green-dark);

    font-weight:
        700;

    text-decoration:
        underline;

    text-decoration-thickness:
        1px;

    text-underline-offset:
        3px;
}

.subpage-content p,
.subpage-content ul,
.subpage-content ol {
    max-width: 780px;
}

.content-image {
    max-width: 780px;
}

/* =========================================================
   OBRÁZEK V OBSAHU
========================================================= */

.content-image {
    margin:
        34px
        0;

    overflow: hidden;

    border-radius:
        22px;

    background:
        #fff;

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

.content-image img {
    display: block;

    width: 100%;
    height: auto;
}

.content-image figcaption {
    padding:
        12px
        16px;

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

    font-size:
        13px;

    text-align:
        center;
}


/* =========================================================
   VARIANTA BEZ SIDEBARU
========================================================= */

.subpage--full .subpage-layout {
    grid-template-columns:
        1fr;
}

.subpage--full .subpage-content {
    max-width:
        1100px;

    margin-inline:
        auto;
}


/* =========================================================
   UNIVERZÁLNÍ FOTOGALERIE
========================================================= */

.media-gallery {
    display: grid;

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

    gap: 18px;

    margin:
        32px
        0
        42px;
}


/* =========================================================
   POLOŽKA GALERIE
========================================================= */

.media-gallery > a {
    display: block;

    overflow: hidden;

    aspect-ratio:
        4 / 3;

    border-radius:
        18px;

    background:
        #fff;

    box-shadow:
        0 7px 22px rgba(73, 48, 31, .07);

    cursor:
        zoom-in;

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

.media-gallery > a:hover,
.media-gallery > a:focus-visible {
    box-shadow:
        0 11px 30px rgba(73, 48, 31, .14);
}

.media-gallery > a:focus-visible {
    outline:
        3px solid rgba(82, 164, 48, .30);

    outline-offset:
        3px;
}


/* =========================================================
   OBRÁZEK
========================================================= */

.media-gallery img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit:
        cover;

    transition:
        transform .35s ease;
}

.media-gallery > a:hover img,
.media-gallery > a:focus-visible img {
    transform:
        scale(1.035);
}


/* =========================================================
   PRVNÍ FOTOGRAFIE - HLAVNÍ
========================================================= */

.media-gallery--featured > a:first-child {
    grid-column:
        1 / -1;

    aspect-ratio:
        16 / 7;

    border-radius:
        24px;
}



/* =========================================================
   SOUBORY
========================================================= */

.file-list {
    display: grid;
    gap: 18px;
}

.file-card {
    display: grid;

    grid-template-columns:
        78px
        minmax(0, 1fr)
        auto;

    gap: 22px;

    align-items: center;

    padding:
        22px
        24px;

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

    border-radius: 20px;

    background: #fff;

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

    text-decoration: none;

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

.file-card:hover,
.file-card:focus-visible {
    transform:
        translateY(-3px);

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

.file-card__type {
    width: 64px;
    height: 64px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 16px;

    background: #eef6df;

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

    font-size: 15px;
    font-weight: 800;
}

.file-card__content {
    min-width: 0;
}

.file-card__content h3 {
    margin:
        0
        0
        5px;

    font-size: 18px;
}

.file-card__content p {
    margin: 0;

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

    font-size: 14px;
}

.file-card__arrow {
    color:
        var(--color-green);

    font-size: 26px;

    transition:
        transform var(--transition);
}

.file-card:hover .file-card__arrow {
    transform:
        translateX(4px);
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (min-width: 951px) {

    .subpage-sidebar {
        position: sticky;
        top: 30px;
    }

}

@media (max-width: 950px) {

    .subpage-layout {
        grid-template-columns:
            1fr;
    }

    .subpage-content {
        max-width:
            none;
    }

    .side-nav {
        max-width:
            none;
    }

    .side-nav__list {
        display:
            grid;

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

        padding:
            8px;
    }

    .side-nav__list a {
        border-radius:
            10px;
    }

    .side-nav__list a.is-active::before {
        display:
            none;
    }

}

@media (max-width: 800px) {

    .media-gallery {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .media-gallery--featured > a:first-child {
        aspect-ratio:
            16 / 9;
    }

}

@media (max-width: 600px) {

    .subpage-header {
        padding:
            26px
            0
            24px;
    }

    .subpage-main {
        padding-top:
            30px;
    }

    .subpage-title {
        font-size:
            34px;
    }

    .side-nav__list {
        grid-template-columns:
            1fr;
    }

    .subpage-content p,
    .subpage-content ul,
    .subpage-content ol {
        font-size:
            16px;
    }

    .subpage-content .lead {
        font-size:
            18px;
    }

    .file-card {
        grid-template-columns:
            58px
            minmax(0, 1fr)
            auto;

        gap: 14px;

        padding:
            16px;
    }

    .file-card__type {
        width: 50px;
        height: 50px;

        font-size: 13px;
    }

}

@media (max-width: 520px) {

    .media-gallery {
        grid-template-columns:
            1fr;

        gap:
            12px;
    }

    .media-gallery > a {
        border-radius:
            16px;
    }

    .media-gallery--featured > a:first-child {
        grid-column:
            auto;

        aspect-ratio:
            16 / 9;
    }

}