/*
 * Showcase (Figma: Studio "Frame" What happens here and "Frame 23" A living collection; Spinning
 * Wheels "Frame 471"; Felting "Frame 471"). Heading and intro (buttons on the right), a 1136 × 300
 * photo or a row of 368 × 300 photos running off the right edge, then two 560 px text columns,
 * 32 px apart. Phones: one column, the row shows 328 × 368 photos with a progress bar and
 * previous/next buttons, and the buttons move to the end.
 */

.showcase {
	display: grid;
	gap: 32px;
	overflow-x: clip; /* the row of photos runs to the window edge */
}

.showcase__head {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-start;
	gap: 16px 32px;
}

.showcase__title {
	display: grid;
	gap: 16px;
	max-width: 560px;
}

.showcase__intro,
.showcase__text {
	color: var(--c-text-2);
}

.bg-dark .showcase__intro,
.bg-dark .showcase__text {
	color: inherit;
}

.showcase__text > * + * {
	margin-top: var(--lh-body);
}

/* Photos, with an optional caption over a darkened foot. */
.showcase__photo,
.showcase__figure {
	position: relative;
}

.showcase__photo img,
.showcase__figure img {
	width: 100%;
	object-fit: cover;
}

.showcase__photo img {
	aspect-ratio: 1136 / 300;
}

.has-caption::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom, rgb(0 0 0 / 0) 55%, rgb(0 0 0 / 0.75));
	pointer-events: none;
}

.showcase__photo.has-caption::after {
	inset-inline: var(--gutter);
}

.has-caption figcaption {
	position: absolute;
	z-index: 1;
	right: 0;
	bottom: 0;
	left: 0;
	padding: 16px;
	color: var(--c-light);
	font-family: var(--f-display);
	font-size: var(--t-title-s);
	line-height: var(--lh-title-s);
	font-weight: 500;
}

.showcase__photo figcaption {
	inset-inline: var(--gutter);
}

/* Row of photos: lines up with the content column and runs off the right edge. */
.showcase__viewport {
	position: relative;
	display: grid;
	gap: 32px;
}

.showcase__track {
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: max(var(--gutter), (100% - var(--wrap)) / 2);
	scrollbar-width: none;
}

.showcase__track::-webkit-scrollbar {
	display: none;
}

.showcase__track:focus-visible {
	outline-offset: -2px;
}

.showcase__list {
	display: flex;
	gap: 8px;
	width: max-content;
	margin: 0;
	padding: 0 max(var(--gutter), (100% - var(--wrap)) / 2);
	list-style: none;
}

.showcase__slide {
	flex: none;
	width: min(328px, 100vw - 2 * var(--gutter));
	scroll-snap-align: start;
}

.showcase__figure img {
	aspect-ratio: 328 / 368;
}

.showcase__columns {
	display: grid;
	gap: 16px;
}

/* Previous / next buttons and progress bar (shown by section.js when the row scrolls). */
.showcase__controls {
	display: grid;
	gap: 16px;
}

.showcase__progress {
	position: relative;
	height: 2px;
	background: var(--c-line-2);
}

.showcase__progress span {
	position: absolute;
	inset-block: 0;
	left: calc(var(--pos, 0) * (1 - var(--size, 1)) * 100%);
	width: calc(var(--size, 1) * 100%);
	background: var(--c-muted);
}

.showcase__nav {
	display: flex;
	gap: 8px;
}

.showcase__button {
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 1px solid var(--c-line);
	border-radius: 50%;
	background: none;
	color: var(--c-muted);
	transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}

.showcase__button .icon {
	width: 21px;
	height: 21px;
}

.showcase__button:not(:disabled):hover {
	border-color: currentColor;
	color: var(--c-text);
}

.showcase__button:disabled {
	opacity: 0.5;
	cursor: default;
}

@media (max-width: 767px) {
	/* Buttons move below the text. */
	.showcase__head {
		display: contents;
	}

	.showcase__title,
	.showcase__buttons {
		padding-inline: var(--gutter);
	}

	.showcase__buttons {
		order: 1;
	}

	.showcase__photo img {
		aspect-ratio: 328 / 300;
	}
}

@media (min-width: 768px) {
	.showcase__list {
		gap: 16px;
	}

	.showcase__slide {
		width: 368px;
	}

	.showcase__figure img {
		aspect-ratio: 368 / 300;
	}

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

	/* Round buttons over the row, at the edges of the content column; no progress bar. */
	.showcase__controls {
		position: absolute;
		inset: 0;
		display: flex;
		align-items: center;
		pointer-events: none;
	}

	.showcase__progress {
		display: none;
	}

	.showcase__nav {
		flex: 1;
		justify-content: space-between;
	}

	.showcase__button {
		width: 40px;
		height: 40px;
		border: 0;
		background: var(--c-light);
		color: var(--c-text);
		pointer-events: auto;
	}

	.showcase__button .icon {
		width: 24px;
		height: 24px;
	}

	.showcase__button:not(:disabled):hover {
		background: var(--c-text);
		color: var(--c-light);
	}

	.showcase__button:disabled {
		visibility: hidden;
	}

	.showcase__button--next {
		margin-left: auto;
	}
}