/* 
 * Stable Logo Bubble Cloud Styles
 * No JS required. Mobile uses staggered CSS flex grid.
 */

.slbc-wrapper {
	position: relative;
	width: 100%;
	box-sizing: border-box;
}

.slbc-header {
	margin-bottom: 30px;
}

.slbc-title {
	margin: 0 0 10px;
}

.slbc-subtitle {
	margin: 0;
}

/* Base Bubble Styles */
.slbc-bubble {
	display: flex;
	align-items: center;
	justify-content: center;
	background: #fff;
	border-radius: 50%;
	padding: 15px;
	box-sizing: border-box;
	transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
	box-shadow: 0 5px 15px rgba(0,0,0,0.05);
	cursor: pointer;
	z-index: 1;
	/* Variables for scale and gap will be set by Elementor controls */
	--hover-scale: 1.25;
}

.slbc-bubble img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	transition: all 0.3s ease;
}

.slbc-bubble:hover {
	transform: scale(var(--hover-scale));
	z-index: 10;
}

/* Placeholder styles for editor */
.slbc-placeholder {
	background: #f0f0f0;
	border: 2px dashed #ddd;
}
.slbc-placeholder-img {
	width: 50%;
	height: 50%;
	background: #ccc;
	border-radius: 4px;
}

/* --------------------------------------
 * LAYOUT 1: APPLE WATCH CLUSTER (Desktop)
 * -------------------------------------- */
.slbc-layout-apple-watch {
	position: relative;
	width: 100%;
	height: 600px; /* Fallback, overridden by controls */
	overflow: visible;
	/* Distance unit for layout offsets based on bubble size + gap */
	--offset: calc(var(--bubble-size, 100px) + var(--bubble-gap, 15px));
	--half-offset: calc(var(--offset) * 0.5);
	--hex-height: calc(var(--offset) * 0.866); /* sin(60) */
}

.slbc-layout-apple-watch .slbc-bubble {
	position: absolute;
	top: 50%;
	left: 50%;
	/* Centered by default */
	margin-top: calc(var(--bubble-size, 100px) * -0.5);
	margin-left: calc(var(--bubble-size, 100px) * -0.5);
}

.slbc-layout-apple-watch .slbc-bubble:hover {
	/* Keep the original position and just scale */
	z-index: 100;
}

/* Ring 0: Center */
.slbc-layout-apple-watch .slbc-item-1 { transform: translate(0, 0); }

/* Ring 1: 6 items (Hexagon) */
.slbc-layout-apple-watch .slbc-item-2 { transform: translate(var(--offset), 0); }
.slbc-layout-apple-watch .slbc-item-3 { transform: translate(calc(var(--offset) * -1), 0); }
.slbc-layout-apple-watch .slbc-item-4 { transform: translate(var(--half-offset), calc(var(--hex-height) * -1)); }
.slbc-layout-apple-watch .slbc-item-5 { transform: translate(calc(var(--half-offset) * -1), calc(var(--hex-height) * -1)); }
.slbc-layout-apple-watch .slbc-item-6 { transform: translate(var(--half-offset), var(--hex-height)); }
.slbc-layout-apple-watch .slbc-item-7 { transform: translate(calc(var(--half-offset) * -1), var(--hex-height)); }

