/* =========================================================================
 * Content Slider 001 — Rooms, Scrolled Sideways
 *
 * Default (phones, no JS, reduced motion, the editor): the room panels stack,
 * each a two-column composition. `is-horizontal` (pattern.js, tablets up) makes
 * the stage sticky and lays the panels in one row, one screen wide each, and
 * the script slides the row as the page scrolls.
 *
 * In a panel: the words on the left, a large photo in the middle and a small
 * one overlapping its lower right corner (composition geometry, in shares).
 * ========================================================================= */

.content-slider-001 {
	position: relative;
	/* The page's paper, like the Manifesto before it. */
	background: var(--color-background);
}

.content-slider-001.content-slider-001 > *,
.content-slider-001__stage.content-slider-001__stage > *,
.content-slider-001__track.content-slider-001__track > * {
	margin-block: 0;
}

.content-slider-001__panel {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
	align-items: center;
	column-gap: 6%;
	width: min(100% - var(--gutter) * 2, var(--container-width));
	margin-inline: auto !important;
	padding-block: var(--space-xl);
}

.content-slider-001__copy {
	grid-column: 1;
	grid-row: 1;
}

.content-slider-001__copy > * {
	margin-block: 0;
}

.content-slider-001__copy h2 {
	margin-block: var(--space-sm);
}

.content-slider-001 .content-slider-001__photo.content-slider-001__photo {
	margin: 0;
	overflow: hidden;
	border-radius: var(--radius);
}

.content-slider-001__photo img,
.content-slider-001__finale-photo img {
	display: block;
	width: 100%;
	height: 100%;
}

.content-slider-001__photo--a {
	grid-column: 2;
	grid-row: 1;
	width: 82%;
}

.content-slider-001 .content-slider-001__photo--b.content-slider-001__photo--b {
	position: absolute;
	right: 0;
	bottom: calc(var(--space-xl) - var(--space-lg));
	width: 26%;
	box-shadow: 0 18px 40px color-mix(in srgb, var(--color-primary-dark) 16%, transparent);
}

.content-slider-001__finale {
	width: min(100% - var(--gutter) * 2, var(--container-width));
	margin-inline: auto !important;
	padding-block: 0 var(--space-xl);
}

.content-slider-001 .content-slider-001__finale-photo.content-slider-001__finale-photo {
	margin: 0;
	overflow: hidden;
	border-radius: var(--radius);
}

/* ---- Sideways (pattern.js adds the class, tablets up) -------------------- */

.content-slider-001.is-horizontal .content-slider-001__stage {
	position: sticky;
	top: 0;
	height: 100svh;
	overflow: hidden;
}

.content-slider-001.is-horizontal .content-slider-001__track {
	display: flex;
	height: 100%;
	will-change: transform;
}

.content-slider-001.is-horizontal .content-slider-001__panel {
	flex: none;
	width: 100vw;
	height: 100%;
	/* The small photo's size, and how far it hangs below the large one (a
	   share of its own height): composition geometry. */
	--content-slider-001-b: calc((100vw - var(--gutter) * 2) * 0.26);
	--content-slider-001-hang: 0.4;

	align-content: center;
	margin: 0 !important;
	/* The pair is centred as one: the extra room below is the small photo's
	   hang, which half of shifts the composition up to even the space above
	   and below it. */
	padding: var(--space-xl) var(--gutter) calc(var(--space-xl) + var(--content-slider-001-b) * var(--content-slider-001-hang));
}

/* Sideways, the small photo is tied to the large one, not to the screen: it
   shares the large photo's cell, its bottom on the large one's bottom, then
   hangs below by a share of its height; it still runs to the screen's right
   edge (past the gutter), as before. */
.content-slider-001.is-horizontal .content-slider-001__photo--b.content-slider-001__photo--b {
	position: relative;
	right: auto;
	bottom: auto;
	grid-column: 2;
	grid-row: 1;
	align-self: end;
	justify-self: end;
	width: var(--content-slider-001-b);
	margin-inline-end: calc(var(--gutter) * -1);
	translate: 0 calc(var(--content-slider-001-hang) * 100%);
}

.content-slider-001.is-horizontal .content-slider-001__finale {
	position: relative;
	flex: none;
	display: grid;
	place-items: center;
	width: 100vw;
	height: 100%;
	margin: 0 !important;
	padding: 0;
}

.content-slider-001.is-horizontal .content-slider-001__finale-photo.content-slider-001__finale-photo {
	/* A full screen, shown as a smaller rounded frame by pattern.js (a clip
	   plus a scale) that opens out to full bleed as the page scrolls. Its
	   corners come from the clip, so the box itself is square. */
	width: 100%;
	height: 100%;
	border-radius: 0;
	will-change: transform, clip-path;
}

@media (max-width: 48rem) {
	.content-slider-001__panel {
		grid-template-columns: minmax(0, 1fr);
		row-gap: var(--space-md);
		padding-block: var(--space-lg);
	}

	.content-slider-001__photo--a {
		grid-column: 1;
		grid-row: 2;
		width: 88%;
	}

	.content-slider-001 .content-slider-001__photo--b.content-slider-001__photo--b {
		bottom: var(--space-sm);
		width: 36%;
	}
}