/*
******************************
** Styles for tc-cleebronn.de
**
** Breakpoints (frueher mixins/_mq.scss) stehen ausgeschrieben. Die Datei laeuft
** nicht durch den Vite-Build - sie wird per includeCSS direkt ausgeliefert -,
** und @custom-media versteht kein Browser nativ.
**
**   xl 1460px | oversize 1350px | totalwidth 1250px | colbreak 1000px
**   singlecol 750px | menubreak 640px | mini 450px
******************************
*/

.header--top > .container {
    background: url('/fileadmin/user_upload/tcc/images/header/tcc-header.jpg') no-repeat top right;

    @media screen and (max-width: 1000px) {
        background: none;
    }

    .logo {
        transition: all 0.2s ease-in-out;
        max-width: 250px;
        width: 250px;
        margin-top: 75px;
        margin-bottom: 75px;

        @media screen and (max-width: 1000px) {
            margin: 25px auto 5px;
        }
    }
}

.nav--main .nav-list--level1 > .nav-list-item > a {
    color: #5E5E61 !important;
}

.news-list-view .article {
    background: #5E5E61 !important;
}

.news-list-view .article .no-media-element,
.news-list-view.default-events .article .no-media-element,
.news-list-view.default-events .event .no-media-element,
.news-list-view .event .no-media-element {
    padding: 0;
}

.news-list-view .article .news-img-wrap a,
.news-list-view.default-events .article .news-img-wrap a,
.news-list-view.default-events .event .news-img-wrap a,
.news-list-view .event .news-img-wrap a {
    display: block;
}

.tcc.sticky {
    padding-top: 300px;

    @media screen and (max-width: 1000px) {
        padding-top: 0;
    }

    .header--top {
        position: fixed;
        width: 100%;
        background: rgb(var(--color-minor));
        left: 0;
        top: 0;
        border-bottom: 1px solid rgb(var(--color-shade));
        z-index: 2;

        @media screen and (max-width: 1000px) {
            position: relative;
            border: 0;
        }

        > .container {
            background: rgb(var(--color-minor));
        }
    }

    .logo {
        width: auto;
        height: 70px;
        margin: 15px 0;

        @media screen and (max-width: 1000px) {
            text-align: center;
            height: auto;
        }

        img {
            max-height: 100%;
            max-width: none;

            @media screen and (max-width: 1000px) {
                max-height: 130px;
            }
        }
    }
}

/* grid-col($col: 3) */
.album-list .album-item {
    flex: 0 0 calc(25% - 30px);
    max-width: calc(25% - 30px);
    margin-left: 15px;
    margin-right: 15px;

    /* grid-col($col: 6) */
    @media screen and (max-width: 1000px) {
        flex: 0 0 calc(50% - 30px);
        max-width: calc(50% - 30px);
        margin-left: 15px;
        margin-right: 15px;
    }

    /* grid-col() */
    @media screen and (max-width: 640px) {
        display: block;
        width: 100%;
        max-width: 100%;
        flex: none;
        margin-left: 0;
        margin-right: 0;
        margin-bottom: 30px;

        &:last-of-type {
            margin-bottom: 0;
        }
    }
}

.footer {
    background: #5E5E61 !important;
}