/* ==========================================================================
   Chapter 04 — For Talents · Sequence
   Default: lead image and text interleaved in one column (no duplication:
   the wrappers become display: contents and items are ordered).
   Wide screens + JS (.sequence.is-enhanced): a sticky portrait frame on the
   left changes sitter as each category crosses the middle of the screen.
   Wide screens without it: each sitter beside its text.
   ========================================================================== */

.sequence {
	display: grid;
	gap: var(--s-6);
	padding: var(--s-8) var(--margin) var(--s-9);
}

.sequence__media,
.sequence__stage {
	display: contents;
}

.sequence__counter {
	display: none;
}

.sequence__frame[data-seq-item="1"] { order: 1; }
.sequence__panel--1 { order: 2; }
.sequence__frame[data-seq-item="2"] { order: 3; }
.sequence__panel--2 { order: 4; }
.sequence__frame[data-seq-item="3"] { order: 5; }
.sequence__panel--3 { order: 6; }

.sequence__panel {
	display: grid;
	gap: var(--s-6);
	margin-bottom: var(--s-7);
}

/* One to three columns, from the number of photographs (--cols and --max are
   set on the grid by the theme); a photograph can be two columns wide. */
.sequence__extras {
	display: grid;
	grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr));
	gap: var(--gutter);
	align-items: start;
	max-width: var(--max, 36rem);
}

.sequence__extra--wide {
	grid-column: span 2;
}

@media (min-width: 48em) {
	.sequence__frame {
		width: 72%;
	}

	.sequence__frame[data-seq-item="2"] {
		margin-left: auto;
	}
}

/* Wide screens without the sticky sequence (reduced motion, paused, no JS):
   each sitter beside its text, as in the sticky layout, so a whole portrait
   fits on screen. */
@media (min-width: 64em) {
	.sequence:not(.is-enhanced) {
		grid-template-columns: repeat(12, minmax(0, 1fr));
		column-gap: var(--gutter);
		row-gap: var(--s-8);
		align-items: center;
	}

	.sequence:not(.is-enhanced) .sequence__frame {
		grid-column: 1 / span 5;
		width: auto;
		margin-left: 0;
	}

	.sequence:not(.is-enhanced) .sequence__panel {
		grid-column: 7 / span 6;
		margin-bottom: 0;
	}

	.sequence:not(.is-enhanced) .sequence__frame[data-seq-item="1"],
	.sequence:not(.is-enhanced) .sequence__panel--1 { grid-row: 1; }
	.sequence:not(.is-enhanced) .sequence__frame[data-seq-item="2"],
	.sequence:not(.is-enhanced) .sequence__panel--2 { grid-row: 2; }
	.sequence:not(.is-enhanced) .sequence__frame[data-seq-item="3"],
	.sequence:not(.is-enhanced) .sequence__panel--3 { grid-row: 3; }
}

/* Sticky sequence ------------------------------------------------------- */

.sequence.is-enhanced {
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: var(--gutter);
	row-gap: 0;
}

.sequence.is-enhanced .sequence__media {
	position: sticky;
	top: 0;
	grid-column: 1 / span 5;
	grid-row: 1 / span 3;
	align-self: start;
	display: flex;
	flex-direction: column;
	justify-content: center;
	height: 100vh;
	height: 100svh;
	padding-top: var(--header-h);
}

.sequence.is-enhanced .sequence__stage {
	position: relative;
	display: block;
	width: min(100%, calc((100svh - var(--header-h) - 140px) * 0.8));
	aspect-ratio: 4 / 5;
}

.sequence.is-enhanced .sequence__frame {
	position: absolute;
	inset: 0;
	width: auto;
	margin: 0;
	clip-path: inset(100% 0 0 0);
}

.sequence.is-enhanced .sequence__frame[data-from="above"] {
	clip-path: inset(0 0 100% 0);
}

.sequence.is-enhanced .sequence__frame .frame__media {
	height: 100%;
}

.sequence.is-enhanced .sequence__frame.is-under {
	z-index: 1;
	clip-path: inset(0);
}

.sequence.is-enhanced .sequence__frame.is-active {
	z-index: 2;
	clip-path: inset(0);
	transition: clip-path 1.05s var(--ease-out);
}

.sequence.is-enhanced .sequence__counter {
	display: block;
	margin-top: var(--s-4);
}

.sequence.is-enhanced .sequence__panel {
	grid-column: 7 / span 6;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: var(--s-7);
	min-height: 100vh;
	min-height: 100svh;
	margin: 0;
}

.sequence.is-enhanced .sequence__panel--1 { grid-row: 1; }
.sequence.is-enhanced .sequence__panel--2 { grid-row: 2; }
.sequence.is-enhanced .sequence__panel--3 { grid-row: 3; }