.blog-layout-section {
	padding-top: 172px;
	padding-bottom: 80px;

	.blog-layout-title {
		font-size: 80px;
		font-weight: 900;
		line-height: 88px;
	}

	.blog-parent,
	.blog-section-1 {
		gap: 40px;
	}

	.blog-filters {
		padding-top: 40px;
	}

	.last-article-badge {
		width: fit-content;
		border-radius: 32px;
		background: var(--bs-accent-500);
		display: flex;
		padding: 5px 12px;
		justify-content: center;
		align-items: center;
		gap: 8px;
		margin-bottom: 8px;
	}

	.last-article-badge span {
		font-size: 12px;
		font-weight: 500;
		line-height: 16px;
	}

	.blog-featured-title {
		font-size: 24px;
		font-weight: 800;
		line-height: 28px;
		text-decoration: none;
	}

	.blog-featured-title a {
		text-decoration: none;
		color: var(--bs-black) !important;
	}

	.blog-featured-title a:hover {
		color: var(--bs-main-500) !important;
	}

	.blog-featured-title a:visited {
		color: var(--bs-black);
		text-decoration: none !important;
		text-decoration-line: none;
	}

	.blog-featured-image img {
		max-height: 200px;
		object-fit: cover;
	}

	.blog-featured-meta {
		padding-top: 16px;
	}

	.blog-author-avatar {
		display: flex;
		width: 32px;
		height: 32px;
		justify-content: center;
		align-items: center;
		aspect-ratio: 1/1;
		border-radius: 128px;
		background: var(--bs-main-500);
	}

	.blog-author-name {
		font-size: 16px;
		font-weight: 600;
		line-height: 24px;
	}

	.blog-date {
		font-size: 16px;
		font-weight: 400;
		line-height: 24px;
	}

	.blog-list {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 32px;
	}

	.blog-item {
		padding: 24px 0;
		border-bottom: 1px solid var(--bs-neutral);
		gap: 16px;

		.blog-date {
			font-size: 14px;
			font-weight: 500;
			line-height: 20px;
			margin-bottom: 8px;
		}

		.blog-title {
			font-size: 20px;
			font-style: normal;
			font-weight: 600;
			line-height: 24px;
			text-decoration: none;
			margin-bottom: 16px;
		}

		.blog-title a {
			text-decoration: none;
			color: var(--bs-black);
		}

		.blog-title a:hover {
			color: var(--bs-main-500) !important;
		}

		.blog-title a:visited {
			color: var(--bs-black);
		}

		.blog-author {
			font-size: 14px;
			font-style: normal;
			font-weight: 600;
			line-height: 20px;
			margin-top: auto;
		}

		.blog-item-author-avatar {
			width: 24px;
			height: 24px;
			border-radius: 128px;
			background: var(--bs-main-500);
			justify-content: center;
			align-items: center;
			aspect-ratio: 1/1;
		}
	}

	.blog-thumb {
		flex-shrink: 0;
	}

	.blog-thumb img {
		width: 245px;
		height: 140px;
		object-fit: cover;
		display: block;
	}
}

/* Responsive: single column under 768px */
@media (max-width: 992px) {
	.blog-layout-section {
		padding-top: 40px;
		padding-bottom: 0;
	}

	.blog-parent {
		gap: 0 !important;
	}

	.blog-layout-title {
		font-size: 32px !important;
		line-height: 40px !important;
	}

	.blog-featured-article {
		padding-bottom: 16px;
	}

	.last-article-badge span {
		font-size: 10px !important;
		line-height: 14px !important;
	}

	.blog-featured-title {
		font-size: 18px !important;
		line-height: 20px !important;
	}

	.blog-featured-meta {
		.blog-author-name,
		.blog-date {
			font-size: 12px !important;
			line-height: 16px !important;
		}

		.blog-author-avatar {
			width: 20px !important;
			height: 20px !important;
		}
	}

	.blog-list {
		gap: 16px !important;

		.divider-blog {
			position: relative;
			width: calc(100% + 48px);
		}
	}

	.blog-item {
		align-items: center;
		gap: 12px !important;
		width: calc(100% + 24px);
		border-bottom: none !important;

		.blog-date {
			font-size: 10px !important;
			line-height: 14px !important;
		}

		.blog-title {
			font-size: 14px !important;
			line-height: 20px !important;
		}

		.blog-author {
			font-size: 12px !important;
			line-height: 16px !important;
		}

		.blog-item-author-avatar {
			width: 20px !important;
			height: 20px !important;
		}
	}

	.blog-thumb img {
		width: 88px !important;
		max-height: 110px !important;
	}

	.blog-section-1 {
		flex-direction: column;
	}

	.blog-flex-wrapper {
		width: 100% !important;
	}

	.blog-last-wrapper {
		width: 100% !important;
	}

	.blog-list {
		grid-template-columns: 1fr !important;
	}
}

/* Search Form Styling */
.blog-search {
	margin-bottom: 24px;
}

