events.sass

.events__page
    .hero
        h1 span
            display: block
            color: $color-text-alt
    .lead
        @include h3
        // Safe spacing if post is empty
    &:not(.full-width)
        .event-sidebar
            @include sidebar
    @include media-breakpoint-up(desktop)
        .document-content
            min-height: 600px
            &::after
                content: ''
                display: block
                height: 1px

.events__section
    .archive-link
        @include icon(arrow, after, true)
        @include hover-translate-icon(after)
        display: block
        text-align: right
        text-decoration: none
    @include media-breakpoint-down(desktop)
        .events
            margin-bottom: $spacing2
        .archive-link
            text-align: left

.event-infos
    @include list-reset
    @include media-breakpoint-up(desktop)
        font-size: $table-body-size-desktop
        padding-bottom: $spacing3
    .event-date
        text-transform: capitalize
    ul
        @include list-reset
    > li
        padding-top: $spacing0
        &:not(:last-child)
            padding-bottom: $spacing0
        > span
            @include meta
            color: $color-text-alt
            padding-left: 0
            display: block
            white-space: nowrap
        time + time
            @include icon(arrow)
            &::before
                padding-right: 0.3rem
    .events-categories
        display: flex
        gap: space(2)
        a
            @include link($color-accent)
    .events-actions
        align-items: start
        display: flex
        flex-direction: column
        gap: space(1)
        padding-bottom: 0
        a
            &::after
                display: none
    .share
        a
            color: inherit
        li:first-child a
            padding-left: 0

.event
    a
        text-decoration: none
    &-subtitle
        @include h3
        color: $color-text-alt
    &-categories
        @include meta
        margin-top: $spacing0
        span + span
            &::before
                content: ', '
    &-time
        span + span
            @include icon(arrow-right, before)
    .media
        &:empty
            display: none
        img
            display: block
    @include media-breakpoint-down(desktop)
        &-time
            display: inline-flex
            &::before
                content: '|'
                margin-right: half($spacing0)
.events
    &--list
        .event
            border-bottom: 1px solid $color-border
            display: flex
            flex-direction: column
            margin-bottom: $spacing1
            padding-bottom: $spacing1
            position: relative
            .event-title
                @include h3
                a
                    @include stretched-link
                    text-decoration: none
            &-dates
                @include h4
                margin-top: half($spacing0)
                margin-bottom: half($spacing1)
            &-content
                order: 2
            @include media-breakpoint-down(desktop)
                @include media-breakpoint-up(md)
                    flex-direction: row
                    gap: $spacing1
                    .media
                        width: col(4)
                    &-content
                        order: 1
                        width: col(8)
            @include media-breakpoint-down(md)
                .media
                    max-width: 33%
                    margin-bottom: $spacing0
                &-content
                    order: 1
            @include media-breakpoint-up(md)
                .media
                    grid-column: 10 / 13
            @include media-breakpoint-up(desktop)
                flex-direction: row
                gap: $grid-gutter
                align-items: start
                &-content
                    width: col(10)
                    > hgroup, > .event-title
                        margin-bottom: $spacing0
                .media
                    order: 2
            @include in-page-without-sidebar
                &-dates
                    margin-top: 0
                    order: 0
                    grid-column: 1 / 5
                    > span
                        @include h3
                        margin-bottom: $spacing1
                &-time
                    margin-top: $spacing0
                    @include meta
                &-content
                    @include grid(10, desktop, 0)
                    order: 1
                    grid-column: 1 / 11
                    > .event-title, > hgroup, .event-description, .event-categories
                        grid-column: 5 / 11
                    > .event-dates
                        grid-column: 0 / 5
                        grid-row: 1 / 4
                .media
                    width: col(2)
            @include in-page-with-sidebar
                @include grid(8)
                &-content
                    order: 1
                    grid-column: 6 span
                    margin-top: half($spacing0)
                &-time
                    display: inline
                    &::before
                        content: ' — '
                .media
                    grid-column: 2 span

    &--grid
        @include grid(2, md, $spacing2)
        .event
            display: flex
            flex-direction: column
            position: relative
            &-content
                a
                    @include stretched-link
            &-dates
                @include meta
                margin-top: $spacing0
            &-content
                .event-title, hgroup
                    @include h3
            &-description
                margin-top: $spacing0
            .media
                margin-bottom: $spacing0
                order: -1
                img
                    aspect-ratio: 1
                    object-fit: cover
                    width: 100%
        @include media-breakpoint-down(md)
            .event
                + .event
                    margin-top: $spacing2
        @include in-page-without-sidebar
            @include grid(3, desktop)

    &--large
        .event
            display: flex
            flex-direction: row
            position: relative
            grid-gap: $grid-gutter
            + .event 
                margin-top: $grid-gutter
            &-content
                a 
                    @include stretched-link
            &-dates 
                @include meta
                margin-top: $spacing0
            &-content
                flex: 1
                .event-title
                    @include h3
                .more
                    @include icon("arrow-right", after)
                    margin-top: $spacing1
                    &::after
                        margin-left: half($spacing0)
            .media
                order: -1
                img
                    aspect-ratio: 1
                    object-fit: cover
                    width: 100%
            @include media-breakpoint-up(desktop)
                .media
                    width: col(4, 8)
                &-dates
                    @include h3
                    margin-bottom: $spacing2
                .event-title,
                .event-subtitle, 
                hgroup
                    @include h2
            @include media-breakpoint-down(desktop)
                flex-direction: column
                grid-gap: 0
                .media
                    margin-left: calc(-#{$grid-gutter-sm} /2)
                    margin-right: calc(-#{$grid-gutter-sm} /2)
                    aspect-ratio: 1
                    img 
                        margin-bottom: $spacing0
            @include in-page-without-sidebar
                align-items: center
                &-dates
                    @include h3
                &:not(.event--with-image)
                    width: col(5)
                    margin-left: offset(4)