/* Events */
#notikumi {
    display: flex;

    flex-direction: column;

    overflow-y: auto;
    max-height: inherit;

    scrollbar-color: var(--clr-main) var(--clr-md-gray);
    scrollbar-width: thin;
}

@media screen and (max-width: 991px) {
    #notikumi {
        padding-right: 0 !important;
    }
}

/* Custom scrollbar if supported */
#notikumi::-webkit-scrollbar {
    width: 0.5rem;
}

#notikumi::-webkit-scrollbar-track {
    background-color: var(--clr-lt-gray);
}

#notikumi::-webkit-scrollbar-thumb {
    background-color: var(--clr-main);
}

#notikumi::-webkit-scrollbar-thumb:hover {
    background-color: var(--clr-hover-navbar);
}

.event {
    display: flex;

    border-bottom: var(--clr-main) 0.188rem solid;
    border-top: 0;
    padding: 0.5rem;

    max-height: min-content;
}

.event:first-child,
.event:last-child {
    border: 0;
}

.event .event__time,
.event .event__name,
.event .event__location {
    color: var(--clr-black);
}

.event:first-child .event__date,
.event:first-child .event__time,
.event:first-child .event__name,
.event:first-child .event__location {
    color: var(--clr-white);
}

.event .underline__hover__link,
.event .underline__hover__link {
    transition: background-size 0.5s, color 120ms linear;
}

.event:first-child .underline__hover__link {
    background-image: linear-gradient(var(--clr-white), var(--clr-white));
}

.event .underline__hover__link:hover,
.event .underline__hover__link:focus {
    color: var(--clr-main);
}

.event:first-child .underline__hover__link:hover,
.event:first-child .underline__hover__link:focus {
    color: var(--clr-lt-gray);
}

/* Date */

.event__datetime {
    min-width: min(40%, 9rem);

    display: flex;
    flex-direction: column;
}

.event__date {
    font-family: var(--ff-title);
    font-size: var(--fsize-title);
    font-weight: 700;
    text-transform: uppercase;

    color: var(--clr-main);

    flex-grow: 1;
}

.event__time {
    letter-spacing: 0.07rem;
    font-family: var(--ff-title);
}

.event__info {
    display: flex;
    flex-direction: column;

    align-items: flex-start;
}

.event__name {
    font-family: var(--ff-title);
    font-size: var(--fsize-medium);
    font-weight: 700;
    color: var(--clr-black);

    flex-grow: 1;
}

.event__location {
    padding-bottom: 0.1rem;
    color: var(--clr-black);
}

.event__location i {
    margin-right: 0.325rem;
}

/* Old browser support */
@supports (background: var(--gradient-blue)) {
    .event:first-child {
        background: var(--gradient-blue);
    }
}