/*
 * Embeds pasted into an article.
 *
 * Every provider ships its snippet with a fixed width in it — 550px for a
 * tweet, 658 for an Instagram post, 560×315 for a YouTube frame — because the
 * snippet has to work on a page nobody has seen. In a column narrower than
 * that, the fixed width wins and the article scrolls sideways; in a column
 * wider, the card sits against the start edge with a third of the line empty
 * beside it. Both are fixed here rather than by asking the desk to edit the
 * snippet, which is a thing nobody remembers to do twice.
 *
 * The rules are scoped to .mena-embed — the wrapper the plugin puts around
 * each one — except where the provider replaces our markup with its own and
 * there is nothing left to scope to. Those are the !important ones, and they
 * are !important because the provider writes its width into a style attribute.
 */

.mena-embed {
	margin-block: 22px;
	margin-inline: auto;
	max-width: 100%;
}

/* ---------------------------------------------------------------- frames */

.mena-embed--frame iframe {
	display: block;
	max-width: 100%;
	margin-inline: auto;
	border: 0;
}

/*
 * A video is 16:9 and its own width.
 *
 * aspect-ratio rather than the old padding-top box: one line, no absolutely
 * positioned child, and the frame keeps its shape while it is still loading —
 * which is what stops the paragraph under it jumping up the page when the
 * player finally arrives.
 */
.mena-embed--video {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	background: var(--mena-surface-2, #eff0f4);
	border-radius: 12px;
	overflow: hidden;
}

.mena-embed--video iframe {
	width: 100%;
	height: 100%;
}

/* A frame that is not a video keeps whatever height it asked for; only its
   width is brought back inside the column. */
.mena-embed--frame:not(.mena-embed--video) iframe { width: 100%; }

/* --------------------------------------------------------- social cards */

/*
 * 550px is X's own card width and the width Instagram settles at in a narrow
 * column. Wider than that and the card is a band of white across an article;
 * narrower is the provider's business.
 */
.mena-embed--social {
	width: 100%;
	max-width: 550px;
	text-align: left;
}

/*
 * What the reader sees before the provider's script arrives.
 *
 * The pasted blockquote is real content — the text of the post, and a link to
 * it — so it is dressed as a quotation rather than hidden. If the script never
 * loads, because a reader blocks third-party requests or the provider is down,
 * this is what stays on the page, and it still says what was quoted and links
 * to where it came from.
 */
.mena-embed--social > blockquote {
	margin: 0;
	/*
	 * box-sizing and the two !importants are all one fix.
	 *
	 * Instagram's snippet carries style="width:99.375%; min-width:326px" on
	 * the blockquote itself, and this page's box model is content-box, so the
	 * card came out 373px wide inside a 337px column and hung off the edge of
	 * the article. An inline style can only be beaten by !important, and the
	 * min-width has to go with the width or it simply wins instead.
	 */
	box-sizing: border-box;
	width: 100% !important;
	min-width: 0 !important;
	max-width: 100%;
	padding: 16px 18px;
	border: 1px solid var(--mena-border, #e6e6ec);
	border-radius: 14px;
	background: var(--mena-elevated, #fff);
	font-size: 14px;
	line-height: 1.6;
	color: var(--mena-text, #1a1a1a);
}

.mena-embed--social > blockquote p { margin: 0 0 8px; }
.mena-embed--social > blockquote a { color: var(--mena-blue, #2f6fed); }

/*
 * And what it looks like afterwards.
 *
 * X swaps the blockquote for a <twitter-widget>, Instagram and TikTok for an
 * <iframe>, and both write a width into the element's style attribute. There
 * is no class of ours left on them to raise the specificity with, so the cap
 * has to out-rank an inline style, which only !important does.
 */
.mena-embed--social iframe,
.mena-embed--social twitter-widget {
	max-width: 100% !important;
	min-width: 0 !important;
	margin-inline: auto !important;
}

.mena-embed--instagram iframe {
	/* Instagram asks for 658px and settles for less; without this the ask
	   wins in any column narrower than that. */
	width: 100% !important;
}

/* ------------------------------------------------ the rest of the column */

/*
 * The safety net.
 *
 * Anything pasted that this plugin did not recognise — a provider added next
 * year, an <img> from a press release, a table lifted out of a PDF — still
 * cannot push the article sideways. A reader who has to scroll left and right
 * to read a paragraph has a broken page, whatever caused it.
 */
.entry-content iframe,
.entry-content img,
.entry-content video {
	max-width: 100%;
}

.entry-content table { display: block; max-width: 100%; overflow-x: auto; }

/*
 * WordPress's own embed block gets the same treatment, since an editor who
 * pastes a bare YouTube address on its own line gets one of these instead of
 * the provider's snippet.
 */
.entry-content .wp-block-embed__wrapper iframe { max-width: 100%; }

.entry-content .wp-block-embed.is-type-video .wp-block-embed__wrapper {
	position: relative;
	aspect-ratio: 16 / 9;
	border-radius: 12px;
	overflow: hidden;
}

.entry-content .wp-block-embed.is-type-video .wp-block-embed__wrapper iframe {
	width: 100%;
	height: 100%;
}

@media (max-width: 768px) {
	.mena-embed { margin-block: 18px; }
	.mena-embed--video { border-radius: 10px; }
}