.blog-search .search-form-wrapper {
	display: flex;
	align-items: center;
	padding-top: 4px;
	padding-bottom: 8px;
	border-bottom: 1px solid var(--bs-dark);
	max-width: 518px;
	position: relative;
}

.blog-search .search-form-input {
	width: 100%;
	border: none;
	padding: 0 40px 0 0;
	background-color: transparent;
	color: var(--bs-darkness);
	font-size: 14px;
	font-weight: 500;
	line-height: 20px;
}

.blog-search .search-form-input:focus {
	outline: none;
	border-color: var(--bs-black);
}

.search-form-input::placeholder {
	color: var(--bs-gray-600);
	opacity: 1;
}

.blog-search .search-form-button {
	position: absolute;
	right: 8px;
	background: none;
	border: none;
	padding: 4px;
	cursor: pointer;
	color: var(--bs-gray-600);
	transition: color 0.2s ease;
}

.blog-search .search-form-button:hover {
	color: var(--bs-main-500);
}

.blog-search .search-form-button svg {
	width: 16px;
	height: 16px;
}

/* Filter Form Styling */
#filter-form {
	
}

/* Dropdown Styling */
.blog-filters .dropdown {
	position: relative;
}

.blog-filters .dropdown .btn {
	background: transparent;
	border: none;
	color: var(--bs-black);
	font-family: 'Work Sans';
	font-size: 14px;
	font-weight: 600;
	line-height: 20px;
	padding: 8px 32px 8px 0;
	border-radius: 0;
	text-align: left;
	min-width: 160px;
	position: relative;
	text-decoration: none !important;
	transition: all 0.2s ease;
}

.blog-filters .dropdown .btn:hover {
	color: var(--bs-main-500);
}

.blog-filters .dropdown .btn:focus {
	box-shadow: none;
	outline: none;
}

.blog-filters .dropdown .btn::after {
	content: '';
	position: absolute;
	right: 12px;
	top: 50%;
	transform: translateY(-50%);
	width: 14px;
	height: 8px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8' viewBox='0 0 14 8' fill='none'%3E%3Cpath d='M13.1202 1.68133L7.1813 7.62019C7.04397 7.75752 6.86108 7.83286 6.66175 7.83286C6.46242 7.83286 6.28331 7.75752 6.1462 7.62019L0.212888 1.6871C0.0755553 1.54977 0 1.36666 0 1.17133C0 0.975996 0.0755553 0.792885 0.212888 0.655553L0.649775 0.218666C0.787108 0.0813331 0.970218 0.00555553 1.16555 0.00555553C1.36088 0.00555553 1.54399 0.0813331 1.68133 0.218666L6.66375 5.20109L11.6517 0.212888C11.7891 0.0757773 11.972 0 12.1675 0C12.3631 0 12.5457 0.0755551 12.6831 0.212888L13.1202 0.649997C13.4044 0.93444 13.4044 1.39711 13.1202 1.68133Z' fill='%2307080D'/%3E%3C/svg%3E") no-repeat center;
	background-size: 14px 8px;
	border: none;
	margin-left: 0;
	vertical-align: 0;
	transition: transform 0.2s ease;
}

.blog-filters .dropdown.show .btn::after {
	transform: translateY(-50%) rotate(180deg);
}

/* Dropdown Menu Styling */
.blog-filters .dropdown-menu {
	border: 1px solid var(--bs-neutral);
	border-radius: 0;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
	padding: 8px 0;
	margin-top: 4px;
	min-width: 100%;
}

.blog-filters .dropdown-item {
	color: var(--bs-black);
	font-size: 14px;
	font-weight: 500;
	line-height: 20px;
	padding: 8px 16px;
	transition: all 0.2s ease;
	text-decoration: none;
}

.blog-filters .dropdown-item:hover {
	background-color: var(--bs-light);
	color: var(--bs-main-500);
}

.blog-filters .dropdown-item.active {
	background-color: var(--bs-main-500);
	color: var(--bs-white);
}

.blog-filters .dropdown-item.active:hover {
	background-color: var(--bs-main-600, var(--bs-main-500));
	color: var(--bs-white);
}

.blog-filters .icon-container {
	margin-left: auto;
}

.blog-filter-label {
	font-size: 14px;
	font-style: normal;
	font-weight: 500;
	line-height: 20px;
}

.blog-filter-select {
	color: var(--bs-black);
	font-family: 'Work Sans';
	font-size: 14px;
	font-weight: 600;
	line-height: 20px;
	padding: 6px 32px 6px 6px;
	border: none !important;
	background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M14.4522 6.76488L8.51334 12.7037C8.376 12.8411 8.19311 12.9164 7.99378 12.9164C7.79445 12.9164 7.61534 12.8411 7.47823 12.7037L1.54492 6.77066C1.40759 6.63333 1.33203 6.45022 1.33203 6.25489C1.33203 6.05955 1.40759 5.87644 1.54492 5.73911L1.98181 5.30222C2.11914 5.16489 2.30225 5.08911 2.49758 5.08911C2.69291 5.08911 2.87603 5.16489 3.01336 5.30222L7.99578 10.2846L12.9838 5.29645C13.1211 5.15933 13.304 5.08356 13.4995 5.08356C13.6951 5.08356 13.8778 5.15911 14.0151 5.29645L14.4522 5.73355C14.7364 6.018 14.7364 6.48066 14.4522 6.76488Z' fill='%2307080D'/%3E%3C/svg%3E") no-repeat right 10px center;
	background-size: 16px;
	cursor: pointer;
	appearance: none;
}

