//
// Single Page uses several other components: post-content
// 
// Partials: comments, author-box, related-posts 
//

/**
 * The Single Post
 */
.the-post {

	.featured {
		margin-bottom: 36px;
	}

	.featured img {
		display: block;
		width: 100%;
	}
	
	.featured-vid {
		margin-bottom: 36px;
	}

	.the-post-header {

		.post-title {
			margin: 14px 0;
		}

		> :last-child:not(.featured) {
			margin-bottom: 36px;
		}
	}
	
	.the-post-meta {
		margin-bottom: 36px;

		.post-cat > a {
			font-weight: 600;
		}
		
		// For multiple categories in meta
		.post-cat a + a:before {
			content: "/";
			margin-left: 6px;
			margin-right: 9px;
			color: #c3c3c3;
			font-size: 8px;
		}
	}
}

.the-post-header {

	.post-title,
	.post-title-alt {
		font-size: 38px;
		font-weight: 700;
		line-height: 1.25;
		max-width: 85%;
		-webkit-font-smoothing: initial;

		@include breakpoint(medium) {
			font-size: 34px;
			line-height: 1.35;
		}

		@include breakpoint(small) {
			font-size: 30px;
		}

		@include breakpoint(x-small) {
			font-size: 27px;
		}
	}
	
	.post-meta-b {
		.post-title,
		.post-title-alt {
			margin-top: 16px;
			margin-bottom: 16px;
		}
	}
}

.the-post-foot {
	margin-top: 90px;
	
	@include breakpoint(small) {
		margin-top: 65px;
	}
}

/* Tags and sharing */
.tag-share {
	font-family: $title-font;
	
	.post-tags {
		float: left;
		margin-top: -8px;
		max-width: 70%;
		
		@include breakpoint(small) {
			float: none;
			max-width: 100%;
			text-align: center;
			margin-bottom: 15px;
		}
	}
	
	.post-tags a {
		display: inline-block;
		margin-top: 8px;
		margin-right: 8px;
		padding: 6px 18px;
		border: 1px solid #ebebeb;
		
		color: #111;
		font-size: 12px;
		font-weight: 500;
		letter-spacing: 0.1em;
		line-height: 1.5;
		text-transform: uppercase;
	}
	
	.post-tags a:hover {
		color: $main-color;
	}
	
	// Only push share icons to the right if tags are active
	.post-tags + .post-share {
		float: right;
		margin-bottom: 25px;
		
		@include breakpoint(small) {
			float: none;
			text-align: center;
			
			.post-share-icons {
				display: inline-block;
			}
		}
	}
	
	.post-share {
		@include breakpoint(small) {
			margin-bottom: 25px;
		}
	}	
}


.post-pagination {
	margin-bottom: 45px;
}

// Limited use post header top
.post-top {
	.cat-label {
		position: static;
	}
}


/**
 * Single Post: Cover Style 
 */
 
