/*
 * Media credit (BMM-29).
 *
 * Measured from the source's `CaptionCredit` on tarot-horoskop-woche and
 * leni-klum-bikini, mobile and desktop — identical at both, so there is no
 * breakpoint here. Every value is a theme.json preset, and line-height is a
 * ratio rather than the measured 18px, matching the caption and the theme's
 * other blocks — 12 x 1.5 = 18 exactly, now that `kicker` is a flat 12px.
 *
 * Scope is deliberately narrow: this file owns `.glamour-caption__credit` and
 * the editor-parity `::after` only. **Caption typography is the theme's**, and
 * lives in `theme.json` under `styles.blocks.core/image|core/video`. A plugin
 * rule on `.wp-block-image figcaption` would outrank the theme's
 * `elements.caption` on specificity and silently make Site Editor > Styles >
 * Caption do nothing — and it would contradict this plugin's own boundary,
 * that presentation belongs to the theme.
 *
 * Serves `core/image` and `core/video` alike: Upload Media, Asset(Photo) and
 * Asset(Clip) are all Core blocks with adjustments, not custom blocks.
 */

/*
 * Inline, so it flows on from the caption text exactly as the source does
 * rather than dropping to its own line.
 */
.glamour-caption__credit {
	display: inline;
	font-family: var(--wp--preset--font-family--sans-semicondensed);
	font-size: var(--wp--preset--font-size--kicker);
	font-weight: 500;
	line-height: 1.5;
	color: var(--wp--preset--color--grey);
}

/*
 * The 8px gap only applies after caption text — a standalone credit (no
 * caption before it) sits flush with the figure, matching the source.
 */
.glamour-caption__credit--after-caption {
	margin-left: 8px;
}

/*
 * Links inside a credit keep the source's hover/focus underline. Per §6a this
 * reproduces the source's states but never its `outline-style: none`.
 */
.glamour-caption__credit a {
	color: inherit;
	text-decoration: underline;
}

/*
 * Editor parity.
 *
 * `render_block` does not run in the editor, so the credit is drawn from a
 * custom property that media-credit-editor.js puts on the block wrapper — a
 * variable rather than an attribute because `attr()` cannot reach past the
 * element the pseudo-element belongs to. A pseudo-element is used on purpose:
 * the caption is `contenteditable`, and any real node inside it would be
 * serialised into the caption attribute on save.
 *
 * Same type treatment as `.glamour-caption__credit` above, so the canvas and
 * the published page read the same.
 */
[data-glamour-credit-position="caption"] figcaption::after,
[data-glamour-credit-position="standalone"]::after {
	content: var(--glamour-credit);
	font-family: var(--wp--preset--font-family--sans-semicondensed);
	font-size: var(--wp--preset--font-size--kicker);
	font-weight: 500;
	line-height: 1.5;
	color: var(--wp--preset--color--grey);
}

/* Same 8px-after-caption-text rule as `--after-caption` on the front end. */
[data-glamour-credit-position="caption"] figcaption::after {
	margin-left: 8px;
}

/*
 * With no caption the front end creates a figcaption holding the credit alone,
 * so the editor draws it on its own line under the media with the same offset.
 */
[data-glamour-credit-position="standalone"]::after {
	display: block;
	margin-top: 8px;
}