/*
 * Embed consent placeholder — Copilot `Embed` (BMM-21).
 *
 * Every value below is measured. Two independent sources agree: a style-census
 * signature whose instance count equals the embed count on all ten demo
 * articles, and the source site's own authored CSS, read from a live page —
 *
 *     background: rgba(255,255,255,1);
 *     border: 1px solid rgba(224,224,224,1);
 *     // token: colors.consumption.body.standard.divider
 *     box-sizing: border-box;
 *     padding: 12px 16px;
 *     @media (min-width: 768px) { padding: 16px; }
 *
 * See design-extraction/wordpress-template-map.md §3a.2. Note the token file
 * records `--color-line-embed: #dbdbdb` for this component; that value traces
 * to a hand-built mockup of a *rendered* Instagram post, not the placeholder.
 * The observed #e0e0e0 wins, and it is the same hairline the related post card
 * uses.
 *
 * Theme presets are used where one matches exactly, with the measured literal
 * as the `var()` fallback so the placeholder still renders correctly if these
 * blocks are used outside the `glamour` theme. 14px and 30px have no preset.
 *
 * `margin-block` corrected 24px → 20px: the source wrapper itself carries no
 * margin at all and gets its visible ~20px gap from the neighbouring
 * paragraph's own margin through normal collapsing (measured live, all four
 * checked breakpoints). 20px has no preset either, so this stays literal too,
 * matching that effective gap directly rather than reproducing the source's
 * zero-margin-plus-collapse mechanism.
 */

/*
 * `text-align: center` here, not just `margin-inline: auto`: the released
 * embed (`embed-consent.js`'s `release()`) drops the provider's raw markup
 * in as a direct child via `template.replaceWith()` — no WordPress
 * `.wp-block-embed__wrapper` or similar exists in this path to size or
 * center it. `margin-inline: auto` centers this wrapper within the article
 * column, but the wrapper itself defaults to filling the available width
 * (up to whichever provider modifier's `max-width` applies) while an
 * iframe like Pinterest's keeps its own fixed HTML `width` attribute
 * regardless — so without this, the iframe sits flush against the
 * wrapper's left edge instead of centered inside it.
 */
.glamour-embed {
	margin-block: 20px;
	margin-inline: auto;
	text-align: center;
}

/*
 * Instagram is capped at the provider's natural width and centred in the body
 * column. Measured across eight widths: Instagram 312/342/432 below 480 and
 * then 440 from 768 up.
 */
.glamour-embed--instagram {
	max-width: 440px;
}

/*
 * Pinterest is also capped and centred, not full-measure — corrected after
 * checking the live source: ~600px max, ~346px min, same `margin-inline: auto`
 * centring as Instagram, just a wider natural box.
 */
.glamour-embed--pinterest {
	max-width: 600px;
	min-width: 346px;
}

.glamour-embed__notice {
	box-sizing: border-box;
	padding: 12px 16px;
	border: 1px solid var(--wp--custom--color--hairline, #e0e0e0);
	background-color: var(--wp--preset--color--white, #fff);
	text-align: center;
}

@media (min-width: 768px) {

	.glamour-embed__notice {
		padding: var(--wp--preset--spacing--40, 16px);
	}
}

/*
 * The 30px line-height is not decorative — it is what makes the box measure
 * 104px on mobile and 112px at 768. Content height is title (30 + 16 margin)
 * plus the body's wrapped lines at 16px each.
 */
.glamour-embed__title {
	margin: 0 0 var(--wp--preset--spacing--40, 16px);
	font-family: var(--wp--preset--font-family--serif-display, "EBGaramond", "Times New Roman", Times, serif);
	font-size: 20px;
	font-weight: 500;
	line-height: 30px;
	color: var(--wp--preset--color--ink, #363432);
}

.glamour-embed__body {
	margin: 0;
	font-family: var(--wp--preset--font-family--sans-semicondensed, "InstrumentSansSemiCondensed", helvetica, sans-serif);
	font-size: 14px;
	font-weight: 400;
	line-height: 16px;
	color: var(--wp--preset--color--grey, #6d6c6b);
}

/*
 * The link is ink against the grey sentence it sits inside, and underlined at
 * rest — the one place in this component where the source underlines by
 * default. Scoped from the block root so it beats theme.json's global
 * `elements.link` colour.
 *
 * §6a records `outline-style: none` in every link state on the source site.
 * That is deliberately NOT reproduced, so the browser's focus ring survives for
 * keyboard users — the same stance set with BMM-20.
 */
.glamour-embed .glamour-embed__link {
	color: var(--wp--preset--color--ink, #363432);
	text-decoration: underline;
}

.glamour-embed .glamour-embed__link:hover,
.glamour-embed .glamour-embed__link:focus {
	color: var(--wp--preset--color--accent, #bf3c2b);
}

/*
 * Once released, the provider's own markup replaces the notice. Instagram's SDK
 * sets its own width; this only stops a wide provider iframe from overflowing a
 * narrow column.
 */
.glamour-embed iframe,
.glamour-embed .instagram-media {
	max-width: 100%;
}