.single-cover {
	
	.featured {
		position: relative;
		margin-top: -10px;
		margin-bottom: 55px;
		
		@include breakpoint(medium) {
			margin-left: -25px;
			margin-right: -25px;
		}
		
		@include breakpoint(small) {
			margin-top: 0;
			margin-left: -30px;
			margin-right: -30px;
		}
		
		@include breakpoint(x-small) {
			margin-left: -25px;
			margin-right: -25px;
		}
		
		&:before {
			content: "";
			position: absolute;
			z-index: 1;
			width: 100%;
			height: 100%;
			background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%,rgba(128, 128, 128, 0) 50%,rgba(0, 0, 0, 0.35) 100%);
			pointer-events: none;
			
			@include breakpoint(medium) {
				background: linear-gradient(to bottom, rgba(#fff, 0) 30%, rgba(#111, 0.4) 100%);
			}
		}
		
		img {
			display: block;
			
			@include breakpoint(small) {
				width: 100%;
				min-height: 250px;
				object-fit: cover;
				font-family: 'object-fit: cover'; 
			}
		}
	}
	
	.overlay {
		position: absolute;
		z-index: 2;
		width: 100%;
		bottom: 0;
		left: 0;
		padding: 40px;
		box-sizing: border-box;
		color: #fff;
		
		@include breakpoint(x-small) {
			padding: 30px;
			padding-bottom: 20px;
		}
		
		.post-title {
			margin-top: 18px;
			margin-bottom: 18px;
			color: inherit;
			font-size: 34px;
			max-width: 720px;
			
			@include breakpoint(small) {
				font-size: 24px;
			}
			
			@include breakpoint (x-small) {
				font-size: 21px;
			}
		}
		
		time {
			color: inherit;
		}

		.post-by {			
			a {
				color: inherit;
			}
		}

		.meta-sep:before {
			padding: 0 5px;
		}
		
		.post-cat a {
			display: inline-block;
			padding: 0 7px;
			margin-right: 5px; // if multiple
			background: $main-color;
			color: #fff;
			line-height: 18px;
			letter-spacing: 0.11em;
		}
		
		// Post Share
		.post-share {
			float: right;
			margin-right: -5px;
			margin-top: -7px;
			
			@include breakpoint(x-small) {
				display: none;
			}
			
			.counters {
				display: none;
			}
			
			a {
				border: 0;
				color: #fff;
				width: 25px;
				height: 23px;
				line-height: 23px;
				font-size: 13px;
			}
		}
	}
}

// Remove top margins on single - let it be right below header
.single.layout-cover .main-head + .main {
	@include breakpoint(small) {
		margin-top: 0;
	}
}

/**
 * Single Post: Modern Dynamic Style for full-width posts
 */
.the-post-modern {
	margin: 0 auto;
	--post-content-width: 790px;
	
	@include breakpoint(medium) {
		width: 100%;
	}

	.post-header {
		text-align: center;

		@include breakpoint(medium) {
			text-align: left;
		}
	}

	.post-title-alt {
		margin-left: auto;
		margin-right: auto;
		max-width: 750px;
		font-size: 40px;
		line-height: 1.21;
		-webkit-font-smoothing: initial;
	}

	.the-post-meta {
		margin-bottom: 40px;

		.post-title-alt {
			margin-top: .68em;
			margin-bottom: .68em;
		}
	}
	
	// Only for large+ devices till infinity
	@include breakpoint(false, large) {
		width: percentage(790/1170);

		header .featured {
			margin-left: -190px;
			margin-right: -190px;
			margin-bottom: 45px;
			width: auto;
			width: calc(100% + 380px);
			max-width: 100vw;
		}
	}

	// Until large, set a max width limit
	@include breakpoint(large) {
		max-width: 790px;
	}

	.the-post {
		.featured {
			margin-bottom: 50px;

			img {
				@include breakpoint(large) {
					width: 100vw;
					max-width: 100vw;
					margin-left: calc(50% - 50vw) !important;
				}
			}
		}
	}
}

/**
 * Single Post: Magazine
 */
.single-magazine {
	
	.post-top {
		.post-title {
			margin-top: 18px;
			margin-bottom: 15px;
			font-size: 36px;
			line-height: 1.3;
			
			@include breakpoint(large) {
				font-size: 30px;
			}

			@include breakpoint(small) {
				font-size: 27px;
			}
		}
		
		.sub-title {
			margin-top: -4px;
			margin-bottom: 16px;
			line-height: 1.4;
			font-size: 17px;
			color: #808080;
			-webkit-font-smoothing: antialiased;
		}
		
		.the-post-meta {
			margin-bottom: 35px;
		}
	}
	
	.the-post-foot {
		margin-top: 0;
	}
	
	.tag-share {
		margin-top: 60px;
	}

	&.the-post-modern {
		.post-top {
			text-align: center;

			.cat-label {
				display: inline-block;
			}

			.sub-title {
				max-width: 600px;
				margin-left: auto;
				margin-right: auto;
				line-height: 1.6;
			}
			
			.post-title {
				font-size: 41px;
				line-height: 1.25;
				margin-bottom: 30px;

				@include breakpoint(1500px) {
					font-size: 38px;
					font-size: calc(1.68vw + 17.79px); // Poly fluid size
					font-size: fluid-size((medium: 35px, 1500px: 41px));
				}

				@include breakpoint(small) {
					font-size: 27px;
				}
			}

			.post-share-b {
				display: flex;
				justify-content: center;
			}
		}

		.post-share-b {
			.show-more {
				line-height: 41px;
				height: 100%;
			}
		}
	}
}

/**
 * Single Post: Creative Large 
 */
.single-creative {
	
	.main {
		margin-top: 74px;

		@include breakpoint(medium) {
			margin-top: 50px;
		}
	}

	.post-meta {
		@include breakpoint(x-small) {
			font-size: 11px;
		}
	}
	
	.featured {
		position: relative;
		height: 570px;
		background: #222;
		
		@include breakpoint(xx-large, small) {
			height: fluid-size((small: 400px, xx-large: 570px));
		}
		
		@include breakpoint(small) {
			min-height: initial;
			height: 400px;
		}
		
		@include breakpoint(x-small) {
			height: 300px;
		}

		&:before {
			content: "";
			position: absolute;
			z-index: 1;
			width: 100%;
			height: 100%;
			background: rgba(#0f0f0f, 0.3);
			background: rgba(#000, 0.23);
			pointer-events: none;
		}
		
		.image-link {
			display: block;
			width: 100%;
			height: 100%;
		}
		
		.wp-post-image {
			display: block;
			width: 100%;
			height: 100%;
			object-fit: cover;
			font-family: 'object-fit: cover';
			box-shadow: none;
			will-change: initial;

			&:hover {
				box-shadow: none;
				transform: none;
			}
		}
			
		.overlay {
			position: absolute;
			z-index: 2;
			max-width: 720px;
			margin: 0 auto;
			width: 95%;
			top: 50%;
			left: 50%;
			transform: translateX(-50%) translateY(-50%);
			padding: 40px;
			box-sizing: border-box;
			color: #fff;
			text-align: center;
			
			@include breakpoint(x-small) {
				padding: 30px;
				padding-bottom: 20px;
			}
		}

		time {
			color: inherit;
		}
		
		.post-title {
			margin-top: 25px;
			margin-bottom: 25px;
			color: inherit;
			font-size: 41px;
			line-height: 1.25;
			-webkit-font-smoothing: initial;
			text-shadow: 0 0 22px rgba(#000, 0.3);
			
			@include breakpoint(small) {
				font-size: 30px;
			}
		
			@include breakpoint(x-small) {
				font-size: 27px;
			}

			@include breakpoint(tiny) {
				font-size: 24px;
			}
		}
		
		.post-by {			
			a {
				//font-weight: 600;
				color: inherit;
			}
		}

		.meta-sep:before {
			padding: 0 5px;
			font-size: 11px;

			@include breakpoint(x-small) {
				padding: 0 3px;
			}
		}
		
		.category {
			display: inline-block;
			padding: 0 8px;
			margin-right: 5px; // if multiple
			background: #000;
			color: #fff;
			font-weight: 500;
			letter-spacing: 0.1em;
			line-height: 26px;
			
			&:last-child {
				margin-right: 0;
			}
		}
		
		// Post Share
		.post-share {
			display: none;
		}
	}

	.post-content {
		margin-top: -.421em;
	}
	
	.has-gallery {
		&:before {
			display: none;
		}
		
		&:hover .slick-slide:after {
			opacity: 0;
		}
		
		.overlay,
		.slick-slide:after {
			transition: 0.3s ease-in-out;
			will-change: opacity;
		}
		
		&:hover .overlay {
			opacity: 0;
			visibility: hidden;
		}
	}
	
	.parallax .image-link > img {
		visibility: hidden;
	}

	.parallax .wp-post-image {
		transition-property: opacity;
	}
}