///////////////////////
// Content grid layout
////
// Specific layout used in content grids
// 

@mixin content-gutters($gap)
    $col-gutter: $gap / 2
    margin-right: -1 * $col-gutter
    margin-left: -1 * $col-gutter
    .content-grid-single
        padding-right: $col-gutter
        padding-left: $col-gutter

.section--content-grid

.content-grid
    display: flex
    flex-wrap: wrap 

    &--gap-80
        @include content-gutters(80px)
    &--gap-70
        @include content-gutters(70px)
    &--gap-16
        @include content-gutters(16px)

        
    + .btn-holder
        justify-content: center

    &--news

    // &--news#{&}--gap-70 .content-grid-single
    &--news .content-grid-single
        margin-bottom: 70px

    &--team





.project-grid-single
    flex-basis: 33%
    width: 33%
    margin-bottom: 32px
    &__award
        position: absolute
        top: 15px
        right: 10px
    &__status
        height: 9px
        width: 100%
        &--current
            background-color: $current-color
        &--under-review
            background-color: $review-color
        &--complete
            background-color: $complete-color
        &--coming-soon
            background-color: $soon-color
        &--all
            background-color: $all-color
    &__content
        height: 320px
        position: relative
        overflow: hidden
    &:hover &__hover-content
        opacity: 1
        pointer-events: initial
    &:hover &__image .img-cover 
        &__img 
            transform: scale(1.3)
    &__image
        position: absolute
        height: 100%
        width: 100%
        pointer-events: none
        .img-cover
            height: 100%
            &__img 
                transition: transform 0.5s
    &__hover-content
        opacity: 0
        pointer-events: none
        transition: opacity 0.3s
        position: relative
        background: rgba(255,255,255,0.89)
        display: flex 
        justify-content: center
        align-items: center
        flex-direction: column
        height: 100%
        padding: 35px
    &__text
        margin-bottom: 20px
    &__btns
        display: flex 
        justify-content: space-between
        width: 100%
        &--one-btn
            justify-content: center
        .btn
            margin: 0
    &__title
        height: 70px
        display: flex 
        justify-content: center
        align-items: center

.project-filter
    display: flex 
    justify-content: space-between
    &__status
    &__location
    &__status-text, &__location-text
        margin-bottom: 20px
    &__status-btns .status-button span, &__status-btns button, select
        cursor: pointer
        width: 210px
        height: 58px
        border: 1px solid $grey
        border-radius: 100px
        position: relative
        overflow: hidden
        display: flex 
        justify-content: center
        align-items: center
    &__status-btns
        display: flex 
        gap: 20px
        flex-wrap: wrap
        label
            input
                display: none
            span
                transition: all 0.3s
                &:after
                    content: ""
                    position: absolute
                    width: 100%
                    height: 5px
                    bottom: 0
                    left: 0
                    transition: height 0.3s
                    z-index: -1
                &.status-name
                    &--current:after
                        background-color: $current-color
                    &--under-review:after
                        background-color: $review-color
                    &--complete:after
                        background-color: $complete-color
                    &--coming-soon:after
                        background-color: $soon-color
                    &--all:after
                        background-color: $all-color

            input:checked + span, span:hover 
                font-size: 1.2em
                &:after
                    height: 100% 
    select
        appearance: none
        text-align: center
        padding-right: 45px
        padding-left: 10px
        background-image: url("../img/svgs/down-arrow.svg")
        background-repeat: no-repeat
        background-position-x: 90%
        background-position-y: 50%
        background-size: 12%

.project-gallery-modal
    .modal-content-container
        .modal-content
            max-width: 1100px
            padding: 0
            background-color: #262626
            color: white
            .img-cover
                padding-top: 50%
                height: auto
            .gallery
                &__info
                    padding: 10px
                    text-align: center
                &__single-name
                    font-weight: 600
            .modal-close
                top: 7px
                right: 7px
                svg
                    width: 33px
                    height: 33px
                    margin-right: 0
            .splide
                &__arrows

                &__arrow
                    position: absolute
                    top: 50%
                    transform: translateY(-50%)
                    width: 58px
                    height: 52px
                    background-color: #262626
                    display: flex 
                    justify-content: center
                    align-items: center
                    cursor: pointer
                    &--prev
                        left: 0
                        svg 
                            transform: scaleX(-1)
                    &--next 
                        right: 0

