@import '@cnbritain/merlin-www-common:brides';
@import '@cnbritain/merlin-www-image:brides';

@import '../wireframe/wireframe';

.c-feature {
    margin-bottom: $MOBILE_SLICE_MARGIN;
    margin-top: $MOBILE_SLICE_MARGIN;
    max-width: $MAXIMUM_PAGE_WIDTH + $DESKTOP_SIDE_GUTTER + $DESKTOP_SIDE_GUTTER;
    padding-left: 0;
    padding-right: 0;

    @include at-small-size() {
        margin-bottom: $TABLET_SLICE_MARGIN;
        margin-top: $TABLET_SLICE_MARGIN;
        padding-left: $TABLET_SIDE_GUTTER;
        padding-right: $TABLET_SIDE_GUTTER;
    }

    @include at-x-large-size(){
        margin-bottom: $DESKTOP_SLICE_MARGIN;
        margin-top: $DESKTOP_SLICE_MARGIN;
        padding-left: $DESKTOP_SIDE_GUTTER;
        padding-right: $DESKTOP_SIDE_GUTTER;
    }

    &:hover {
        .c-feature__title {
            color: $pink-rose;
        }
    }
}

.c-feature--left {
    .c-feature__images {
        @include at-medium-size(){
            padding-left: 12px;

            &:before {
                left: -20px;
            }

            &:after {
                left: 12px;
                right: initial;
                transform: translateX(-50%);
            }
        }
    }

    .c-feature__contents {
        @include at-medium-size(){
            padding-right: 12px;

            &:before {
                right: 12px;
            }
        }
    }
}

.c-feature--right {
    .c-feature__images {
        @include at-medium-size(){
            padding-right: 12px;

            &:before {
                right: -20px;
            }

            &:after {
                left: initial;
                right: 12px;
                transform: translateX(50%);
            }
        }
    }

    .c-feature__content {
        @include at-medium-size(){
            padding-left: 12px;

            &:before {
                left: 12px;
            }
        }
    }
}

.c-feature__images {
    position: relative;

    @include at-medium-size(){
         width: 62.5%;

        &:before {
            background-color: $white;
            content: '';
            height: 32px;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            width: 32px;
            z-index: 1;
        }
    }

    &:after {
        background-color: $pink-rose;
        bottom: 0;
        content: '';
        height: 32px;
        left: 50%;
        position: absolute;
        transform: translateY(50%);
        width: 1px;
        z-index: 1;

        @include at-medium-size(){
            bottom: 50%;
            height: 1px;
            width: 32px;
        }
    }
}

.c-feature__image-wrapper {
    background-color: $diamond;
}

.c-feature__contents {
    margin: 28px 0 44px 0;
    position: relative;
    text-align: center;

    > * {
        padding: 0 20px;
    }

    @include at-medium-size(){
        padding: 40px 0;

        &:before {
            border: 1px solid $ballet-grey;
            bottom: 0;
            content: '';
            left: 0;
            position: absolute;
            right: 0;
            top: 0;
        }
    }
}

.c-feature__icon {
    display: none;
}

.c-feature__tag {
    @include font("SOLEIL", 12px, 400, 16px, 180);
    color: $pink-rose;
    margin: 0 0 6px 0;
    text-transform: uppercase;
}

.c-feature__title {
    @include font("FREIGHT DISPLAY PRO", 32px, 400, 32px, 10);
    color: $stroller-grey;
    margin: 6px 0 0 0;
    text-align: center;
    text-transform: capitalize;

    @include at-x-large-size(){
        @include font-size(40px);
        @include line-height(40px);
    }
}

.c-feature__teaser {
    display: none;

    @include at-x-large-size(){
        @include font("SOLEIL", 14px, 400, 20px, 30);
        display: block;
        color: $ascot-grey;
        margin: 18px 0 0 0;
    }
}

.c-feature__byline {
    @include font('SOLEIL', 10px, 400, 16px, 120);
    color: $stroller-grey;
    margin: 18px 0 0 0;
    text-align: center;
    text-transform: uppercase;
}

.c-feature__byline-name {
    font-weight: bold;
}

.c-feature__meta {
    margin: 6px 0 0 0;
}

.c-feature__meta-item {
    @include font('SOLEIL', 10px, 400, 12px, 120);
    color: $candle-grey;
    text-transform: uppercase;

    & + .c-feature__meta-item {
        &:before {
            background-color: $candle-grey;
            content: "";
            display: inline-block;
            height: 2px;
            margin: 2px 8px;
            width: 2px;
        }
    }
}