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

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

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

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

.blog-layout-section .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;
}

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

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

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

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

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

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

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

.blog-layout-section .blog-author-avatar {
    /* Overrides a stale ACF Custom CSS rule (wp_head, priority 1000) hiding this class — see .blog-item-author-avatar below. */
    display: flex !important;
    width: 32px;
    height: 32px;
    justify-content: center;
    align-items: center;
    aspect-ratio: 1/1;
    border-radius: 128px;
    background: var(--bs-main-500);
}

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

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

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

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

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

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

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

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

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

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

.blog-layout-section .blog-item .blog-item-author-avatar {
    /* Overrides a stale ACF Custom CSS rule (wp_head, priority 1000) hiding this class too. */
    display: flex !important;
    width: 24px;
    height: 24px;
    border-radius: 128px;
    background: var(--bs-main-500);
    justify-content: center;
    align-items: center;
    aspect-ratio: 1/1;
}

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

.blog-layout-section .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-featured-meta .blog-date {
        font-size: 12px !important;
        line-height: 16px !important;
        }

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

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

        .blog-list .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-item .blog-date {
        font-size: 10px !important;
        line-height: 14px !important;
        }

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

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

        .blog-item .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: var(--font-primary);
	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: var(--font-primary);
	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;
	-webkit-appearance: none;
	-moz-appearance: none;
	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;
        }
}