/* Blog General  ****************************************************/
article.post-wrap{
	
	margin-bottom: 70px;

	&.sticky{
		background: #f9f9f9;
		padding: 30px;
		border-top: 5px solid;
		border-color: var(--primary);

		.post-excerpt{ 
			text-align: justify;
		}
		
	}

	.post-title{
		margin: 0px 0px 20px 0px;
		padding: 0;
		line-height: 1.3em;
		font-weight: bold;
		font-size: 32px;
		color: var(--heading);
		-webkit-hyphens: unset;
	    -moz-hyphens: unset;
	    -ms-hyphens: unset;
	    hyphens: unset;
	    word-break: break-word;
	    letter-spacing: -1px;
        font-feature-settings: 'pnum' on, 'onum' on;
		&:hover{
			color: var(--primary);
		}
	}

	.post-media{
		margin-bottom: 20px;
		img {
			border-radius: 10px;
		}
	}

	
	ul.post-meta{
		list-style-type: none;
		margin: 0 0px 25px 0px;
		padding: 0;
		display: inline-block;
		li{
			display: inline-block;
			font-size: 16px;
			margin: 0 18px 0px 0;
			color: var(--light);

			i{
				font-size: 0.8em;
				color: var(--primary);
				padding-right: 3px;
			}
			a{
				color: var(--light);
				&:hover{
					color: var(--primary);
				}
			}
		}	
	}
	

	.post-excerpt{
		& > p{
			margin-top: 0px;
			margin-bottom: 25px;
		}
	}
		
	a.readmore{
		border-radius: 10px;
		clear: both;
		background-color: var(--primary);
		border-color: var(--primary);
		border: 1px solid;
		color: #fff;
	    font-size: 1em;
	    text-transform: none;
	    font-weight: 600;
	    box-shadow: none;
	    display: inline-block;
	    @include transaction( all, 0.2s, linear );
	    &:hover{
			color: var(--primary);
			border-color: var(--primary);
			background-color: #fff;
		}	
	}
	    
	


}



/* Blog Default ****************************************************/
.blog_default{
	.post-title{
		font-weight: normal;
	}

	.post-excerpt{
		font-size: 1em;
	}

	.date{
		font-size: 1em;
	}
}

.layout_1c{
	.blog_default{
		max-width: 930px;
		margin: 0 auto;
	}
}


/*Blog Grid ***************************************************/
.blog_grid{
	
	display: grid;
    gap: 25px;
    grid-template-columns: repeat(3, 1fr);

    @media( max-width: $desktop - 1 ){
		grid-template-columns: repeat(2, 1fr);    	
    }
    @media( max-width: 767px ){
    	grid-template-columns: repeat(1, 1fr);
    }

    article.post-wrap{
    	.post-media{
			margin-bottom: 15px;
		}

		.post-title{
			font-size: 22px;
		}

		.post-excerpt{
			font-size: 1em;
		}
		
		ul.post-meta{
			margin-bottom: 15px;
			.date{
				font-size: 1em;
			}		
		}
		
    }

    
}

.layout_2l, .layout_2r{
	.blog_grid{
		grid-template-columns: repeat(2, 1fr);
		 @media( max-width: 767px ){
	    	grid-template-columns: repeat(1, 1fr);
	    }
	}
}


/* Blog masonry ***************************************************/
.blog_masonry{
	margin-left: -15px;
	margin-right: -15px;
	article{
		width: 33.3%;

		@media(max-width: 1200px){
			width: 50%;
		}
		@media( max-width: 767px ){
			width: 100%;
		}
	}
	.content{
		display: block;
		margin: 0px 15px;
		position: relative;
		min-height: 100px;
		
		.post-media{
			margin-bottom: 15px;
		}

		.post-title{
			font-size: 22px;
		}

		.post-excerpt{
			font-size: 1em;
		}
		
		ul.post-meta{
			margin-bottom: 15px;
			.date{
				font-size: 1em;
			}		
		}

		a.readmore{
			clear: both;
			background-color: transparent;
			border-color: var(--primary);
			border: 1px solid;
			color: var(--primary);
		    
		    @include transaction( all, 0.2s, linear );
		    &:hover{
				color: #fff;
				border-color: var(--primary);
				background-color: var(--primary);
			}	
		}

	}

	
}

.layout_2l, .layout_2r{
	.blog_masonry{
		article{
			width: 50%;
			min-height: 200px;
			@media( max-width: 767px ){
				width: 100%;
			}
		}
	}
}

