/**
 * Video Modal
 *
 * Styles for the video overlay modal used across the site.
 * Supports both YouTube and Vimeo embeds.
 *
 * @package Condor
 */

/* ==========================================================================
   Body Scroll Lock
   ========================================================================== */

body.video-modal-open {
	overflow: hidden;
}

/* ==========================================================================
   Video Modal Container
   ========================================================================== */

.video-modal {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: none;
	background: rgba(255, 255, 255, 0.9);
	overflow: hidden; /* Prevent any overflow on mobile */

	&.is-open {
		display: block;
	}

	/* ==========================================================================
	   Modal Wrapper (Flexbox Centering)
	   ========================================================================== */

	.video-modal__wrapper {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 100%;
		padding: 20px;
		box-sizing: border-box;
		overflow: hidden;

		@media (min-width: 768px) {
			padding: 80px 20px;
		}
	}

	/* ==========================================================================
	   Video Container
	   ========================================================================== */

	.video-modal__container {
		position: relative;
		width: 100%;
		max-width: calc(100vw - 40px); /* Account for wrapper padding on mobile */
		box-sizing: border-box;

		@media screen and (min-width: 768px) {
			max-width: 1200px;
		}

		@media screen and (max-height: 800px) and (min-width: 768px) {
			max-width: 920px;
		}

		@media screen and (min-width: 1720px) and (min-height: 900px) {
			max-width: 1400px;
		}
	}

	/* ==========================================================================
	   Video Frame (16:9 Aspect Ratio)
	   ========================================================================== */

	.video-modal__frame {
		position: relative;
		aspect-ratio: 16 / 9;
		background: var(--wp--preset--color--black);
		box-shadow: 0 0 24px rgba(0, 0, 0, 0.5);

		iframe {
			position: absolute;
			inset: 0;
			width: 100%;
			height: 100%;
			border: 0;
		}
	}

	/* ==========================================================================
	   Close Button
	   ========================================================================== */

	.video-modal__close {
		position: absolute;
		z-index: 10;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 2rem;
		height: 2rem;
		padding: 0;
		background: var(--wp--preset--color--white);
		border: 2px solid var(--wp--preset--color--bright-red);
		border-radius: 50%;
		box-shadow: 0 0 12px rgba(0, 0, 0, 0.2);
		cursor: pointer;
		transition: transform 200ms ease-in-out;

		/* Mobile: position inside the video frame */
		top: 0.5rem;
		right: 0.5rem;

		/* Desktop: position overlapping the corner */
		@media (min-width: 768px) {
			top: -0.75rem;
			right: -0.75rem;
		}

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

		&:focus {
			outline: 2px solid var(--wp--preset--color--bright-red);
			outline-offset: 2px;
		}
	}

	/* Close X Icon (CSS-generated) */
	.video-modal__close-icon {
		position: relative;
		width: 1rem;
		height: 1rem;

		&::before,
		&::after {
			content: '';
			position: absolute;
			left: 0;
			top: 50%;
			width: 100%;
			height: 2px;
			background-color: var(--wp--preset--color--bright-red);
			transition: background-color 200ms ease-in-out;
		}

		&::before {
			transform: rotate(45deg);
		}

		&::after {
			transform: rotate(-45deg);
		}
	}

	/* ==========================================================================
	   Caption / Title
	   ========================================================================== */

	.video-modal__caption {
		padding-top: var(--wp--preset--spacing--40);
		margin: 0;
		font-family: var(--wp--preset--font-family--body);
		font-size: 1.125rem;
		font-weight: 700;
		color: var(--wp--preset--color--blue);
	}
}