/* Device Mockup block (inc/device-mockup.php). Loaded only where the block is used. */
.ust-mockup { margin: 0 auto; width: 100%; }
.ust-mockup__frame { position: relative; overflow: hidden; }
.ust-mockup__img { display: block; width: 100%; height: auto; }
.ust-mockup__caption { margin-top: .8rem; text-align: center; font-size: .9rem; opacity: .75; }

/* Browser window */
.ust-mockup--browser .ust-mockup__frame {
	border-radius: 14px;
	background: #fff;
	border: 1px solid rgba(15, 23, 42, .1);
	box-shadow: 0 30px 60px -20px rgba(15, 23, 42, .35), 0 12px 24px -12px rgba(15, 23, 42, .2);
}
.ust-mockup__bar {
	display: flex; align-items: center; gap: 7px;
	height: 38px; padding: 0 14px;
	background: #F1F4F9; border-bottom: 1px solid rgba(15, 23, 42, .08);
}
.ust-mockup__bar span { width: 11px; height: 11px; border-radius: 50%; background: #FF5F57; flex: none; }
.ust-mockup__bar span:nth-child(2) { background: #FEBC2E; }
.ust-mockup__bar span:nth-child(3) { background: #28C840; }
.ust-mockup__bar em {
	font-style: normal; font-size: .78rem; color: #5B6577;
	background: #fff; border-radius: 999px; padding: 4px 14px; margin-left: 12px;
	flex: 0 1 340px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}

/* Fixed screen shape (ratio option): crop from the top-left. */
.ust-mockup--cropped .ust-mockup__screen { overflow: hidden; }
.ust-mockup--cropped .ust-mockup__img { width: 100%; height: 100%; object-fit: cover; object-position: left top; }

/* Phone */
.ust-mockup--phone { max-width: 320px; }
.ust-mockup--phone .ust-mockup__frame {
	border-radius: 42px;
	padding: 12px;
	background: #0B1220;
	box-shadow: 0 30px 60px -20px rgba(15, 23, 42, .45), inset 0 0 0 2px #2A3245;
}
.ust-mockup--phone .ust-mockup__frame::before {
	content: ""; position: absolute; z-index: 2; top: 20px; left: 50%; transform: translateX(-50%);
	width: 30%; height: 22px; border-radius: 999px; background: #0B1220;
}
.ust-mockup--phone .ust-mockup__screen { border-radius: 30px; overflow: hidden; aspect-ratio: 9 / 19; background: #0B1220; }
.ust-mockup--phone .ust-mockup__img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }

/* Optional 3D tilt (flat on small screens and for reduced motion). */
@media (min-width: 961px) and (prefers-reduced-motion: no-preference) {
	.ust-mockup--tilt .ust-mockup__frame { transform: perspective(1600px) rotateY(-8deg) rotateX(2deg); transition: transform .4s ease; }
	.ust-mockup--tilt:hover .ust-mockup__frame { transform: none; }
}