/**
 * Bouncing Gallery Block Styles
 * Styles for the Bouncing Gallery custom block
 *
 * @package made-to-thrive-2026-base
 * @since 1.0.0
 */

/* Main Container */
.bouncing-gallery-block {
	width: 100%;
	margin: 110px auto 73px;
	position: relative;
	padding: 0;
}

.bouncing-gallery-container {
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0;
	position: relative;
}

/* Gallery Images Container */
.bouncing-gallery-images {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 500px;
	padding: 0;
}

/* Empty State */
.bouncing-gallery-empty {
	text-align: center;
	padding: 3rem 20px;
	color: inherit;
}

.bouncing-gallery-empty p {
	margin: 0;
	font-size: 1rem;
}

/* Image Wrapper */
.bouncing-gallery-image-wrapper {
	position: absolute;
	transition: transform 0.3s ease, z-index 0.3s ease;
	cursor: pointer;
}

/* Individual Image Positioning with Overlap */
.bouncing-gallery-image-wrapper[data-image-index="0"] {
	transform: rotate(-10deg);
	left: -57px;
	top: 63px;
	z-index: 2;
}

.bouncing-gallery-image-wrapper[data-image-index="1"] {
	z-index: 1;
	transform: rotate(0deg);
	left: 238px;
	top: 0;
}

.bouncing-gallery-image-wrapper[data-image-index="2"] {
	z-index: 3;
	transform: rotate(-10deg);
	left: 161px;
	right: 0;
	margin: auto;
	width: 342px;
	top: 61px;
}

.bouncing-gallery-image-wrapper[data-image-index="3"] {
	z-index: 2;
	transform: rotate(10deg);
	right: 115px;
	top: 1px;
}

.bouncing-gallery-image-wrapper[data-image-index="4"] {
	z-index: 1;
	transform: rotate(5deg);
	right: -79px;
	top: 96px;
}

/* Image Styling */
.bouncing-gallery-image {
	width: 100%;
	width: 310px;
	height: 412px;
	border-radius: 25px;
	display: block;
	transition: box-shadow 0.3s ease;
	object-fit: cover;
}


/* Apply bounce with existing transforms */
.bouncing-gallery-image-wrapper[data-image-index="0"]:hover {
	transform: rotate(-10deg) translateY(-30px);
}

.bouncing-gallery-image-wrapper[data-image-index="1"]:hover {
	transform: rotate(-0deg) translateY(-30px);
}

.bouncing-gallery-image-wrapper[data-image-index="2"]:hover {
	transform: rotate(-10deg) translateY(-30px);
}

.bouncing-gallery-image-wrapper[data-image-index="3"]:hover {
	transform: rotate(10deg) translateY(-30px);
}

.bouncing-gallery-image-wrapper[data-image-index="4"]:hover {
	transform: rotate(5deg) translateY(-30px);
}

