/* Over approach steps (spec §4.16): 4:3 photo cards, radius 16, gradient from dark/60 at the bottom, badge 32px radius 8. */
.over-steps { display: grid; gap: calc(var(--spacing) * 6); }
@media (min-width: 48rem) { .over-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(var(--spacing) * 8); } }
.over-step { position: relative; overflow: hidden; border-radius: var(--radius-2xl); aspect-ratio: 4 / 3; }
/* grayscale: the approved treatment for the new colour photos (the live photo is black-and-white itself). */
.over-step__img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); }
.over-step__shade { position: absolute; inset: 0; background-image: linear-gradient(to top, var(--color-dark-60), transparent); }
.over-step__caption {
	position: absolute;
	bottom: calc(var(--spacing) * 4);
	inset-inline: calc(var(--spacing) * 4);
	display: flex;
	align-items: center;
	gap: calc(var(--spacing) * 2);
	color: var(--color-white);
}
.over-step__badge {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: calc(var(--spacing) * 8);
	height: calc(var(--spacing) * 8);
	border-radius: var(--radius-lg);
	font-size: var(--text-sm);
	line-height: var(--text-sm-lh);
	font-weight: var(--font-weight-bold);
}
.over-step__title { font-weight: var(--font-weight-bold); }