/* WIUX
 * single.css - single posts
 */

.single .banner
{
	margin-bottom: 15px;
}

.single .content-body
{
	display: flex;
	flex-direction: row;
	justify-content: center;
}

.single .content-body .column-center
{
	flex-grow: 1;
	max-width: 720px;
}

.single .content-body .column-center p:first-child,
.single .content-body .column-left p:first-child,
.single .related p:first-child
{
	margin-top: 0;
}

.single .content-body .column-left,
.single .content-body .column-right
{
	box-sizing: border-box;
	font-size: 0.8rem;
	text-transform: uppercase;
	width: calc(20% - 10px);
}

.single .content-body .column-left
{
	padding-right: 30px;
	text-align: right;
}

.single .content-body .column-right
{
	padding-left: 30px;
}

.single .content-body .tags a
{
	background-color: #F0F0F0;
	display: inline-block;
	font-size: 0.8rem;
	line-height: 1;
	margin: 0 5px 5px 0;
	padding: 10px;
	text-transform: uppercase;
}

.single .content-body .title
{
	margin-top: 0;
}

.single .content-body .related,
.single .content-share
{
	-webkit-position: sticky;
	position: sticky;
	top: 50px; /* .topbar height */
}

.single .content-header .featured-image .image-byline
{
	bottom: 0px;
	box-sizing: border-box;
	padding: 10px;
	position: absolute;
}

.single .content-header .featured-image .image-byline,
.single .details
{
	font-size: 0.8rem;
	line-height: 1;
	text-transform: uppercase;
}

.single .content-header .no-featured-image .details
{
	padding-bottom: 0;
}

.single .content-header .no-featured-image .title
{
	padding-top: 0;
}

.single .content-header-podcast .adjacent
{
	display: flex;
	flex-direction: row;
	grid-column: 1 / span 2;
}

.single .content-header-podcast .adjacent .title
{
	font-size: 1.75rem;
}

.single .content-header-podcast .adjacent-next
{
	flex-grow: 1;
}

.single .content-header-podcast .adjacent-previous
{
	flex-grow: 1;
	text-align: right;
}

.single .inset
{
	height: 100%;
	position: absolute;
	width: 100%;
}

.single .inset-podcast
{
	box-sizing: border-box;
	display: grid;
	grid-gap: 75px;
	grid-template-columns: calc(300 / 1050 * 100%) calc(675 / 1050 * 100%);
	padding: 75px;
}

.single .inset-content
{
	font-size: 1.15rem;
	line-height: 1.6;
}

.single .inset-review
{
	box-sizing: border-box;
	display: grid;
	grid-gap: 75px;
	grid-template-columns: calc(525 / 1050 * 100%) calc(450 / 1050 * 100%);
	padding: 75px;
}

.single .inset-podcast .image,
.single .inset-review .image
{
	box-sizing: border-box;
	height: 0;
	padding-bottom: 100%;
}

.single .inset-review .info .artist
{
	font-size: 1.5rem;
}

.single .inset-review .info .score
{
	border: solid 2px #FFFFFF;
	border-radius: 50%;
	font-size: 1.5rem;
	height: 75px;
	line-height: 75px;
	margin-top: 50px;
	text-align: center;
	width: 75px;
}

.single .showtime
{
	font-size: 0.8rem;
	text-transform: uppercase;
}

@media screen and (max-width: 1200px)
{
	.single .content-body
	{
		flex-direction: column;
		margin: auto;
		max-width: 720px;
	}

	.single .content-body .related
	{
		margin-top: 25px;
	}

	.single .content-body .related p:last-child
	{
		margin-bottom: 0;
	}

	.single .content-body .related,
	.single .content-share
	{
		-webkit-position: inherit;
		position: inherit;
	}

	.single .content-body .column-left,
	.single .content-body .column-right
	{
		padding: 0;
		text-align: left;
		width: 100%;
	}

	.single .inset-podcast
	{
		grid-gap: 6.25vw;
		grid-template-columns: 25vw 56.25vw;
		padding: 6.25vw;
	}

	.single .inset-review
	{
		grid-gap: 6.25vw;
		grid-template-columns: 43.75vw 37.5vw;
		padding: 6.25vw;
	}

	.single .inset-review .info .artist
	{
		font-size: 1.15rem;
	}

	.single .inset-review .info .score
	{
		display: inline-block;
		font-size: 1.15rem;
		height: 60px;
		line-height: 60px;
		margin-top: 30px;
		width: 60px;
	}

	.single .inset-podcast .info .title,
	.single .inset-review .info .title
	{
		font-size: 1.75rem;
	}
}

@media screen and (max-width: 900px)
{
	.single .content-header-podcast,
	.single .content-header-review
	{
		background: none; /* Fix issue with absolute positioning of blurred image when the layout is changed at this screen size */
	}

	.single .content-header-podcast .adjacent
	{
		display: block;
	}

	.single .content-header-podcast .adjacent .title
	{
		font-size: 1.15rem;
	}

	.single .content-header-podcast .adjacent-next,
	.single .content-header-podcast .adjacent-previous
	{
		margin: 6.25vw 0;
		text-align: center;
	}

	.single .featured-image-podcast,
	.single .featured-image-review
	{
		display: block;
		height: auto;
		max-height: none;
	}

	.single .featured-image-podcast > .image,
	.single .featured-image-review > .image
	{
		position: absolute;
		z-index: -1;
	}

	.single .inset-podcast,
	.single .inset-review
	{
		display: block;
		height: auto;
		padding: 0;
		position: static;
	}

	.single .inset-podcast .image,
	.single .inset-review .image
	{
		margin: 6.25vw auto;
		padding-bottom: 43.75%;
		position: static;
		width: 43.75%;
	}

	.single .inset-podcast .info,
	.single .inset-review .info
	{
		margin: 6.25vw;
		text-align: center;
	}
}