/**
 * Photo row (Figma Home "V7 Gallery · The lake, up close": 1440 10:6286, 834, 390).
 *
 * 1440: mist, padding 72 (PLAN.md B3 Q10k); title h1 with the link on the right (bottom aligned);
 * rows 32 under the header and 32 apart; photos radius 12, captions 8 under them.
 * Row 1: 592 / 288 / 288, 16 apart, photos 360 high. Row 2: 192 / 384 / 192 / 384, photos 240.
 * 834: padding 56; row 1 356 / 193 / 193 (photos 237 / 241 / 241, Q10 A13: as the frame), row 2
 * 127 / 237 / 127 / 237 (158), 14 apart; header and rows 32 apart.
 * 390: padding 32; the link reads "All photos"; header and rows 24 apart; each row scrolls (row 1
 * 570 / 304 / 304 at 380 high, row 2 208 / 390 / 208 / 390 at 260), 16 apart.
 */

.sw-photo-row {
	--sw-photos-gap: 16px;
}

@media (min-width: 1025px) {
	.sw-photo-row {
		--sw-section-pad: 72px;
	}
}

.sw-photo-row__header {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px 32px;
	margin-bottom: 32px;
}

.sw-photo-row__link {
	flex: none;
}

.sw-photo-row__link-text--phone {
	display: none;
}

.sw-photo-row__rows {
	display: grid;
	gap: 32px;
}

/* Desktop and tablet: the widths share the row (flex basis = the design width). */
.sw-photo-row__row {
	gap: var(--sw-photos-gap);
	overflow: visible;
	scroll-snap-type: none;
}

.sw-photo-row__row.sw-bleed {
	margin-inline: 0;
	padding-inline: 0;
}

.sw-photo-row__row > .sw-photo-row__item {
	flex: 1 1 var(--w, 300px);
	min-width: 0;
}

.sw-photo-row__row--1 {
	--sw-row-h: var(--sw-photos-h1, 360px);
}

.sw-photo-row__row--2 {
	--sw-row-h: var(--sw-photos-h2, 240px);
}

.sw-photo-row__item .sw-figure__media {
	height: var(--sw-row-h);
}

@media (max-width: 1024px) {
	.sw-photo-row {
		--sw-photos-gap: 14px;
	}

	.sw-photo-row__row > .sw-photo-row__item {
		flex-basis: var(--w-t, var(--w, 300px));
	}

	.sw-photo-row__row--1 {
		--sw-row-h: var(--sw-photos-h1, 241px);
	}

	.sw-photo-row__row--2 {
		--sw-row-h: var(--sw-photos-h2, 158px);
	}

	/* A photo's own tablet height (the wide photo of row 1 is 237 in the frame). */
	.sw-photo-row__item[style*="--h-t"] .sw-figure__media {
		height: var(--h-t);
	}
}

/* Phone: every row scrolls sideways to the screen edge. */
@media (max-width: 767px) {
	.sw-photo-row {
		--sw-photos-gap: 16px;
	}

	/* Header and rows 24 apart. */
	.sw-photo-row__header {
		margin-bottom: 24px;
	}

	.sw-photo-row__rows {
		gap: 24px;
	}

	.sw-photo-row__item[style*="--h-t"] .sw-figure__media {
		height: var(--sw-row-h);
	}

	.sw-photo-row__link-text--wide {
		display: none;
	}

	.sw-photo-row__link-text--phone {
		display: inline;
	}

	.sw-photo-row__row {
		overflow-x: auto;
		scroll-snap-type: x mandatory;
	}

	.sw-photo-row__row.sw-bleed {
		margin-inline: calc(-1 * var(--sw-gutter));
		padding-inline: var(--sw-gutter);
	}

	.sw-photo-row__row > .sw-photo-row__item {
		flex: none;
		width: var(--w-m, var(--w, 300px));
	}

	.sw-photo-row__row--1 {
		--sw-row-h: var(--sw-photos-h1, 380px);
	}

	.sw-photo-row__row--2 {
		--sw-row-h: var(--sw-photos-h2, 260px);
	}
}