/**
 * Gallery Media — feature / two-four layout geometry (outside ZTV hashed CSS).
 *
 * Geometry is owned by the preset (big cell), not by intrinsic photo/video size.
 * feature-left: 2fr | 1fr (big in col 1). feature-right: 1fr | 2fr (big in col 2).
 * object-fit is independent; video letterbox uses light frame background.
 */

@media (min-width: 640px) {
	.ital-gallery-media__row--feature-left {
		grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
		grid-template-rows: 1fr 1fr;
		align-items: stretch;
	}

	.ital-gallery-media__row--feature-right {
		grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
		grid-template-rows: 1fr 1fr;
		align-items: stretch;
	}

	.ital-gallery-media__row--feature-left > .ital-gallery-media__cell:first-child,
	.ital-gallery-media__row--feature-right > .ital-gallery-media__cell:first-child {
		display: flex;
		flex-direction: column;
		min-height: 0;
		min-width: 0;
		align-self: start;
	}

	.ital-gallery-media__row--feature-left > .ital-gallery-media__cell:first-child .ital-gallery-media__media,
	.ital-gallery-media__row--feature-left > .ital-gallery-media__cell:first-child .ital-gallery-media__trigger,
	.ital-gallery-media__row--feature-right > .ital-gallery-media__cell:first-child .ital-gallery-media__media,
	.ital-gallery-media__row--feature-right > .ital-gallery-media__cell:first-child .ital-gallery-media__trigger {
		display: block;
		width: 100%;
		min-height: 0;
	}

	/*
	 * Big frame owns mosaic height via row media_ratio (default / original → 16:9).
	 * Small cells stretch to match; they must NOT set aspect-ratio.
	 */
	.ital-gallery-media__row--feature-left > .ital-gallery-media__cell:first-child .ital-gallery-media__frame,
	.ital-gallery-media__row--feature-right > .ital-gallery-media__cell:first-child .ital-gallery-media__frame {
		position: relative;
		width: 100%;
		height: auto;
		min-height: 0;
	}

	.ital-gallery-media__row--feature-left.ital-gallery-media__row--ratio-original > .ital-gallery-media__cell:first-child .ital-gallery-media__frame,
	.ital-gallery-media__row--feature-right.ital-gallery-media__row--ratio-original > .ital-gallery-media__cell:first-child .ital-gallery-media__frame {
		aspect-ratio: 16 / 9;
	}

	.ital-gallery-media__row--feature-left > .ital-gallery-media__cell:nth-child(n + 2),
	.ital-gallery-media__row--feature-right > .ital-gallery-media__cell:nth-child(n + 2) {
		display: flex;
		flex-direction: column;
		min-height: 0;
		min-width: 0;
		height: 100%;
	}

	.ital-gallery-media__row--feature-left > .ital-gallery-media__cell:nth-child(n + 2) .ital-gallery-media__media,
	.ital-gallery-media__row--feature-left > .ital-gallery-media__cell:nth-child(n + 2) .ital-gallery-media__trigger,
	.ital-gallery-media__row--feature-right > .ital-gallery-media__cell:nth-child(n + 2) .ital-gallery-media__media,
	.ital-gallery-media__row--feature-right > .ital-gallery-media__cell:nth-child(n + 2) .ital-gallery-media__trigger {
		display: flex;
		flex-direction: column;
		flex: 1 1 auto;
		min-height: 0;
		height: 100%;
		width: 100%;
	}

	.ital-gallery-media__row--feature-left > .ital-gallery-media__cell:nth-child(n + 2) .ital-gallery-media__frame,
	.ital-gallery-media__row--feature-right > .ital-gallery-media__cell:nth-child(n + 2) .ital-gallery-media__frame {
		position: relative;
		flex: 1 1 auto;
		width: 100%;
		height: 100%;
		min-height: 0;
		aspect-ratio: unset !important;
	}

	.ital-gallery-media__row--feature-left > .ital-gallery-media__cell:nth-child(n + 2) .ital-gallery-media__img,
	.ital-gallery-media__row--feature-left > .ital-gallery-media__cell:nth-child(n + 2) .ital-gallery-media__poster,
	.ital-gallery-media__row--feature-left > .ital-gallery-media__cell:nth-child(n + 2) .ital-gallery-media__poster-fallback,
	.ital-gallery-media__row--feature-right > .ital-gallery-media__cell:nth-child(n + 2) .ital-gallery-media__img,
	.ital-gallery-media__row--feature-right > .ital-gallery-media__cell:nth-child(n + 2) .ital-gallery-media__poster,
	.ital-gallery-media__row--feature-right > .ital-gallery-media__cell:nth-child(n + 2) .ital-gallery-media__poster-fallback {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		max-width: none;
		object-fit: cover;
		object-position: center;
	}

	.ital-gallery-media__row--feature-left.ital-gallery-media__row--ratio-original > .ital-gallery-media__cell:nth-child(n + 2) .ital-gallery-media__img,
	.ital-gallery-media__row--feature-left.ital-gallery-media__row--ratio-original > .ital-gallery-media__cell:nth-child(n + 2) .ital-gallery-media__poster,
	.ital-gallery-media__row--feature-right.ital-gallery-media__row--ratio-original > .ital-gallery-media__cell:nth-child(n + 2) .ital-gallery-media__img,
	.ital-gallery-media__row--feature-right.ital-gallery-media__row--ratio-original > .ital-gallery-media__cell:nth-child(n + 2) .ital-gallery-media__poster {
		object-fit: contain;
	}

	.ital-gallery-media__row--feature-left > .ital-gallery-media__cell:nth-child(n + 2) .ital-gallery-media__video,
	.ital-gallery-media__row--feature-right > .ital-gallery-media__cell:nth-child(n + 2) .ital-gallery-media__video,
	.ital-gallery-media__row--feature-left > .ital-gallery-media__cell:first-child .ital-gallery-media__video,
	.ital-gallery-media__row--feature-right > .ital-gallery-media__cell:first-child .ital-gallery-media__video {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		max-width: none;
		object-position: center;
		background: transparent;
	}

	/* Extra items beyond the 3-slot mosaic start below (full width). */
	.ital-gallery-media__row--feature-left > .ital-gallery-media__cell:nth-child(n + 4),
	.ital-gallery-media__row--feature-right > .ital-gallery-media__cell:nth-child(n + 4) {
		grid-column: 1 / -1;
		grid-row: auto;
		height: auto;
	}

	.ital-gallery-media__row--feature-left > .ital-gallery-media__cell:nth-child(n + 4) .ital-gallery-media__frame,
	.ital-gallery-media__row--feature-right > .ital-gallery-media__cell:nth-child(n + 4) .ital-gallery-media__frame {
		aspect-ratio: inherit;
		height: auto;
	}
}

