///////////////////////
// Page sections
////
// Specific layout used in page sections
// 

.section
    // HERO
    &--hero
        min-height: 500px
        .container 
            padding-top: 250px
        &.hero--bigger
            min-height: 750px
        .hero__background
            height: 100%
            width: 100%
            position: absolute
            pointer-events: none
            overflow: hidden
            .img-cover
                height: 100%
                @-webkit-keyframes hero_on_load
                    0% 
                        filter: blur(10px)
                        transform: scale(2)
                    100% 
                        filter: blur(0px)
                        transform: scale(1)
                filter: blur(10px)
                &.animate
                    animation: hero_on_load 2s
                    filter: blur(0px)
                &__overlay
                    background: linear-gradient(45deg, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0))
                    backdrop-filter: blur(0px) brightness(115%)
        @include scroll-prompt(regular)
        .scroll-prompt-holder
            position: absolute
            bottom: 20px
            right: 0
            left: 0
    // FULLWIDTH SLIDER
    &--fullwidth-slider
        height: 700px
        @include scroll-prompt(large)
        .container, .splide, .splide__track, .splide__slide, .img-cover
            height: 100%
        .img-cover__img
            padding: 40px 200px
        .content
            position: absolute
            top: 50px
            bottom: 0
            right: 0
            left: 0
            margin: auto
            display: flex 
            justify-content: center 
            align-items: center
            flex-direction: column
            text-align: center
            padding-right: $grid-gutter
            padding-left: $grid-gutter
        .splide
            &__slide
                &:not(:first-child)
                    .img-cover 
                        opacity: 0.9
            &__overlay
                background: linear-gradient(45deg, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.3))
                backdrop-filter: blur(0px) brightness(115%)
            &__pagination 
                position: absolute
                bottom: 235px
                right: 90px
                z-index: 1
                .splide__pagination__page
                    display: block
                    margin-left: 27px
                    width: 21px
                    height: 21px
                    border: 1px solid $dark 
                    background-color: white
                    cursor: pointer
                    position: relative
                    &.is-active:after
                        content: ""
                        position: absolute
                        width: 13px
                        height: 13px
                        top: 0
                        bottom: 0
                        right: 0
                        left: 0
                        margin: auto
                        background-color: $dark
            &__arrows  
                display: flex 
                gap: 12px
                position: absolute
                bottom: 200px
                right: 90px
                z-index: 1
            &__arrow
                border: 1px solid $dark
                border-radius: 100%
                width: 21px
                height: 21px
                display: flex
                justify-content: center
                align-items: center
                cursor: pointer
                &--prev
                    transform: scaleX(-1)
    // IMAGE MOSAIC
    &--content-with-image-mosaic
        .mosaic-img-holder
            position: relative
            height: 100%
            transform-origin: right top
            @media (max-width: 1600px)
                transform: scale(0.9)
            @media (max-width: 1500px)
                transform: scale(0.75)
            @media (max-width: 1400px)
                transform: scale(0.7)
            @media (max-width: 1300px)
                transform: scale(0.65)
            @media (max-width: 1200px)
                transform: scale(0.6)
            @media (max-width: 1100px)
                transform: scale(0.5)
            @media (max-width: 950px)
                transform: scale(0.4)
            @media (max-width: 850px)
                transform: scale(0.7)
            @media (max-width: 750px)
                transform: scale(0.6)
            @media (max-width: 650px)
                transform: scale(0.5)
            @media (max-width: 550px)
                transform: scale(0.45)
            @media (max-width: 450px)
                transform: scale(0.4)
            @media (max-width: 400px)
                transform: scale(0.35)
            @media (max-width: 360px)
                transform: scale(0.3)
            // @media (max-width: 1050px)
            //     transform: scale(0.5)
            .mosaic_image
                position: absolute
                width: max-content
        .content 
            @media (max-width: 950px)
                margin-top: 0 !important
                // margin-left: 0 !important
                // margin-right: auto !important
                // margin-left: 100px !important
        &.section--inverse 
            .mosaic-img-holder
                transform-origin: left top
            .content 
                @media (max-width: 1300px)
                    // margin-left: auto !important
                    // margin-right: 0 !important
                    // margin-right: 100px !important
        .title-content.has-line 
            position: relative
            span:after 
                content: ""
                width: 300px
                height: 1px
                z-index: -1
                position: absolute
                top: 0
                bottom: 0
                margin: auto
                background-color: $dark
                right: -290px
        &.has-logo .content
            margin-right: auto 
            margin-left: auto
            text-align: center
    &--content-with-image-mosaic#{&}--inverse
        .title-content.has-line span:after 
            left: -300px
            right: auto
    // LINE
    &--line
        text-align: center
        overflow: hidden
        &.fullwidth-line .line__content
            &:before
                right: 0
            &:after 
                left: 0
        .line__above
            padding-right: $grid-gutter
            padding-left: $grid-gutter
        .line__content
            padding: 0 30px
            display: inline-block
            position: relative
            min-height: 1px
            &:after, &:before 
                content: ""
                width: 50vw
                height: 1px
                z-index: -1
                position: absolute
                top: 0
                bottom: 0
                margin: auto
                background-color: $dark
            &:before 
                left: -50vw
            &:after
                right: -50vw
            
    // NUMBERS
    &--numbers
        .row--numbers
            flex-wrap: nowrap
            .number 
                flex-grow: 1
                text-align: center
                padding-left: 10px
                padding-right: 10px
                &:first-child
                    padding-left: 0
                &:last-child
                    padding-right: 0
                &:not(:last-child)
                    border-right: 1px solid $dark
                &__num
                    @include get-text(big-number)
                &__text
                    max-width: 300px
                    margin: auto
    // TITLE
    &--title-section
        .title-area
            margin-right: auto
            margin-left: auto
            text-align: center
    // THREE COLUMNS
    &--three-columns
        .three-columns                
            &__single
                .title-content
                    margin-top: 28px
                    margin-bottom: 12px
    // AWARDS
    &--awards
        .awards
            flex-wrap: nowrap
            .col
                &:not(:last-child)
                    border-right: 1px solid $dark
            .year-num
                font-weight: 600
                text-align: center
                margin-bottom: 60px
            &__title
                margin-bottom: 10px
            &__single 
                margin-bottom: 80px
            &__text
                margin-bottom: 30px
            &__link
                text-decoration: underline
                color: $dark
    // TWO COLUMNS WITH BACKGROUNDS
    &--two-columns-with-backgrounds
        .background_image
            position: absolute
            width: 100%
            height: 100%
            z-index: -1
            .img-cover
                height: 100%
                &__overlay
                    background: linear-gradient(45deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0))
                    backdrop-filter: blur(0px) brightness(115%)
        .content
            min-height: 800px
            text-align: center
            display: flex 
            flex-direction: column
            justify-content: center
            align-items: center
            &.contained-left
                padding-right: 70px
                padding-left: $grid-gutter
            &.contained-right
                padding-left: 70px
                padding-right: $grid-gutter
    // ONE COLUMN WITH FULL BACKGROUND
    &--one-column-with-full-background
        .container
            padding-top: 32px
            padding-bottom: 32px
            .btn-holder
                justify-content: center
    // CONTACT
    &--contact-form
    &--contact-form-map
        .title-content
            margin-top: 0
            margin-bottom: 10px
        .text-content
            margin-bottom: 20px
        .contact-details
            margin-bottom: 20px
            a 
                text-decoration: underline
        .social 
            svg
                width: 30px
                height: 30px
            &__instagram
                margin-right: 20px
        iframe
            width: 100%
            height: 100%
            filter: grayscale(100%)


