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

@import '../wireframe/wireframe';

.c-feature {
    background-color: $seashell;
    padding-bottom: $MOBILE_SIDE_GUTTER;
    padding-left: $MOBILE_SIDE_GUTTER;
    padding-right: $MOBILE_SIDE_GUTTER;
    padding-top: $MOBILE_SIDE_GUTTER;

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

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

    & + .c-gallery,
    & + .c-feature {
        padding-top: 0;
    }

    & + .ad--native-large {
        margin-top: -$MOBILE_SIDE_GUTTER;

        @include at-medium-size() {
            margin-top: -$TABLET_SIDE_GUTTER;
        }

        @include at-x-large-size(){
            margin-top: -$DESKTOP_SIDE_GUTTER;
        }
    }
}

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

.c-feature__contents {
    background: $white;
    border-bottom: 1px solid $bon-jour;
    padding: 28px 20px;
    position: relative;
    text-align: center;

    &:after {
        @include triangle(16px, 12px, 'up', $white);
        content: '';
        height: 0;
        left: 50%;
        position: absolute;
        top: -16px;
        transform: translateX(-50%);
        width: 0;
    }

    @include at-medium-size(){
        padding: 28px 48px;

        &:after {
            @include triangle(18px, 14px, 'right', $white);
            content: '';
            height: 0;
            left: initial;
            position: absolute;
            right: -18px;
            top: 50%;
            transform: translateX(0%) translateY(-50%);
            width: 0;
        }
    }
}

.c-feature__icon {
    display: none;

    @include at-medium-size(){
        border: 1px solid $limed-oak;
        display: block;
        height: 40px;
        margin: 0 auto;
        margin-bottom: 32px;
        width: 40px;

        svg {
            display: block;
            height: 100%;
            margin: 0 auto;
            vertical-align: middle;
            width: 16px;
            fill: $limed-oak;
        }
    }
}

.c-feature__tag {
    @include font("GOTHAM", 11px, 700, 14px, -4);
    color: $limed-oak;
    margin-bottom: 8px;
    margin-top: 0;
    text-transform: capitalize;

    @include at-medium-size(){
        @include font-size(12px);
        @include line-height(16px);
        margin-bottom: 12px;
    }
}

.c-feature__title {
    color: $woodsmoke;
    @include font("ITC_FENICE", 24px, 700, 28px, -4);
    margin-bottom: 14px;
    margin-top: 0px;

    @include at-x-large-size() {
        @include font-size(32px);
        @include line-height(36px);
        margin-bottom: 8px;
        margin-top: 0px;
    }
}

.c-feature__teaser {
    @include font("GOTHAM", 12px, null, 16px, -4);
    color: $oslo-gray;
    display: none;
    margin-bottom: 14px;
    margin-top: 14px;

    @include at-x-large-size() {
        @include font-size(15px);
        @include line-height(20px);
        display: block;
        margin-bottom: 20px;
        margin-top: 8px;
    }
}

.c-feature__byline {
    @include font("GOTHAM", 9px, null, 16px, 60);
    margin-bottom: 6px;
    margin-top: 14px;
    text-transform: uppercase;
}

.c-feature__byline-prefix {
    @include font-weight(400);
}

.c-feature__byline-name {
    @include font-weight(700);
}

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

.c-feature__meta-item {
    @include font("GOTHAM", 9px, 500, 14px);
    color: $oslo-gray;
    padding-right: 0;

    & + .c-feature__meta-item {
        border-left: none;
        padding-left: 0;

        &:before {
            background-color: $oslo-gray;
            border-radius: 50%;
            content: "";
            display: inline-block;
            height: 2px;
            margin: 1px 4px;
            width: 2px;
        }
    }
}