/*
 * Embeds inside article text. The platforms draw their own content in an iframe;
 * this file reserves the space, centres it and keeps it from overflowing on phones.
 */

/* Video players: always 16:9 and full column width. */
.entry-content iframe[src*="youtube.com"],
.entry-content iframe[src*="youtube-nocookie.com"],
.entry-content iframe[src*="youtu.be"],
.entry-content iframe[src*="vimeo.com"],
.entry-content iframe[src*="dailymotion.com"] {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	border: 0;
	margin-block: 32px;
}

/* Click-to-load YouTube preview (markup made by popt_youtube_facade()). */
.entry-content .yt-lite {
	position: relative;
	aspect-ratio: 16 / 9;
	margin-block: 32px;
	background: #000;
	overflow: hidden;
}

.yt-lite__link {
	position: absolute;
	inset: 0;
	display: block;
}

.yt-lite__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.92;
}

.yt-lite__play {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 76px;
	height: 54px;
	margin: -27px 0 0 -38px;
	border-radius: 14px;
	background: var(--accent);
}

.yt-lite__play::after {
	content: '';
	position: absolute;
	left: 31px;
	top: 15px;
	border-style: solid;
	border-width: 12px 0 12px 20px;
	border-color: transparent transparent transparent #fff;
}

.yt-lite__link:hover .yt-lite__play,
.yt-lite__link:focus-visible .yt-lite__play {
	background: #f00;
}

.entry-content .yt-lite .yt-lite__frame {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
	aspect-ratio: auto;
	border: 0;
}

/* Gutenberg embed blocks wrap the iframe in a figure. */
.entry-content .wp-block-embed {
	margin-block: 32px;
}

.entry-content .wp-block-embed__wrapper {
	position: relative;
}

/* Spotify: fixed-height bar. */
.entry-content iframe[src*="open.spotify.com"] {
	display: block;
	width: 100%;
	border: 0;
	border-radius: 12px;
	margin-block: 28px;
}

/* Instagram: Instagram sets inline styles on both the blockquote and the iframe it creates. */
.entry-content blockquote.instagram-media {
	max-width: 540px !important;
	min-width: 326px;
	width: calc(100% - 2px) !important;
	margin: 32px auto !important;
	padding: 0;
	border-left: 0 !important;
	font-family: var(--font-ui) !important;
	font-size: 14px !important;
	font-weight: 400 !important;
	line-height: 1.4 !important;
	text-transform: none !important;
}

.entry-content iframe.instagram-media {
	max-width: 540px !important;
	min-width: 326px !important;
	width: calc(100% - 2px) !important;
	margin: 32px auto !important;
}

/* X / Twitter. */
.entry-content blockquote.twitter-tweet {
	margin: 32px auto;
	max-width: 550px;
	padding: 0;
	border-left: 0;
	font: 16px/1.4 var(--font-ui);
	text-transform: none;
}

.entry-content .twitter-tweet-rendered {
	margin-inline: auto !important;
}

/* TikTok. */
.entry-content blockquote.tiktok-embed {
	margin: 32px auto !important;
	max-width: 605px !important;
	min-width: 325px !important;
	padding: 0;
	border-left: 0 !important;
	font: 14px/1.4 var(--font-ui) !important;
	text-transform: none !important;
}

/* Any other iframe never exceeds the column. */
.entry-content iframe {
	max-width: 100%;
}