/* Front-page angled frames from the supplied transparent images.
 * Keep the original shell sizes so the parrot and surrounding layout stay put.
 * hero-photo-devices.js projects the existing portfolio tracks into the screens.
 */
.slb-hero-showcase--photo-devices .slb-hero-showcase__laptop-shell,
.slb-hero-showcase--photo-devices .slb-hero-showcase__device-shell {
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	isolation: isolate;
}

.slb-hero-showcase--photo-devices .slb-hero-showcase__laptop-shell {
	aspect-ratio: 1320 / 902;
	transform: translateX(-30px) scale(1.3225);
}

.slb-hero-showcase--photo-devices .slb-hero-showcase__device-shell {
	aspect-ratio: 662 / 1324;
}

.slb-hero-showcase--photo-devices .slb-hero-showcase__laptop-shell::before,
.slb-hero-showcase--photo-devices .slb-hero-showcase__laptop-shell::after,
.slb-hero-showcase--photo-devices .slb-hero-showcase__device-shell::before,
.slb-hero-showcase--photo-devices .slb-hero-showcase__device-shell::after {
	content: "";
	position: absolute;
	z-index: 0;
	border-radius: 0;
	transform: none;
	box-shadow: none;
	background-color: transparent;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	pointer-events: none;
}

/* Laptop: 1536 x 1024, visible bounds (70, 49), 1377 x 960. */
.slb-hero-showcase--photo-devices .slb-hero-showcase__laptop-shell::before,
.slb-hero-showcase--photo-devices .slb-hero-showcase__laptop-shell::after {
	left: -3.990451%;
	top: -5.104167%;
	width: 109.333333%;
	height: 106.666667%;
	background-image: url('../images/brand/hero-laptop-angled-20260909.webp');
}

.slb-hero-showcase--photo-devices .slb-hero-showcase__laptop-screen {
	position: absolute;
	z-index: 1;
	left: 0;
	top: 0;
	width: 157.575758%;
	height: auto;
	max-width: none;
	aspect-ratio: 1440 / 900;
	border-radius: 1.25% 1.25% 0 0 / 2% 2% 0 0;
	box-shadow: none;
	transform-origin: 0 0;
	visibility: hidden;
}

.slb-hero-showcase--photo-devices .slb-hero-showcase__laptop-base {
	display: none;
}

/* Phone: 1086 x 1448, visible bounds (174, 177), 770 x 1160. */
.slb-hero-showcase--photo-devices .slb-hero-showcase__device-shell::before,
.slb-hero-showcase--photo-devices .slb-hero-showcase__device-shell::after {
	left: -46.379310%;
	top: -15.258621%;
	width: 187.241379%;
	height: 124.827586%;
	background-image: url('../images/brand/hero-phone-angled-20260909.webp');
}

.slb-hero-showcase--photo-devices .slb-hero-showcase__device-screen {
	--slb-hero-phone-status-height: 8%;
	position: absolute;
	z-index: 1;
	left: 0;
	top: 0;
	width: 177.643504%;
	height: auto;
	max-width: none;
	aspect-ratio: 396 / 890;
	border-radius: 13.888889% / 5.842697%;
	box-shadow: 0 0 0 8px #292b2f;
	transform-origin: 0 0;
	visibility: hidden;
}

/* Keep each original camera cutout above the live previews. */
.slb-hero-showcase--photo-devices .slb-hero-showcase__laptop-shell::after {
	display: none;
	z-index: 2;
	clip-path: polygon(54.65% 9.6%, 61.17% 9.13%, 61.12% 10.72%, 60.9% 10.94%, 54.87% 11.31%, 54.69% 11.1%);
}

.slb-hero-showcase--photo-devices .slb-hero-showcase__device-shell::after {
	z-index: 2;
	clip-path: polygon(36.5% 15.45%, 48% 16.8%, 49% 17.4%, 49.1% 18.5%, 48.5% 19.35%, 47.3% 19.48%, 36.6% 18.25%, 35.9% 17.25%, 35.7% 16.45%);
}

/* The phone status bar stays fixed while the screenshots move beneath it. */
.slb-hero-showcase--photo-devices .slb-hero-showcase__device-screen::before {
	content: "";
	position: absolute;
	z-index: 2;
	inset: 0 0 auto;
	height: var(--slb-hero-phone-status-height);
	background: #292b2f;
	pointer-events: none;
}

.slb-hero-showcase--photo-devices .slb-hero-showcase__viewport {
	position: absolute;
	inset: 0;
	overflow: hidden;
	/* Clip the long strip before projecting it onto the angled screen. */
	contain: paint;
}

.slb-hero-showcase--photo-devices .slb-hero-showcase__device-screen > .slb-hero-showcase__viewport {
	top: var(--slb-hero-phone-status-height);
}

.slb-hero-showcase--photo-devices .slb-hero-showcase__laptop-slide img,
.slb-hero-showcase--photo-devices .slb-hero-showcase__device-slide img {
	height: 100%;
	object-fit: cover;
}

/* Keep consecutive screenshots flush without background strips. */
.slb-hero-showcase--photo-devices .slb-hero-showcase__laptop-slide,
.slb-hero-showcase--photo-devices .slb-hero-showcase__device-slide {
	background: none;
}

/* Keep the legacy screen shading disabled. */
.slb-hero-showcase--photo-devices .slb-hero-showcase__laptop-slide::after,
.slb-hero-showcase--photo-devices .slb-hero-showcase__device-slide::after {
	display: none;
}

/* Lift dark tones and soften colors without clipping the highlights. */
.slb-hero-showcase--photo-devices .slb-hero-showcase__laptop-slide img,
.slb-hero-showcase--photo-devices .slb-hero-showcase__device-slide img {
	filter: contrast(0.9) brightness(1.05) saturate(0.92);
}

@media (min-width: 768px) {
	.slb-hero-showcase--photo-devices .slb-hero-showcase__mid-layer {
		margin-left: -30px;
	}
}