.news-grid-single
    flex-basis: 33%
    display: inline-block
    width: 33%
    &__inner
        border: 1px solid $grey
        padding: 20px
    &__title
        text-decoration: none
        margin-bottom: 5px
        color: $dark
        &:hover 
            text-decoration: underline
    &__date
        font-style: italic
        margin-bottom: 10px
    &__excerpt
        margin-bottom: 20px
    &__link
        margin-bottom: 10px
        text-decoration: none
        color: $dark
        &[target="_blank"]
            &:after 
                content: url("../img/svgs/open-external.svg")
                margin-left: 1ch
        &:not([target="_blank"])
            &:after 
                content: '>'
                margin-left: 1ch
                display: inline-block
        &:after 
            transition: all 0.3s
        &:hover 
            text-decoration: underline
            &:after 
                margin-left: 1.5ch

    

.team-grid-single
    flex-basis: 20%
    width: 20%
    &__inner
        text-align: center
        cursor: pointer
    &__image
        .img-cover
            padding-top: 123%
    &__position
        opacity: 0
        margin-top: -16px
        transition: all 0.3s
        margin-bottom: 32px
        height: 2em
    &__name
        margin-top: 16px
        transition: all 0.3s
    &:hover &
        &__position
            opacity: 1
        &__name
            transform: translateY(-10px)

.team-modal
    .modal-content-container
        height: 100%
        .modal-content
            max-width: 1100px
            padding: 45px 40px 70px 40px
            background-color: #243333
            *
                color: white
    .img-cover
        padding-top: 123%
        margin-bottom: 50px
    .social__linkedin svg
        fill: white
    &__content
    &__name
        margin-bottom: 5px
        margin-top: 0
    &__position
        margin-bottom: 15px
    &__text
        p 
            margin-bottom: 1em
    .modal-close
        top: 7px
        right: 7px
        svg
            width: 33px
            height: 33px
            margin-right: 0

.load-more
    &--ended 
        opacity: 0
        pointer-events: none


@mixin layout-content-grid--desktop-and-smaller
    .project-grid-single
        flex-basis: 50%
        width: 50%

@mixin layout-content-grid--laptop-and-smaller
    .team-grid-single
        flex-basis: 25%
        width: 25%
    .news-grid-single
        flex-basis: 50%
        width: 50%
        margin-bottom: 40px !important
    .content-grid--gap-70
        @include content-gutters(40px)
    .content-grid--gap-80
        @include content-gutters(40px)
    .project-filter
        &__status-btns .status-button span, &__status-btns button, select
            width: 170px
            

@mixin layout-content-grid--tablet-and-smaller
    .team-grid-single
        flex-basis: 33%
        width: 33%
    .project-grid-single__btns
        align-items: center
        flex-direction: column
        .btn:first-child
            margin-bottom: 30px
    .project-filter
        &__status-btns .status-button span, &__status-btns button, select
            width: 140px
            height: 45px
    .team-modal
        .modal-content-container
            padding-top: 0


@mixin layout-content-grid--mobile-and-smaller
    .team-grid-single
        flex-basis: 50%
        width: 50%
    .news-grid-single
        flex-basis: 100%
        width: 100%
    .project-grid-single
        flex-basis: 100%
        width: 100%
    .modal--project-gallery
        .modal-content-container
            padding: 0
            height: 100%
            .modal-content, .splide, .splide__track, .splide__list, .splide__slide
                height: 100%
            .modal-content .img-cover
                height: calc(100% - 40px)
    .project-filter
        flex-direction: column
        &__status-btns
            justify-content: center
            align-items: center
            margin-bottom: 30px
        select
            margin: auto
            width: 180px
        select#{&}__status-select
            margin-bottom: 30px
        &__status-btns .status-button span, &__status-btns button
            width: 130px


@mixin layout-content-grid--custom-1200-1350
    .project-grid-single
        .btn--small
            font-size: 1.1em
            padding-left: 10px
            .btn__icon
                margin-right: 7px
                margin-left: 7px