/* BXB Testimonial Cards - Frontend Styles */

.bxb-testimonials-section {
	min-height: 20vh;
	position: relative;
	overflow: visible;
	padding: 4rem 2rem;
}

.bxb-testimonials-container {
	position: relative;
	max-width: 100%;
	margin: 0 auto;
	height: 40vh;
}

.bxb-testimonial-card {
	position: absolute;
	/* Width is set inline via JavaScript for desktop */
	/* Height is always auto to fit content */
	height: auto !important;
	min-height: 200px;
	padding: 2%;
	border-radius:0px !important;
	cursor: grab;
	user-select: none;
	opacity: 0;
	visibility: hidden;
	transition: box-shadow 0.3s ease;
	color: #000;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	overflow: hidden;
}

.bxb-testimonial-card:active {
	cursor: grabbing;
}

.bxb-testimonial-card:hover {
	box-shadow: 0 15px 60px rgba(0, 0, 0, 0.4);
}

.bxb-testimonial-card.dragging {
	z-index: 1000;
	box-shadow: 0 20px 80px rgba(0, 0, 0, 0.5);
}

.bxb-testimonial-content {
	font-size: clamp(1rem, 2.0vw, 50px);
	line-height: 1.2;
	margin-bottom: 1.5rem;
	flex-grow: 1;
	overflow: hidden;
	display: -webkit-box;
	-webkit-box-orient: vertical;
}

.bxb-testimonial-author {
	font-size: clamp(0.875rem, 1.2vw, 1rem);
	font-weight: 600;
	margin-bottom: 0.25rem;
}

.bxb-testimonial-role {
	font-size: clamp(0.875rem, 1.5vw, 20px);
	opacity: 0.8;
}

/* Default card color themes */
.bxb-card-1 { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }
.bxb-card-2 { background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); }
.bxb-card-3 { background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); }
.bxb-card-4 { background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%); }
.bxb-card-5 { background: linear-gradient(135deg, #fa709a 0%, #fee140 100%); }
.bxb-card-6 { background: linear-gradient(135deg, #30cfd0 0%, #330867 100%); }

/* Additional default gradients for more cards */
.bxb-card-7 { background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%); }
.bxb-card-8 { background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%); }
.bxb-card-9 { background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%); }
.bxb-card-10 { background: linear-gradient(135deg, #fbc2eb 0%, #a6c1ee 100%); }

/* Mobile-specific adjustments */
@media (max-width: 768px) {
	.bxb-testimonials-container {
		height: auto;
		min-height: 130vh;
		display: block;
		padding: 2rem 0;
		position: relative;
	}
	
	.bxb-testimonial-card {
		position: absolute !important;
		width: 90% !important;
		max-width: 400px !important;
		height: auto !important;
		min-height: 1500px !important;
		left: 50% !important;
		transform: translateX(-50%) !important;
		cursor: pointer;
		padding: 1.5rem;
		transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1), top 0.4s cubic-bezier(0.4, 0, 0.2, 1);
		overflow: visible !important;
		opacity: 1;
		visibility: visible;
	}
	
	/* Stack effect with rotation - cards are rotated and offset */
	.bxb-testimonial-card:nth-child(1) { 
		top: 0px; 
		transform: translateX(-50%) rotate(-3deg) !important;
	}
	.bxb-testimonial-card:nth-child(2) { 
		top: 80px; 
		transform: translateX(-50%) rotate(2deg) !important;
	}
	.bxb-testimonial-card:nth-child(3) { 
		top: 160px; 
		transform: translateX(-50%) rotate(-4deg) !important;
	}
	.bxb-testimonial-card:nth-child(4) { 
		top: 240px; 
		transform: translateX(-50%) rotate(3deg) !important;
	}
	.bxb-testimonial-card:nth-child(5) { 
		top: 320px; 
		transform: translateX(-50%) rotate(-2deg) !important;
	}
	.bxb-testimonial-card:nth-child(6) { 
		top: 400px; 
		transform: translateX(-50%) rotate(4deg) !important;
	}
	.bxb-testimonial-card:nth-child(7) { 
		top: 480px; 
		transform: translateX(-50%) rotate(-3deg) !important;
	}
	.bxb-testimonial-card:nth-child(8) { 
		top: 560px; 
		transform: translateX(-50%) rotate(2deg) !important;
	}
	.bxb-testimonial-card:nth-child(9) { 
		top: 640px; 
		transform: translateX(-50%) rotate(-5deg) !important;
	}
	.bxb-testimonial-card:nth-child(10) { 
		top: 720px; 
		transform: translateX(-50%) rotate(3deg) !important;
	}
	
	/* Collapsed state - default for all cards */
	.bxb-testimonial-card {
		box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
		overflow: hidden;
		max-height: 1250px !important; /* Limit height when collapsed */
	}
	
	/* Active/expanded card */
	.bxb-testimonial-card.active {
		/* Keep the rotation! Don't straighten */
		/* Remove z-index increase - keep original stacking order */
		box-shadow: 0 15px 50px rgba(0, 0, 0, 0.3);
		overflow: visible !important;
	}
	
	/* Content visibility states */
	.bxb-testimonial-content {
		opacity: 1;
	}
	
	.bxb-testimonial-author {
		opacity: 1 !important;
	}
	
	.bxb-testimonial-role {
		opacity: 1 !important;
	}
	
	/* Adjust font sizes for mobile */
	.bxb-testimonial-content {
		font-size: 1.2rem;
		margin-bottom: 1rem;
		transition: opacity 0.3s ease;
	}
	
	.bxb-testimonial-author {
		font-size: 1rem;
		transition: opacity 0.3s ease;
	}
	
	.bxb-testimonial-role {
		font-size: 0.875rem;
		transition: opacity 0.3s ease;
	}
	
	/* Visual indicator that cards are tappable */
	.bxb-testimonial-card:not(.active):hover {
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
	}
	
	/* Adjust container height based on active card */
	.bxb-testimonials-container {
		transition: height 0.4s ease;
	}
}