/* ==========================================================================
   Image Group Block — style.css
   ========================================================================== */

/* Block wrapper
   ========================================================================== */

.block-image-group {
	box-sizing: border-box;
	width: 100%;
}


/* Vertical padding variants
   ========================================================================== */

.block-image-group.padding-default {
	padding-top: 2rem;
	padding-bottom: 2rem;
}

.block-image-group.padding-medium {
	padding-top: 4rem;
	padding-bottom: 4rem;
}

.block-image-group.padding-large {
	padding-top: 6rem;
	padding-bottom: 6rem;
}


/* Inner image row
   ========================================================================== */

.block-image-group .image-group__inner {
	display: flex;
	flex-wrap: wrap;
	gap: 2rem;
	width: 100%;
}


/* Alignment
   ========================================================================== */

.block-image-group.align-left .image-group__inner {
	justify-content: flex-start;
}

.block-image-group.align-centre .image-group__inner {
	justify-content: center;
}

.block-image-group.align-right .image-group__inner {
	justify-content: flex-end;
}


/* Individual image items
   ========================================================================== */

.block-image-group .image-group__item {
	flex-shrink: 0;
	overflow: hidden;
	display: block;
}

.block-image-group .image-group__item img {
	display: block;
	width: auto;
	height: 100%;
	object-fit: cover;
	object-position: center;
	max-width: none; /* prevent theme max-width overrides breaking height */
}


/* Responsive — stack to a scrollable row on small screens
   ========================================================================== */

@media (max-width: 768px) {
	.block-image-group .image-group__inner {
		flex-wrap: nowrap;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none; /* Firefox */
		gap: 0.75rem;
	}

	.block-image-group .image-group__inner::-webkit-scrollbar {
		display: none; /* Chrome / Safari */
	}

	.block-image-group .image-group__item {
		flex-shrink: 0; /* keep images their natural width; scroll to see more */
	}

	/* Tighten padding on mobile */
	.block-image-group.padding-medium {
		padding-top: 2.5rem;
		padding-bottom: 2.5rem;
	}

	.block-image-group.padding-large {
		padding-top: 3.5rem;
		padding-bottom: 3.5rem;
	}
}