/* Ring 2: 12 items */
.slbc-layout-apple-watch .slbc-item-8 { transform: translate(calc(var(--offset) * 2), 0); }
.slbc-layout-apple-watch .slbc-item-9 { transform: translate(calc(var(--offset) * -2), 0); }
.slbc-layout-apple-watch .slbc-item-10 { transform: translate(calc(var(--offset) * 1.5), calc(var(--hex-height) * -1)); }
.slbc-layout-apple-watch .slbc-item-11 { transform: translate(calc(var(--offset) * -1.5), calc(var(--hex-height) * -1)); }
.slbc-layout-apple-watch .slbc-item-12 { transform: translate(calc(var(--offset) * 1.5), var(--hex-height)); }
.slbc-layout-apple-watch .slbc-item-13 { transform: translate(calc(var(--offset) * -1.5), var(--hex-height)); }
.slbc-layout-apple-watch .slbc-item-14 { transform: translate(var(--offset), calc(var(--hex-height) * -2)); }
.slbc-layout-apple-watch .slbc-item-15 { transform: translate(calc(var(--offset) * -1), calc(var(--hex-height) * -2)); }
.slbc-layout-apple-watch .slbc-item-16 { transform: translate(0, calc(var(--hex-height) * -2)); }
.slbc-layout-apple-watch .slbc-item-17 { transform: translate(var(--offset), calc(var(--hex-height) * 2)); }
.slbc-layout-apple-watch .slbc-item-18 { transform: translate(calc(var(--offset) * -1), calc(var(--hex-height) * 2)); }
.slbc-layout-apple-watch .slbc-item-19 { transform: translate(0, calc(var(--hex-height) * 2)); }

/* Scale down Apple Watch items slightly on hover naturally due to transform chaining fix */
.slbc-layout-apple-watch .slbc-item-1:hover { transform: translate(0, 0) scale(var(--hover-scale)); }
.slbc-layout-apple-watch .slbc-item-2:hover { transform: translate(var(--offset), 0) scale(var(--hover-scale)); }
.slbc-layout-apple-watch .slbc-item-3:hover { transform: translate(calc(var(--offset) * -1), 0) scale(var(--hover-scale)); }
.slbc-layout-apple-watch .slbc-item-4:hover { transform: translate(var(--half-offset), calc(var(--hex-height) * -1)) scale(var(--hover-scale)); }
.slbc-layout-apple-watch .slbc-item-5:hover { transform: translate(calc(var(--half-offset) * -1), calc(var(--hex-height) * -1)) scale(var(--hover-scale)); }
.slbc-layout-apple-watch .slbc-item-6:hover { transform: translate(var(--half-offset), var(--hex-height)) scale(var(--hover-scale)); }
.slbc-layout-apple-watch .slbc-item-7:hover { transform: translate(calc(var(--half-offset) * -1), var(--hex-height)) scale(var(--hover-scale)); }
.slbc-layout-apple-watch .slbc-item-8:hover { transform: translate(calc(var(--offset) * 2), 0) scale(var(--hover-scale)); }
.slbc-layout-apple-watch .slbc-item-9:hover { transform: translate(calc(var(--offset) * -2), 0) scale(var(--hover-scale)); }
.slbc-layout-apple-watch .slbc-item-10:hover { transform: translate(calc(var(--offset) * 1.5), calc(var(--hex-height) * -1)) scale(var(--hover-scale)); }
.slbc-layout-apple-watch .slbc-item-11:hover { transform: translate(calc(var(--offset) * -1.5), calc(var(--hex-height) * -1)) scale(var(--hover-scale)); }
.slbc-layout-apple-watch .slbc-item-12:hover { transform: translate(calc(var(--offset) * 1.5), var(--hex-height)) scale(var(--hover-scale)); }
.slbc-layout-apple-watch .slbc-item-13:hover { transform: translate(calc(var(--offset) * -1.5), var(--hex-height)) scale(var(--hover-scale)); }
.slbc-layout-apple-watch .slbc-item-14:hover { transform: translate(var(--offset), calc(var(--hex-height) * -2)) scale(var(--hover-scale)); }
.slbc-layout-apple-watch .slbc-item-15:hover { transform: translate(calc(var(--offset) * -1), calc(var(--hex-height) * -2)) scale(var(--hover-scale)); }
.slbc-layout-apple-watch .slbc-item-16:hover { transform: translate(0, calc(var(--hex-height) * -2)) scale(var(--hover-scale)); }
.slbc-layout-apple-watch .slbc-item-17:hover { transform: translate(var(--offset), calc(var(--hex-height) * 2)) scale(var(--hover-scale)); }
.slbc-layout-apple-watch .slbc-item-18:hover { transform: translate(calc(var(--offset) * -1), calc(var(--hex-height) * 2)) scale(var(--hover-scale)); }
.slbc-layout-apple-watch .slbc-item-19:hover { transform: translate(0, calc(var(--hex-height) * 2)) scale(var(--hover-scale)); }