/* Detail ***************************************************/
.single{
	article.post-wrap{
		.post-title{
			font-size: 42px;
			-webkit-hyphens: unset;
		    -moz-hyphens: unset;
		    -ms-hyphens: unset;
		    hyphens: unset;
		    margin-bottom: 20px;
		    margin-top: 0;
		    word-break: break-word;
		    &:hover{
				color: var(--heading);
			}
		}

		.post-content{
			margin-bottom: 15px;
			&:before,
			&:after{
				clear: both;
				content: '';
    			display: table;
			}
			ul.ova-post-list {
				list-style-type: none;
				padding: 0;
				margin-bottom: 30px;
				li {
					margin-bottom: 10px;
					&:before{
						content: "\e90d";
						font-family: 'icomoon'; 
						-webkit-font-smoothing: antialiased;
						-moz-osx-font-smoothing: grayscale;
						display: inline-block;
						font-style: normal;
						font-variant: normal;
						font-weight: normal;
						vertical-align: middle;
						margin-right: 0.5em;
						display: block;
						float: left;
						color: var(--secondary);
						font-size: 20px;
						line-height: inherit;
					} 
					&::marker {
                        color: var(--secondary);
					}
				}
			}
		}

		.post-tags-and-share {
			display: flex;
			justify-content: space-between;
			align-items: center;
			flex-wrap: wrap;
			row-gap: 15px;

            .post-tags{
				clear: both;
				a{
					text-transform: capitalize;
					margin: 0px 5px 5px 0px;
					display: inline-block;
					margin-right: 5px;
					
					@include tag;
					
				}
			}

			.share-social-icons {
				display: flex;
				align-items: center;
				justify-content: space-between;
				flex-wrap: wrap;
				row-gap: 10px;
				list-style: none;
			    padding: 0 0 0 10px;
			    margin: 0;
			    li {
			    	display: inline-block;
			    	&:not(:last-child) {
			    		margin-right: 10px;
			    	}
			    	a {
			    		@include transaction( all, 0.2s, ease );
			    		display: inline-flex;
				    	justify-content: center;
				    	align-items: center;
				    	background-color: var(--heading);
				    	width: 40px;
				    	height: 40px;
				    	border-radius: 10px;
			    		font-family: var(--secondary-font);
			    		font-weight: 400;
						font-size: 16px;
						line-height: 1.2;
			    		color: #fff;
			    		&:hover {
	                        @include transaction( all, 0.2s, ease );
	                        background-color: var(--primary) !important; 
	                        color: #fff;
				    	}
				    	&.ico-facebook {
				    		background-color: #506ccf;
				    	}
				    	&.ico-twitter {
				    		background-color: #97D5F0;
				    	}
				    	&.ico-pinterest {
				    		background-color: #D13B3B;
				    	}
			    	}
			    }
			}
		}

		
	}

	&.layout_1c{
		#main-content{
			max-width: 1000px;
			margin: 0 auto;
		}
	}
	
}


/*Page Title ***************************************************/

h1.page-title{
	margin-top: 0;
	-webkit-hyphens: unset;
    -moz-hyphens: unset;
    -ms-hyphens: unset;
    hyphens: unset;
}


.search{
	.page-header{
		.page-title{
			margin-bottom: 60px;
			border-bottom: 1px solid #e1e1e1;
    		padding-bottom: 15px;
			span{
				color: var(--primary);
			}
		}
	}

}

// ova next-pre post
.ova-next-pre-post {
	direction: ltr;
	margin: 30px 0;
	padding: 24px 0;
	border-width: 1px 0px;
	border-style: solid;
	border-color: #e8e7e7;
	
	&:after{
		content: '';
		display: block;
		clear: both;
	}
	.pre{
		float: left;
		.num-2 {
			.title {
				margin-left: -16px;
			}
		}
	}

	.next {
		float: right;
		.num-2 {
			.title {
				margin-right: -16px;
			}
		}
	}

	.pre, .next {
		display: flex;
		width: calc(50% - 25px);
		@media (max-width: 767px) {
			width: 50%;
		}
		img {
			width: 76px;
			height: 76px;
			border-radius: 10px;
			display: inline-block;
			vertical-align: middle;
			@media (max-width: 767px) {
				display: none;
			}
		}
		&:hover{
			.num-1 {
				i {
					color: var(--primary);
				}
			}
			.num-2 {
                span.text-label {
					color: var(--primary);
				}
			}
		}
		.num-1 {
			margin-right: 5px;
			i {
				display: inline-flex;
				line-height: 1;
				font-size: 24px;
				color: var(--text);
			}	
		}
		.num-2 {
			span.text-label {
				font-size: 14px;
				line-height: 1.3;
				text-transform: uppercase;
				letter-spacing: 0.2px;
				color: var(--text);
				font-weight: 600;
				display: inline-block;
				margin-bottom: 5px;
			}
			.title {
				font-family: var(--primary-font);
				display: block;
				font-size: 20px;
				line-height: 1.3;
				font-weight: 700;
				color: var(--heading);
				word-break: break-word;
				@media (max-width: 767px) {
					display: none;
				}
			}
		}
	}

	.pre {
		padding-right: 10px;
	}
	.next {
		flex-direction: row-reverse;
		padding-left: 10px;
		.num-1 {
			margin: 0px;
			margin-left: 5px;
			@media (max-width: 767px) {
				margin-left: 0px;
				margin-right: 5px;
			}
		}
		.num-2 {
			text-align: right;
			@media (max-width: 767px) {
				text-align: left;
			}
		}
	}
	a {
		display: flex;
		align-items: flex-start;	
	}
}