/* ==========================================================================
   Chapter 06 — Selected Work · Edit
   A curated collage on the paper wall: mixed ratios, overlaps, generous
   space, and "Different subjects. / One visual language." between images.
   ========================================================================== */

.edit {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	column-gap: var(--gutter);
	align-items: start;
	padding: var(--s-8) var(--margin) var(--s-9);
}

.edit > * {
	grid-column: 1 / -1;
	min-width: 0;
}

.edit__item {
	position: relative;
	z-index: 2;
	margin-top: var(--s-7);
}

.edit__line {
	position: relative;
	z-index: 1;
	margin-top: var(--s-8);
	font-family: var(--font-serif);
	font-style: italic;
	font-size: min(12.4vw, 11rem);
	line-height: 0.92;
	letter-spacing: -0.03em;
}

.edit__line--2 {
	text-align: right;
}

.edit__index {
	opacity: 1;
}

.edit__title {
	font-weight: 500;
}

/* Phones: one column with alternating widths. */
.edit__item--2,
.edit__item--4,
.edit__item--7,
.edit__item--9 {
	grid-column: 2 / -1;
}

.edit__item--3,
.edit__item--6,
.edit__item--10 {
	grid-column: 1 / span 5;
}

.edit__line + .edit__item {
	margin-top: var(--s-5);
}

@media (min-width: 48em) {
	.edit {
		grid-template-columns: repeat(12, minmax(0, 1fr));
	}

	.edit__line {
		font-size: clamp(4rem, 1.2rem + 9vw, 11rem);
	}

	.edit__item--1  { grid-column: 1 / span 8; }
	.edit__item--2  { grid-column: 9 / span 4; margin-top: 18vw; }
	.edit__item--3  { grid-column: 5 / span 4; }
	.edit__item--4  { grid-column: 9 / span 4; margin-top: 14vw; }
	.edit__item--5  { grid-column: 1 / span 12; }
	.edit__item--6  { grid-column: 1 / span 5; }
	.edit__item--7  { grid-column: 7 / span 4; margin-top: 20vw; }
	.edit__item--8  { grid-column: 4 / span 9; }
	.edit__item--9  { grid-column: 1 / span 5; }
	.edit__item--10 { grid-column: 7 / span 5; margin-top: 16vw; }
}

@media (min-width: 64em) {
	.edit__item--1  { grid-column: 1 / span 7; margin-top: 0; }
	.edit__item--2  { grid-column: 9 / span 3; margin-top: 12vw; }
	.edit__line--1  { margin-top: 6vw; }
	.edit__item--3  { grid-column: 6 / span 3; margin-top: -7vw; }
	.edit__item--4  { grid-column: 10 / span 3; margin-top: 9vw; }
	.edit__item--5  { grid-column: 2 / span 10; margin-top: var(--s-8); }
	.edit__item--6  { grid-column: 1 / span 4; margin-top: var(--s-8); }
	.edit__item--7  { grid-column: 6 / span 3; margin-top: 17vw; }
	.edit__line--2  { margin-top: 3vw; }
	.edit__item--8  { grid-column: 7 / span 6; margin-top: -5.5vw; }
	.edit__item--9  { grid-column: 2 / span 3; margin-top: var(--s-7); }
	.edit__item--10 { grid-column: 7 / span 4; margin-top: 13vw; }
}

/* Free placement (Customize → a photograph → Placement): its own column,
   width and space above, from tablets up. Phones keep the one-column flow. */
@media (min-width: 48em) {
	.edit__item.edit__item--free {
		grid-column: var(--col) / span var(--span);
		margin-top: var(--dy, 0);
	}
}

/* Ensemble (Layout → Ensemble, the default) ---------------------------------
   The photographs in compact rows. In a row the widths follow the photographs'
   shapes (--r), so they share one height; every row takes the height of the
   widest one (--smax, --nmax), capped at --row-h, so rows with fewer or
   narrower photographs are narrower and centred. Phones: one under the other. */

.ensemble {
	--g: clamp(10px, 1.2vw, 18px);
	--row-h: 62svh;
	display: grid;
	row-gap: var(--s-5);
	padding: var(--s-7) var(--margin) var(--s-9);
}

.ensemble__row {
	display: grid;
	gap: var(--s-5);
	min-width: 0;
}

.ensemble__item {
	min-width: 0;
}

.ensemble .edit__line {
	margin-top: 0;
}

@media (min-width: 48em) {
	.ensemble__row {
		display: flex;
		align-items: flex-start;
		gap: var(--g);
		width: min(
			100%,
			calc((100% - (var(--nmax) - 1) * var(--g)) * var(--sum) / var(--smax) + (var(--n) - 1) * var(--g)),
			calc(var(--sum) * var(--row-h) + (var(--n) - 1) * var(--g))
		);
		margin-inline: auto;
	}

	.ensemble__item {
		flex: var(--r) 1 0;
	}
}