/**
 * PX Video - Shared CSS
 *
 * Play button facade styles used by both the inline video component
 * and the video popup component. Globally enqueued via CSS glob.
 */


/* ── Video wrapper ────────────────────────────── */

.px-video {
	position: relative;
	width: 100%;
	overflow: hidden;
	border-radius: var(--space-d1);
	box-shadow: 2px 4px 10px 0 rgba(51, 51, 51, 0.15);
}

.px-video--ratio-16-9 {
	aspect-ratio: 16 / 9;
}

.px-video--ratio-4-3 {
	aspect-ratio: 4 / 3;
}

.px-video--ratio-1-1 {
	aspect-ratio: 1 / 1;
}


/* ── Poster button (click-to-play facade) ─────── */

.px-video__poster[hidden] {
	display: none;
}

.px-video__poster {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: var(--space-d1);

	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;

	padding: var(--space-d3);

	border: none;
	background: none;
	cursor: pointer;
}


/* ── Thumbnail image ──────────────────────────── */

.px-video__thumb {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}


/* ── Centered overlay (play + duration) ───────── */

.px-video__overlay {
	position: relative;
	z-index: 1;

	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-d1);
}


/* ── Play icon ────────────────────────────────── */

.px-video__play {
	display: flex;
	transition: transform var(--duration-normal) var(--ease-smooth);
}

.px-video__play svg {
	width: 72px;
	height: 72px;
}

.px-video__poster:hover .px-video__play {
	transform: scale(1.1);
}


/* ── Duration badge ───────────────────────────── */

.px-video__duration {
	display: flex;
	padding: 0 var(--space-d05);
	justify-content: center;
	align-items: center;

	border-radius: var(--space-d025);
	background-color: var(--white);

	color: var(--gray-dark);
	font-family: var(--font-display);
	font-size: var(--text-d1);
	font-weight: var(--weight-semibold);
	line-height: var(--lh-normal);
	letter-spacing: -0.2px;
}


/* ── Iframe (shown after click) ───────────────── */

.px-video__iframe-wrap {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.px-video__iframe-wrap[hidden] {
	display: none;
}

.px-video__iframe-wrap iframe {
	width: 100%;
	height: 100%;
	border: 0;
}