/* Home scene 05: Showcase grid (S01, COMPONENTS 12, 17). The card itself is the shared Plate in ui-showcase.css. */

.show {
	padding-block: var(--sec);
	background: var(--ink-950);
	color: var(--fg);
}

.show-head {
	display: grid;
	grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
	gap: var(--margin);
	align-items: end;
}

.show-head .lead-col {
	display: grid;
	gap: 14px;
	justify-items: start;
	justify-self: end;
}

/* the arrow link stretches over its own box only (not the whole section) */
.show-head .go {
	position: relative;
	margin-block-start: 0;
}

.sgrid {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: clamp(28px, 3vw, 48px) clamp(18px, 2.4vw, 36px);
	margin-block-start: clamp(40px, 6vw, 80px);
}

.sgrid > .scard {
	grid-column: span var(--cs);
	min-width: 0;
	display: grid;
	/* the wide card is taller than the narrow one; no empty space is stretched inside the narrow card */
	align-self: start;
}

/* a lone last card keeps the wide size instead of a half-empty row */
.sgrid > .scard:last-child:nth-child(odd) {
	grid-column: span 7;
}

/* the frame shows a shorter window onto the screenshot so there is a page to scroll (image is 16:10, window 16:7) */
.show .dvv {
	aspect-ratio: 16 / 7;
}

.show .dvv img {
	height: auto;
	aspect-ratio: 16 / 10;
	object-fit: initial;
	will-change: transform;
}

html:not(.rm) .show .plate:hover .dvv img,
html:not(.rm) .show .plate:focus-within .dvv img {
	/* window / image = 7 / 10, so 30% of the image height is the whole scroll */
	transform: translateY(-30%);
	transition-duration: 3.6s;
	transition-timing-function: var(--ease-io);
}

.rm .show .dvv img {
	transform: none;
	transition: none;
}

@media (max-width: 1000px) {
	.show-head {
		grid-template-columns: minmax(0, 1fr);
	}

	.show-head .lead-col {
		justify-self: start;
	}

	.sgrid {
		grid-template-columns: minmax(0, 1fr);
	}

	.sgrid > .scard,
	.sgrid > .scard:last-child:nth-child(odd) {
		grid-column: auto;
	}
}