@import '@cnbritain/wc-variables/sass/themes/glamour';
@import '@cnbritain/wc-sass-mixins/sass/page';
@import '@cnbritain/wc-sass-globals/sass/page';
@import '@cnbritain/wc-sass-fonts/sass/themes/glamour';
@import '@cnbritain/wc-theme-mixins/sass/themes/glamour';

@import '../base';
@import '../portrait';
@import '../landscape';
@import '../switcher';
@import '../magazine';
@import '../inline';

.c-card {
    color: $COLOUR_MAIN;

    &:hover {
        .c-card__title {
            text-decoration: underline;
        }
        .c-card__image {
            &:after {
                opacity: 0.1;
            }
        }
    }

}

.c-card__image {
    background: $COLOUR_BG_SECONDARY;
    margin-bottom: 20px;

    &:after {
        background-color: $COLOUR_BG_DARK;
        @include transition(opacity 0.3s ease-in-out);
        bottom: 0;
        content: '';
        height: 100%;
        left: 0;
        opacity: 0;
        position: absolute;
        right: 0;
        top: 0;
        width: 100%;
    }
}

.c-card__image__icon {
    background-color: $COLOUR_CARD_ICON_BACKGROUND;
    bottom: 0;
    height: 40px;
    left: 0;
    line-height: 40px;
    margin: 0;
    position: absolute;
    text-align: center;
    width: 40px;

    svg {
        display: block;
        height: 100%;
        margin: 0 auto;
        vertical-align: middle;
        width: 18px;
    }

    path {
        fill: $COLOUR_CARD_ICON;
    }

}

.c-card__image__icon--gallery {
    path {
        shape-rendering: crispEdges;
    }
}

.c-card__title {
    @include title-card-portrait;
}

.c-card__desc {
    @include font('GRAPHIK', 15px, $line-height: 19px);

    margin: 0 0 15px;
}

.c-card__separator {
    display: none;
}

.c-card__sponsor {
    @include font-size(13px);
    @include line-height(15px);

    margin: 10px 0;
}

.c-card__sponsor-label {
    @include font('GRAPHIK', 12px);
    font-style: italic;
}

.c-card__sponsor-title {
    @include font('GRAPHIK', 12px, 600);
    font-style: normal;
    text-transform: uppercase;
}

.c-card__rating {
    @include font('GRAPHIK', 11px, 'SEMI BOLD', 12px);

    margin-bottom: 10px;

    li {
        display: inline-block;
        margin-right: 5px;
        vertical-align: middle;

        &.c-card__rating-label {
            margin: 0;

            @include min-screen($CARD_SWITCHER_WIDTH) {
                margin: 0 0 0 5px;
            }
        }
    }
}

.c-card__rating-mark {
    background-color: $COLOUR_MAIN_DARK;
    border-radius: 50%;
    box-shadow: inset 0 0 0 1px $COLOUR_MAIN_HIGHLIGHT, 0 0 0 1px $COLOUR_MAIN_HIGHLIGHT;
    height: 8px;
    width: 8px;
}

.c-card__rating-mark--fill {
    background-color: $COLOUR_MAIN_HIGHLIGHT;
    box-shadow: none;
}


.c-card__byline {
    @include byline;

    margin-bottom: 3px;

    @include desktop-size {
        margin-bottom: 7px;
    }
}

.c-card__byline-prefix {
    @include byline-prefix;
}

.c-card__byline-name {
    @include byline-name;
}

.c-card__meta {
    @include meta-default;
    line-height: 17px;
}

// Need to be specific to overwrite global__list-reset
li.c-card__meta-item {
    @include global-meta-item;
}

// .c-card__meta-item--date {}
.c-card__meta-item--tag {
    @include meta-item-tag;
}

.c-card__meta-item--gallery {
    svg {
        height: 10px;
        margin-bottom: 3px;
        margin-right: 2px;
        vertical-align: middle;
        width: auto;
    }

    path {
        fill: $COLOUR_MAIN;
    }
}

.c-card__meta-item--video {
    svg {
        height: 9px;
        margin-right: 3px;
        width: auto;
    }

    path {
        fill: $COLOUR_MAIN_SECONDARY;
    }
}

.c-card__meta-item--live {
    span {
        @include font-size(13px);

        padding-right: 2px;
        vertical-align: middle;
    }
}

.c-card__more {
    @include font('GRAPHIK', 13px, 'SEMI BOLD');

    margin: 15px 0 0;
}

@mixin placeholder-portrait {
    .c-card__image {
        margin-bottom: 15px;
    }

    .c-card__title {
        @include title-card-portrait;

        margin-bottom: 15px;
        margin-top: 0;
    }

    .c-card__separator {
        margin: 10px 0;
    }

    .c-card__separator--sponsor {
        display: none;
    }

    .c-card__byline {
        margin-bottom: 7px;
    }

    @include desktop-size {
        .c-card__byline {
            margin-bottom: 5px;
        }
    }
}