.single-news-title
    max-width: 930px
.single-news-content
    &__date
        font-style: italic
        margin-bottom: 32px
    &__content 


.breadcrumbs
    ul
        display: flex 
        flex-wrap: wrap
        border-top: 1px solid #fff
        width: 100%
    &__single
        display: flex 
        align-items: center
        text-align: left
        &:not(:first-child)
            padding-left: 20px
    &__link
        color: $dark
        text-decoration: none
        &:hover 
            text-decoration: underline
    &__current
        font-weight: 600
    &__seperator
        padding-right: 20px  
        flex-shrink: 0 
        svg
            height: 10px
            width: 11px

.splide 
    position: relative
    .splide__overlay
        position: absolute
        height: 100%
        width: 100%
        top: 0
        right: 0

/*********/
/** 404 **/
/*********/


/***********/
/** MEDIA **/
/***********/
@mixin layout-page--desktop-and-smaller
    .section
        &--numbers .row--numbers .number__num
            @include get-text(big-number-laptop)
        &--fullwidth-slider 
            .img-cover__img
                padding: 40px 100px
            .splide__arrows
                bottom: 150px
            .splide__pagination
                bottom: 185px
        &--content-with-image-mosaic
            &.height-increase-type-1
                min-height: 550px
            &.height-increase-type-2
                min-height: 400px
        &--two-columns-with-backgrounds
            .text--h1-sized
                @include get-text('h2-small')

