/*
 * rooster/media-frame (now a variant of the library: BRIEF-2026-11-01-BLOCK-LIBRARY.md) (BRIEF-2026-11-01-LANDINGS-BY-TEMPLATE.md, order 1): the legacy promo hero's picture frame,
 * complete on its own: the square, the 1.5rem corners clipping the picture, the dark gradient (the legacy's own,
 * #2a2b2f to #1c1d20, in both schemes), the ring (black at 5 % light, white at 10 % dark) and the deep shadow
 * (slate-900 at 20 %); the illustration without a picture in the family's colour, padded 2.5rem. The picture inside
 * is the theme's Responsive image, filling the square. Compiled by build/blocks-css.mjs.
 */

@import "../../theme.css";

.rooster-media-frame {
	position: relative;
	box-sizing: border-box;
	overflow: hidden;
	border-radius: 1.5rem;
	background: linear-gradient(170deg in oklab, #2a2b2f, #1c1d20);
	box-shadow: 0 0 0 1px light-dark(rgb(0 0 0 / 5%), rgb(255 255 255 / 10%)), 0 25px 50px -12px rgb(15 23 43 / 20%);
}

.rooster-media-frame > picture,
.rooster-media-frame > a {
	display: block;
	width: 100%;
	margin: 0;
}

.rooster-media-frame picture,
.rooster-media-frame img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: 0;
}

.rooster-media-frame__motif {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	aspect-ratio: 1;
	padding: 2.5rem;
	color-scheme: dark;
	color: var(--wp--preset--color--accent, light-dark(#334155, #cbd5e1));
}

.rooster-media-frame__motif :is(svg, .wp-block-html, p) {
	display: block;
	width: 100%;
	height: auto;
	margin: 0;
}