/* Documents mode: never crop certificate/scan content. */
.ital-gallery-media--mode-documents .ital-gallery-media__img,
.ital-gallery-media--mode-documents .ital-gallery-media__poster,
.ital-gallery-media--mode-documents .ital-gallery-media__poster-fallback,
.ital-gallery-media--mode-documents .ital-gallery-media__video {
	object-fit: contain !important;
	object-position: center !important;
}

/*
 * Documents / certificates — equal portrait grid (A4 ≈ 1 : 1.414).
 * Photo/video layout presets stay untouched (other mode).
 *
 * Desktop col modifiers use 2 classes; responsive overrides must match
 * that specificity or docs-cols-N permanently wins over mobile/tablet.
 */
.ital-gallery-media--mode-documents {
	--ital-gmv-docs-cols: 4;
}

.ital-gallery-media--mode-documents.ital-gallery-media--docs-cols-3 {
	--ital-gmv-docs-cols: 3;
}

.ital-gallery-media--mode-documents.ital-gallery-media--docs-cols-4 {
	--ital-gmv-docs-cols: 4;
}

.ital-gallery-media--mode-documents.ital-gallery-media--docs-cols-5 {
	--ital-gmv-docs-cols: 5;
}

.ital-gallery-media--mode-documents .ital-gallery-media__row--docs {
	display: grid;
	grid-template-columns: repeat(var(--ital-gmv-docs-cols), minmax(0, 1fr));
	grid-template-rows: none;
	align-items: start;
	width: 100%;
	height: auto;
	gap: var(--ital-gmv-gap, 16px);
}

.ital-gallery-media--mode-documents .ital-gallery-media__row--docs > .ital-gallery-media__cell {
	grid-column: auto;
	grid-row: auto;
	height: auto;
	min-width: 0;
}

.ital-gallery-media--mode-documents .ital-gallery-media__row--docs .ital-gallery-media__frame {
	aspect-ratio: 1 / 1.414;
	width: 100%;
	height: auto;
	background: #f0f2f0;
}

/* Tablet: 2 columns (same specificity as docs-cols-* desktop presets). */
@media (max-width: 1023px) {
	.ital-gallery-media--mode-documents,
	.ital-gallery-media--mode-documents.ital-gallery-media--docs-cols-3,
	.ital-gallery-media--mode-documents.ital-gallery-media--docs-cols-4,
	.ital-gallery-media--mode-documents.ital-gallery-media--docs-cols-5 {
		--ital-gmv-docs-cols: 2;
	}
}

/*
 * Phones ≤599px: one column; height from the image itself.
 * Cause of strip collapse (0.1.437): frame got aspect-ratio:auto while
 * .ital-gallery-media__img stayed position:absolute (out of flow) → frame
 * height ≈ padding only. object-fit:contain cannot fix a collapsed box.
 */
@media (max-width: 599px) {
	.ital-gallery-media--mode-documents,
	.ital-gallery-media--mode-documents.ital-gallery-media--docs-cols-3,
	.ital-gallery-media--mode-documents.ital-gallery-media--docs-cols-4,
	.ital-gallery-media--mode-documents.ital-gallery-media--docs-cols-5 {
		--ital-gmv-docs-cols: 1;
	}

	.ital-gallery-media--mode-documents .ital-gallery-media__row--docs .ital-gallery-media__frame,
	.ital-gallery-media--mode-documents .ital-gallery-media__frame {
		aspect-ratio: auto !important;
		height: auto !important;
		min-height: 0;
		overflow: visible;
	}

	.ital-gallery-media--mode-documents .ital-gallery-media__row--docs .ital-gallery-media__img,
	.ital-gallery-media--mode-documents .ital-gallery-media__img {
		position: static !important;
		inset: auto !important;
		width: 100% !important;
		height: auto !important;
		max-width: 100%;
		object-fit: contain !important;
		object-position: center top !important;
	}
}

@media (min-width: 1024px) {
	.ital-gallery-media__row--feature-left {
		grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
	}

	.ital-gallery-media__row--feature-right {
		grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
	}
}

/* Mobile: single column — no feature span. */
@media (max-width: 639px) {
	.ital-gallery-media__row--feature-left,
	.ital-gallery-media__row--feature-right,
	.ital-gallery-media__row--two-four {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: none;
	}

	.ital-gallery-media__row--feature-left > .ital-gallery-media__cell:first-child,
	.ital-gallery-media__row--feature-right > .ital-gallery-media__cell:first-child,
	.ital-gallery-media__row--feature-right > .ital-gallery-media__cell:nth-child(n + 2),
	.ital-gallery-media__row--two-four > .ital-gallery-media__cell {
		grid-column: auto;
		grid-row: auto;
		height: auto;
	}
}