/**
 * Canopy Photos (cn-photos): captioned photo grids.
 *
 * Desktop: each row is a 12-column grid; a photo spans --cn-span columns and its image is the
 * row's height (--cn-ph1/2/3, from the "Photo heights" controls through --cn-photos-h1/2/3).
 * Tablet and phone: mosaic and row layouts become sideways scrolling rows that run to the
 * screen edge, "columns" keeps four columns on tablet, the collection becomes two columns.
 */

/* ------------------------------------------------------------------ */
/* Section                                                            */
/* ------------------------------------------------------------------ */

.cn-photos.cn-pad {
	padding-top: var(--cn-pad-t, 80px);
	padding-bottom: var(--cn-pad-b, 80px);
}

.cn-photos--mosaic.cn-pad {
	padding-top: var(--cn-pad-t, 60px);
	padding-bottom: var(--cn-pad-b, 60px);
}

.cn-photos--collection.cn-pad {
	padding-top: var(--cn-pad-t, 64px);
	padding-bottom: var(--cn-pad-b, 64px);
}

/* Row heights per layout. */
.cn-photos--mosaic {
	--cn-ph1: var(--cn-photos-h1, 390px);
	--cn-ph2: var(--cn-photos-h2, 290px);
	--cn-ph3: var(--cn-photos-h3, var(--cn-ph2));
}

.cn-photos--row {
	--cn-ph1: var(--cn-photos-h1, 300px);
	--cn-ph2: var(--cn-photos-h2, var(--cn-ph1));
	--cn-ph3: var(--cn-photos-h3, var(--cn-ph2));
}

.cn-photos--columns {
	--cn-ph1: var(--cn-photos-h1, 380px);
	--cn-ph2: var(--cn-photos-h2, var(--cn-ph1));
	--cn-ph3: var(--cn-photos-h3, var(--cn-ph2));
}

.cn-photos--collection {
	--cn-ph1: var(--cn-photos-h1, 560px);
	--cn-ph2: var(--cn-photos-h2, 300px);
	--cn-ph3: var(--cn-photos-h3, 400px);
}

/* ------------------------------------------------------------------ */
/* Back link, heading, count                                          */
/* ------------------------------------------------------------------ */

.cn-photos__back-wrap {
	margin-bottom: 24px;
}

.cn .cn-photos__back {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	min-height: 44px;
	color: var(--cn-heading);
	text-decoration: none;
}

.cn .cn-photos__back:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.cn-photos .cn-heading {
	margin-bottom: 32px;
}

.cn-photos--mosaic .cn-heading,
.cn-photos--collection .cn-heading {
	margin-bottom: 24px;
}

.cn-photos__count {
	margin-top: 24px;
	color: var(--cn-muted);
}

/* ------------------------------------------------------------------ */
/* Desktop grid                                                       */
/* ------------------------------------------------------------------ */

.cn-photos__rows {
	display: grid;
	gap: 24px;
}

.cn-photos__row {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: 24px;
	align-items: start;
}

.cn-photos__row--1 {
	--cn-row-h: var(--cn-ph1);
}

.cn-photos__row--2 {
	--cn-row-h: var(--cn-ph2);
}

.cn-photos__row--3 {
	--cn-row-h: var(--cn-ph3);
}

.cn-photos__item {
	grid-column: span var(--cn-span, 3);
}

.cn-photos__item .cn-figure__media {
	height: var(--cn-row-h, 300px);
}

.cn-photos__row:focus-visible {
	outline-offset: 4px;
}

.cn-photos__actions {
	margin-top: 24px;
}

.cn-photos__button {
	min-width: 260px;
}

/* ------------------------------------------------------------------ */
/* Tablet (834)                                                       */
/* ------------------------------------------------------------------ */

