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

@import '../wireframe/wireframe';

.c-magazine {
    box-sizing: border-box;
    margin: 0 auto;
    margin-top: $MOBILE_SLICE_MARGIN;
    margin-bottom: $MOBILE_SLICE_MARGIN;
    max-width: $MAXIMUM_PAGE_WIDTH + $DESKTOP_SIDE_GUTTER_BREAKPOINT + $DESKTOP_SIDE_GUTTER_BREAKPOINT;

    @include at-medium-size {
        margin-top: $TABLET_SLICE_MARGIN;
        margin-bottom: $TABLET_SLICE_MARGIN;
        padding: 0 $TABLET_SIDE_GUTTER;
    }

    @include at-x-large-size {
        margin-top: $DESKTOP_SLICE_MARGIN;
        margin-bottom: $DESKTOP_SLICE_MARGIN;
        padding: 0 $DESKTOP_SIDE_GUTTER;
    }
}

.c-magazine-wrapper {
    background-color: #fff;
    box-sizing: border-box;
    margin-left: auto;
    margin-right: auto;
    max-width: $MAXIMUM_PAGE_WIDTH;
    padding: 30px 20px;
    position: relative;

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

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

}

.c-magazine__title {
    @include font("BRUTAL", 15px, 600, 17px);
    margin-bottom: 30px;
    text-transform: uppercase;
    text-align: center;

    @include at-medium-size {
        display: none;
    }
}

.c-magazine__covers {
    position: relative;

    @include at-medium-size {
        display: table-cell;
        vertical-align: middle;
        width: 50%;
    }
}
.c-magazine__covers__wrapper {
    @include at-medium-size {
        padding-right: 70px;
    }
}

.c-magazine__cover {
    position: relative;
}
.c-magazine__cover--print {
    img {
        margin-left: $MOBILE_SIDE_GUTTER;
        width: 60%;
    }

    @include at-medium-size {
        img {
            margin-left: 0;
        }
    }
}
.c-magazine__cover--tablet {
    img {
        background-color: #000;
        border-radius: 7px;
        bottom: 0;
        padding: 15px 8px;
        position: absolute;
        right: $MOBILE_SIDE_GUTTER;
        width: 40%;
    }

    @include at-x-large-size {
        img {
            border-radius: 15px;
            padding: 30px 20px;
            width: 45%;
        }
    }
}

.c-magazine__contents {
    position: relative;
    z-index: 1;

    @include at-medium-size {
        display: table-cell;
        vertical-align: middle;
        width: 50%;
    }
}

.c-magazine__contents-date {
    @include font('NEW GROTESK SQUARE', 30px, 600, 30px);
    margin: 30px 0;
    text-align: center;
    text-transform: uppercase;

    @include at-medium-size {
        @include font-size(35px);
        @include line-height(38px);
        margin: 20px 0;
        text-align: left;
    }
}

.c-magazine__contents-title {
    @include font("BRUTAL", 15px, 600, 17px);
    display: none;
    margin-bottom: 30px;
    text-transform: uppercase;

    @include at-medium-size {
        display: block;
        margin-bottom: 20px;
    }
}

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

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

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

.c-magazine__contents-btn {
    @include button-single;
    @include button-single-light;
    box-sizing: border-box;
    display: table;
    margin-top: 30px;
    text-align: center;
    transition-duration: 100ms;
    width: 100%;

    @include at-medium-size {
        width: auto;
    }

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