/* ========================================================================== *
 * # Shot (product screenshot)
 * ==========================================================================
 * Markup: parts/shot.liquid. Classes: .shot .shot-laptop .shot-phone .shot-frame .shot-placeholder
 *
 * A real screenshot sits in a quiet frame: a hairline and a soft shadow for the laptop, a rounded
 * bezel for the phone. Until the file exists, .shot-placeholder keeps the exact aspect ratio and
 * names the screen to capture, so the layout never shifts when the image arrives.
 * ========================================================================== */

.shot {
	margin: 0;
	min-width: 0;
}

.shot-frame {
	position: relative;
	overflow: hidden;
	background: var(--surface);
	border: var(--border-width) solid var(--line-2);
	box-shadow: 0 24px 60px -24px var(--shadow), 0 2px 6px var(--shadow);

	& img {
		display: block;
		width: 100%;
		height: auto;
	}
}

.shot-laptop .shot-frame {
	border-radius: 14px;
}

.shot-phone {
	max-width: 300px;
	margin-inline: auto;

	& .shot-frame {
		border-radius: 40px;
		border: 8px solid var(--bezel);
		outline: var(--border-width) solid var(--line-2);
	}
}

.shot-placeholder {
	aspect-ratio: 1440 / 900;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--space-50);
	width: 100%;
	padding: var(--space-150);
	background:
		linear-gradient(135deg, var(--pri-tint) 0%, var(--panel) 60%, var(--bg) 100%);
	color: var(--muted);
	text-align: center;
	font-size: var(--small);

	& svg {
		color: var(--pri);
	}
}

/* The phone's placeholder keeps the phone screen's ratio (390 × 844) */
.shot-phone .shot-placeholder {
	aspect-ratio: 390 / 844;
}