@use "../utilities" as *;

/* START: Blog CSS */
.tj-blog-section-four {
	border-top: 1px solid var(--tj-color-border-2);
	overflow: hidden;
	.sec-heading {
		display: flex;
		flex-wrap: wrap;
		align-items: flex-end;
		justify-content: space-between;
		gap: 30px;
		.sec-text {
			.sec-title {
				margin-bottom: 0;
			}
		}
	}
}

.blog-style-4 {
	position: relative;
	z-index: 1;
	overflow: hidden;
	.blog-images {
		position: relative;
		z-index: 1;
		overflow: hidden;
		&::before {
			content: "";
			position: absolute;
			width: 100%;
			height: 77%;
			bottom: 0;
			inset-inline-start: 0;
			background: linear-gradient(
				0deg,
				rgba(5, 18, 41, 1) 10%,
				rgba(5, 18, 41, 0) 100%
			);
			opacity: 1;
			z-index: 1;
			pointer-events: none;
		}
		img {
			width: 100%;
			min-height: 485px;
			height: 100%;
			object-fit: cover;
			transition: all 0.4s linear;

			@media #{$md, $sm, $xs} {
				min-height: 380px;
			}
		}
		a {
			display: inline-block;
		}
	}
	.blog-date {
		position: absolute;
		inset-inline-start: 15px;
		top: 15px;
		background: rgba(247, 247, 247, 0.1);
		backdrop-filter: blur(35px);
		padding: 20px;
		text-align: center;
		.date {
			display: block;
			font-family: var(--tj-ff-heading);
			font-size: 32px;
			color: var(--tj-color-common-white);
			font-weight: var(--tj-fw-sbold);
			letter-spacing: -0.03em;
			margin-bottom: 8px;
			line-height: 1;
		}
		.month {
			display: block;
			font-size: 14px;
			color: var(--tj-color-common-white-2);
			letter-spacing: 0.24em;
			text-transform: uppercase;
			line-height: 1;
		}
	}
	.blog-two-meta {
		margin-bottom: 15px;
		ul {
			li {
				color: var(--tj-color-common-white-2);
				.meta-link {
					color: var(--tj-color-common-white-2);
					border: 1px solid var(--tj-color-border-1);
					&:is(:hover, :focus) {
						color: var(--tj-color-common-white);
						background: var(--tj-color-theme-primary);
						border-color: var(--tj-color-theme-primary);
					}
				}
			}
		}
	}
	.blog-content {
		position: absolute;
		inset-inline-start: 0;
		bottom: 0;
		width: 100%;
		height: auto;
		padding: 30px;
		z-index: 3;
		overflow: hidden;
		transition: all 0.3s ease-in-out;
		background-color: transparent;
		.title {
			color: var(--tj-color-common-white);
			line-height: 1.333;
			letter-spacing: -0.025em;
			margin-bottom: 0;
			a {
				&:hover {
					color: var(--tj-color-theme-primary);
				}
			}
		}
		.blog-button {
			position: absolute;
			margin: 0;
			inset-inline-start: 30px;
			bottom: 0;
			opacity: 0;
			visibility: hidden;
			overflow: hidden;
			transition: all 0.3s ease-in-out;
			.text-btn {
				color: var(--tj-color-common-white);
				&::before {
					background-color: var(--tj-color-common-white);
				}
			}

			@media #{$md, $sm, $xs} {
				inset-inline-start: 20px;
			}
		}

		@media #{$md, $sm, $xs} {
			padding: 25px 20px;
		}
	}
	&:is(:hover, :focus) {
		.blog-images {
			img {
				transform: scale(1.12);
			}
		}
		.blog-content {
			padding-bottom: 75px;
			.blog-button {
				opacity: 1;
				visibility: visible;
				bottom: 35px;
			}
		}
	}
}

/* !END: Blog CSS */