/* Focus States for Accessibility */
.bouncing-gallery-image-wrapper:focus-visible {
	outline: 3px solid var(--wp--preset--color--cornflower, #5B66C6);
	outline-offset: 3px;
	border-radius: 15px;
	z-index: 10;
}


@media (max-width: 1390px) {
	.bouncing-gallery-image {
		width:250px;
		height:342px;
	}
	.bouncing-gallery-image-wrapper[data-image-index="1"] {
		left:242px;
	}
	.bouncing-gallery-image-wrapper[data-image-index="0"] {
		left:0;
	}
	.bouncing-gallery-image-wrapper[data-image-index="3"] {
		right:190px;
	}
	.bouncing-gallery-image-wrapper[data-image-index="4"] {
		right:0;
	}
}
/* Responsive Design */
@media (max-width: 1280px) {
	.bouncing-gallery-container {
		max-width:1000px;
	}
	.bouncing-gallery-image {
		width:210px;
		height:302px;
	}
	.bouncing-gallery-image-wrapper[data-image-index="1"] {
		left:202px;
	}
	.bouncing-gallery-image-wrapper[data-image-index="0"] {
		left:0;
	}
	.bouncing-gallery-image-wrapper[data-image-index="3"] {
		right:190px;
	}
	.bouncing-gallery-image-wrapper[data-image-index="4"] {
		right:0;
	}
}
@media (max-width:1080px) {
	.bouncing-gallery-block {
		margin: 50px auto 0;
	}
	.bouncing-gallery-container {
		max-width:750px
	}
	.bouncing-gallery-image {
		width:180px;
		height:270px;
	}
	.bouncing-gallery-image-wrapper[data-image-index="1"] {
		left:130px;
	}
	.bouncing-gallery-image-wrapper[data-image-index="0"] {
		left:0;
	}
	.bouncing-gallery-image-wrapper[data-image-index="3"] {
		right:130px;
	}
	.bouncing-gallery-image-wrapper[data-image-index="4"] {
		right:0;
	}
}
@media (max-width: 768px) {
	
	.bouncing-gallery-container {
		padding: 0 20px;
		max-width: 500px;
	}
	.bouncing-gallery-image-wrapper[data-image-index="0"] {
		top:0;
	}
	.bouncing-gallery-images {
		min-height:700px;
	}
	.bouncing-gallery-image-wrapper[data-image-index="1"] {
		left:inherit;
		right:0;
		top:0;
	}
	    .bouncing-gallery-image-wrapper[data-image-index="3"] {
        right: 130px;
			top:100px;
    }
	.bouncing-gallery-image-wrapper[data-image-index="2"] {
		left:0;
		top:300px
	}
	    .bouncing-gallery-image-wrapper[data-image-index="4"] {
        right: 0;
			top:280px;
    }

}

@media (max-width: 550px) {
	.bouncing-gallery-container {
		padding: 0 0px;
		max-width: 300px;
	}
	.bouncing-gallery-image {
		width: 172px;
	height: 229px;
	}
	.bouncing-gallery-image-wrapper[data-image-index="0"] {
	top: 31px;
	left: -29px;
	}
	.bouncing-gallery-image-wrapper[data-image-index="3"] {
	right: 0;
	top: 210px;
	}
	.bouncing-gallery-image-wrapper[data-image-index="2"] {
	left: -26px;
	top: 266px;
	transform: rotate(-3deg);
	}
			    .bouncing-gallery-image-wrapper[data-image-index="4"] {
			    	right: 61px;
			    	top: 455px;
			    }
									    .bouncing-gallery-images {
									    	min-height: 780px;
									    }
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
	.bouncing-gallery-image {
		border: 2px solid currentColor;
	}
	
	.bouncing-gallery-image-wrapper:focus-visible {
		outline-width: 4px;
	}
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
	.bouncing-gallery-image-wrapper,
	.bouncing-gallery-image {
		transition: none;
		animation: none !important;
	}
	
	.bouncing-gallery-image-wrapper:hover {
		transform: inherit !important;
	}
	
	.bouncing-gallery-image-wrapper:focus-visible {
		transform: scale(1.05);
	}
}

/* Editor Styles - Ensure images are properly sized in block editor */
.block-editor-block-preview__container .bouncing-gallery-image,
.editor-styles-wrapper .bouncing-gallery-image,
.wp-block .bouncing-gallery-image,
.block-editor-block-list__block .bouncing-gallery-image,
.acf-block-preview .bouncing-gallery-image {
	max-width: 300px !important;
	width: 100% !important;
	height: auto !important;
	object-fit: cover !important;
}

.block-editor-block-preview__container .bouncing-gallery-images,
.editor-styles-wrapper .bouncing-gallery-images,
.wp-block .bouncing-gallery-images,
.block-editor-block-list__block .bouncing-gallery-images,
.acf-block-preview .bouncing-gallery-images {
	position: relative !important;
	display: flex !important;
	justify-content: center !important;
	align-items: center !important;
	min-height: 400px !important;
	padding: 2rem 0 !important;
	width: 100% !important;
	box-sizing: border-box !important;
}

.block-editor-block-preview__container .bouncing-gallery-image-wrapper,
.editor-styles-wrapper .bouncing-gallery-image-wrapper,
.wp-block .bouncing-gallery-image-wrapper,
.block-editor-block-list__block .bouncing-gallery-image-wrapper,
.acf-block-preview .bouncing-gallery-image-wrapper {
	position: absolute !important;
	max-width: 300px !important;
	width: auto !important;
	box-sizing: border-box !important;
}

.block-editor-block-preview__container .bouncing-gallery-container,
.editor-styles-wrapper .bouncing-gallery-container,
.wp-block .bouncing-gallery-container,
.block-editor-block-list__block .bouncing-gallery-container,
.acf-block-preview .bouncing-gallery-container {
	max-width: 1200px !important;
	width: 100% !important;
	margin: 0 auto !important;
	padding: 0 20px !important;
	box-sizing: border-box !important;
}

/* Ensure block wrapper doesn't overflow in editor */
.block-editor-block-preview__container .bouncing-gallery-block,
.editor-styles-wrapper .bouncing-gallery-block,
.wp-block[data-type="cwp/bouncing-gallery"],
.acf-block-preview .bouncing-gallery-block {
	max-width: 100% !important;
	width: 100% !important;
	box-sizing: border-box !important;
	overflow: visible !important;
}