/*
 * Homepage layout corrections.
 *
 * Scoped to body.home so every override outranks the Customizer
 * CSS (wp-custom-css) and the GenerateBlocks stylesheet regardless
 * of load order.
 */

body.home {
	--kala-frame-ratio: 309 / 616;
	--kala-frame-h: 780px;
}

/*
 * Video container.
 *
 * The old wrapper mixed a 650px min-height with a hard 850px height
 * below 1068px, while the phone-frame PNG was object-fit: cover at a
 * different ratio, so the frame and video drifted apart at in-between
 * widths. The wrapper is now locked to the PNG's intrinsic 309/616
 * ratio, so cover never crops and both layers stay aligned at every
 * width from 375px to 1440px.
 */
body.home .hero-video .video-overlay-wrapper {
	width: min(100%, calc(var(--kala-frame-h) * 309 / 616));
	height: auto;
	min-height: 0;
	margin-inline: auto;
	position: relative;
	aspect-ratio: var(--kala-frame-ratio);
	overflow: hidden;
}

/* Keep the video and transparent phone frame in the same stacking context. */
body.home .hero-video .video-container,
body.home .hero-video .image-overlay {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	transform: none;
}

body.home .hero-video .video-container {
	inset: 2.5% 5.5% 4%;
	width: auto;
	height: auto;
	z-index: 0;
}

body.home .hero-video .image-overlay {
	z-index: 1;
	pointer-events: none;
}

body.home .hero-video .video-container video,
body.home .hero-video .image-overlay img {
	display: block;
	width: 100%;
	height: 100%;
}

body.home .hero-video .video-container video {
	object-fit: cover;
}

body.home .hero-video .image-overlay img {
	object-fit: contain;
}

body.home .carousel-track img {
	width: auto;
	height: 150px;
	aspect-ratio: 200 / 201;
	object-fit: cover;
}

@supports not (aspect-ratio: 1) {
	body.home .hero-video .video-overlay-wrapper {
		min-height: 640px;
	}
}

/* Drop the forced 700px/650px section heights; the frame now drives its own height. */
body.home .hero-video {
	min-height: 0;
}

/* Keep the duplicated category cards moving as one seamless track. */
body.home .carousel {
	width: 100%;
	overflow: hidden;
	position: relative;
}

body.home .carousel-track {
	display: flex;
	animation: kala-home-carousel-scroll 30s linear infinite;
}

body.home .carousel-track img {
	margin-right: 20px;
	flex-shrink: 0;
}

@keyframes kala-home-carousel-scroll {
	0% {
		transform: translateX(0);
	}

	100% {
		transform: translateX(-50%);
	}
}

/*
 * Free/Premium comparison table overflowed horizontally on phones
 * because its mobile rule set width: 110% inside a padded section.
 */
@media (max-width: 767px) {
	body.home .gb-element-d8e17886 {
		width: 100%;
	}
}

/*
 * Store badges: the mobile rule switched the grid to display: block,
 * which loses centering. Flex column with centered items restores it
 * for any children, not just the two images.
 */
@media (max-width: 767px) {
	body.home .gb-element-e82904d5 {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 24px;
		width: min(100%, 420px);
	}
}