/* Wetzlar Image Mosaic – front-end styles */

.wetzlar-mosaic {
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: var(--wm-row-gap, 5px);
}

.wetzlar-mosaic--flush-top {
	margin-top: 0 !important;
	padding-top: 0 !important;
}

.wetzlar-mosaic__row {
	display: flex;
	gap: var(--wm-cell-gap, 5px);
	align-items: stretch;
	width: 100%;
}

.wetzlar-mosaic__col--1 { flex: 0 0 var(--wm-col1, 25%); max-width: var(--wm-col1, 25%); }
.wetzlar-mosaic__col--2 { flex: 0 0 var(--wm-col2, 50%); max-width: var(--wm-col2, 50%); }
.wetzlar-mosaic__col--3 { flex: 0 0 var(--wm-col3, 25%); max-width: var(--wm-col3, 25%); }

.wetzlar-mosaic__cell {
	position: relative;
	overflow: hidden;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100%;
}

.wetzlar-mosaic__img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: cover;
	opacity: var(--wm-opacity, 1);
	border: var(--wm-border-w, 0) solid var(--wm-border-c, #333);
	border-radius: var(--wm-border-r, 0);
	transition: opacity var(--wm-duration, 800ms) ease,
	            transform var(--wm-duration, 800ms) ease;
}

.wetzlar-mosaic__img--active {
	position: relative;
	z-index: 1;
}

/* ── Fade ── */
.wetzlar-mosaic__img--enter-fade {
	position: absolute;
	inset: 0;
	z-index: 2;
	opacity: 0;
	animation: wm-fade-in var(--wm-duration, 800ms) ease forwards;
}
.wetzlar-mosaic__img--exit-fade {
	z-index: 0;
}
@keyframes wm-fade-in {
	to { opacity: var(--wm-opacity, 1); }
}

/* ── Slide Up ── */
.wetzlar-mosaic__img--enter-slide-up {
	position: absolute;
	inset: 0;
	z-index: 2;
	transform: translateY(100%);
	animation: wm-slide-up-in var(--wm-duration, 800ms) ease forwards;
}
.wetzlar-mosaic__img--exit-slide-up {
	z-index: 0;
}
@keyframes wm-slide-up-in {
	to { transform: translateY(0); opacity: var(--wm-opacity, 1); }
}

/* ── Slide Down ── */
.wetzlar-mosaic__img--enter-slide-down {
	position: absolute;
	inset: 0;
	z-index: 2;
	transform: translateY(-100%);
	animation: wm-slide-down-in var(--wm-duration, 800ms) ease forwards;
}
.wetzlar-mosaic__img--exit-slide-down {
	z-index: 0;
}
@keyframes wm-slide-down-in {
	to { transform: translateY(0); opacity: var(--wm-opacity, 1); }
}

/* ── Slide Left ── */
.wetzlar-mosaic__img--enter-slide-left {
	position: absolute;
	inset: 0;
	z-index: 2;
	transform: translateX(100%);
	animation: wm-slide-left-in var(--wm-duration, 800ms) ease forwards;
}
.wetzlar-mosaic__img--exit-slide-left {
	z-index: 0;
}
@keyframes wm-slide-left-in {
	to { transform: translateX(0); opacity: var(--wm-opacity, 1); }
}

/* ── Slide Right ── */
.wetzlar-mosaic__img--enter-slide-right {
	position: absolute;
	inset: 0;
	z-index: 2;
	transform: translateX(-100%);
	animation: wm-slide-right-in var(--wm-duration, 800ms) ease forwards;
}
.wetzlar-mosaic__img--exit-slide-right {
	z-index: 0;
}
@keyframes wm-slide-right-in {
	to { transform: translateX(0); opacity: var(--wm-opacity, 1); }
}

/* ── Zoom In ── */
.wetzlar-mosaic__img--enter-zoom-in {
	position: absolute;
	inset: 0;
	z-index: 2;
	transform: scale(0.5);
	opacity: 0;
	animation: wm-zoom-in var(--wm-duration, 800ms) ease forwards;
}
.wetzlar-mosaic__img--exit-zoom-in {
	z-index: 0;
}
@keyframes wm-zoom-in {
	to { transform: scale(1); opacity: var(--wm-opacity, 1); }
}

/* ── Zoom Out ── */
.wetzlar-mosaic__img--enter-zoom-out {
	position: absolute;
	inset: 0;
	z-index: 2;
	transform: scale(1.5);
	opacity: 0;
	animation: wm-zoom-out var(--wm-duration, 800ms) ease forwards;
}
.wetzlar-mosaic__img--exit-zoom-out {
	z-index: 0;
}
@keyframes wm-zoom-out {
	to { transform: scale(1); opacity: var(--wm-opacity, 1); }
}

/* ── Flip Horizontal ── */
.wetzlar-mosaic__img--enter-flip-h {
	position: absolute;
	inset: 0;
	z-index: 2;
	transform: rotateY(90deg);
	animation: wm-flip-h-in var(--wm-duration, 800ms) ease forwards;
}
.wetzlar-mosaic__img--exit-flip-h {
	animation: wm-flip-h-out calc( var(--wm-duration, 800ms) / 2 ) ease forwards;
	z-index: 1;
}
@keyframes wm-flip-h-in {
	0%   { transform: rotateY(90deg); opacity: 0; }
	50%  { transform: rotateY(90deg); opacity: 0; }
	100% { transform: rotateY(0deg);  opacity: var(--wm-opacity, 1); }
}
@keyframes wm-flip-h-out {
	0%   { transform: rotateY(0deg);   opacity: var(--wm-opacity, 1); }
	100% { transform: rotateY(-90deg); opacity: 0; }
}

/* ── Flip Vertical ── */
.wetzlar-mosaic__img--enter-flip-v {
	position: absolute;
	inset: 0;
	z-index: 2;
	transform: rotateX(90deg);
	animation: wm-flip-v-in var(--wm-duration, 800ms) ease forwards;
}
.wetzlar-mosaic__img--exit-flip-v {
	animation: wm-flip-v-out calc( var(--wm-duration, 800ms) / 2 ) ease forwards;
	z-index: 1;
}
@keyframes wm-flip-v-in {
	0%   { transform: rotateX(90deg); opacity: 0; }
	50%  { transform: rotateX(90deg); opacity: 0; }
	100% { transform: rotateX(0deg);  opacity: var(--wm-opacity, 1); }
}
@keyframes wm-flip-v-out {
	0%   { transform: rotateX(0deg);   opacity: var(--wm-opacity, 1); }
	100% { transform: rotateX(-90deg); opacity: 0; }
}

/* ── Mobile: stack vertically ── */
@media (max-width: 768px) {
	.wetzlar-mosaic__row {
		flex-direction: column;
	}
	.wetzlar-mosaic__col--1,
	.wetzlar-mosaic__col--2,
	.wetzlar-mosaic__col--3 {
		flex: 0 0 100%;
		max-width: 100%;
	}
}