/**
 * Group Block Custom Styles - Glassmorphism Effects
 *
 * Modern glass morphism effects for core/group block
 */

/* Glassmorphism Base Style */
.wp-block-group.is-style-glassmorphism {
	background: rgba(255, 255, 255, 0.1) !important;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 16px;
	box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.1);
	padding: 2rem;
}

/* Glassmorphism Dark Variant */
.wp-block-group.is-style-glassmorphism-dark {
	background: rgba(0, 0, 0, 0.3) !important;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 16px;
	box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3);
	padding: 2rem;
	color: #ffffff;
}

/* Glassmorphism Colored Variant */
.wp-block-group.is-style-glassmorphism-colored {
	background: linear-gradient(
		135deg,
		color-mix(in srgb, var(--wp--preset--color--accent-2) 20%, transparent) 0%,
		color-mix(in srgb, var(--wp--preset--color--accent-3) 20%, transparent) 100%
	) !important;
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border: 1px solid rgba(255, 255, 255, 0.25);
	border-radius: 20px;
	box-shadow: 0 8px 32px 0
			color-mix(in srgb, var(--wp--preset--color--accent-2) 15%, transparent),
		inset 0 1px 0 0 rgba(255, 255, 255, 0.3);
	padding: 2rem;
}

/* Responsive adjustments */
@media (max-width: 768px) {
	.wp-block-group.is-style-glassmorphism,
	.wp-block-group.is-style-glassmorphism-dark,
	.wp-block-group.is-style-glassmorphism-colored {
		padding: 1.5rem;
		border-radius: 12px;
	}
}

/* Ensure content inside is readable */
.wp-block-group.is-style-glassmorphism-dark * {
	color: inherit;
}

/* Hover effects (optional) */
.wp-block-group.is-style-glassmorphism:hover,
.wp-block-group.is-style-glassmorphism-dark:hover,
.wp-block-group.is-style-glassmorphism-colored:hover {
	transform: translateY(-2px);
	transition: transform 0.3s ease;
	box-shadow: 0 12px 40px 0 rgba(0, 0, 0, 0.15);
}