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

@import '../wireframe/wireframe';

.c-magazine {
    background-color: $diamond;
}

.c-magazine-wrapper {
    box-sizing: border-box;
    margin: 0 auto;
    max-width: $MAXIMUM_PAGE_WIDTH + $DESKTOP_SIDE_GUTTER + $DESKTOP_SIDE_GUTTER;
    padding: $MOBILE_SLICE_MARGIN $MOBILE_SIDE_GUTTER;
    position: relative;

    @include at-medium-size {
        padding: $TABLET_SLICE_MARGIN $TABLET_SIDE_GUTTER;
    }

    @include at-x-large-size {
        padding-left: $DESKTOP_SIDE_GUTTER;
        padding-right: $DESKTOP_SIDE_GUTTER;
    }
}

.c-magazine__title {
    display: none;
}

.c-magazine__covers {
    border-bottom: 1px solid $ballet-grey;
    margin: 0 0 28px 0;

    @include at-medium-size {
        border-top: 1px solid $ballet-grey;
        padding: 48px;
    }
}

.c-magazine__cover--print {
    img {
        box-shadow: 0 0 24px 0 rgba($black, 0.2);
    }
}

.c-magazine__cover--tablet {
    img {
        background: $tux-grey;
        border: 1px solid $candle-grey;
        border-radius: 4px;
        box-shadow: 0 0 24px 0 rgba($black, 0.2);
        width: 40%;
    }
}

.c-magazine__contents {
    @include at-medium-size {
        border-bottom: 1px solid $ballet-grey;
        border-left: 1px solid $ballet-grey;
        border-top: 1px solid $ballet-grey;
        padding: 48px;
    }
}

.c-magazine__contents-title {
    @include font('SOLEIL', 12px, 400, 16px, 180);
    color: $pink-rose;
    display: block;
    margin: 0 0 6px 0;
    text-align: center;
    text-transform: uppercase;
}

.c-magazine__contents-date {
    @include font('FREIGHT DISPLAY PRO', 34px, 400, 36px, 10);
    color: $stroller-grey;
    font-style: italic;
    margin: 6px 0 28px 0;
    text-align: center;
    text-transform: capitalize;

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

.c-magazine__cards-list {
    margin: -12px -12px;
}

.c-magazine__cards-listitem {
    display: inline-block;
    padding: 0 12px;
    margin: 12px 0;
    width: 100%;
}

.c-magazine__contents-btn {
    @include button-single-two;
    @include button-single-two-light;
    display: table;
    margin-top: 32px;

    @include at-medium-size {
        margin-left: auto;
        margin-right: auto;
    }

    &:focus,
    &:hover {
        @include button-single-two-light-hover;
    }
}