/* ModulHaus — krótki klip wideo w treści, ładowany po kliknięciu (mh-clip.js).
 *
 * Materiał z telefonu klientki jest pionowy (9:16), więc bez ograniczenia
 * szerokości zająłby w kolumnie tekstu ponad dwa ekrany wysokości. Trzymamy go
 * przy 300 px — czyta się jak wstawka demonstracyjna obok akapitu, a nie jak
 * druga sekcja strony.
 *
 * Prostokątne krawędzie zgodnie z resztą serwisu (border-radius: 0).
 */

.mh-clip {
	margin: 0 0 26px;
	max-width: 300px;
}

.mh-clip__trigger {
	display: block;
	position: relative;
	width: 100%;
	padding: 0;
	border: 0;
	background: #0F1923;
	cursor: pointer;
	line-height: 0;
	/* Motyw nadaje przyciskom złote tło i promień — tu chcemy czysty kadr. */
	border-radius: 0;
	box-shadow: none;
}

.mh-clip__poster {
	display: block;
	width: 100%;
	height: auto;
}

/* Trójkąt „play" na półprzezroczystym kwadracie — bez pliku graficznego. */
.mh-clip__play {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 62px;
	height: 62px;
	transform: translate(-50%, -50%);
	background: rgba(15, 25, 35, .72);
	transition: background .25s ease;
}

.mh-clip__play::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 54%;
	width: 0;
	height: 0;
	transform: translate(-50%, -50%);
	border-left: 19px solid #FFFFFF;
	border-top: 12px solid transparent;
	border-bottom: 12px solid transparent;
}

.mh-clip__trigger:hover .mh-clip__play,
.mh-clip__trigger:focus-visible .mh-clip__play {
	background: #C8A96E;
}

.mh-clip__trigger:focus-visible {
	outline: 2px solid #C8A96E;
	outline-offset: 3px;
}

.mh-clip__player {
	display: block;
	width: 100%;
	height: auto;
	background: #0F1923;
}

.mh-clip__caption {
	margin: 10px 0 0;
	color: #626B72;
	font-size: 14px;
	line-height: 1.5;
}

@media (max-width: 767px) {
	.mh-clip {
		max-width: 260px;
		margin-left: auto;
		margin-right: auto;
	}
}