/* ==========================================================================
   Chapter 03 — For Brands · Advance (also used by Coverage, chapter 05)
   Default: a vertical sequence of the categories.
   Wide screens + JS (.advance.is-active): the collection travels
   horizontally inside a sticky viewport while the page scrolls down.
   ========================================================================== */

.advance {
	position: relative;
	margin-top: var(--s-8);
	padding-bottom: var(--s-9);
}

.advance__track {
	display: grid;
	gap: var(--s-9);
	padding-inline: var(--margin);
}

.advance__group {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: var(--s-6) var(--gutter);
	align-items: end;
}

.advance__group > * {
	min-width: 0;
}

.advance__text {
	grid-column: 1 / -1;
}

/* Phones: the photographs one under the other, every second one inset. */
.advance__frame {
	grid-column: 1 / -1;
}

.advance__frame:nth-of-type(even) {
	grid-column: 4 / -1;
}

.advance__progress {
	display: none;
}

@media (min-width: 48em) {
	.advance__text {
		grid-column: 1 / span 5;
		align-self: start;
	}

	/* The first photograph beside the text, the second under the text;
	   further photographs alternate below. */
	.advance__frame:nth-of-type(1) {
		grid-column: 6 / -1;
		grid-row: 1 / span 2;
	}

	.advance__frame:nth-of-type(2) {
		grid-column: 1 / span 5;
		grid-row: 2;
	}

	.advance__frame:nth-of-type(n + 3) {
		grid-column: 5 / -1;
	}

	.advance__frame:nth-of-type(2n + 4) {
		grid-column: 1 / span 8;
	}
}

/* Horizontal travel ------------------------------------------------------ */

.advance.is-active {
	padding-bottom: 0;
}

.advance.is-active .advance__viewport {
	position: sticky;
	top: 0;
	height: 100vh;
	height: 100svh;
	overflow: clip;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding-top: var(--header-h);
}

.advance.is-active .advance__track {
	display: flex;
	flex-wrap: nowrap;
	align-items: stretch;
	gap: 8vw;
	width: max-content;
	padding-inline: var(--margin) 14vw;
	will-change: transform;
}

.advance.is-active .advance__group {
	display: flex;
	align-items: flex-end;
	gap: 2.4vw;
}

.advance.is-active .advance__text {
	flex: none;
	width: clamp(260px, 21vw, 380px);
	align-self: flex-start;
	padding-top: 2svh;
}

/* Each photograph's height, place in the row and shifts are set on it (--h,
   --align, --dy, --gap): chosen in the Customizer, else the rhythm of its
   position — each category composes its prints differently. */
.advance.is-active .advance__frame {
	flex: none;
	align-self: var(--align, flex-end);
	margin-left: var(--gap, 0px);
	transform: translateY(var(--dy, 0px));
}

.advance.is-active .advance__frame .frame__media {
	height: var(--h, 50svh);
	width: auto;
}

.advance.is-active .advance__progress {
	display: block;
	position: absolute;
	left: var(--margin);
	right: var(--margin);
	bottom: clamp(20px, 4svh, 40px);
	height: 1px;
	background: color-mix(in srgb, currentColor 22%, transparent);
}

.advance__bar {
	display: block;
	height: 100%;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: left center;
}