/* ==========================================
   Featured Blog CSS
   ========================================== */
.cbc-container-wrap {
	width: 100%;
	margin: 0 auto;
	max-width: 100%;
	display: flex;
	overflow: hidden;
	background: #000;
	padding: 0;
	box-sizing: border-box;
	box-shadow: 0 20px 50px rgba(0,0,0,0.3);
	--cbc-dist-1-op: 0.50;
	--cbc-dist-2-op: 0.72;
	--cbc-dist-3-op: 0.86;
	--cbc-dist-4-op: 0.97;
}

.cbc-item {
	position: relative;
	flex: 1; 
	background-size: cover;
	background-position: center;
	overflow: hidden;
	transition: flex 0.5s cubic-bezier(0.25, 1, 0.5, 1);
	cursor: pointer;
	border-right: 1px solid #000;
}

.cbc-item:last-child { border-right: none; }

.cbc-item.active { 
	flex: 4; 
}
@media (hover: hover), (min-width: 769px) {
	.cbc-item:hover { 
		flex: 4; 
	}
}

.cbc-overlay {
	position: absolute;
	inset: 0;
	transition: background 0.4s ease;
}

/* Default Fallback Gradient on Closed Cards */
.cbc-item:not(.active) .cbc-overlay {
	background: linear-gradient(180deg, rgba(30, 30, 30, 0.4) 0%, rgba(0, 0, 0, 0.92) 100%);
}

/* ========================================================
   Progressive Depth Shading for Closed Cards
   ======================================================== */
/* Distance 1 (Adjacent: Card 2 & Card 4 when center is open) -> Noticeable Lite Dark (50% to 75%) */
.botvfx-dynamic-wrapper .cbc-container-wrap .cbc-item.cbc-dist-1:not(.active) .cbc-overlay,
.cbc-item.cbc-dist-1:not(.active) .cbc-overlay {
	background: linear-gradient(180deg, rgba(15, 15, 15, 0.50) 0%, rgba(0, 0, 0, 0.75) 100%) !important;
}

/* Distance 2 (Outer: Card 1 & Card 5 when center is open) -> Deep Dark Black (78% to 94%) */
.botvfx-dynamic-wrapper .cbc-container-wrap .cbc-item.cbc-dist-2:not(.active) .cbc-overlay,
.cbc-item.cbc-dist-2:not(.active) .cbc-overlay {
	background: linear-gradient(180deg, rgba(8, 8, 8, 0.78) 0%, rgba(0, 0, 0, 0.94) 100%) !important;
}

/* Distance 3 -> Darker Black (88% to 97%) */
.botvfx-dynamic-wrapper .cbc-container-wrap .cbc-item.cbc-dist-3:not(.active) .cbc-overlay,
.cbc-item.cbc-dist-3:not(.active) .cbc-overlay {
	background: linear-gradient(180deg, rgba(5, 5, 5, 0.88) 0%, rgba(0, 0, 0, 0.97) 100%) !important;
}

/* Distance 4+ -> Deepest / Almost Pure Black (94% to 99%) */
.botvfx-dynamic-wrapper .cbc-container-wrap .cbc-item.cbc-dist-4:not(.active) .cbc-overlay,
.botvfx-dynamic-wrapper .cbc-container-wrap .cbc-item.cbc-dist-5:not(.active) .cbc-overlay,
.cbc-item.cbc-dist-4:not(.active) .cbc-overlay,
.cbc-item.cbc-dist-5:not(.active) .cbc-overlay {
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.94) 0%, rgba(0, 0, 0, 0.99) 100%) !important;
}

.cbc-vertical-title {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) rotate(-90deg);
	width: 450px; 
	max-width: 80vh; 
	text-align: center;
	color: rgba(255,255,255,0.7);
	font-size: 16px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 2px;
	line-height: 1.4;
	transition: opacity 0.3s;
	pointer-events: none;
	white-space: normal;
	display: -webkit-box;
	-webkit-line-clamp: 2; 
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.cbc-item.active .cbc-vertical-title {
	opacity: 0 !important;
	visibility: hidden !important;
}
@media (hover: hover), (min-width: 769px) {
	.cbc-item:hover .cbc-vertical-title {
		opacity: 0 !important;
		visibility: hidden !important;
	}
}

.cbc-content {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	padding: 40px;
	opacity: 0;
	transform: translateY(20px);
	transition: all 0.4s ease-out;
	z-index: 5;
}

.cbc-item.active .cbc-content {
	opacity: 1;
	transform: translateY(0);
	transition-delay: 0.1s;
}
@media (hover: hover), (min-width: 769px) {
	.cbc-item:hover .cbc-content {
		opacity: 1;
		transform: translateY(0);
		transition-delay: 0.1s;
	}
}

.cbc-content h3 { margin: 0 0 10px; line-height: 1.1; }
.cbc-content h3 a {
	font-size: 32px; font-weight: 700; text-decoration: none; text-transform: uppercase;
}

p.cbc-excerpt {
	color: #ccc; font-size: 14px; margin-bottom: 20px; line-height: 1.5;
	max-width: 600px;
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

@media (max-width: 1024px) {
	 .cbc-content h3 a { font-size: 24px; }
	 .cbc-vertical-title { font-size: 14px; }
}

@media (max-width: 768px) {
	.cbc-container-wrap { 
		flex-direction: column; 
		height: 700px !important;
	}
	
	.cbc-item {
		border-right: none;
		border-bottom: 1px solid #000;
		transition: flex 0.4s ease;
	}
	
	.cbc-item.active { 
		flex: 6;
	}

	.cbc-vertical-title { 
		transform: none; 
		writing-mode: horizontal-tb; 
		position: absolute; 
		left: 20px; 
		bottom: 15px; 
		width: calc(100% - 40px);
		top: auto; 
		text-align: left;
		white-space: nowrap;
		-webkit-line-clamp: 1;
		font-size: 14px;
		opacity: 0.8;
	}

	.cbc-content {
		padding: 20px;
	}
	
	.cbc-content h3 a { font-size: 20px; }
	p.cbc-excerpt { font-size: 13px; -webkit-line-clamp: 3; }
}