/* CAROUSEL SLIDE */
.carousel-slide {
	display: flex;
	flex-direction: column-reverse;
	justify-content: start;
	gap: 35px;
}

.carousel-slide:nth-of-type(2) {
	background-color: var(--wp--preset--color--primary-main);
	color: var(--wp--preset--color--base);
}

.carousel-slide:nth-child(3) {
	background-color: var(--wp--preset--color--secondary);
}

.carousel-button-group {
	flex-wrap: wrap;
}

.carousel-button-group>* {
	width: 100%;
}

/* CAROUSEL CONTENT */

.carousel-content {
	/* gap: 12px; */
}

.carousel-content > p {
	/* height: 60px; */
}

.carousel-slide>img {
	object-fit: cover;
	height: 256px;
	width: 100%;
}

.carousel-content>img {
	display: none;
}

.carousel-content>p.heading-3 {
	max-width: 100%;
}

.carousel-button {
	border: none;
	display: none;
}

/* */

#prevBtn:focus,
#nextBtn:focus {
	outline: none;
	box-shadow: none;
}

/* Modal background */
/* Modal container */
.homepage-video-modal {
	display: none;
	position: fixed;
	z-index: 9999;
	inset: 0;
	background: rgba(0, 0, 0, 0.85);
	justify-content: center;
	align-items: center;
}

/* Modal video container - slightly wider vertical video */
.homepage-video-modal-content {
	position: relative;
	width: 50%;
	/* make wider than standard vertical */
	max-width: 420px;
	/* optional max width */
	height: auto;
	aspect-ratio: 9 / 16;
	/* keep vertical ratio */
}

/* Video iframe fills container */
.homepage-video-modal iframe {
	width: 100%;
	height: 100%;
	border: none;
	border-radius: 12px;
}

/* Close button */
.homepage-video-close {
	position: absolute;
	top: -40px;
	right: -40px;
	font-size: 32px;
	color: white;
	cursor: pointer;
}


@media (min-width: 1024px) {
	.carousel-wrapper {
		height: auto;
	}

	/* CAROUSEL SLIDE */

	.carousel-slide {
		padding-top: 68px;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		gap: 65px;
	}

	.carousel-slide>img {
		height: 485px;
		width: 515px;
		margin-top: 0;
	}

	/* CAROUSEL CONTENT */

	.carousel-content {
		width: 506px;
		gap: 20px;
	}

	.carousel-content>img {
		display: flex;
		height: 46px;
		width: 215px;
	}

	.carousel-button {
		display: block;
	}

	.carousel-button-group>* {
		width: max-content;
	}

}


/* Responsive tweaks */
@media (max-width: 900px) {
	.homepage-video-modal-content {
		width: 65%;
		/* slightly wider on tablet */
		max-width: 500px;
	}

}

@media (max-width: 600px) {
	.homepage-video-modal-content {
		width: 80%;
		/* full-ish width on mobile */
		max-width: 350px;
	}
}