@import "../wireframe/wireframe";

.c-show-season {
    margin-bottom: $MOBILE_SLICE_MARGIN;
    margin-top: $MOBILE_SLICE_MARGIN;
    padding: 0 $MOBILE_SIDE_GUTTER;

    @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-show-season-wrapper {
    margin: 0 auto;
    max-width: $MAXIMUM_PAGE_WIDTH;
    text-align: center;
}

.c-show-season__title {
    @include font('NOBEL', 20px, 'BOLD');
    color: $cod-gray;
    margin-bottom: $MARGIN_XX_SMALL;
    position: relative;
    text-transform: uppercase;
    text-align: center;

    @include at-medium-size {
        @include font-size(25px);

        span {
            background-color: $white;
            padding: 0 50px;
            position: relative;
        }

        &:before {
            @include dotted-line($dove-gray, 1px, 3px);
            content: '';
            height: 1px;
            left: 0;
            margin-top: -4px;
            position: absolute;
            right: 0;
            top: 100%;
        }
    }
}

.c-show-season__meta {
    @include font('NOBEL', 10px, null, 16px);
    color: $COLOR_TYPE_META;
    display: inline-block;

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

.c-show-season__meta-item {
    letter-spacing: 1px;
    padding-right: $PADDING_XX_SMALL;
    text-transform: uppercase;

    & + .c-show-season__meta-item {
        border-left: 1px solid $wild-sand;
        padding-left: $PADDING_XX_SMALL;
        padding-right: 0;
    }
}
.c-show-season__meta-item--season {
    color: $guardsman-red;
}
.c-show-season__meta-item--show-type {
    color: $dove-gray;
}

.c-show-season__cards-list {
    margin: $MARGIN_MEDIUM -10px 0 -10px;
}

.c-show-season__cards-listitem {
    box-sizing: border-box;
    padding: 0 10px;
    width: 50%;

    &:nth-child(-n+2){
        margin-bottom: 30px;
    }

    @include at-small-size {
        &:nth-child(odd) {
            padding-right: 20px;
        }

        &:nth-child(even) {
            padding-left: 20px;
        }
    }

    @include at-large-size {
        width: 25%;

        &:nth-child(odd),
        &:nth-child(even) {
            padding: 0 10px;
        }

        &:nth-child(-n+2){
            margin-bottom: 0;
        }
    }
}

.c-show-season__btn {
    @include button-single;
    @include button-single-light;
    margin-top: 35px;

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