/**
 * Composition.
 *
 * The first pass gave the homepage three layouts that alternated, the archive
 * one layout that flipped sides, and a sideways showcase whose panels were all
 * the same width. That is a template's idea of "editorial": it varies once, so
 * the eye learns the shape by the second row and stops looking. The page read
 * as a stack of rectangles because it was one.
 *
 * What is here instead:
 *
 * - Five named compositions on the homepage, cycling. One bleeds past the
 *   container entirely, one lets the text block ride over the photograph, one
 *   hands the row to the typography and shrinks the image to a supporting note.
 * - Archive rows given the same treatment by nth-child, so an editor adding a
 *   sixth residence continues the rhythm without knowing this file exists.
 * - Showcase panels at five widths and five heights, so scrolling sideways
 *   past them does not read as a carousel.
 *
 * Loaded after main.css and deliberately overriding it.
 *
 * @package Domaine
 */

/* ───────────────  Homepage collection: five compositions  ────────────── */

.collection {
	/* The container stops constraining. Individual features decide how far out
	   they reach, and one of them reaches past the viewport edge. */
	max-width: none;
	padding-inline: 0;
}

.collection__head {
	max-width: var(--maxw);
	margin-inline: auto;
	padding-inline: var(--pad);
}

.feature {
	max-width: var(--maxw);
	margin-inline: auto;
	padding-inline: var(--pad);
	margin-bottom: clamp(3.5rem, 8vw, 8rem);
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: clamp(1rem, 2.4vw, 2.4rem);
	row-gap: clamp(1.2rem, 3vw, 2.2rem);
	align-items: start;
}

.feature__media { grid-row: 1; }
.feature__text { grid-row: 1; }

/*
 * I. Bleed.
 *    Once per cycle the photograph ignores the container and runs the full
 *    width of the viewport, with the text beneath it pushed off centre. This is
 *    the row that breaks the page open, so it is the one the visitor meets
 *    first.
 */
.feature--bleed {
	max-width: none;
	padding-inline: 0;
	row-gap: clamp(1.4rem, 3.5vw, 2.8rem);
}
.feature--bleed .feature__media {
	grid-column: 1 / -1;
	grid-row: 1;
}
.feature--bleed .feature__media img {
	width: 100%;
	height: clamp(24rem, 78svh, 52rem);
	object-fit: cover;
}
.feature--bleed .feature__text {
	grid-row: 2;
	grid-column: 6 / 12;
	display: block;
	padding-inline: var(--pad);
}

/*
 * II. Offset.
 *     Text high on the left, a narrow portrait dropped well down the right, so
 *     nothing shares a baseline.
 */
.feature--offset .feature__text {
	grid-column: 1 / 6;
	order: 0;
	padding-top: clamp(0.5rem, 2vw, 2rem);
}
.feature--offset .feature__media {
	grid-column: 8 / 13;
	margin-top: clamp(2.5rem, 9vw, 8rem);
}

/*
 * III. Overlap.
 *      A wide image on the left and the text riding over its right edge rather
 *      than sitting politely beside it. The text keeps its own ground so it
 *      stays readable where it crosses the photograph.
 */
.feature--overlap .feature__media { grid-column: 1 / 10; }
.feature--overlap .feature__text {
	grid-column: 8 / 13;
	align-self: end;
	position: relative;
	z-index: 2;
	margin-bottom: clamp(1.5rem, 5vw, 4rem);
	padding: clamp(1.4rem, 2.6vw, 2.4rem);
	background: var(--paper);
}
.has-atmosphere .feature--overlap .feature__text {
	/* The grounds are painted by the atmosphere layer, so this panel has to
	   carry its own — but only just enough to hold the type. */
	background: color-mix(in srgb, var(--paper) 92%, transparent);
}

/*
 * IV. Type.
 *     The house's name carries the row and the photograph becomes a footnote to
 *     it. The title reaches back across the gutter and crosses the image's edge.
 */