.blog-filter-select:focus {
	outline: none;
}

.blog-search-input {
	width: 100%;
	border: none;
	padding: 0px 0px 0px 8px;
	background-color: transparent;
	color: var(--bs-darkness);
	font-size: 14px;
	font-weight: 500;
	line-height: 20px;
}

.blog-search-input:focus {
	outline: none;
	border-color: var(--bs-black);
}

@media (max-width: 992px) {
	/* Mobile responsive for filters */
	.blog-search {
		margin-bottom: 16px;
	}

	.blog-search .search-form-wrapper {
		max-width: 100%;
	}

	.blog-search .search-form-input {
		font-size: 13px;
	}

	.blog-search .search-form-button {
		right: 6px;
	}

	.blog-search .search-form-button svg {
		width: 14px;
		height: 14px;
	}

	#filter-form {
		gap: 8px;
	}

	.blog-filters .dropdown .btn {
		font-size: 13px;
		line-height: 16px;
		padding: 6px 24px 6px 0;
		min-width: 120px;
	}

	.blog-filters .dropdown .btn::after {
		right: 8px;
		width: 12px;
		height: 7px;
		background-size: 12px 7px;
	}

	.blog-filters .dropdown-item {
		font-size: 12px;
		line-height: 16px;
		padding: 6px 12px;
	}
}

/* Blog Pagination Styles */
.blog-pagination {
	display: flex;
	justify-content: center;
	align-items: center;
	margin-top: 40px;
	margin-bottom: 40px;
}

.blog-pagination ul {
	list-style: none;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 0;
}

.blog-pagination li {
	margin: 0;
}

.blog-pagination a,
.blog-pagination span {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 8px 12px;
	border: 1px solid var(--bs-neutral);
	border-radius: 0;
	background-color: transparent;
	color: var(--bs-secondary-500);
	text-decoration: none;
	font-size: 14px;
	font-weight: 600;
	line-height: 20px;
	transition: all 0.2s ease-in-out;
	cursor: pointer;
}

/* Default hover state - light blue background */
.blog-pagination a:hover {
	border-color: var(--bs-secondary-500);
	color: var(--bs-black);
}

/* Active/current page state - dark teal background */
.blog-pagination .current,
.blog-pagination span.current {
	background-color: var(--bs-secondary-500);
	border-color: var(--bs-secondary-500);
	color: var(--bs-white);
	cursor: default;
}

.blog-pagination .current:hover {
	background-color: var(--bs-secondary-500);
	border-color: var(--bs-secondary-500);
	color: var(--bs-white);
}

/* Disabled state for prev/next when not available */
.blog-pagination .disabled,
.blog-pagination .disabled a {
	background-color: transparent;
	border-color: var(--bs-light);
	color: var(--bs-dark);
	cursor: not-allowed;
	pointer-events: none;
}

/* Ellipsis styling */
.blog-pagination .dots,
.blog-pagination span.dots {
	background-color: transparent;
	border: none;
	color: #9ca3af;
	cursor: default;
	padding: 8px 4px;
	min-width: auto;
}

.blog-pagination .dots:hover {
	background-color: transparent;
	border: none;
	color: #9ca3af;
}

/* Navigation arrows styling */
.blog-pagination .prev a,
.blog-pagination .next a {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
}

.blog-pagination .prev a svg,
.blog-pagination .next a svg {
	width: 16px;
	height: 16px;
	transition: all 0.2s ease-in-out;
}

.blog-pagination .prev a svg {
	width: 16px;
	height: 16px;
}

.blog-pagination .next a svg {
	width: 8px;
	height: 14px;
}

/* Focus states for accessibility */
.blog-pagination a:focus,
.blog-pagination span:focus {
	outline: 2px solid #3b82f6;
	outline-offset: 2px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
	.blog-pagination {
		margin-top: 24px;
		margin-bottom: 24px;
	}

	.blog-pagination ul {
		gap: 4px;
	}

	.blog-pagination a,
	.blog-pagination span {
		min-width: 36px;
		height: 36px;
		padding: 6px 10px;
		font-size: 13px;
	}

	/* Hide some page numbers on mobile to save space */
	.blog-pagination li:not(.prev):not(.next):not(.current):not(.dots) {
		display: none;
	}

	/* Show first, last, current and adjacent pages */
	.blog-pagination li.current,
	.blog-pagination li.current + li,
	.blog-pagination li:first-of-type,
	.blog-pagination li:last-of-type,
	.blog-pagination li.dots {
		display: block;
	}
}