/**
 * Watch Page Section Styles
 *
 * CSS for watch landing page sections including hero video and video player.
 * Loaded conditionally when core/group blocks are present.
 *
 * @package Condor
 */

/* ==========================================================================
   Hero Video Section (.hero-video / .watch-hero)
   ========================================================================== */

.hero-video,
.watch-hero {
	position: relative;

	.video {
		aspect-ratio: 16 / 9;
		position: relative;
		overflow: hidden;

		.content::before {
			display: block;
			content: '';
			background: rgba(0, 0, 0, 0.5);
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			z-index: 10;
		}

		iframe {
			height: 100%;
			width: 100%;
			position: absolute;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
		}
	}

	.info {
		position: absolute;
		top: 0;
		left: 0;
		z-index: 20;
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;

		.headline {
			text-align: center;
		}

		.cta {
			text-align: center;
			padding-top: 25px;
		}
	}
}

/* Home page hero-video variation */
body.home .hero-video .info .headline h1 {
	font-size: 4rem;

	@media (min-width: 1280px) {
		font-size: 10rem;
	}
}

/* ==========================================================================
   Watch Banner (.watch-banner)
   ========================================================================== */

.watch-banner {
	background: var(--wp--preset--color--blue);
	color: var(--wp--preset--color--white);
	padding: var(--wp--preset--spacing--60);
	text-align: center;

	.banner-content {
		max-width: 800px;
		margin: 0 auto;
	}

	h3 {
		margin-bottom: var(--wp--preset--spacing--40);
	}

	.cta {
		padding-top: var(--wp--preset--spacing--40);
	}
}

/* ==========================================================================
   Video Player Section (.player)
   ========================================================================== */

section.player {
	padding: var(--wp--preset--spacing--70) 0 0 0;

	.video {
		@media (min-width: 1024px) {
			grid-column: 4 / span 8;
		}

		.video-thumbnail a.video-trigger {
			display: block;
			position: relative;

			&::before {
				display: block;
				content: '';
				background: rgba(0, 0, 0, 0.25);
				width: 100%;
				height: 100%;
				position: absolute;
				top: 0;
				right: 0;
				bottom: 0;
				left: 0;
				z-index: 10;
			}
		}

		.video-thumbnail .play-btn {
			position: absolute;
			top: calc(50% - 36px);
			left: calc(50% - 36px);
			z-index: 12;
		}
	}

	.video-title {
		padding: var(--wp--preset--spacing--40) 0 var(--wp--preset--spacing--70) 0;
	}
}

/* ==========================================================================
   Library CTA Section (.library-cta)
   ========================================================================== */

section.library-cta {
	padding-top: var(--wp--preset--spacing--70);
}