/**
 * Collectible YouTube Live player.
 *
 * Self-contained on purpose: the plugin has to render correctly wherever the
 * shortcode is used, not only inside the landing page stylesheet.
 */

.cl-yt {
	display: block;
}

.cl-yt__formats {
	display: flex;
	gap: 8px;
	margin-bottom: 12px;
}

.cl-yt__format {
	padding: 8px 14px;
	border: 1px solid #d9d5cd;
	border-radius: 999px;
	background: #fff;
	color: #14110d;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
}

.cl-yt__format.is-active {
	border-color: #14110d;
	background: #f5a623;
}

.cl-yt__frame {
	position: relative;
	width: 100%;
	margin: 0 auto;
	background: #000;
	overflow: hidden;
}

.cl-yt__frame iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}

.cl-yt__frame--landscape {
	aspect-ratio: 16 / 9;
}

/* Capped so a vertical stream does not run taller than the viewport on desktop. */
.cl-yt__frame--portrait {
	aspect-ratio: 9 / 16;
	max-width: 380px;
}

/* Fallback for browsers without aspect-ratio support. */
@supports not (aspect-ratio: 1 / 1) {
	.cl-yt__frame--landscape {
		padding-top: 56.25%;
	}

	.cl-yt__frame--portrait {
		padding-top: 177.78%;
	}
}