/*********************************
/*  Blog Section Start
*********************************/
.blogPost {
	background: var(--color-bg);
	border-bottom: 2px solid var(--color-border);
	border-radius: 10px 10px 0 0;
	transition: var(--transition);
	margin-bottom: 20px;

	&:hover {
		background: #f6fafa;
		border-bottom: 2px solid rgba(var(--color-primary-rgb), 0.5);
		.thumb {
			img {
				transform: scale(1.1);
			}
		}
		.solid__btn {
			color: var(--color-primary) !important;
		}
	}

	.thumb {
		border-radius: 10px 10px 0 0;
		overflow: hidden;
		position: relative;

		img {
			width: 100%;
			height: auto;
			display: block;
			aspect-ratio: 3 / 1.5;
			transition: var(--transition);
			object-fit: cover;
			object-position: top;
		}

		.meta {
			display: flex;
			align-items: center;
			justify-content: space-between;
			gap: 30px;
			position: absolute;
			bottom: 0;
			left: 0;
			padding: 13px 15px;
			width: 100%;
			backdrop-filter: blur(10px);

			span {
				font-size: 16px;
				line-height: 18px;
				font-weight: var(--font-medium);
				color: var(--color-white);
				text-transform: capitalize;
				position: relative;

				a {
					display: block;
					color: currentColor;
					transition: var(--transition);

					&:hover {
						color: var(--color-heading);
					}
				}
			}
		}
	}

	.content {
		padding: 20px;
		.title {
			font-family: var(--font-default);
			font-size: 20px;
			line-height: 26px;
			font-weight: var(--font-medium);
			color: var(--color-heading);
			margin-bottom: 16px;

			a {
				color: currentColor;
				display: block;
				transition: var(--transition);
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;

				&:hover {
					color: var(--color-primary);
				}
			}
		}
		p,
		.desc {
			font-size: 16px;
			line-height: 24px;
			font-weight: var(--font-regular);
			color: var(--color-content);
			margin-bottom: 0;
		}
	}
	.blog__footer {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 15px;
		margin-top: 20px;

		span {
			font-size: 16px;
			line-height: 24px;
			font-weight: var(--font-regular);
			color: var(--color-heading);
			display: block;
		}
		.solid__btn {
			color: var(--color-heading);
		}
	}
	&.v2 {
		background: transparent;
		border: none;

		.thumb {
			border-radius: 10px;
		}
		.content {
			padding: 0;
			padding-top: 20px;

			p {
				margin-bottom: 30px;

				&:last-of-type {
					margin-bottom: 0;
				}
			}
			h4 {
				font-size: 16px;
				line-height: 24px;
				font-weight: var(--font-regular);
				color: var(--color-black);
				margin: 24px 0 14px;
				display: block;
			}
		}
		.thumb__wrapper {
			.thumbs {
				border-radius: 6px;
				overflow: hidden;
				position: relative;

				@include respond(tabport) {
					margin-bottom: 20px;
				}

				img {
					width: 100%;
					height: auto;
					display: block;
					aspect-ratio: 4 / 3;
					transition: var(--transition);
					object-fit: cover;
					object-position: top;
				}
			}
		}
	}
}

.pagination {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	a {
		height: 37px;
		width: 37px;
		display: flex;
		align-items: center;
		justify-content: center;
		background: #fafafa;
		color: var(--color-content);
		font-size: 18px;
		border-radius: 50%;
		transition: var(--transition);

		&.active,
		&:hover {
			background: var(--color-primary);
			color: var(--color-white);
		}
	}
}

.blog__sidebar {
	@include respond(tabland) {
		margin-top: 40px;
	}
}

.aside {
	margin-top: 24px;
	.widget {
		&__title {
			font-family: var(--font-default);
			font-weight: var(--font-medium);
			font-size: 16px;
			line-height: 18px;
			color: var(--color-heading2);
			margin-bottom: 16px;
		}
		&__list {
			li {
				margin-bottom: 10px;
				list-style: none;

				&:last-of-type {
					margin-bottom: 0;
				}
				.widget__item {
					display: flex;
					align-items: center;
					gap: 15px;
					background: #fafafa;
					border-radius: var(--radius);
					padding: 10px;

					.thumb {
						width: 60px;
						height: 60px;
						border-radius: 6px;

						img {
							width: 100%;
							height: 100%;
							display: block;
							object-fit: cover;
							border-radius: 6px;
						}
					}
					.content {
						flex: 1;

						h5 {
							font-family: var(--font-default);
							font-weight: var(--font-medium);
							color: var(--color-heading2);
							font-size: 16px;
							line-height: 18px;
							transition: var(--transition);
							overflow: hidden;
							text-overflow: ellipsis;
							display: -webkit-box;
							-webkit-line-clamp: 1;
							-webkit-box-orient: vertical;
						}
					}
					&:hover {
						.content {
							h5 {
								color: var(--color-primary);
							}
						}
					}
				}
			}
		}
	}
	.social__icon {
		display: flex;
		align-items: center;
		gap: 15px;
		background: #fafafa;
		border-radius: var(--radius);
		padding: 20px 10px;

		a {
			font-size: 20px;
			height: 40px;
			width: 40px;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 50%;
			background: var(--color-white);
			color: var(--color-heading2);
			transition: var(--transition);

			&:hover {
				background: var(--color-heading);
				color: var(--color-white);
			}
		}
	}
}
/*********************************
/*  Blog Section End
*********************************/

/*********************************
/*  Filter Area Start
*********************************/
.filter__area {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	margin-bottom: 20px;
}

.search__form {
	max-width: 180px;
	.form-group {
		position: relative;
		.form-control {
			font-family: var(--font-default);
			font-weight: var(--font-regular);
			font-size: 14px;
			line-height: 24px;
			color: var(--color-content);
			background: var(--color-bg);
			border: 1px solid rgba(var(--color-primary-rgb), 0.1);
			border-radius: 30px;
			padding: 9px 16px;
			padding-right: 36px;

			&:focus {
				box-shadow: none;
			}
			&::-webkit-search-cancel-button {
				display: none;
			}
		}
		.submit {
			background: transparent;
			border: none;
			outline: none;
			color: var(--color-content);
			font-size: 18px;
			position: absolute;
			right: 16px;
			top: 50%;
			transform: translateY(-50%);
		}
	}
}

.search__filter {
	width: 100px;
	.form-select {
		font-family: var(--font-default);
		font-weight: var(--font-regular);
		font-size: 14px;
		line-height: 24px;
		color: var(--color-content);
		padding: 10px 16px;
		border-radius: 30px;
		background-color: var(--color-bg);
		border: none;
		padding-right: 30px;
		background-position: right 10px center;

		&:focus {
			box-shadow: none;
		}
	}
}
/*********************************
/*  Filter Area End
*********************************/
