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

@import "../wireframe/wireframe";

.c-show-season {
	background-color: $woodsmoke;
    padding: $MOBILE_SLICE_MARGIN $MOBILE_SIDE_GUTTER;
    max-width: none;

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

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

.c-show-season-wrapper {
	margin: 0 auto;
	max-width: $MAXIMUM_PAGE_WIDTH;
	position: relative;
	width: 100%;
}

.c-show-season__title {
	@include font("GOTHAM", 14px, 700, 40px, 60);
	color: $white;
	height: 40px;
	margin-bottom: 24px;
	margin-top: 0;
	text-align: left;
	text-transform: uppercase;

	span {
		display: inline-block;
		vertical-align: top;
	}

	&:before {
		background-color: $oslo-gray;
		content: '';
		display: inline-block;
		height: 40px;
		margin-right: 12px;
		width: 20px;
	}

	@include at-x-large-size {
		border-bottom: 1px solid $mineshaft;
		margin-bottom: 20px;
		padding-bottom: 20px;
	}
}

.c-show-season__meta {
	@include font("GOTHAM", 12px, 700, 16px, -4);
	color: $oslo-gray;
	margin: 32px 0 24px 0;

	@include at-x-large-size {
		line-height: 40px;
		margin: 0;
		position: absolute;
		right: 0;
		top: 0;
	}
}

.c-show-season__cards-listitem {
	margin-top: 20px;

    @include first(2) {
    	margin-top: 0;
    }

	@include at-x-large-size {
		margin: 0;
	}
}

.c-show-season__btn {
	@include button-single-two;
	@include button-single-two-dark;
	margin-bottom: -16px;
	margin-top: 24px;
	transition-duration: 300ms;

	&:after {
		background-image: url("data:image/svg+xml,%3Csvg fill='%2385878b' width='12px' height='12px' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8.48'%3E%3Ctitle%3Ebtn-arrownext%3C/title%3E%3Cpath d='M8,12.24l-0.53-.8,4.44-3H2v-1h9.93l-4.44-3L8,3.76,13.79,7.6a0.48,0.48,0,0,1,0,.8Z' transform='translate%28-2 -3.76%29'/%3E%3C/svg%3E");
		background-repeat: no-repeat;
		content: '';
		display: inline-block;
		height: 10px;
		margin-left: 8px;
		width: 12px;
	}

	&:hover,
	&focus {
		@include button-single-two-dark-hover;
		background: $shark;
	}
}