/*
 * ILM Components -- Embed.
 *
 * The provider decides what goes inside `.ilm-embed__frame`, and it is usually
 * an `<iframe>` carrying `width` and `height` attributes from whatever size
 * the provider was asked for. Those attributes are what make an untouched
 * embed the wrong size in every layout it did not expect.
 *
 * So the frame is an aspect-ratio box and the iframe is stretched to fill it.
 * `aspect-ratio` rather than the old padding-top trick: the ratio is a token
 * this library controls, and there is no arithmetic to get wrong.
 *
 * The rules reach inside markup this file did not write, which is unusual
 * enough to say out loud. They are scoped to `.ilm-embed__frame` -- a class
 * only this component emits -- so nothing outside one is affected, and
 * `section 126`'s rule against globally redefining `iframe` holds.
 *
 * Providers that return a script instead of an iframe -- a post embed, for
 * instance -- render whatever their fallback markup is. In the builder canvas
 * those scripts do not run at all, because the canvas sets a script-src that
 * does not include them; that is the Phase 3.5 policy working as intended and
 * not something this component should be weakening to get an animation.
 */

.ilm-component--media-embed {
	display: block;
	inline-size: 100%;
}

.ilm-component--media-embed.ilm-width-narrow { max-inline-size: 24rem; }
.ilm-component--media-embed.ilm-width-normal { max-inline-size: 40rem; }
.ilm-component--media-embed.ilm-width-wide { max-inline-size: 60rem; }
.ilm-component--media-embed.ilm-width-full { max-inline-size: none; }

.ilm-component--media-embed .ilm-embed__frame {
	position: relative;
	inline-size: 100%;
}

.ilm-component--media-embed:not(.ilm-ratio-auto) .ilm-embed__frame {
	aspect-ratio: var(--ilm-c-ratio, 16 / 9);
}

.ilm-component--media-embed:not(.ilm-ratio-auto) .ilm-embed__frame > iframe,
.ilm-component--media-embed:not(.ilm-ratio-auto) .ilm-embed__frame > * > iframe {
	position: absolute;
	inset: 0;
	inline-size: 100%;
	block-size: 100%;
	max-block-size: 100%;
	border: 0;
}

/* With `ratio: auto` the provider's own proportions stand; only the width is
   corrected, since a fixed pixel width is what overflows a narrow column. */
.ilm-component--media-embed.ilm-ratio-auto .ilm-embed__frame > iframe {
	inline-size: 100%;
	max-inline-size: 100%;
	border: 0;
}

/*
 * The provider's own height, with `ratio: auto` (1.45.0). The server wrote the
 * height the provider's iframe asked for; a theme's reset of every iframe's
 * height would otherwise drop it to the browser's 150 px.
 */
.ilm-component--media-embed.ilm-embed--provider-height .ilm-embed__frame > iframe {
	block-size: var(--ilm-embed-height);
}

/*
 * A player the site allowlisted (1.21.0, G10).
 *
 * `ilm-embed--fixed` is a player whose provider gave it a height -- a radio
 * bar is not a 16:9 picture. The height arrives as a custom property the
 * server wrote from a bounded integer.
 */
.ilm-component--media-embed.ilm-embed--fixed .ilm-embed__frame {
	block-size: var(--ilm-embed-height, 160px);
}

.ilm-component--media-embed.ilm-embed--fixed .ilm-embed__frame > iframe {
	position: absolute;
	inset: 0;
	inline-size: 100%;
	block-size: 100%;
	border: 0;
}

/*
 * The colour scheme the provider's page is drawn for (1.49.0). Browsers put
 * an opaque canvas behind a framed page whose scheme differs from the
 * iframe's; saying the player's own scheme on the iframe keeps its
 * transparent parts transparent. Only for a provider that named one.
 */
.ilm-component--media-embed.ilm-embed--scheme-light .ilm-embed__frame iframe {
	color-scheme: light;
}

.ilm-component--media-embed.ilm-embed--scheme-dark .ilm-embed__frame iframe {
	color-scheme: dark;
}

/* Until the visitor presses play: the button and the provider's name, centred
   on a quiet surface the size the player will be. */