@media (max-width: 1024px) {
	.cn-photos.cn-pad,
	.cn-photos--mosaic.cn-pad,
	.cn-photos--collection.cn-pad {
		padding-top: var(--cn-pad-t, 64px);
		padding-bottom: var(--cn-pad-b, 64px);
	}

	.cn-photos--mosaic {
		--cn-ph1: var(--cn-photos-h1, 320px);
		--cn-ph2: var(--cn-photos-h2, 240px);
		--cn-tw: 300px;
		--cn-tw-wide: 480px;
	}

	.cn-photos--row {
		--cn-ph1: var(--cn-photos-h1, 320px);
		--cn-tw: 300px;
		--cn-tw-wide: 480px;
	}

	.cn-photos--columns {
		--cn-ph1: var(--cn-photos-h1, 197px);
	}

	.cn-photos--collection {
		--cn-ph1: var(--cn-photos-h1, 520px);
		--cn-ph2: var(--cn-photos-h2, 280px);
	}

	/* The photo page title keeps its 56px size on tablets (Figma 834). */
	.cn-photos--collection .cn-section-title {
		font-size: 56px;
		line-height: 64px;
	}

	/* Mosaic and row: each row scrolls sideways, bleeding to the screen edge. */
	.cn-photos--mosaic .cn-photos__row,
	.cn-photos--row .cn-photos__row {
		display: flex;
		gap: 16px;
		margin-inline: calc(-1 * var(--cn-gutter));
		padding-inline: var(--cn-gutter);
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scroll-padding-inline: var(--cn-gutter);
		scrollbar-width: none;
	}

	.cn-photos--mosaic .cn-photos__row::-webkit-scrollbar,
	.cn-photos--row .cn-photos__row::-webkit-scrollbar {
		display: none;
	}

	.cn-photos--mosaic .cn-photos__item,
	.cn-photos--row .cn-photos__item {
		flex: none;
		width: var(--cn-tw);
		scroll-snap-align: start;
	}

	.cn-photos--mosaic .cn-photos__item.is-wide,
	.cn-photos--row .cn-photos__item.is-wide {
		width: var(--cn-tw-wide);
	}

	/* Columns: four narrow columns. */
	.cn-photos--columns .cn-photos__row {
		gap: 10px;
	}

	/* Collection: two columns, the first photo across both. */
	.cn-photos--collection .cn-photos__rows {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.cn-photos--collection .cn-photos__row {
		display: contents;
	}

	.cn-photos--collection .cn-photos__item {
		grid-column: auto;
	}

	.cn-photos--collection .cn-photos__item .cn-figure__media {
		height: var(--cn-ph2);
	}

	.cn-photos--collection .cn-photos__item.is-first {
		grid-column: 1 / -1;
	}

	.cn-photos--collection .cn-photos__item.is-first .cn-figure__media {
		height: var(--cn-ph1);
	}
}

/* ------------------------------------------------------------------ */
/* Phone (390)                                                        */
/* ------------------------------------------------------------------ */

@media (max-width: 767px) {
	.cn-photos.cn-pad,
	.cn-photos--mosaic.cn-pad {
		padding-top: var(--cn-pad-t, 48px);
		padding-bottom: var(--cn-pad-b, 48px);
	}

	.cn-photos--collection.cn-pad {
		padding-top: var(--cn-pad-t, 40px);
		padding-bottom: var(--cn-pad-b, 40px);
	}

	.cn-photos--mosaic {
		--cn-ph1: var(--cn-photos-h1, 260px);
		--cn-ph2: var(--cn-photos-h2, 200px);
		--cn-tw: 220px;
		--cn-tw-wide: 320px;
	}

	.cn-photos--row,
	.cn-photos--columns {
		--cn-ph1: var(--cn-photos-h1, 300px);
		--cn-tw: 260px;
		--cn-tw-wide: 320px;
	}

	.cn-photos--collection {
		--cn-ph1: var(--cn-photos-h1, 260px);
		--cn-ph2: var(--cn-photos-h2, 200px);
	}

	.cn-photos--collection .cn-section-title {
		font-size: var(--cn-fs-h1);
		line-height: var(--cn-lh-h1);
	}

	/* Columns join the scrolling rows on phones. */
	.cn-photos--columns .cn-photos__row {
		display: flex;
		gap: 16px;
		margin-inline: calc(-1 * var(--cn-gutter));
		padding-inline: var(--cn-gutter);
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scroll-padding-inline: var(--cn-gutter);
		scrollbar-width: none;
	}

	.cn-photos--columns .cn-photos__row::-webkit-scrollbar {
		display: none;
	}

	.cn-photos--columns .cn-photos__item {
		flex: none;
		width: var(--cn-tw);
		scroll-snap-align: start;
	}

	.cn-photos--columns .cn-photos__item.is-wide {
		width: var(--cn-tw-wide);
	}

	.cn-photos--collection .cn-photos__rows {
		gap: 16px;
	}

	.cn-photos__actions .cn-photos__button {
		width: 100%;
		min-width: 0;
	}
}