$c-video-large-button: 104px;
$c-video-large-button-offset: space(3);
$c-video-stripe-height: space(6);

.c-video {
	//height: 0;
	//width: 100%;
	//padding-bottom: 56.25%; // Aspect Ratio: 16:9

	@include mq($max: 1000) {
		padding-top: space(3);
		padding-bottom: $c-video-stripe-height / 2;
	}

	background-color: palette(primary, 600);
}


.c-video__main {
	@include contain;
	position: relative;
	display: grid;
	grid-template-columns: auto;
	grid-template-rows: repeat(2, auto);
	grid-template-areas:
		"image"
		"description";

	@include mq(1000) {
		grid-template-columns: repeat(2, 1fr);
		grid-template-rows: 4vw auto auto space(6) space(6);
		margin-top: -4vw;
	}

	@include mq($bp-max) {
		margin-top: space(-8);
		grid-template-rows: space(8) auto auto space(6) space(6);
	}

	&::before {
		content: '';
		position: absolute;
		z-index: 1;
		bottom: 0;
		left: 50%;
		height: $c-video-stripe-height;
		width: 1px;
		background-color: palette(neutral, 0);
		transform: translateY(50%);
		transition: all 200ms ease-out;

		@include mq(1000) {
			grid-column: 2;
			grid-row: 3 / 6;
			left: 0;
			height: calc(100% + #{$c-video-stripe-height});
			position: relative;
			transform: translateY(#{space(-6)});
		}
	}
}


.c-video__image {
	grid-area: image;
	position: relative;

	@include mq(1000) {
		grid-column: 1;
		grid-row: 1 / 5;
	}

	&::before {
	    content: '';
		display: block;
		position: absolute;
		z-index: 1;
	    top: 0;
	    bottom: 0;
	    right: 0;
	    left: 0;
		background-color: palette(primary, 600);
		opacity: 0.64;
	}
}


.c-video__img {
	position: relative;
	z-index: 0;
	width: 100%;
	pointer-events: none;

	@include mq(1000) {
		height: 100%;
		object-fit: cover;
	}
}


.c-video__iframe {
	//display: none; // temp hidden
	position: absolute;
	z-index: 2;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}


.c-video__description {
	@include font-weight(light);
	font-family: $font-azo-sans;
	position: relative;
	grid-area: description;
	padding: space(7) 8% space(6);
	color: palette(neutral, 0);
	background-color: palette(primary, 500);

	@include mq(1000) {
		align-self: start;
		grid-column: 2;
		grid-row: 2 / 3;
		height: 100%;
		padding-bottom: $c-video-large-button + $c-video-large-button-offset;
		padding-left: space(9);
		padding-right: space(9);
	}
}



.c-video__button {
	position: relative;
	z-index: 1;
	grid-row: 1;
	grid-column: 1;
	display: flex;
	align-self: end;
	border: none;
	cursor: pointer;
	margin: 0 auto;
	padding: 0;
	background-color: transparent;
	border-radius: 50%;

	@include mq($max: 1000) {
		transform: translateY(50%);
	}

	@include mq(1000) {
		display: flex;
		align-items: center;
		width: 100%;
		grid-column: 2;
		grid-row: 2 / 3;
		align-self: end;
		justify-self: start;
		transform: translateX(-$c-video-large-button/2);
		margin-bottom: $c-video-large-button-offset;
	}
}


.c-video__circle {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	background: rgba(182, 215, 240, 0.24);
	border-radius: 50%;
	backdrop-filter: blur(14px);

	@include mq(1000) {
		margin: 0;
		width: $c-video-large-button;
		height: $c-video-large-button;
	}

	&::before {
		content: '';
		position: absolute;
		top: 8px;
		bottom: 8px;
		right: 8px;
		left: 8px;
		background-color: palette(neutral, 0);
		border-radius: 50%;
		transition: all 200ms ease-out;
	}

	.c-video__button:hover &:before {
		background-color: palette(primary, 600);
		transform: scale(0.88);
	}
}


.c-video__play {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	color: palette(primary, 600);
	transform: translateX(2px);
	transition: all 200ms ease-out;

	.c-video__button:hover & {
		color: palette(neutral, 0);
	}
}


.c-video__text-button {
	display: none;

	@include mq(1000) {
		display: block;
		margin-left: calc(#{space(9)} - #{$c-video-large-button / 2});
		padding: 0;
		text-transform: uppercase;
		color: palette(neutral, 0);
		transition: color 150ms linear;

		.c-video__button:hover & {
			color: palette(primary, 300);
			text-decoration: underline;
		}
	}
}