/**
 * Inline [retrotext] embed — full-width teletext panel.
 */

.retrotext-seo-content {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.retrotext-seo-content h1,
.retrotext-seo-content p {
	margin: 0 0 0.75em;
	font-size: 1rem;
	line-height: 1.5;
}

.retrotext-embed {
	width: 100%;
	max-width: 100%;
	margin: 1.5rem auto;
	padding: clamp(0.75rem, 2vw, 1.25rem);
	box-sizing: border-box;
	background:
		radial-gradient(ellipse at 50% 0%, #2a2520 0%, #121110 55%, #000 100%);
	border: 2px solid #333;
	border-radius: 4px;
	font-family: "Courier New", Courier, "Lucida Console", monospace;
	overflow: hidden;
}

.retrotext-embed .retrotext-stage {
	max-width: none;
	width: 100%;
	padding: 0;
}

.retrotext-embed .retrotext-stage--digital-only,
.retrotext-embed .retrotext-stage--digital {
	width: 100%;
}

.retrotext-embed .retrotext-stage--digital-only .retrotext-stage__center,
.retrotext-embed .retrotext-stage--digital .retrotext-stage__center {
	flex-direction: column;
	align-items: stretch;
	width: 100%;
}

.retrotext-embed .retrotext-stage--digital-only .retrotext-stage__main,
.retrotext-embed .retrotext-stage--digital .retrotext-stage__main {
	flex: 1 1 auto;
	width: 100%;
	min-height: 0;
	display: flex;
	flex-direction: column;
}

.retrotext-embed .retrotext-stage--digital-only .retrotext-mode-shell--digital,
.retrotext-embed .retrotext-stage--digital .retrotext-mode-shell--digital.is-active {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	min-height: 280px;
	width: 100%;
}

.retrotext-embed .retrotext-stage--digital-only .retrotext-viewer-screen,
.retrotext-embed .retrotext-stage--digital .retrotext-viewer-screen {
	flex: 1 1 auto;
	width: 100%;
	max-width: none;
	min-height: 280px;
	display: flex;
	flex-direction: column;
}

.retrotext-embed .retrotext-stage--digital-only .retrotext-viewer-screen .retro-tv__screen-slot,
.retrotext-embed .retrotext-stage--digital-only .retrotext-viewer-screen .retro-tv__screen,
.retrotext-embed .retrotext-stage--digital .retrotext-viewer-screen .retro-tv__screen-slot,
.retrotext-embed .retrotext-stage--digital .retrotext-viewer-screen .retro-tv__screen {
	width: 100%;
	min-height: 240px;
	aspect-ratio: 4 / 3;
	height: auto;
	position: relative;
}

.retrotext-embed .retrotext-viewport,
.retrotext-embed .retrotext-grid,
.retrotext-embed .retrotext-grid__body,
.retrotext-embed .retrotext-grid__footer,
.retrotext-embed .retrotext-row {
	width: 100%;
	max-width: none;
}

@media (min-width: 901px) {
	.retrotext-embed .retrotext-stage--digital-only .retrotext-stage__center,
	.retrotext-embed .retrotext-stage--digital .retrotext-stage__center {
		flex-direction: row;
		align-items: flex-start;
	}

	.retrotext-embed .retrotext-stage--digital-only .retrotext-stage__main,
	.retrotext-embed .retrotext-stage--digital .retrotext-stage__main {
		flex: 1 1 auto;
		min-width: 0;
	}
}

.retrotext-embed .retrotext-tv-stack {
	width: min(960px, 100%);
}

@media (max-width: 900px) {
	.retrotext-embed {
		padding: 0;
		margin: 0 auto;
		border-radius: 0;
	}

	.retrotext-embed .retrotext-stage--digital-only .retrotext-mode-shell--digital,
	.retrotext-embed .retrotext-stage--digital .retrotext-mode-shell--digital.is-active {
		min-height: min(70dvh, calc(100dvh - 8rem));
	}

	.retrotext-embed .retrotext-stage--digital-only .retrotext-viewer-screen,
	.retrotext-embed .retrotext-stage--digital .retrotext-viewer-screen {
		min-height: min(70dvh, calc(100dvh - 8rem));
		border: none;
	}

	.retrotext--iphone.retrotext-embed .retrotext-stage {
		padding: 0;
		gap: 0;
	}

	.retrotext--iphone.retrotext-embed .retrotext-stage--digital-only .retrotext-mode-shell--digital,
	.retrotext--iphone.retrotext-embed .retrotext-stage--digital .retrotext-mode-shell--digital.is-active,
	.retrotext--iphone.retrotext-embed .retrotext-stage--digital-only .retrotext-viewer-screen,
	.retrotext--iphone.retrotext-embed .retrotext-stage--digital .retrotext-viewer-screen {
		min-height: 0;
	}

	.retrotext--iphone.retrotext-embed .retrotext-stage--digital-only .retrotext-viewer-screen .retro-tv__screen-slot,
	.retrotext--iphone.retrotext-embed .retrotext-stage--digital-only .retrotext-viewer-screen .retro-tv__screen,
	.retrotext--iphone.retrotext-embed .retrotext-stage--digital .retrotext-viewer-screen .retro-tv__screen-slot,
	.retrotext--iphone.retrotext-embed .retrotext-stage--digital .retrotext-viewer-screen .retro-tv__screen {
		aspect-ratio: unset;
		min-height: 0;
		height: 100%;
	}

	/* iPhone: force every teletext image graphic to the extra-small scale
	 * (0.32) so it can never overlap the header on the narrow screen, whatever
	 * size is set per image. !important beats the per-image inline font-size. */
	.retrotext--iphone.retrotext-embed .retrotext-line--graphic {
		font-size: calc(var(--retrotext-row-height) * 0.32) !important;
	}
}

@media (min-width: 901px) {
	.retrotext-embed .retrotext-stage--digital-only .retrotext-mode-shell--digital,
	.retrotext-embed .retrotext-stage--digital .retrotext-mode-shell--digital.is-active {
		min-height: 480px;
	}

	.retrotext-embed .retrotext-stage--digital-only .retrotext-viewer-screen,
	.retrotext-embed .retrotext-stage--digital .retrotext-viewer-screen {
		min-height: 480px;
	}

	.retrotext-embed .retrotext-stage.retrotext-stage--tv .retrotext-tv-stack {
		width: min(960px, 100%);
		min-height: 560px;
	}
}