/*
 * Generic media container for <video>/<img>, used for the hero columns,
 * wide media panels, and mood photos. Modifier classes set the aspect
 * ratio; --placeholder is for sections that have no source video/image yet.
 */

.media-frame {
	position: relative;
	width: 100%;
	overflow: hidden;
	border-radius: var(--radius-0);
	background-color: var(--color-ink);
}

.media-frame__video,
.media-frame__image {
	display: block; /* iframe jest domyślnie inline — bez tego dokłada kilka px odstępu pod spodem */
	width: 100%;
	height: 100%;
	border: 0;
	object-fit: cover;
}

/* Placeholder tło — brak dostarczonego pliku wideo/zdjęcia na tym etapie */
.media-frame--placeholder {
	background: linear-gradient(135deg, var(--color-red-dark), var(--color-ink));
}

.media-frame--placeholder-accent {
	background: linear-gradient(135deg, var(--color-ink), var(--color-red-dark));
}

/*
 * Proporcje. Figma miała tu ~864/994 (hero, galeria PDP, karty produktów,
 * pas mediów) — świadomie zaokrąglone do czystego 1:1 (--square) zamiast
 * trzymania się niedokładnej wartości z pliku, na życzenie użytkownika.
 */
.media-frame--square {
	aspect-ratio: 1 / 1;
}

.media-frame--tall {
	aspect-ratio: 591 / 864; /* zdjęcia "mood", ref. Figma */
}

.media-frame--wide {
	aspect-ratio: 16 / 9;
}

@media (min-width: 900px) {
	.media-frame--wide {
		aspect-ratio: 21 / 9;
	}
}