:root {
    --ch-container-max-width: 1280px;
}

.listSection .span-third {
    margin: auto;
}

.listSection {
    margin: auto;
    grid-column: 2 / 12;
    max-width: var(--ch-container-max-width);
}


@media only screen and (max-width: 1380px) {
    .listSection .list-item {
        grid-column: span 6;
        justify-self: center;
    }

    .listSection .event-card {
        grid-column: span 12;
        justify-self: center;
    }
}

.list-with-search article > .layered-grid__heading {
    background-color: var(--lk-card-primary);
    color: var(--fw-dark-blue);
}

.list-with-search article > .layered-grid__link:hover ~ .layered-grid__heading {
    background-color: var(--lk-card-primary-accent);
    color: var(--lk-card-primary-hover-text);
}


.lk-list-with-search .filter-and-counter-container .filter-input {
    width: 100%;
    margin-left: auto;
    margin-top: 0;
}

.lk-list-with-search .filter-and-counter-container .event-count {
    display: grid;
    justify-content: start;
    align-content: start;
    margin-left: 1.5rem;
}

@media only screen and (max-width: 600px) {
    .lk-list-with-search .filter-and-counter-container .event-count {
        justify-content: end;
        margin-bottom: 1rem;
        grid-row: 1/2;
    }
}

.lk-list-with-search .filter-and-counter-container {
    display: grid;
    grid-template-columns: minmax(450px, 1fr) 120px 50%;
}


@media only screen and (max-width: 600px) {
    .lk-list-with-search .filter-and-counter-container {
        grid-template-columns: 1fr;
    }
}

.lk-list-with-search .events-container {
    position: relative;
    min-height: 500px;
}

.lk-list-with-search div > .grid {
    margin-bottom: 3rem;
}

@media only screen and (max-width: 1280px) {
    .lk-list-with-search div > .grid > lk-toggle {
        grid-column: span 6;
    }
}

@media only screen and (max-width: 1280px) {
    .lk-list-with-search div > .grid {
        row-gap: 1.25rem;
    }
}

.lk-list-with-search .btn-dropdown lk-checkbox-group label .checkbox__label {
    white-space: pre-wrap;
}

.lk-icon--inline > img {
    max-width: 18px;
    max-height: 18px;
    margin-right: 7px;
    vertical-align: middle;
    margin-bottom: 4px;
}

.list-with-search--primary h3.layered-grid__heading {
    background-color: var(--lk-card-primary);
}

.list-with-search--primary .list-with-search__card .layered-grid__link:hover ~ h3.layered-grid__heading {
    color: var(--lk-card-primary-hover-text);
    background: var(--lk-card-primary-accent);
}

.list-with-search--second .list-with-search__card .layered-grid__heading {
    background: var(--lk-card-second);
}

.list-with-search--second .list-with-search__card .layered-grid__link:hover ~ .layered-grid__heading {
    color: var(--lk-card-second-hover-text);
    background: var(--lk-card-second-accent);
}

.event-card {
    position: relative;
    width: 100%;
    display: flex;
    min-height: 24em;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    margin-bottom: 1em;
    position: relative;
    text-decoration: none;
}

@media only screen and (max-width: 768px) {
    .event-card {
        margin: auto;
    }
}

.event-card .sold-out-overlay {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 30%;
    margin-top: 58%;
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.5rem;
    font-weight: bold;
    text-transform: uppercase;
    z-index: 9999;
    border-radius: 0 0 1rem 1rem;
    grid-column: 2 / span 2;
    grid-row: 2 / span 2;
}

@media (max-width: 769px) and (min-width: 1100px) {
    event-card .sold-out-overlay {
        font-size: 1.1rem;
    }
}

/* defult color -- legacy for library sake // TODO fix in next refactor */
.event-card .layered-grid__link:hover ~ .layered-grid__heading {
    background-color: var(--lk-card-primary-accent);
    color: var(--lk-card-primary-hover-text);
}

.event-card .layered-grid__heading {
    background-color: var(--lk-card-primary);
    color: var(--fw-dark-blue);
}

@media (max-width: 769px) and (min-width: 1100px) {
    .event-card .layered-grid__heading {
        max-width: 25vw;
        max-height: 58px;
    }
}

@media (max-width: 769px) and (min-width: 1100px) {
    .event-card .layered-grid__image {
        aspect-ratio: 3 / 2.4;
    }
}

.event-card--primary .layered-grid__heading {
    background-color: var(--lk-card-primary);
}

.event-card--primary .layered-grid__link:hover ~ .layered-grid__heading {
    background-color: var(--lk-card-primary-accent);
    color: var(--lk-card-primary-hover-text);
}

.event-card--second .layered-grid__heading {
    background-color: var(--lk-card-second);
}

.event-card--second .layered-grid__link:hover ~ .layered-grid__heading {
    background-color: var(--lk-card-second-accent);
    color: var(--lk-card-second-hover-text);
}

.event-card .image {
    width: 100%;
    height: auto;
    object-fit: cover;
    align-self: flex-start;
    border-radius: 16px;
    aspect-ratio: 1;
}

.event-card .event-date-stamp {
    background-color: var(--fw-pink--pale);
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0.01em;
    color: var(--fw-dark--blue);
    position: absolute;
    top: -6%;
    left: -10%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1.5em;
    width: min-content;
}

.event-card .description {
    width: 100%;
    position: relative;
    top: -0.5em;
    padding: 1em 0 1em 0;
}

    .event-card .description .time-from-to {
        font-size: 14px;
        line-height: 20px;
        letter-spacing: 0.01em;
        color: var(--fw-dark-blue);
    }

        .event-card .description .time-from-to span:first-of-type::after {
            content: "-";
        }

    .event-card .description .title {
        font-size: 28px;
        line-height: 34px;
        color: #000000;
        margin-bottom: 8px;
    }

    .event-card .description .location {
        font-size: 28px;
        line-height: 34px;
        color: #000000;
        margin-bottom: 20px;
    }

    .event-card .date-icon {
        stroke-width: 1.4px;
        font-size: 1.5rem;
        vertical-align: middle;
    }

    .event-card .event-date,
    .event-card .location,
    .event-card .time-from-to{
        margin-bottom: 1rem;
    }