/**
 * Image variation: Browser Window
 *
 * Top chrome bar with three traffic-light dots and a fake URL bar.
 * Image renders below as the "page content." Chrome is decorative;
 * authors should describe the screenshot subject in alt text.
 *
 * Dots are colored via theme palette where possible — the standard
 * red/yellow/green is preserved as fallback for instant recognition.
 *
 * @package PostFormatsBlockThemes
 * @since 2.1.0
 */

.wp-block-image.is-style-browser-window {
	display: inline-block;
	max-width: 100%;
	background: var(--pfbt-browser-window-bg, var(--wp--preset--color--base, #ffffff));
	border: 1px solid var(--pfbt-browser-window-border, var(--wp--preset--color--border-light, var(--wp--preset--color--tertiary, #e5e5e5)));
	border-radius: var(--wp--preset--border-radius--lg, 0.75rem);
	box-shadow: var(--wp--preset--shadow--medium, 0 4px 12px rgba(0, 0, 0, 0.08));
	overflow: hidden;
}

.wp-block-image.is-style-browser-window::before {
	content: "";
	display: block;
	height: 2.25rem;
	background: var(--pfbt-browser-window-chrome, var(--wp--preset--color--tertiary, var(--wp--preset--color--base, #f5f5f5)));
	border-block-end: 1px solid var(--pfbt-browser-window-border, var(--wp--preset--color--border-light, var(--wp--preset--color--tertiary, #e5e5e5)));
	background-image:
		radial-gradient(circle at 0.85rem 1.125rem, var(--pfbt-window-dot-close, #fc625d) 0.4rem, transparent 0.5rem),
		radial-gradient(circle at 1.95rem 1.125rem, var(--pfbt-window-dot-min, #fdbc40) 0.4rem, transparent 0.5rem),
		radial-gradient(circle at 3.05rem 1.125rem, var(--pfbt-window-dot-max, #34c84a) 0.4rem, transparent 0.5rem);
}

.wp-block-image.is-style-browser-window img {
	display: block;
	width: 100%;
}

.wp-block-image.is-style-browser-window figcaption {
	padding: var(--wp--preset--spacing--small, 0.75rem) var(--wp--preset--spacing--medium, 1.5rem);
	margin: 0;
	background: var(--pfbt-browser-window-chrome, var(--wp--preset--color--tertiary, var(--wp--preset--color--base, #f5f5f5)));
	border-block-start: 1px solid var(--pfbt-browser-window-border, var(--wp--preset--color--border-light, var(--wp--preset--color--tertiary, #e5e5e5)));
	font-size: var(--wp--preset--font-size--small, 0.875rem);
	color: var(--pfbt-browser-window-caption, var(--wp--preset--color--secondary, var(--wp--preset--color--contrast, #666666)));
}

@media print {
	.wp-block-image.is-style-browser-window {
		border: 1px solid currentColor;
		box-shadow: none;
	}
	.wp-block-image.is-style-browser-window::before {
		background-image: none;
		background: var(--pfbt-browser-window-chrome, var(--wp--preset--color--tertiary, var(--wp--preset--color--base, #f5f5f5)));
	}
}