/* main {
    padding-top: 5vh;
} */



form {
    margin-block: var(--bm);
}

form label:has(input:checked) {
    background: var(--near);
    color: white;

}

section.introduction {
    padding: var(--bm);
    margin-top: calc(var(--bm) *2);
    max-width: var(--max-width-big);
    margin-inline: auto
}





.button-filters {


    gap: var(--bm);
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;



    h3 {
        margin: 0 var(--bm)
    }

}

fieldset {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    pointer-events: auto;
    gap: .3rem;
    width: fit-content;


    .subtitle {
        width: fit-content;


    }

    .options {
        display: flex;
        flex-wrap: wrap;
        gap: .3rem;
    }
}







.filter span {
    animation: fadeIn calc(var(--animation-duration) * 1) var(--animation-easing) forwards;

}


@keyframes opacity {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }

}




section.graduates {
    display: flex;
    gap: .25rem;
    /* margin: 1em; */
    width: 100%;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;


    .card-details {
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        gap: 1.2rem;
    }

    a.graduate {
        height: 5lh;
        width: auto;
        padding: var(--button-paddings);


        background-color: var(--near);
        border-radius: var(--border-radius);
        text-align: center;
        color: white;
        position: relative;
        text-decoration: none;
        transition: all var(--animation-duration) var(--animation-easing);

        display: flex;
        flex-direction: column;

        justify-content: space-between;
        gap: .2rem;

        span.mediapoint {
            text-transform: uppercase;
        }
    }
}





section.filters>span {
    grid-column: 1/ span 14;
    text-align: center;
}



details[open]>section.visible-content {
    animation: fadeIn calc(var(--animation-duration) * 1) var(--animation-easing) forwards;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

details[open] {
    /* max-height: 45vh; */
    opacity: 1;
}


details {
    /* max-height: 6em; */
    overflow: hidden;
    transition: max-height var(--animation-duration) var(--animation-easing);
    line-height: 1.2;
}

section.filters>select {}

.date-filter {}

section.graduated {}

section.graduated>* {
    animation: fadeInAnimation var(--animation-duration) var(--animation-easing) forwards;

}



@keyframes fadeInAnimation {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}








section.introduction {}

@media (width < 960px) {

    main>*,
    main>*>* {
        grid-column: 1/-1 !important;
    }

    .graduate.card {
        span {
            opacity: 0 !important;
        }


    }

    .graduate.card.visible {
        span {
            opacity: 1 !important;
        }
    }

    .button-filters {

        flex-direction: column;

        span {
            font-size: var(--small-fs);
        }
    }




    section.graduates a.graduate {
        min-width: 100%;
        width: 100%;
        height: auto;
        align-items: center;
        min-height: 5lh;

        span {
            transition: all var(--animation-duration) var(--animation-easing);
            background-color: var(--near);
            padding: var(--button-paddings);
            font-size: var(--small-fs);
            font-family: "Futura Stencil";
            text-transform: uppercase;
            border-radius: var(--border-radius);
        }


        picture {
            top: 0;
            position: absolute;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 1;

            img {
                opacity: 1;
                width: 100%;
                object-fit: cover;
                background-color: var(--near);
                height: inherit;
                border-radius: var(--border-radius);

                height: 100%;
                left: 0;
                top: 0;
            }
        }
    }




    .graduated-item>* {
        grid-column: inherit;
    }

    summary>* {
        grid-column: inherit;
    }

    summary h3:nth-of-type(1),
    summary h3:nth-of-type(2),
    summary h3:nth-of-type(3),
    summary h3:nth-of-type(4),
    summary h3:nth-of-type(5) {
        grid-column: inherit;
        text-align: center;
        line-height: 1.2;
    }

    summary h3:nth-of-type(1) {}

    summary h3:nth-of-type(3),
    summary h3:nth-of-type(4),
    summary h3:nth-of-type(5) {
        text-transform: uppercase;
    }


    details {
        max-height: fit-content;

    }


}



.graduate picture {
    top: 0;
    position: absolute;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;

}

.graduate>* {
    z-index: 2;
    position: relative;



}

.graduate .year {}



.graduate:hover>* {}

.graduate:hover img {
    opacity: 1;
}

.graduate picture img {
    width: 100%;
    object-fit: cover;
    opacity: 0;

    transition: all calc(var(--animation-duration) /2) var(--animation-easing);
    height: inherit;
    border-radius: var(--border-radius);
}

a.graduate:hover {}