/* Video click-to-load (Fix 05): template-parts/video-facade.php
 * Dark cover, white play button and title. */

.video-facade {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	background: linear-gradient(180deg, #2e2e35 0%, #18181d 100%);
	color: var(--color-white);
	text-align: center;

	.video-facade-cover {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	&.has-cover:before {
		content: '';
		position: absolute;
		inset: 0;
		z-index: 1;
		background: rgba(24, 24, 29, 0.6);
	}

	.video-facade-body {
		position: relative;
		z-index: 2;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 24px;
	}

	.video-facade-play {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 72px;
		height: 72px;
		padding: 0 0 0 4px;
		border: 0;
		border-radius: 50%;
		background-color: var(--color-white);
		color: var(--color-secondary);
		cursor: pointer;
		transition: transform 0.25s ease-in-out;

		&:hover {
			transform: scale(1.06);
		}

		&:focus-visible {
			outline: 2px solid var(--color-white);
			outline-offset: 4px;
		}
	}

	.video-facade-title {
		margin: 28px 0 0;
		font-size: var(--text-size);
		font-weight: 500;
		color: var(--color-white);
	}

	/* Optional Buy Device field: white pill with an arrow. */
	.video-facade-buy {
		display: inline-flex;
		align-items: center;
		gap: 10px;
		margin-top: 28px;
		padding: 12px 24px;
		border-radius: 999px;
		background-color: var(--color-white);
		color: var(--color-secondary);
		font-weight: 500;
		text-decoration: none;

		&:hover {
			color: var(--color-secondary);
			text-decoration: none;
		}

		&:focus-visible {
			outline: 2px solid var(--color-white);
			outline-offset: 4px;
		}
	}

	/* Portrait videos: smaller type. */
	&.is-narrow {
		.video-facade-body {
			padding: 16px;
		}

		.video-facade-title {
			margin-top: 20px;
		}
	}

	/* Small covers: smaller play button and title, and the whole cover plays
	   (js/video-facade.js). */
	&.is-compact {
		cursor: pointer;

		.video-facade-body {
			padding: 12px;
		}

		.video-facade-play {
			width: 56px;
			height: 56px;
		}

		.video-facade-title {
			margin-top: 14px;
			font-size: var(--text-size-sm);
		}

		.video-facade-buy {
			display: none;
		}
	}
}

@media (prefers-reduced-motion: reduce) {
	.video-facade .video-facade-play {
		transition: none;
	}
}