.ilm-component--media-embed .ilm-embed__facade {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	padding: 1rem;
	text-align: center;
	background: var(--ilm-color-bg-subtle, #f2f2f2);
	color: var(--ilm-color-fg, inherit);
	border-radius: inherit;
}

.ilm-component--media-embed .ilm-embed__facade[hidden] {
	display: none;
}

.ilm-component--media-embed .ilm-embed__play {
	display: inline-flex;
	align-items: center;
	gap: 0.625rem;
	min-block-size: 44px;
	padding: 0.625rem 1.25rem;
	border: 0;
	border-radius: 999px;
	background: var(--ilm-color-primary, #1d63c8);
	color: var(--ilm-color-on-primary, #fff);
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

.ilm-component--media-embed .ilm-embed__play:hover {
	background: var(--ilm-color-primary-hover, var(--ilm-color-primary, #1d63c8));
}

.ilm-component--media-embed .ilm-embed__play:focus-visible {
	outline: 3px solid var(--ilm-color-focus, currentColor);
	outline-offset: 3px;
}

.ilm-component--media-embed .ilm-embed__play-icon {
	inline-size: 0;
	block-size: 0;
	border-block: 0.4em solid transparent;
	border-inline-start: 0.65em solid currentColor;
}

.ilm-component--media-embed .ilm-embed__note {
	margin: 0;
	max-inline-size: 32rem;
	font-size: 0.875rem;
	color: var(--ilm-color-fg-muted, inherit);
}

/*
 * The facade's picture (1.26.0). `cover`: a photograph filling the facade,
 * under a scrim that keeps the button and the note readable. `contain`: a
 * mark -- a station's logo -- above the button, inside the facade's padding.
 */
.ilm-component--media-embed .ilm-embed__facade > * {
	position: relative;
}

.ilm-component--media-embed .ilm-embed__facade--cover {
	color: #fff;
}

.ilm-component--media-embed .ilm-embed__facade--cover > .ilm-embed__poster {
	position: absolute;
	inset: 0;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	border-radius: inherit;
}

.ilm-component--media-embed .ilm-embed__facade--cover::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(to top, rgb(0 0 0 / 0.75), rgb(0 0 0 / 0.35));
	border-radius: inherit;
}

.ilm-component--media-embed .ilm-embed__facade--cover > :not(.ilm-embed__poster) {
	z-index: 2;
}

.ilm-component--media-embed .ilm-embed__facade--cover .ilm-embed__note {
	color: inherit;
}

.ilm-component--media-embed .ilm-embed__facade--contain > .ilm-embed__poster {
	inline-size: auto;
	max-inline-size: min(60%, 18rem);
	block-size: auto;
	max-block-size: 35%;
	object-fit: contain;
}

/*
 * After the press (1.26.0): a notice over the player while it loads, which
 * lets every click through to it, and one in its place if it does not
 * answer. Both sit inside the frame, so neither moves anything on the page.
 */
.ilm-component--media-embed .ilm-embed__loading,
.ilm-component--media-embed .ilm-embed__fault {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	padding: 1rem;
	text-align: center;
	border-radius: inherit;
}

.ilm-component--media-embed .ilm-embed__loading {
	flex-direction: row;
	background: rgb(0 0 0 / 0.55);
	color: #fff;
	pointer-events: none;
}

.ilm-component--media-embed .ilm-embed__fault {
	background: var(--ilm-color-bg-subtle, #f2f2f2);
	color: var(--ilm-color-fg, inherit);
}

.ilm-component--media-embed .ilm-embed__loading[hidden],
.ilm-component--media-embed .ilm-embed__fault[hidden] {
	display: none;
}

.ilm-component--media-embed .ilm-embed__spinner {
	inline-size: 1.25rem;
	block-size: 1.25rem;
	border: 2px solid currentColor;
	border-inline-end-color: transparent;
	border-radius: 50%;
	animation: ilm-embed-spin 0.9s linear infinite;
}

@keyframes ilm-embed-spin {
	to {
		transform: rotate(1turn);
	}
}

/* Still says "loading" without turning. */
@media (prefers-reduced-motion: reduce) {
	.ilm-component--media-embed .ilm-embed__spinner {
		animation: none;
		border-inline-end-color: currentColor;
		opacity: 0.6;
	}
}

.ilm-component--media-embed .ilm-embed__fault-text {
	margin: 0;
	max-inline-size: 32rem;
}

.ilm-component--media-embed .ilm-embed__retry {
	min-block-size: 44px;
	padding: 0.5rem 1.125rem;
	border: 1px solid currentColor;
	border-radius: 999px;
	background: transparent;
	color: inherit;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

.ilm-component--media-embed .ilm-embed__retry:hover {
	background: rgb(127 127 127 / 0.15);
}

.ilm-component--media-embed .ilm-embed__retry:focus-visible {
	outline: 3px solid var(--ilm-color-focus, currentColor);
	outline-offset: 3px;
}

/* A short-bar player has no room for the note under the button. */
.ilm-component--media-embed.ilm-embed--fixed .ilm-embed__facade {
	flex-direction: row;
	flex-wrap: wrap;
}

.ilm-component--media-embed .ilm-embed__empty {
	margin: 0;
	padding: 1.25rem;
	border: 1px dashed var(--ilm-color-border, currentColor);
	border-radius: inherit;
	color: var(--ilm-color-fg-muted, inherit);
}

/*
 * A video inside a post's own content, waiting for the visitor (1.30.0,
 * Post Content `videos: click`). The facade names the video by the title
 * WordPress stored from the provider; the provider's own thumbnail is not
 * shown, because fetching it would be a request to the provider before the
 * press.
 */
.ilm-component--media-embed .ilm-embed__title {
	margin: 0;
	max-inline-size: 36rem;
	font-weight: 600;
	line-height: 1.3;
	overflow-wrap: anywhere;
}

.ilm-component--media-embed.ilm-embed--content .ilm-embed__frame {
	border-radius: var(--ilm-radius-md, 0.375rem);
	overflow: hidden;
}

/*
 * A content video's facade in a narrow place (1.30.0): a video in one of a
 * post's three columns is a couple of hundred pixels wide, and the title, the button and
 * the note do not fit in its height. Measured against the frame itself, not
 * the screen, the facade keeps only the button there; the title and the note
 * stay in the accessibility tree (the button's name and description), out of
 * sight rather than removed.
 */
.ilm-embed--content .ilm-embed__facade {
	container-type: inline-size;
}

/* The player's own size, held by an invisible replaced element (`VideoFacade`). */
.ilm-component--media-embed .ilm-embed__sizer {
	display: block;
	max-inline-size: 100%;
	block-size: auto;
	visibility: hidden;
}

@container (max-width: 26rem) {

	.ilm-embed--content .ilm-embed__title,
	.ilm-embed--content .ilm-embed__note {
		position: absolute;
		inline-size: 1px;
		block-size: 1px;
		margin: -1px;
		padding: 0;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
		border: 0;
	}

	.ilm-embed--content .ilm-embed__facade {
		padding: 0.5rem;
	}

	.ilm-embed--content .ilm-embed__play {
		min-block-size: 44px;
		padding: 0.5rem 0.875rem;
	}
}