.feature--type .feature__media {
	grid-column: 1 / 5;
	margin-top: clamp(2rem, 7vw, 6rem);
}
.feature--type .feature__text { grid-column: 5 / 13; }
.feature--type .feature__title {
	font-size: clamp(2.4rem, 7.4vw, 6.5rem);
	line-height: 0.95;
	margin-left: clamp(-3.5rem, -2.6vw, -0.8rem);
	margin-bottom: 1rem;
}
.feature--type .feature__excerpt { margin-left: clamp(0rem, 6vw, 7rem); }
.feature--type .spec { margin-left: clamp(0rem, 6vw, 7rem); }

/*
 * V. Tall.
 *    A tall portrait on the right, the text tucked into the lower left.
 */
.feature--tall {
	grid-template-columns: repeat(12, minmax(0, 1fr));
	align-items: start;
}
.feature--tall .feature__media {
	grid-column: 7 / 13;
	max-width: none;
}
.feature--tall .feature__text {
	grid-column: 1 / 6;
	padding-top: clamp(3rem, 13vw, 11rem);
}

/* Crops per composition, so the images are not all the same rectangle either. */
.feature--offset .feature__media img,
.feature--type .feature__media img { aspect-ratio: 4 / 5; object-fit: cover; width: 100%; }
.feature--tall .feature__media img { aspect-ratio: 5 / 7; object-fit: cover; width: 100%; }
.feature--overlap .feature__media img { aspect-ratio: 16 / 10; object-fit: cover; width: 100%; }

/* The old wide layout's split text block is not used by any composition now. */
.feature--wide .feature__text { display: block; }

@media (max-width: 880px) {
	.feature,
	.feature--bleed {
		grid-template-columns: minmax(0, 1fr);
		max-width: none;
		padding-inline: var(--pad);
		margin-bottom: clamp(2.5rem, 9vw, 4rem);
	}
	.feature .feature__media,
	.feature .feature__text {
		grid-column: 1 / -1;
		margin-top: 0;
		padding-top: 0;
		padding-inline: 0;
		margin-bottom: 0;
		background: none;
		padding: 0;
	}
	.feature .feature__media { grid-row: 1; }
	.feature .feature__text { grid-row: 2; }
	.feature .feature__media img {
		aspect-ratio: 3 / 2;
		height: auto;
	}
	.feature--type .feature__title {
		font-size: clamp(1.9rem, 8.5vw, 2.8rem);
		margin-left: 0;
	}
	.feature--type .feature__excerpt,
	.feature--type .spec { margin-left: 0; }
	.has-atmosphere .feature--overlap .feature__text { background: none; }
}

/* ─────────────  Archive rows: the same idea, by position  ───────────── */

.results--editorial .row-property {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: clamp(1rem, 2.4vw, 2.4rem);
	row-gap: clamp(1.2rem, 3vw, 2.2rem);
	align-items: start;
	padding: clamp(2.5rem, 7vw, 7rem) 0;
}
.results--editorial .row-property--flip .row-property__media { order: 0; }
.results--editorial .row-property__media { grid-row: 1; }
.results--editorial .row-property__body { grid-row: 1; }

.results--editorial .row-property:nth-child(4n + 1) .row-property__media { grid-column: 1 / 8; }
.results--editorial .row-property:nth-child(4n + 1) .row-property__body {
	grid-column: 8 / 13;
	padding-top: clamp(2rem, 9vw, 8rem);
}

.results--editorial .row-property:nth-child(4n + 2) .row-property__media {
	grid-column: 7 / 13;
	margin-top: clamp(1.5rem, 6vw, 5rem);
}
.results--editorial .row-property:nth-child(4n + 2) .row-property__body { grid-column: 1 / 6; }

.results--editorial .row-property:nth-child(4n + 3) .row-property__media { grid-column: 1 / 6; }
.results--editorial .row-property:nth-child(4n + 3) .row-property__body {
	grid-column: 6 / 13;
	padding-top: clamp(1rem, 4vw, 3.5rem);
}
.results--editorial .row-property:nth-child(4n + 3) .row-property__title {
	font-size: clamp(2.2rem, 5.6vw, 4.6rem);
	line-height: 0.98;
}

.results--editorial .row-property:nth-child(4n + 4) .row-property__media { grid-column: 5 / 13; }
.results--editorial .row-property:nth-child(4n + 4) .row-property__body {
	grid-column: 1 / 5;
	padding-top: clamp(3rem, 11vw, 9rem);
}

