posts.sass

.block-posts
    .top
        margin-bottom: $spacing-4
        a
            @include icon(arrow-right, after, true)
            @include hover-translate-icon
            text-decoration: none
    .posts
        @include grid(1)
        @include grid($block-posts-grid-columns, desktop)
    article
        [itemprop=headline]
            a
                @include stretched-link
                text-decoration: none
        .post-content
            > * + * 
                margin-top: $spacing-2
            .media
                margin-top: 0
        @include post-time-author-flex

    &--grid
        @include media-breakpoint-down(desktop)
            article + article
                margin-top: $spacing-5
        @include in-page-with-sidebar
            .grid
                @include grid(2, desktop, var(--grid-gutter), half(var(--grid-gutter)))
        @include in-page-without-sidebar
            .grid
                @include grid($block-posts-grid-columns)
                .media picture img
                    width: 100%
    &--large
        @include media-breakpoint-up(sm)
            article
                .post-meta
                    display: inline
        .post
            .more
                @include icon(arrow-right, after, true)
            .post-author 
                p::before
                    display: none
            @include media-breakpoint-down(desktop)
                + .post
                    margin-top: $spacing-4
                &-meta
                    .post-author 
                        display: inline-flex
                        &::after
                            content: '—'
                            margin: 0 $spacing-1
                    .post-categories
                        display: flex
                p[itemprop="articleBody"]
                    margin-top: 0
        @include media-breakpoint-up(desktop)
            .large
                .post
                    flex-direction: row
                    gap: half(var(--grid-gutter))
                    + .post
                        margin-top: $spacing-4
                    p[itemprop="articleBody"]
                        margin-top: $spacing-3
                    &-title
                        @include h2
                    .post-meta 
                        > *
                            display: inline
                            &:not(:first-child)::before
                                content: '—'
                                margin-right: $spacing-1
                        > time
                            display: inline-block
                            margin-top: -2px
                    .post-author
                        p
                            display: inline
                        li
                            margin-right: $spacing-2
                    .post-categories
                        li
                            display: inline-flex
                            margin-right: $spacing-2
                            padding-bottom: 3px
                            &:not(:last-child)::after
                                content: ','
                            
        @include in-page-with-sidebar
            .large
                .post
                    @include media-breakpoint-down(xl)
                        flex-direction: column
                        gap: unset
                        p[itemprop="articleBody"]
                            margin-top: $spacing-2
                    @include media-breakpoint-up(xl)
                        .media,
                        .post-content
                            width: calc(#{columns(4)} + #{half(var(--grid-gutter))})
        @include in-page-without-sidebar
            .large
                .post
                    gap: var(--grid-gutter)
                    .media
                        width: columns(6)
                    .post-content
                        width: columns(5)
                p[itemprop="articleBody"]
                    margin-top: calc(#{$spacing-3} + #{$spacing-2})
    &--list
        article
            border-bottom: 1px solid $color-border
            .media
                background: none
                margin: 0
                &, img
                    aspect-ratio: auto

        @include media-breakpoint-down(desktop)
            article
                position: relative
                padding-bottom: half($spacing-5)
                + article
                    margin-top: half($spacing-5)
                .post-content
                    display: flex
                    flex-direction: column
                    padding-top: $spacing-2
                    [itemprop=headline]
                        margin-bottom: 0
                    .post-categories
                        margin-bottom: 0
                    p[itemprop="articleBody"]
                        margin-top: $spacing-1
                .media
                    order: -1
                    max-width: 33%

        @include media-breakpoint-up(desktop)
            article
                display: flex
                flex-direction: row

        @include in-page-with-sidebar
            article
                padding-bottom: $spacing-3
                + article
                    margin-top: $spacing-3
                .media
                    width: calc(#{columns(2)} + #{half(var(--grid-gutter))})
                .post-content
                    width: columns(6)
                    margin-left: half(var(--grid-gutter))

        @include in-page-without-sidebar
            article
                border-bottom: 1px solid $color-border
                gap: var(--grid-gutter)
                padding-bottom: $spacing-5
                position: relative
                .media
                    width: columns(3)
                .post-content
                    width: columns(6)
                + article
                    margin-top: $spacing-5
                .post-meta
                    position: absolute
                    right: 0
                    top: 0
                    margin-top: 0.3em

    &--highlight
        .highlight-post
            [itemprop=headline]
                margin-bottom: $spacing-2
            .media
                margin-bottom: $spacing-2
                background: none
        .list
            margin-top: half($spacing-5)
            border-top: 1px solid $color-border
            article
                border-bottom: 1px solid $color-border
                position: relative
                padding-bottom: half($spacing-5)
                margin-top: half($spacing-5)
        article
            > * + * 
                margin-top: $spacing-2
            .media
                margin-top: 0

        @include media-breakpoint-down(desktop)
            .list
                border-top: 1px solid $color-border
                p[itemprop="articleBody"]
                    margin-top: 0

        @include media-breakpoint-up(desktop)
            .highlight
                [itemprop=headline]
                    @include h2
            .list
                article
                    [itemprop=headline]
                        @include h4

        @include in-page-with-sidebar
            .highlight-post
                .post
                    flex-direction: row
                    .media
                        width: calc(#{columns(3)} + #{half(var(--grid-gutter))})
                        margin-bottom: 0
                    .post-content
                        width: columns(5)
                        margin-left: half(var(--grid-gutter))
            .list
                article
                    @include grid(8, desktop, 0, 0)
                    [itemprop=headline]
                        grid-column: 1 / 7
                    .post-categories
                        grid-column: 1 / 7
                    .post-meta
                        grid-row: 1
                        grid-column: 7 / 9
                        text-align: right
                        order: 2
                        display: block
                        margin-top: 0
                        .post-author p::before
                            content: ''
                    p[itemprop="articleBody"]
                        grid-column: 1 / 7
                        order: 3

        @include in-page-without-sidebar
            .highlight
                @include grid(2)
            .list
                border-top: 0
                margin-top: 0
                article:first-child
                    margin-top: 0

    &--alternate .alternate
        .post .media img
            aspect-ratio: unset
        
        @include media-breakpoint-up(desktop)
            .post
                &.right
                    margin-left: auto
                &.portrait
                    + .portrait
                        margin-top: -30%
                    + .square,
                    + .landscape
                        margin-top: -15%
                    + .post:not(.portrait, .square, .landscape)
                        margin-top: -5%

        @include media-breakpoint-down(desktop)
            .post 
                .post-meta
                    margin-top: $spacing-1
                .media
                    margin-bottom: $spacing-2
                + .post
                    margin-top: $spacing-5

        @include in-page-with-sidebar
            .post
                width: columns(4)

        @include in-page-without-sidebar
            width: columns(10)
            margin-left: auto
            margin-right: auto
            .post
                width: columns(4)

// Move this part to blocks/categories when categories block is ready
.block-posts
    .categories--grid
        li
            background: $color-background-alt
            padding: $spacing-3
            position: relative
            a
                @include h3
                font-weight: bold
                text-decoration: none
                @include stretched-link
            p
                display: block