@mixin placeholder-landscape {
    .c-card__obj__header {
        padding-right: 15px;
        vertical-align: top;
        width: 45%;

        @include min-screen($CARD_SWITCHER_WIDTH) {
            width: 35%;
        }
    }

    .c-card__obj__body {
        padding-left: 0;
        vertical-align: middle;
    }

    .c-card__image {
        margin-bottom: 0;
    }

    .c-card__title {
        @include title-card-landscape;

        margin-bottom: 10px;
        margin-top: 0;
    }

    .c-card__separator {
        margin: 10px 0;
        width: 15px;
    }

    .c-card__byline {
        margin-bottom: 3px;
    }

    // Need to be specific to overwrite global__list-reset
    li.c-card__meta-item {
        margin-bottom: 0;
    }
}

.c-card--portrait {
    @include placeholder-portrait;
}

.c-card--landscape {
    @include placeholder-landscape;
}

.c-card--switcher {
    @include placeholder-landscape;

    .c-card__obj__header {
        max-width: 120px;
        vertical-align: top;
    }

    @include min-screen($CARD_SWITCHER_WIDTH) {
        @include placeholder-portrait;

        .c-card__obj__header {
            float: none;
            max-width: initial;
            width: 100%;
        }

    }

}

.c-card--magazine {
    @include placeholder-portrait;

    .c-card__image {
        margin-bottom: 15px;
    }

    .c-card__title {
        @include font('GRAPHIK', 15px, 400, null, 20);

        margin: 15px 0 0;
        padding-bottom: 0;

        @include min-screen($CARD_SWITCHER_WIDTH) {
            @include font-size(17px);

            padding-bottom: 20px;
        }
    }

    &:hover {
        .c-card__title {
            text-decoration: none;
            border-bottom: 1px solid $COLOUR_BORDER_SOLID;
            padding-bottom: 15px;
        }
    }
}

.c-card--inline {
    @include placeholder-landscape;

    box-sizing: border-box;

    .c-card__obj__header {
        width: 30%;
    }

    .c-card__title {
        @include font-size(15px);
        margin-bottom: 10px;
    }

    @include min-screen($CARD_SWITCHER_WIDTH) {
        @include placeholder-portrait;
        background-color: #f5f5f5;
        padding: 20px;
        margin: 60px 0;
        float: none;
        width: 100%;

        .c-card__obj__header {
            display: table-cell;
            padding-right: 20px;
            width: 30%;
        }

        .c-card__obj__body {
            display: table-cell;
            width: auto;
        }

        .c-card__image {
            margin-bottom: 0;
        }

        .c-card__title {
            @include title-card-portrait;
            margin-bottom: 10px;
        }
    }
}

.c-card--thumbnail {
    @include placeholder-portrait;

    .c-card__image {
        background-color: $COLOUR_BG_DARK;
        margin-bottom: 12px;
    }
}

.c-card__image__remaining {
    background-color: $COLOUR_BG_GALLERY_REMAINING;
    border-radius: 50%;
    color: $COLOUR_MAIN;
    height: 60%;
    margin: 20%;
    width: 60%;

    .c-card__image__remaining__text {
        color: $COLOUR_MAIN;
        white-space: nowrap;
        .c-card__image__remaining__value {
            @include font('GRAPHIK', 17px, 'SEMI BOLD', 23px);

            @include desktop-size {
                @include font-size(21px);
                @include line-height(28px);
            }
        }
    }
}

.c-card--dark {
    &.c-card--inline {
        background-color: transparent;
    }

    &.c-card--landscape,
    &.c-card--portrait,
    &.c-card--switcher,
    &.c-card--inline,
    &.c-card--thumbnail {
        &:hover,
        &:focus {
            //.c-card__title span {}
        }

        .c-card__title {
            color: $COLOUR_MAIN_DARK;
        }

        .c-card__meta,
        .c-card__byline,
        .c-card__sponsor,
        .c-card__meta-item--tag {
            color: $COLOUR_META_DARK;
        }

        .c-card__image__icon {
            background: $COLOUR_BG_DARK;
        }

        .c-card__image__icon--video {
            path {
                fill: $COLOUR_MAIN_DARK;
            }
        }

        //.c-card__separator {}

        // Need to be specific to overwrite global__list-reset
        li.c-card__meta-item {
            @include meta-item-dark;
        }

        li.c-card__meta-item +  li.c-card__meta-item {
            @include meta-item-dark-sibling;
        }

        .c-card__meta-item--gallery,
        .c-card__meta-item--video {
            path {
                fill: $COLOUR_META_DARK;
            }
        }
    }
}

.c-card--thumbnail {
    .c-card__image-group {
        @extend .global__group;
    }

    .c-card__title {
        margin-top: 0;
    }
}

.c-card--hero {
    .c-card__image {
        padding-top: 66.67%;
    }

    @include min-screen($CARD_SWITCHER_WIDTH){
        .c-card__image {
            padding-top: 100%;
        }
    }
}

// This feels like a slightly dodgy place for this to be :/
.c-card--show {
    .c-card__image {
        margin-bottom: 10px;
    }

    .c-card__title {
        border-bottom: 1px solid transparent;
        @include font('GRAPHIK', 17px, 'NORMAL', 22px);
        margin: 0;
        margin-top: 10px;
        padding-bottom: 10px;
        text-align: center;

        @include min-screen($CARD_SWITCHER_WIDTH) {
            @include font-size(20px);
            margin-top: 20px;
            padding-bottom: 20px;
        }
    }

    &:hover {
        .c-card__title {
            border-bottom: 1px solid #000;
            text-decoration: none;
        }
    }
}