/*
 * Kidzo Communication animation widget.
 * Renders a desktop (landscape 16:9) mount and a mobile (portrait 9:16) mount;
 * only the one matching the viewport is shown.
 *
 * Height is reserved with the padding-bottom ratio trick (NOT aspect-ratio):
 * inside an Elementor Flexbox container the widget is a flex item, and an
 * aspect-ratio height on a descendant collapses the flex item to 0 — the board
 * then overflows and gets covered by the next section. padding-bottom gives a
 * definite height the flex layout respects, and the stage fills it absolutely.
 */

.kidzo-comm {
	width: 100%;
	margin: 0 auto;
}

.kidzo-comm-mount {
	position: relative;
	width: 100%;
	height: 0; /* height comes from padding-bottom below */
	background: #F4FAFA;
	border-radius: 20px;
	overflow: hidden;
}

.kidzo-comm--desktop .kidzo-comm-mount {
	padding-bottom: 56.25%; /* 900 / 1600 */
}

.kidzo-comm--mobile .kidzo-comm-mount {
	padding-bottom: 177.7778%; /* 1600 / 900 */
	max-width: 520px;
	margin-inline: auto;
}

/* The React stage fills the reserved box. */
.kidzo-comm-stage {
	position: absolute;
	inset: 0;
	border-radius: 20px;
	overflow: hidden;
}

/* Desktop first: show landscape, hide portrait. */
.kidzo-comm--mobile {
	display: none;
}

/* Phones / small tablets: swap to the portrait board. */
@media (max-width: 781px) {
	.kidzo-comm--desktop {
		display: none;
	}
	.kidzo-comm--mobile {
		display: block;
	}
}