// Blog Style

.blog-style-1 {
	.blog-post-item {
		padding: 40px;
		position: relative;
		border-radius: 10px;
		overflow: hidden;
		background-color: #f3f3f3;
		transition: $transition;

		// margin-bottom: 30px; 
		// @include respond(tab-port) {
		// }

		&:hover {
			background-color: transparent;
			img.post-feature-thumb{
				opacity: .2;
			}
		} 
	}
	.post-feature-thumb {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
		opacity: 0;
		pointer-events: none;
	}

	.author-meta {
		position: relative;
		display: flex;
		align-items: center; 
	}

	.author-avatar {
		max-width: 60px;
		border-radius: 50%;
		overflow: hidden;
		margin-right: 15px;
	}

	.author-meta {
		position: relative;
		margin-bottom: 40px;

		span {
			display: block;
			font-size: 14px;
			font-weight: 400;
		}
		a {
			display: inline-block;
			font-weight: 700;
		}
	}
	.blog-post-meta {
		position: relative;
		margin-bottom: 10px;

		a {
			display: inline-block;
			font-weight: 500;
			margin-right: 5px;
			font-size: 14px;
		}
	}

	h3 {
		a {
			font-family: $roboto;
			font-weight: 500;
			font-size: 18px;
			line-height: 25px;
			display: block;
		}
	}

	.read-more {
		width: 50px;
		height: 50px;
		background: #ff9997;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 50%;
		color: #fff;
		margin-left: auto;
	}
}

figure.blog-feature-thumb {
	position: relative; 
}
.blog-style-2 {
	.blog-post-item {
		position: relative;
		margin-bottom: 30px;

		figure.blog-feature-thumb {
			img {
				@include mq(991) {
					min-height: 300px;
					object-fit: cover;
				}
			}
		}

		&:hover {
			figure.blog-feature-thumb {
				
				&:after {
					background-color: rgba(#000, 0.8);
				}

				img {
					transform: rotate(10deg) scale(1.2);
				}
			}

			h3 {
				bottom: 0;
			}
			p {
				bottom: 0; 
				opacity: 1;
				visibility: visible;
			}
		}

        @include mq (767) {
            margin-bottom: 30px;
        }
	}
	.blog-post-body {
		padding: 30px;
		position: absolute;
		top: 0;
		left: 0;
		display: flex;
		flex-direction: column;
		height: 100%;

		.blog-post-meta {
			color: #fff;
			a {

				&:not(:last-child) {
					margin-right: 15px;
				}

				&:hover {
					color: $primary-clr;
				}
			}
		}

		h3 {
			bottom: -50px;
			position: relative;
			transition: $transition;
			margin-top: auto;
			margin-bottom: 20px;
			font-weight: 500;

			a {
				color: #fff;
				font-family: $roboto;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
				outline: none;

				&:hover {
					color: $primary-clr;
				}
			}
		}
		p {
			color: #fff;
			overflow: hidden;
			text-overflow: ellipsis;
			font-family: $roboto;
			font-weight: 400;
			line-height: 1.5;
			display: -webkit-box;
			-webkit-line-clamp: 2;
			-webkit-box-orient: vertical;
			margin-bottom: 0;
			opacity: 0;
			visibility: hidden;
			bottom: -30px;
			position: relative;
			transition: $transition;
		}
	}

	figure.blog-feature-thumb {
		border-radius: 10px;
		overflow: hidden;

		img {
			transition: $transition;
		}

		&:after {
			@include pseudo();
			background-color: rgba(#000, 0.5);
			transition: $transition;
		}
	}
}

.el-blog-post{
	&.v5{
		img{
			position: relative;
			transform: scale(1);
			transition: all .5s;
		}
		.post-content-area{
			position: relative;
			.date-box {
				position: absolute;
				right: 15px;
				background: #fff;
				border: 1px solid #ddd;
				width: 70px;
				height: 70px;
				top: -50px;
				p.month {
					padding: 0;
					margin: 0;
					height: 50%;
					line-height: 1;
					display: flex;
					justify-content: center;
					align-items: center;
					text-transform: uppercase;
				}
				p.day {
					line-height: 1;
					margin: 0;
					padding: 0;
					background: #1b856b;
					color: #fff;
					height: 50%;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 22px;
					font-weight: 700;
				}
			}
		}

		.btn:hover{
			// background: red;
			// color: #fff;
		}
		&:hover{
			img{
				transform: scale(1.2);
			}
		}
	}
}