.results--editorial .row-property:nth-child(4n + 2) .row-property__media img,
.results--editorial .row-property:nth-child(4n + 3) .row-property__media img {
	aspect-ratio: 4 / 5;
	object-fit: cover;
	width: 100%;
}

/* The index numeral becomes a mark in the margin rather than a caption. */
.row-property__index {
	font-family: var(--serif);
	font-size: clamp(2.4rem, 5.5vw, 4.6rem);
	line-height: 0.8;
	color: color-mix(in srgb, var(--champagne) 45%, transparent);
	margin: 0 0 clamp(0.4rem, 1.2vw, 1rem);
	pointer-events: none;
}

@media (max-width: 880px) {
	.results--editorial .row-property {
		grid-template-columns: minmax(0, 1fr);
		padding: clamp(1.8rem, 7vw, 3rem) 0;
	}
	.results--editorial .row-property .row-property__media,
	.results--editorial .row-property .row-property__body {
		grid-column: 1 / -1;
		margin-top: 0;
		padding-top: 0;
	}
	.results--editorial .row-property .row-property__media { grid-row: 1; }
	.results--editorial .row-property .row-property__body { grid-row: 2; }
	.results--editorial .row-property .row-property__media img { aspect-ratio: 3 / 2; }
	.results--editorial .row-property:nth-child(4n + 3) .row-property__title {
		font-size: clamp(1.8rem, 8vw, 2.6rem);
	}
	.row-property__index { font-size: clamp(1.8rem, 8vw, 2.6rem); }
}

/* ────────────────  The sideways showcase: unequal panels  ────────────── */

.showcase__track { align-items: flex-end; }

/*
 * Five widths and five drops, cycling. Nothing lines up with anything, which is
 * the point: a row of identical rectangles sliding past reads as a carousel,
 * and no house has ever been sold from a carousel.
 */
.panel--property:nth-of-type(5n + 1) { width: clamp(15rem, 23vw, 22rem); margin-bottom: 0; }
.panel--property:nth-of-type(5n + 2) { width: clamp(19rem, 33vw, 31rem); margin-bottom: clamp(3rem, 9vh, 7rem); }
.panel--property:nth-of-type(5n + 3) { width: clamp(13rem, 18vw, 17rem); margin-bottom: clamp(1rem, 3vh, 2.5rem); }
.panel--property:nth-of-type(5n + 4) { width: clamp(21rem, 37vw, 35rem); margin-bottom: 0; }
.panel--property:nth-of-type(5n + 5) { width: clamp(14rem, 21vw, 20rem); margin-bottom: clamp(4rem, 11vh, 9rem); }

.panel--property:nth-of-type(5n + 1) .panel__media img,
.panel--property:nth-of-type(5n + 3) .panel__media img,
.panel--property:nth-of-type(5n + 5) .panel__media img { aspect-ratio: 3 / 4.4; object-fit: cover; width: 100%; }
.panel--property:nth-of-type(5n + 2) .panel__media img,
.panel--property:nth-of-type(5n + 4) .panel__media img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }

/*
 * The index was a translucent grey rectangle pinned to the corner of every
 * photograph — a badge, and a cheap one. It becomes a numeral set outside the
 * image instead, in the same serif as the house names.
 */
.panel__media::before { content: none; }

.panel__index {
	position: static;
	display: block;
	font-family: var(--serif);
	font-size: clamp(1.5rem, 2.8vw, 2.4rem);
	line-height: 1;
	color: color-mix(in srgb, var(--champagne) 72%, transparent);
	margin-bottom: 0.5rem;
}

.showcase__intro,
.showcase__end { align-self: center; }

@media (max-width: 900px) {
	.showcase__track { align-items: stretch; }
	.panel--property:nth-of-type(5n + 1),
	.panel--property:nth-of-type(5n + 2),
	.panel--property:nth-of-type(5n + 3),
	.panel--property:nth-of-type(5n + 4),
	.panel--property:nth-of-type(5n + 5) {
		width: auto;
		margin-bottom: 0;
	}
	.panel--property .panel__media img { aspect-ratio: 3 / 2; }
}