/**
 * Project Showcase: screenshots in device frames.
 *
 * Positions are percentages of a 920×575 stage, so the composition scales
 * fluidly; narrow containers switch to a simpler laptop + phone layout.
 */

.wb-project-showcase {
	container-type: inline-size;
	margin-block: var(--wp--preset--spacing--40, 2.5rem);
}

.wb-project-showcase__stage {
	position: relative;
	max-width: 920px;
	margin-inline: auto;
	aspect-ratio: 920 / 575;
}

.wb-device {
	position: absolute;
	background: no-repeat top left / 100% auto;
}

.wb-device__screen {
	position: absolute;
	overflow: hidden auto;
	overscroll-behavior: contain;
	background-color: #fff;
	scrollbar-width: thin;
	scrollbar-color: rgb(100 100 100 / 0.8) transparent;
}

.wb-device__screen img {
	display: block;
	width: 100%;
	max-width: none;
	height: auto;
}

.wb-device--desktop {
	z-index: 1;
	top: 0;
	left: 11.09%;
	width: 63.7%;
	aspect-ratio: 2416 / 1833;
	background-image: url("../images/desktop@2x.png");
}

.wb-device--desktop .wb-device__screen {
	top: 4.05%;
	left: 3.07%;
	width: 93.86%;
	height: 70.85%;
}

.wb-device--laptop {
	z-index: 2;
	top: 45.91%;
	left: 48.04%;
	width: 51.85%;
	aspect-ratio: 1676 / 1013;
	background-image: url("../images/laptop@2x.png");
}

.wb-device--laptop .wb-device__screen {
	top: 5.55%;
	left: 10.9%;
	width: 78.2%;
	height: 81.51%;
	border-radius: 4px;
}

.wb-device--tablet {
	z-index: 3;
	top: 40%;
	left: 0.22%;
	width: 26.51%;
	aspect-ratio: 2367 / 3105;
	background-image: url("../images/tablet-alt@2x.png");
}

.wb-device--tablet .wb-device__screen {
	top: 5%;
	left: 5.74%;
	width: 91.02%;
	height: 91.56%;
	border-radius: 4px;
}

.wb-device--mobile {
	z-index: 4;
	top: 65.22%;
	left: 19.78%;
	width: 10.1%;
	aspect-ratio: 316 / 667;
	background-image: url("../images/mobile@2x.png");
}

.wb-device--mobile .wb-device__screen {
	top: 1.53%;
	left: 3.23%;
	width: 94.7%;
	height: 94.9%;
	border-radius: 12% / 5.6%;
}

/* Hole-punch camera. */
.wb-device--mobile::after {
	content: "";
	position: absolute;
	z-index: 1;
	top: 2.5%;
	left: 50%;
	width: 4%;
	aspect-ratio: 1;
	border-radius: 50%;
	background-color: #000;
	translate: -50% 0;
}

@container (max-width: 560px) {
	.wb-project-showcase__stage {
		aspect-ratio: 5 / 3;
	}

	.wb-device--desktop,
	.wb-device--tablet {
		display: none;
	}

	.wb-device--laptop {
		top: 0;
		left: 0;
		width: 85%;
	}

	.wb-device--mobile {
		top: 29.7%;
		left: 78%;
		width: 20%;
	}
}