/* CoverVideoMosaic v2 — gallery-sourced floating covers over hero video */

.tnt-hero-stage--cover-video-mosaic {
	position: relative;
}

/* Editor-managed source gallery — visible in editor, clipped on front */
.tnt-hero-stage--cover-video-mosaic .tnt-hero-mosaic-gallery {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
	pointer-events: none;
}

.editor-styles-wrapper .tnt-hero-mosaic-gallery,
.block-editor-iframe__body .tnt-hero-mosaic-gallery {
	position: relative;
	width: auto;
	height: auto;
	margin: 1rem 0;
	overflow: visible;
	clip: auto;
	white-space: normal;
	pointer-events: auto;
	opacity: 1;
}

.tnt-hero-mosaic-overlay {
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
}

.tnt-hero-mosaic-stage {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	grid-template-rows: repeat(4, 1fr);
	width: 100%;
	height: 100%;
	gap: 0;
	padding: 0;
	box-sizing: border-box;
}

.tnt-hero-mosaic-slot {
	position: relative;
	min-width: 0;
	min-height: 0;
	overflow: hidden;
}

.tnt-hero-mosaic-slot:nth-child(1) {
	grid-column: 1 / 3;
	grid-row: 1 / 3;
}

.tnt-hero-mosaic-slot:nth-child(2) {
	grid-column: 3 / 5;
	grid-row: 1 / 2;
}

.tnt-hero-mosaic-slot:nth-child(3) {
	grid-column: 5 / 7;
	grid-row: 1 / 3;
}

.tnt-hero-mosaic-slot:nth-child(4) {
	grid-column: 1 / 2;
	grid-row: 3 / 5;
}

.tnt-hero-mosaic-slot:nth-child(5) {
	grid-column: 2 / 4;
	grid-row: 3 / 5;
}

.tnt-hero-mosaic-slot:nth-child(6) {
	grid-column: 4 / 5;
	grid-row: 2 / 4;
}

.tnt-hero-mosaic-slot:nth-child(7) {
	grid-column: 5 / 7;
	grid-row: 3 / 4;
}

.tnt-hero-mosaic-slot:nth-child(8) {
	grid-column: 4 / 6;
	grid-row: 4 / 5;
}

.tnt-hero-mosaic-slot:nth-child(9) {
	grid-column: 6 / 7;
	grid-row: 4 / 5;
}

.tnt-hero-mosaic-cover {
	position: absolute;
	inset: 0;
	opacity: 0;
	overflow: hidden;
	border-radius: 2px;
	box-shadow: 0 8px 24px rgb(0 0 0 / 35%);
	transition: opacity 1.4s ease-out;
	pointer-events: none;
}

.tnt-hero-mosaic-cover.is-visible {
	opacity: 1;
}

.tnt-hero-mosaic-cover.is-exiting {
	transition: opacity 0.6s ease-in;
	opacity: 0;
}

/* Opacity on cover shell only — drift keeps running until node removal. */
.tnt-hero-mosaic-cover__media {
	display: block;
	position: absolute;
	inset: -6%;
	overflow: hidden;
	transform: scale(1.03) translate3d(-1.25%, 1.25%, 0);
	transform-origin: 0% 100%;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
}

.tnt-hero-mosaic-cover__media.is-drifting {
	animation: tnt-hero-mosaic-drift 8s cubic-bezier(0.33, 0, 0.2, 1) forwards;
}

.tnt-hero-mosaic-cover__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
}

.tnt-hero-mosaic-cover--portrait .tnt-hero-mosaic-cover__media img {
	object-position: center 20%;
}

.tnt-hero-mosaic-cover--landscape .tnt-hero-mosaic-cover__media img {
	object-position: center center;
}

.tnt-hero-mosaic-cover--square .tnt-hero-mosaic-cover__media img {
	object-position: center center;
}

@keyframes tnt-hero-mosaic-drift {
	from {
		transform: scale(1.03) translate3d(-1.25%, 1.25%, 0);
	}

	to {
		transform: scale(1.07) translate3d(1.75%, -1.75%, 0);
	}
}

.tnt-hero-stage--cover-video-mosaic .tnt-hero-cover {
	position: relative;
	z-index: 3;
}

.tnt-hero-stage--cover-video-mosaic .tnt-hero-video-bg {
	z-index: 1;
}

@media (max-width: 768px) {
	.tnt-hero-mosaic-stage {
		grid-template-columns: repeat(4, 1fr);
		grid-template-rows: repeat(4, 1fr);
		gap: 0;
		padding: 0;
	}

	.tnt-hero-mosaic-slot:nth-child(1) {
		grid-column: 1 / 3;
		grid-row: 1 / 3;
	}

	.tnt-hero-mosaic-slot:nth-child(2) {
		grid-column: 3 / 5;
		grid-row: 1 / 2;
	}

	.tnt-hero-mosaic-slot:nth-child(3) {
		grid-column: 3 / 5;
		grid-row: 2 / 4;
	}

	.tnt-hero-mosaic-slot:nth-child(4),
	.tnt-hero-mosaic-slot:nth-child(6),
	.tnt-hero-mosaic-slot:nth-child(8),
	.tnt-hero-mosaic-slot:nth-child(9) {
		display: none;
	}

	.tnt-hero-mosaic-slot:nth-child(5) {
		grid-column: 1 / 3;
		grid-row: 3 / 5;
	}

	.tnt-hero-mosaic-slot:nth-child(7) {
		grid-column: 3 / 5;
		grid-row: 4 / 5;
	}
}

@media (prefers-reduced-motion: reduce) {
	.tnt-hero-mosaic-cover {
		transition: none;
	}

	.tnt-hero-mosaic-cover.is-reduced {
		opacity: 0.35;
	}

	.tnt-hero-mosaic-cover__media {
		animation: none !important;
		transform: scale(1.04);
	}
}