@use "../utilities" as *;

/**----------------------------------------
START: Blog CSS
----------------------------------------*/
.h9-blog {
	&-wrapper {
		.blog {
			&-item {
				&.h5-blog-item {
					padding: 15px;
					.blog-thumb {
						width: 42.2%;
						height: 265px;
						min-height: 0;
						&::before {
							display: none;
						}
						a {
							display: inline-block;
							height: 100%;
							width: 100%;
							img {
								min-height: 100%;
							}
						}
					}
					.blog-date {
						top: 15px;
						bottom: auto;
						inset-inline-start: auto;
						inset-inline-end: 15px;
						display: none;
						background-color: var(--tj-color-common-white);
						.date {
							color: var(--tj-color-theme-dark);
						}
						.month {
							color: var(--tj-color-theme-dark-3);
						}
					}
					.blog-content {
						padding: 25px 15px 25px 25px;
						width: 57.8%;
					}
				}
				&:first-child {
					&.h5-blog-item {
						position: relative;
						z-index: 0;
						padding: 0;
						.blog-thumb {
							width: 100%;
							min-height: 100%;
							&::before {
								display: block;
								background: linear-gradient(
									180deg,
									rgba(12, 30, 33, 0) 0%,
									var(--tj-color-theme-dark) 100%
								);
								opacity: 1;
							}
						}
						.blog-date {
							display: block;
						}
						.blog-content {
							position: absolute;
							bottom: 30px;
							inset-inline-start: 30px;
							inset-inline-end: 15px;
							width: calc(100% - 45px);
							padding: 0;
							background-color: transparent;
							z-index: 2;
							.blog-meta {
								span {
									a {
										color: var(--tj-color-text-body-2);
										border: 0;
									}
									&:nth-child(2) {
										color: var(--tj-color-text-body-2);
										a {
											color: var(--tj-color-text-body-5);
											&:hover {
												color: var(--tj-color-theme-primary);
											}
										}
									}
								}
							}
							.title {
								font-size: 32px;
								font-weight: var(--tj-fw-medium);
								color: var(--tj-color-common-white);
							}
							.text-btn {
								margin-top: 24px;

								.btn-text {
									color: var(--tj-color-common-white);
								}
								.btn-icon {
									background-color: var(--tj-color-theme-primary);
								}
							}
						}
					}
				}
			}
		}

		@media #{$lg,$md,$sm} {
			.blog {
				&-item {
					&:first-child {
						&.h5-blog-item {
							.blog-thumb {
								height: 500px;
							}
						}
					}
				}
			}
		}
		@media #{$sm} {
			.blog {
				&-item {
					&:first-child {
						&.h5-blog-item {
							.blog-content {
								bottom: 15px;
								inset-inline-start: 15px;
								.blog-title {
									font-size: 26px;
								}
							}
						}
					}
				}
			}
		}

		@media #{$xs} {
			.blog {
				&-item {
					&.h5-blog-item {
						.blog-thumb {
							width: 100%;
							height: 240px;
						}
						.blog-content {
							padding: 20px 0 10px 0;
							width: 100%;
						}
					}
					&:first-child {
						&.h5-blog-item {
							.blog-thumb {
								height: 400px;
								max-height: 400px;
							}
							.blog-content {
								.title {
									font-size: 24px;
									font-weight: var(--tj-fw-sbold);
								}
								.text-btn {
									margin-top: 16px;
								}
							}
						}
					}
				}
			}
		}
	}
}

/* !END: Blog CSS */