@mixin layout-page--laptop-and-smaller
    .section
        &--contact-form
            .row .col 
                width: 100%
                max-width: 100%
                flex-basis: 100%
            form fieldset .form-field
                &--status, &--submit
                    width: 100%
                    flex-basis: 100%
                &--status
                    margin-bottom: 20px
                &--submit
                    margin-top: 20px


@mixin layout-page--custom-850
    .section--content-with-image-mosaic 
        // height: auto !important
        .title-content.has-line span:after 
            display: none
        .mosaic-img-holder

        .content 
            margin-right: auto !important
            margin-left: auto !important
            text-align: center
            margin-top: 40px !important
            .btn-holder
                justify-content: center
        @include base-grid--tablet-and-smaller
        &.section--x-large-margin
            margin-bottom: $section-space-between
                
        &.margin-top-type-1
            .mosaic-img-holder
                margin-top: 80px
        &.margin-type-1
            .mosaic-img-holder
                margin-right: 70px
        &.margin-type-2
            .mosaic-img-holder
                margin-right: 100px
        &.section--inverse 
            &.margin-type-1
                .mosaic-img-holder
                    margin-left: 70px
            &.margin-type-2
                .mosaic-img-holder
                    margin-left: 100px


@mixin layout-page--tablet-and-smaller
    .section
        text-align: center
        &--hero
            min-height: 500px !important
            .container
                padding-top: 200px
                .text-container
                    margin: auto
        &--fullwidth-slider 
            .img-cover__img
                padding: 40px 20px
            .splide__arrows, .splide__pagination
                display: none
        &--numbers .row--numbers .number
            &__num
                font-size: 2.3rem
            &__text
                font-size: 1rem
        &--three-columns
            text-align: center
            .img-cover
                max-width: 400px
                margin-right: auto
                margin-left: auto
        &--awards
            .row.awards
                flex-wrap: wrap
                text-align: center
                .col 
                    border: none
                .year-num
                    margin-bottom: 30px
        &--two-columns-with-backgrounds
            .row .col .content 
                padding: 40px
                min-height: 400px
        &#{&}--content-with-image-mosaic 
            &.margin-top-type-1
                .mosaic-img-holder
                    margin-top: 40px
        &--contact-form form fieldset
            .form-field-set
                margin-right: -10px
                margin-left: -10px
            .form-field
                padding-right: 10px
                padding-left: 10px
        &--contact-form-map
            .social 
                justify-content: center
            iframe
                height: 400px
        &--hero
            .text-container br 
                display: none

@mixin layout-page--mobile-and-smaller
    .section 
        &--numbers .row--numbers 
            flex-wrap: wrap
            .number
                flex-basis: 50%
                padding-top: 16px
                padding-bottom: 16px
                &:nth-child(1)
                    border-bottom: 1px solid $dark
                &:nth-child(2)
                    border-right: none
                    border-bottom: 1px solid $dark
                &__num
                    font-size: 1.8rem
                    margin-bottom: 10px
                &__text
                    font-size: 0.8rem
        &--fullwidth-slider 
            height: 600px
            h1
                // font-size: 3.5rem
            .img-cover__img
                padding: 20px 10px
        &#{&}--content-with-image-mosaic
            &.margin-type-1
                .mosaic-img-holder
                    margin-right: 30px
            &.margin-type-2
                .mosaic-img-holder
                    margin-right: 70px
            &.section--inverse 
                &.margin-type-1
                    .mosaic-img-holder
                        margin-left: 30px
                &.margin-type-2
                    .mosaic-img-holder
                        margin-left: 70px
        &--contact-form
            form fieldset .form-field
                width: 100%
                flex-basis: 100%
                .radio-container
                    flex-direction: column
                    .radio-single 
                        margin-bottom: 15px
        &--contact-form-map