/*
 * AI Image Notice.
 *
 * The notice is pinned inside the image box rather than placed below it.
 * Themes routinely crop the featured image with a fixed height or
 * aspect-ratio plus overflow:hidden (and the Featured Image block does the
 * same when an aspect ratio is set); anything laid out below the image is then
 * clipped away and the notice silently disappears. Sitting inside the box is
 * the only placement that survives every one of those cases.
 */

.ai-image-notice {
	display: block;
	position: relative;
	margin: 0;
	padding: 0;
	/*
	 * Stand in for the <img> we wrapped, so theme rules like
	 * `.media img { width: 100%; height: 100% }` still have something definite
	 * to resolve against and the theme's crop is preserved. Without this the
	 * wrapper is sized by its content — and inside a flex container that
	 * collapses the image completely. Both resolve to auto when the parent
	 * does not constrain that axis, so unconstrained layouts are unaffected.
	 */
	width: 100%;
	height: 100%;
}

/* Keep the image centred if the theme centred it in a flex/grid box. */
.ai-image-notice > img {
	display: block;
	margin-inline: auto;
}

/* When the caption is injected into a <figure> the theme or the block editor
   already provides, that figure is the positioning context. */
figure:has(> .ai-image-notice__text) {
	position: relative;
}

/*
 * The class is doubled purely to raise specificity to (0,2,0), so that the
 * usual (0,1,1) caption rules shipped by blocks and themes — for example
 * `.wp-block-image figcaption { text-align: center; padding: 1em }` — do not
 * override the notice. A theme is still free to restyle the notice with an
 * equally specific rule of its own; that is intentional.
 */
.ai-image-notice__text.ai-image-notice__text {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 1;
	margin: 0;
	/* Tall top padding so the scrim fades in above the text. */
	padding: 1.6em 0.9em 0.55em;
	border-bottom-right-radius: inherit;
	border-bottom-left-radius: inherit;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.62), rgba(0, 0, 0, 0));
	color: #fff;
	font-size: 0.75rem;
	line-height: 1.3;
	text-align: left;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
	/* Never steal a click: the image is often wrapped in a link. */
	pointer-events: none;
}

@media (prefers-contrast: more) {

	.ai-image-notice__text.ai-image-notice__text {
		background: rgba(0, 0, 0, 0.85);
		text-shadow: none;
	}
}

/*
 * Contextual Related Posts prints the post title immediately below the
 * thumbnail, inside the same link, so a notice on the bottom edge sits on top
 * of it. Move it to the top edge for this widget only. The scrim gradient and
 * the inherited corner radii are flipped with it, or the fade would run the
 * wrong way and the rounded-thumbs skin would round the wrong corners.
 */
.crp_related .ai-image-notice__text.ai-image-notice__text {
	top: 0;
	bottom: auto;
	padding: 0.3em 0.9em 0.55em;
	border-radius: 0;
	border-top-left-radius: inherit;
	border-top-right-radius: inherit;
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0.62), rgba(0, 0, 0, 0));
}

/*
 * Escape hatch for layouts that crop images with the old padding-bottom ratio
 * trick (`height: 0; padding-bottom: 56.25%`). Our wrapper's `height: 100%`
 * resolves against that zero content height, so it collapses to nothing and the
 * caption's `bottom: 0` lands on the *top* edge of the picture, where the
 * container's `overflow: hidden` clips it away.
 *
 * Point this at the offending wrapper from Additional CSS:
 *
 *     .some-builder__media > .ai-image-notice { position: absolute; inset: 0; }
 *
 * Note the "Extra CSS class" setting is not the right vehicle unless *every*
 * image on the site sits in such a box, because it applies to every notice.
 */
.ai-image-notice--fill {
	position: absolute;
	inset: 0;
}

/*
 * Spectra (Ultimate Addons for Gutenberg) post grid — the case above, shipped
 * ready-made because it is common. The link is the ratio box, and Spectra sizes
 * the image with a DIRECT-CHILD selector (`a[class^=uagb-image-ratio-] > img`)
 * that our <figure> silently breaks, so the second rule restores it.
 *
 * `uagb-image-ratio-inherit` is excluded on purpose: that variant is a
 * normal-flow block (`padding-bottom: 0; height: auto`), and taking our wrapper
 * out of flow there would collapse the link to nothing.
 */
.uagb-post__image > a[class*="uagb-image-ratio-"]:not(.uagb-image-ratio-inherit) > .ai-image-notice {
	position: absolute;
	inset: 0;
}

.uagb-post__image > a[class*="uagb-image-ratio-"]:not(.uagb-image-ratio-inherit) > .ai-image-notice > img {
	position: absolute;
	height: 100%;
}