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

@import '../wireframe/wireframe';

.c-feature {
    margin: $MOBILE_SLICE_MARGIN 0;
    padding-left: $MOBILE_SIDE_GUTTER;
    padding-right: $MOBILE_SIDE_GUTTER;

    @include at-medium-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: 40px;
    }
}

.c-feature__wrapper {
    &:hover,
    &:focus {
        .c-feature__title span {
            text-decoration: underline;
        }
    }
}

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

.c-feature__contents {
    background-color: $white;
    padding: 30px 20px;
    position: relative;
    text-align: center;
}

.c-feature__icon {
    display: block;
    height: 20px;
    margin: 0 auto 20px auto;
    width: 20px;

    svg {
        fill: $black;
    }

    @include at-medium-size(){
        margin-bottom: 30px;
    }
}

.c-feature__title {
    @include font("NEW GROTESK SQUARE", 40px, 300, 40px);
    color: $black;
    letter-spacing: 0.3px;
    margin: 0 auto 10px auto;

    @include at-medium-size(){
        @include font-size(45px);
        @include line-height(45px);
    }
}

.c-feature__teaser {
    @include font("BRUTAL", 15px, null, 17px);
    color: $black;
    display: none;
    margin: 10px auto;

    @include at-x-large-size(){
        display: block;
    }
}

.c-feature__title + *:not(.c-feature__teaser),
.c-feature__teaser + * {
    &:before {
        background-color: $black;
        content: '';
        display: block;
        height: 1px;
        margin: 10px auto;
        width: 10px;

        @include at-medium-size(){
            margin: 20px auto;
            width: 30px;
        }
    }
}

.c-feature__byline {
    color: $black;
    line-height: 1em;
    margin-bottom: 5px;
    margin-top: 10px;
}

.c-feature__byline-prefix {
    @include font("EXCHANGE WEB", 11px);
    font-style: italic;
    margin-right: 3px;
}

.c-feature__byline-name {
    @include font("BRUTAL", 11px, 700);
    text-transform: uppercase;
}

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

.c-feature__meta-item {
    @include font("EXCHANGE WEB", 11px, 400, 17px);
    color: $black;
    padding-right: 10px;

    & + .c-feature__meta-item {
        border-left: 1px solid $isabelline;
        padding-left: 10px;
    }
}