/**
 * Custom Blog Filter Stylesheet
 * 
 * Follows a mobile-first responsive approach, utilizing CSS Variables,
 * fluid typography, and premium micro-interactions.
 */

:root {
	/* Colors */
	--cbf-primary: #700030; /* Premium Burgundy/Maroon accent from screenshot */
	--cbf-primary-hover: #500022;
	--cbf-black: #000000;
	--cbf-dark-gray: #333333;
	--cbf-light-gray: #f9f9f9;
	--cbf-border: #B8BDC9;
	--cbf-divider: #C1C1C1;
	--cbf-bg-shadow: rgba(0, 0, 0, 0.05);

	/* Typography & Sizes */
	--cbf-title-font: 'Montserrat', sans-serif;
	--cbf-body-font: 'Montserrat', sans-serif; /* Utilizing Montserrat for high visual unity */
	--cbf-title-size: clamp(22px, 3.5vw, 30px);
	--cbf-excerpt-size: clamp(16px, 2vw, 18px);
	--cbf-divider-width: 120px;
}


/* Category Filter Section */
.cbf-filter-wrapper {
	margin-bottom: 40px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	align-items: flex-start;
}

.cbf-filter-label {
	font-family: var(--cbf-title-font);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.8px;
	color: var(--cbf-black);
	text-transform: uppercase;
}

.cbf-select-wrapper {
	position: relative;
	width: 100%;
	max-width: 320px;
}

.cbf-category-select {
	width: 100%;
	font-family: var(--cbf-body-font);
	font-size: 18px;
	font-weight: 500;
	color: var(--cbf-dark-gray);
	padding: 13px 40px 13px 15px;
	border: 2px solid var(--cbf-border);
	border-radius: 4px;
	background-color: #ffffff;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	cursor: pointer;
	transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.cbf-category-select:focus {
	outline: none;
	border-color: var(--cbf-primary);
}

/* Custom arrow for select dropdown */
.cbf-select-wrapper::after {
	content: "";
	position: absolute;
	right: 15px;
	top: 50%;
	transform: translateY(-50%);
	width: 8px;
	height: 8px;
	border-right: 2px solid var(--cbf-dark-gray);
	border-bottom: 2px solid var(--cbf-dark-gray);
	transform: translateY(-70%) rotate(45deg);
	pointer-events: none;
	transition: border-color 0.25s ease;
}

.cbf-select-wrapper:hover::after {
	border-color: var(--cbf-primary);
}

/* Blog Posts Stack */
.cbf-posts-grid {
	display: flex;
	flex-direction: column;
	gap: 60px; /* Spacious vertical spacing as seen in the screenshot */
}

/* Single Post Card */
.cbf-post-card {
	display: flex;
	flex-direction: column;
	width: 100%;
	background: #ffffff;
	box-sizing: border-box;
	overflow: hidden;
}

/* Featured Image Styling */
.cbf-card-image-wrapper {
	width: 100%;
	aspect-ratio: 16 / 9; /* Modern, wide aspect ratio matching screenshot */
	overflow: hidden;
	position: relative;
	background-color: var(--cbf-light-gray);
}

.cbf-image-link {
	display: block;
	width: 100%;
	height: 100%;
}

.cbf-card-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
	display: block;
}

/* Subtle Hover Zoom on Image */
.cbf-post-card:hover .cbf-card-image {
	transform: scale(1.03);
}

/* Placeholder for posts without images */
.cbf-card-image-placeholder {
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
	position: relative;
}
.cbf-card-image-placeholder::before {
	content: "\f10c"; /* Fallback visual indicator */
	font-family: dashicons, sans-serif;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size: 40px;
	color: #9ca3af;
}

/* Card Content Details */
.cbf-card-content {
	padding: 24px 0 0 0; /* Left/right padding is 0 to align perfectly with image edge */
	display: flex;
	flex-direction: column;
}

/* Post Title */
.cbf-card-title {
	font-family: var(--cbf-title-font);
	font-size: var(--cbf-title-size);
	font-weight: 600; /* Medium-bold for premium editorial look */
	line-height: 1.3;
	margin: 0 0 12px 0;
}

.cbf-card-title a {
	color: var(--cbf-black);
	text-decoration: none;
	transition: color 0.2s ease;
}

.cbf-card-title a:hover {
	color: var(--cbf-primary);
}

/* Divider Line */
.cbf-card-divider {
	width: var(--cbf-divider-width);
	height: 2px;
	background-color: var(--cbf-divider);
	margin: 0 0 18px 0;
	align-self: flex-start; /* Aligns left as requested */
}

/* Excerpt with CSS line-clamp */
.cbf-card-excerpt {
	font-family: var(--cbf-body-font);
	font-size: var(--cbf-excerpt-size);
	color: var(--cbf-black);
	line-height: 1.6;
	margin: 0 0 24px 0;
	font-weight: 400;

	/* Line clamp to 5 lines */
	display: -webkit-box;
	-webkit-line-clamp: 5;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Card Button Wrapper */
.cbf-card-button-wrapper {
	display: flex;
	justify-content: flex-start;
}


.cbf-read-more-btn{
    transition: all 0.5s ease;
}
.cbf-read-more-btn:hover{
    background-color: var(--cbf-primary-hover);
}

/* Loading Spinner Section */
.cbf-loader-container {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 30px 0;
	width: 100%;
}

.cbf-spinner {
	width: 32px;
	height: 32px;
	border: 3px solid rgba(112, 0, 48, 0.1);
	border-radius: 50%;
	border-top-color: var(--cbf-primary);
	animation: cbf-spin 0.8s linear infinite;
}

@keyframes cbf-spin {
	to {
		transform: rotate(360deg);
	}
}

/* Load More Section */
.cbf-load-more-wrapper {
	display: flex;
	justify-content: center;
	margin-top: 50px;
}


.elementor-button.cbf-load-more-btn:hover,
.elementor-button.cbf-load-more-btn:focus {
	background-color: var(--cbf-primary-hover) !important;
	outline: none;
}

.elementor-button.cbf-load-more-btn:active {
	transform: scale(0.98);
}

.elementor-button.cbf-load-more-btn:disabled {
	background-color: #888888 !important;
	cursor: not-allowed;
	opacity: 0.7;
}

/* No Posts & Error Messages */
.cbf-no-posts,
.cbf-error-message {
	text-align: center;
	font-family: var(--cbf-body-font);
	font-size: 16px;
	color: var(--cbf-dark-gray);
	padding: 40px 0;
	width: 100%;
}

.cbf-error-message {
	color: #cc0000;
}

/* Smooth Content Transitions */
.cbf-post-card {
	animation: cbf-fade-in 0.5s cubic-bezier(0.25, 1, 0.5, 1) both;
}

@keyframes cbf-fade-in {
	from {
		opacity: 0;
		transform: translateY(15px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* Responsive Breakpoints & Optimizations */
@media (max-width: 1441px){
.cbf-category-select{
    font-size: 18px;
}
}
@media (max-width: 768px) {

	.cbf-posts-grid {
		gap: 40px;
	}

	.cbf-filter-wrapper {
		margin-bottom: 30px;
	}

	.cbf-select-wrapper {
		max-width: 100%; /* Full width on small mobile screens */
	}
    .cbf-category-select{
        font-size: 14px;
    }
}