/*
 * WISeSat live tracker (H-05; Phase 9): core Group with the block style
 * `wisesat` holding a core Image poster and an overlay group with a label and
 * a core Button. Ported from the redesign PoC (css/site.css @ ed0ab9f7,
 * "WISeSat embed") using theme.json tokens and base.css aliases only.
 * enhance-wisesat.js puts the tracker iframe over the poster.
 *
 * Breakpoint: the PoC's 640px becomes sm (760px, docs/05 §3.1). The live dot
 * pulses only when motion is allowed. Literal values kept from the PoC: 1px
 * border and the round dot (50%).
 */

.wp-block-group.is-style-wisesat {
	position: relative;
	aspect-ratio: 16 / 8;
	overflow: hidden;
	border: 1px solid var(--line);
	border-radius: var(--r-card);
	background: var(--c-black);
}

.is-style-wisesat > .wp-block-image,
.is-style-wisesat > .wp-block-image img,
.is-style-wisesat > .sc-wisesat-frame {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	border: 0;
	object-fit: cover;
}

.is-style-wisesat > .sc-wisesat-frame {
	z-index: 1;
}

.is-style-wisesat > .sc-wisesat-overlay {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 2;
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--wp--custom--wisesat--overlay-gap);
	margin: 0;
	padding: var(--wp--custom--wisesat--overlay-padding);
	background: linear-gradient(0deg, color-mix(in srgb, var(--c-black) 90%, transparent), transparent);
}

/* Once the tracker has loaded, the overlay no longer covers it. */
.is-style-wisesat.is-loaded > .sc-wisesat-overlay {
	background: none;
	pointer-events: none;
}

.is-style-wisesat.is-loaded > .sc-wisesat-overlay .wp-element-button {
	pointer-events: auto;
}

.sc-wisesat-overlay > * {
	margin: 0;
}

.sc-wisesat-live {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--custom--wisesat--live-gap);
	font-family: var(--f-display);
	font-size: var(--wp--custom--font-size--label);
	font-weight: 600;
	letter-spacing: var(--wp--custom--wisesat--letter-spacing);
	text-transform: uppercase;
	color: var(--c-ok);
}

.sc-wisesat-live::before {
	content: "";
	width: var(--wp--custom--wisesat--live-dot);
	height: var(--wp--custom--wisesat--live-dot);
	border-radius: 50%;
	background: var(--c-ok);
}

@media (prefers-reduced-motion: no-preference) {

	.sc-wisesat-live::before {
		animation: sc-live-pulse 2s infinite;
	}

	@keyframes sc-live-pulse {

		0% {
			box-shadow: 0 0 0 0 color-mix(in srgb, var(--c-ok) 60%, transparent);
		}

		70% {
			box-shadow: 0 0 0 10px transparent;
		}
	}
}

/* sm (PoC: 640px) */
@media (max-width: 760px) {

	.wp-block-group.is-style-wisesat {
		aspect-ratio: 4 / 5;
	}
}