/* Blok: Video YouTube (template-parts/blocks/video-youtube.php)
 * Plik samodzielny (poza SCSS/gulp) — ładowany tylko na stronach z blokiem
 * oraz w płótnie edytora (abakon_block_editor_preview_stylesheets()). */

.video-youtube {
	padding: 60px 0;
	background-color: #fff;
}

/* --gold pochodzi z ustawień strony; wartość awaryjna = ten sam odcień */
.video-youtube--gold {
	background-color: var(--gold, #c6b083);
}

.video-youtube--dark {
	background-color: #003b83;
}

.video-youtube__inner {
	width: 80%;
	margin: 0 auto;
}

.video-youtube__frame {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: 6px;
	background-color: #000;
}

.video-youtube__thumb,
.video-youtube__frame iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.video-youtube__thumb {
	object-fit: cover;
	transition: opacity .25s ease;
}

.video-youtube__play {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
}

.video-youtube__play svg {
	width: 84px;
	height: auto;
	transition: transform .2s ease;
}

.video-youtube__play-bg {
	fill: #212121;
	fill-opacity: .8;
	transition: fill .2s ease, fill-opacity .2s ease;
}

.video-youtube__play:hover svg,
.video-youtube__play:focus-visible svg {
	transform: scale(1.08);
}

.video-youtube__play:hover .video-youtube__play-bg,
.video-youtube__play:focus-visible .video-youtube__play-bg {
	fill: #f00;
	fill-opacity: 1;
}

.video-youtube__frame:hover .video-youtube__thumb {
	opacity: .9;
}

.video-youtube__play:focus-visible {
	outline: 3px solid #fff;
	outline-offset: -6px;
}

.video-youtube__fallback {
	position: absolute;
	left: 50%;
	bottom: 20px;
	transform: translateX(-50%);
	padding: 8px 16px;
	background: #fff;
	color: #003b83;
}

/* Mobile: film na pełną szerokość ekranu, bez zaokrągleń */
@media (max-width: 767px) {
	.video-youtube {
		padding: 40px 0;
	}

	.video-youtube__inner {
		width: 100%;
	}

	.video-youtube__frame {
		border-radius: 0;
	}

	.video-youtube__play svg {
		width: 68px;
	}
}