/**
 * @name        AWX Video and Text
 * @namespace   Alchemy Web Development
 * @version     1.0.0
 * * COPYRIGHT NOTICE:
 * This component and its associated code are the proprietary property of
 * Alchemy Web Development. While we love the developer community, this
 * is NOT freeware.
 * * Please do not use, copy, or distribute this file without our permission.
 * If you’re interested in using our work or have any questions, just ask—
 * we're actually quite nice!
 * * Reach out at: support@alchemywebdev.com
 */

awx-video-and-text {
	container: video_text / inline-size;
	display: block;
	margin: 0 auto calc(var(--margin-bottom, unset) * 1px);
	padding-block-start: calc(var(--padding-top, unset) * 1px);
	
	& .awx-video-and-text__wrapper {
		align-items: center;
		display: grid;
		grid-template-areas: "video" "text";
		position: relative;
		
		&.awx-video-and-text__wrapper--reverse {
			grid-template-areas: "text" "video";
		}
		
		.awx-video-and-text__text-content {
			grid-area: text;
		}
		
		.awx-video-and-text__video {
			grid-area: video;
		}
		
		&::before {
			background: var(--background-image, none) no-repeat;
			background-color: var(--background-color, transparent);
			background-position: center;
			background-size: cover;
			content: "";
			inset: 0;
			opacity: var(--opacity, 1);
			position: absolute;
		}
		
		@container video_text (inline-size > 1120px) {
			grid-template-columns: 55% 45%;
			grid-template-areas: "video text";
			
			&.awx-video-and-text__wrapper--reverse {
				grid-template-columns: 45% 55%;
				grid-template-areas: "text video";
			}
		}
		
	}
	
	& .awx-video-and-text__video {
		aspect-ratio: 16 / 9;
		border: unset;
		height: 100%;
		margin: auto;
		max-inline-size: 50rem;
		order: var(--order, 0);
		position: relative;
		width: 100%;
		
		@container video_text (inline-size > 1120px) {
			margin: unset;
		}
	}
	
	& .awx-video-and-text__text-content {
		padding: clamp(1.5rem, 1.214rem + 1.429vw, 2.5rem);
		position: relative;
		
		& *:last-child {
			margin-block-end: 0;
		}
	}
}