/* Canvas = front. Overlay play su core/image (data-type in editor). */

.wp-block-turchet-video-teaser > .container,
.wp-block-turchet-video-teaser > .block-editor-inner-blocks > .block-editor-block-list__layout {
	width: min(calc(100% - 32px), var(--container));
	margin-inline: auto;
}

.editor-styles-wrapper .wp-block-turchet-video-teaser {
	width: 100%;
	max-width: none;
}

.wp-block-turchet-video-teaser-copy,
.wp-block-turchet-video-teaser-media {
	min-width: 0;
	width: 100%;
}

/* Home: stessi 2 figli di .split (copy | media). */
.wp-block-turchet-video-teaser.section--navy > .split,
.wp-block-turchet-video-teaser.section--navy > .block-editor-inner-blocks > .block-editor-block-list__layout {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(32px, 5vw, 80px);
	align-items: center;
}

.wp-block-turchet-video-teaser.section--navy .lead {
	margin: 18px 0 28px;
}

.wp-block-turchet-video-teaser.section--cream .wp-block-heading + .lead,
.wp-block-turchet-video-teaser.section--cream [data-type="core/heading"] + .lead {
	margin: 16px 0 28px;
}

.wp-block-turchet-video-teaser.section--cream .wp-block-image + .lead,
.wp-block-turchet-video-teaser.section--cream [data-type="core/image"] + .lead {
	margin: 16px 0 0;
}

.wp-block-turchet-video-teaser .wp-block-buttons {
	margin: 0;
}

.wp-block-turchet-video-teaser .wp-block-button {
	margin: 0;
}

.wp-block-turchet-video-teaser .wp-block-image.video-frame,
.wp-block-turchet-video-teaser [data-type="core/image"] {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--navy);
	margin: 0;
	width: 100%;
}

.wp-block-turchet-video-teaser .wp-block-image.video-frame img,
.wp-block-turchet-video-teaser [data-type="core/image"] img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.65;
}

.wp-block-turchet-video-teaser .wp-block-image.video-frame a {
	display: block;
	position: absolute;
	inset: 0;
	z-index: 1;
}

.wp-block-turchet-video-teaser .play {
	pointer-events: none;
	z-index: 2;
}

/* Overlay editor: il figlio core/image è il canvas, non il markup front. */
.wp-block-turchet-video-teaser [data-type="core/image"]::after {
	content: var(--video-teaser-play, "Play");
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 86px;
	height: 86px;
	border: 1px solid var(--gold-soft);
	border-radius: 50%;
	display: grid;
	place-items: center;
	background: color-mix(in srgb, var(--color-black) 35%, transparent);
	color: var(--white);
	font-size: 0.72rem;
	letter-spacing: 0.04em;
	pointer-events: none;
	z-index: 2;
}

@media (max-width: 860px) {
	.wp-block-turchet-video-teaser > .container,
	.wp-block-turchet-video-teaser > .block-editor-inner-blocks > .block-editor-block-list__layout {
		width: min(calc(100% - 24px), var(--container));
	}

	.wp-block-turchet-video-teaser.section--navy > .split,
	.wp-block-turchet-video-teaser.section--navy > .block-editor-inner-blocks > .block-editor-block-list__layout {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 720px) {
	.wp-block-turchet-video-teaser [data-type="core/image"]::after {
		width: 68px;
		height: 68px;
	}
}