/**
 * Custom Group Block Styles - Backdrop Blur Effects
 * Styles pour les effets de flou en arrière-plan sur les blocs Group
 */

/* Arrière-plan flou standard */
.wp-block-group.is-style-blur-backdrop {
	backdrop-filter: blur(36px);
	-webkit-backdrop-filter: blur(36px);
	background-color: rgba(255, 255, 255, 0.15) !important;
	position: relative;
	overflow: hidden;
}

/* Effet Glassmorphism complet */
.wp-block-group.is-style-glassmorphism {
	backdrop-filter: blur(15px) saturate(120%) brightness(110%);
	-webkit-backdrop-filter: blur(15px) saturate(120%) brightness(110%);
	background: linear-gradient(135deg, 
		rgba(255, 255, 255, 0.12) 0%, 
		rgba(255, 255, 255, 0.06) 100%);
	border: 1px solid rgba(255, 255, 255, 0.25);
	border-radius: 18px;
	box-shadow: 
		0 8px 32px 0 rgba(31, 38, 135, 0.37),
		inset 0 1px 0 rgba(255, 255, 255, 0.3);
	position: relative;
	overflow: hidden;
}

/* Pseudo-élément pour améliorer l'effet glassmorphism */
.wp-block-group.is-style-glassmorphism::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(135deg, 
		rgba(255, 255, 255, 0.1) 0%, 
		rgba(255, 255, 255, 0.05) 50%, 
		rgba(255, 255, 255, 0.02) 100%);
	pointer-events: none;
	z-index: -1;
}

/* Assurer que le contenu reste au-dessus */
.wp-block-group.is-style-blur-backdrop > *,
.wp-block-group.is-style-glassmorphism > * {
	position: relative;
	z-index: 1;
}

/* Versions sombres pour les thèmes sombres */
@media (prefers-color-scheme: dark) {
	.wp-block-group.is-style-glassmorphism {
		background: linear-gradient(135deg, 
			rgba(0, 0, 0, 0.15) 0%, 
			rgba(0, 0, 0, 0.08) 100%);
		border: 1px solid rgba(255, 255, 255, 0.1);
	}
}

/* Optimisations pour les performances */
.wp-block-group.is-style-blur-backdrop,
.wp-block-group.is-style-glassmorphism {
	will-change: backdrop-filter;
	transform: translateZ(0); /* Force hardware acceleration */
}

/* Support pour les navigateurs qui ne supportent pas backdrop-filter */
@supports not (backdrop-filter: blur(1px)) {
	.wp-block-group.is-style-blur-backdrop,
	.wp-block-group.is-style-glassmorphism {
		background-color: rgba(255, 255, 255, 0.9) !important;
	}
	
	@media (prefers-color-scheme: dark) {
		.wp-block-group.is-style-blur-backdrop,
		.wp-block-group.is-style-glassmorphism {
			background-color: rgba(0, 0, 0, 0.8) !important;
		}
	}
}