/* --------------------------------------
 * LAYOUT 2: HONEYCOMB GRID (Desktop)
 * -------------------------------------- */
.slbc-layout-honeycomb {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	max-width: 900px;
	margin: 0 auto;
}

.slbc-layout-honeycomb .slbc-bubble {
	position: relative;
	/* Optional: negative margins can create interlocking effects, but keeping it stable flat flex is safer */
}

/* --------------------------------------
 * LAYOUT 3: CLEAN GRID (Desktop)
 * -------------------------------------- */
.slbc-layout-clean-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(var(--bubble-size, 100px), 1fr));
	justify-items: center;
	align-items: center;
}

.slbc-layout-clean-grid .slbc-bubble {
	position: relative;
}

/* --------------------------------------
 * RESPONSIVE RULES (Tablet & Mobile)
 * -------------------------------------- */
@media (max-width: 1024px) {
	.slbc-layout-apple-watch {
		/* Scale down offset on tablet */
		--offset: calc(var(--bubble-size, 80px) + var(--bubble-gap, 10px));
	}
}

@media (max-width: 767px) {
	/* Mobile Staggered Cloud Layout */
	.slbc-container {
		display: flex !important;
		flex-wrap: wrap !important;
		justify-content: center !important;
		align-content: center !important;
		gap: var(--bubble-gap, 15px) !important;
		height: auto !important;
		padding: 20px 10px !important;
		/* Clamp bubble size for smaller phones */
		--mobile-bubble-size: clamp(60px, calc(var(--bubble-size, 80px) * 0.8), 100px);
	}
	
	.slbc-bubble {
		position: relative !important;
		top: auto !important;
		left: auto !important;
		margin: 0 !important;
		width: var(--mobile-bubble-size) !important;
		height: var(--mobile-bubble-size) !important;
		/* Base transform for stable staggered layout */
		transform: translateY(0) !important;
	}

	/* Tap effect on mobile instead of hover */
	.slbc-bubble:active {
		transform: scale(var(--hover-scale)) !important;
		z-index: 10 !important;
	}
	
	/* Reset hover state for touch devices */
	@media (hover: none) {
		.slbc-bubble:hover {
			transform: none !important;
		}
		.slbc-bubble:active {
			transform: scale(var(--hover-scale)) !important;
		}
	}

	/* Staggered CSS pattern to create cloud feeling safely */
	.slbc-bubble:nth-child(even) {
		transform: translateY(calc(var(--mobile-bubble-size) * 0.3)) !important;
	}
	
	.slbc-bubble:nth-child(3n+1) {
		transform: translateY(calc(var(--mobile-bubble-size) * -0.2)) !important;
	}
	
	.slbc-bubble:nth-child(5n) {
		transform: translateX(calc(var(--mobile-bubble-size) * -0.15)) !important;
	}
	
	.slbc-bubble:nth-child(7n) {
		transform: translateX(calc(var(--mobile-bubble-size) * 0.15)) !important;
	}
	
	/* Preserve staggered transforms on active/tap */
	.slbc-bubble:nth-child(even):active {
		transform: translateY(calc(var(--mobile-bubble-size) * 0.3)) scale(var(--hover-scale)) !important;
	}
	.slbc-bubble:nth-child(3n+1):active {
		transform: translateY(calc(var(--mobile-bubble-size) * -0.2)) scale(var(--hover-scale)) !important;
	}
	.slbc-bubble:nth-child(5n):active {
		transform: translateX(calc(var(--mobile-bubble-size) * -0.15)) scale(var(--hover-scale)) !important;
	}
	.slbc-bubble:nth-child(7n):active {
		transform: translateX(calc(var(--mobile-bubble-size) * 0.15)) scale(var(--hover-scale)) !important;
	}
}