@import "@cnbritain/merlin-www-common:wired";

@import "../wireframe/wireframe";

.c-card-list--a-recommended,
.c-card-list--g-recommended,
.c-card-list--c-video-articles,
.c-card-list--c-curated,
.c-card-list--c-tag,
.c-card-list--mag-articles,
.c-card-list--v-genre-articles,
.c-card-list--s-results {
    margin: -10px;

    .c-card-list__item {
        display: inline-block;
        padding: 0 10px;
        margin: 10px 0;
        width: 100%;

        .c-card {
            border-top: 1px solid #000;
            padding-top: 20px;
        }

        .c-card--dark {
            border-top-color: #fff;
        }

        @include two-column-size() {
            width: 50%;
        }

        @include four-column-size() {
            width: 25%;
        }
    }
}

.c-card-list--v-articles,
.c-card-list--tg-articles {
    margin: -10px;

    .c-card-list__item {
        display: inline-block;
        padding: 0 10px;
        margin: 10px 0;
        width: 100%;

        .c-card {
            border-top: 1px solid #000;
            padding-top: 20px;
        }

        .c-card--dark {
            border-top-color: #fff;
        }

        @include two-column-size() {
            width: 50%;
        }

        @include four-column-size() {
            width: 33.33333%;
        }
    }

    @include two-column-size() {
        margin: -15px -10px;

        .c-card-list__item {
            margin: 15px 0;
        }
    }

    @include four-column-size() {
        margin-right: 340px;
    }
}

.c-card-list--tg-header-articles {
    margin: -10px;
    text-align: center;

    .c-card-list__item {
        display: inline-block;
        padding: 0 10px;
        margin: 10px 0;
        text-align: left;
        width: 100%;

        .c-card {
            border-top: 1px solid #fff;
            padding-top: 20px;
        }

        .c-card--dark {
            border-top-color: #fff;
        }

        @include two-column-size() {
            width: 50%;
        }

        @include four-column-size() {
            width: 33.33333%;
        }
    }
}

.c-card-list--c-magazine-articles {
    margin: -10px;

    .c-card-list__item {
        display: inline-block;
        padding: 0 10px;
        margin: 10px 0;
        width: 100%;

        .c-card {
            border-top: 1px solid #000;
            padding-top: 20px;
        }
    }
}

.c-card-list--v-related-articles {
    margin: -10px;

    .c-card-list__item {
        display: inline-block;
        padding: 0 20px;
        margin: 10px 0 15px 0;
        width: 100%;
    }

    .c-card {
        border-top: 1px solid #fff;
        padding-top: 15px;
    }

    .c-card__images {
        &:after {
            border: 1px solid $white;
            bottom: 0;
            box-sizing: border-box;
            content: '';
            height: 100%;
            left: 0;
            opacity: 0;
            position: absolute;
            right: 0;
            top: 0;
            transition-duration: 300ms;
            width: 100%;
        }
    }

    .c-card__image {
        position: relative;

        &:after {
            @include font("BRUTAL", 10px, 600);
            background-color: $white;
            bottom: 0px;
            color: $black;
            content: 'Now Playing';
            left: 0px;
            opacity: 0;
            padding: 5px 7px;
            position: absolute;
            text-transform: uppercase;
            transition-duration: 300ms;
            z-index: 1;
        }
    }

    .is-active {
        .c-card {
            &:hover,
            &:focus {
                .c-card__title span {
                    text-decoration: none;
                }
            }
        }
        .c-card__images,
        .c-card__image {
            &:after {
                opacity: 1;
            }
        }
    }

}

.c-card-list--mag-magazines {
    margin: -15px;

    .c-card-list__item {
        display: inline-block;
        padding: 0 10px;
        margin: 15px 0;
        width: 50%;

        @include four-column-size() {
            width: 25%;
        }
    }
}

.c-card-list--c-contributors {
    margin: -10px;
    text-align: center;

    .c-card-list__item {
        display: inline-block;
        padding: 0 10px;
        margin: 10px 0;
        width: 100%;

        .c-card {
            border-top: 1px solid #000;
            padding-top: 20px;
        }

        .c-card--dark {
            border-top-color: #fff;
        }

        @include two-column-size() {
            width: 33.33333%;
        }
    }
}