/*
 * rooster/screens (now a variant of the library: BRIEF-2026-11-01-BLOCK-LIBRARY.md) (BRIEF-2026-10-31-LANDING-PARITY-2.md item 7): the legacy home's demo screenshots on the theme's
 * tokens: the computer's rounded (1rem) with the hairline border and a large shadow, the phone's in a 4px frame
 * (1.6rem corners) over the lower right corner; on a phone document the phone's alone, two thirds of the width up to
 * 16rem, centred. Compiled by build/blocks-css.mjs to style.css.
 */

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

.rooster-screens {
	position: relative;
	margin: 2.5rem 0 0;
	padding: 0;
}

/* 2.5rem under the buttons above it, over the gap of the layout around it (the legacy's mt-10). */
.rooster-screens.wp-block-rooster-media {
	margin-block-start: 2.5rem;
}

.rooster-screens img {
	display: block;
	height: auto;
	box-sizing: border-box;
}

.rooster-screens__desktop {
	width: 100%;
	border: 1px solid var(--wp--preset--color--line, rgb(255 255 255 / 10%));
	border-radius: 1rem;
	box-shadow: 0 25px 50px -12px rgb(0 0 0 / 25%);
}

.rooster-screens__phone {
	position: absolute;
	right: -1rem;
	bottom: -2.5rem;
	width: 28%;
	border: 4px solid light-dark(var(--wp--preset--color--contrast, #0f172b), color-mix(in srgb, var(--wp--preset--color--muted, #90a1b9) 35%, var(--wp--preset--color--bg, #020618)));
	border-radius: 1.6rem;
	box-shadow: 0 25px 50px -12px rgb(0 0 0 / 25%);
}

.rooster-screens--phone .rooster-screens__phone {
	position: static;
	width: 66.667%;
	max-width: 16rem;
	margin-inline: auto;
}