/**
 * Casa Terra Photo row (ct-photo-row): captioned photo grids.
 *
 * Desktop: each row is a 12-column grid; a photo spans --ct-span columns and its image is the
 * row's height (--ct-ph1/2, from the "Photo sizes" controls through --ct-photos-h1/2). Tablet
 * keeps the grid with smaller photos. Phone: every row scrolls sideways to the screen edge.
 * Ported from the Canopy Photos styles.
 */

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

/* Row heights and gaps per layout. */
.ct-photos--grid {
	--ct-ph1: var(--ct-photos-h1, 340px);
	--ct-ph2: var(--ct-photos-h2, 260px);
	--ct-pgap: var(--ct-photos-gap, 16px);
}

.ct-photos--row {
	--ct-ph1: var(--ct-photos-h1, 392px);
	--ct-ph2: var(--ct-photos-h2, var(--ct-ph1));
	--ct-pgap: var(--ct-photos-gap, 8px);
}

/* ------------------------------------------------------------------ */
/* Heading and included items                                         */
/* ------------------------------------------------------------------ */

.ct-photos--row .ct-photos__heading,
.ct-photos__heading:has(+ .ct-photos__included) {
	margin-bottom: 32px;
}

.ct-photos .ct-heading__text {
	margin-top: 12px;
}

.ct-photos__included {
	display: flex;
	flex-wrap: wrap;
	gap: 0 40px;
	margin-bottom: 32px;
	color: var(--ct-heading);
}

.ct-photos__included-item {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	min-height: 44px;
}

.ct-photos__included-icon {
	flex: none;
}

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

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

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

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

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

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

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

.ct-photos--row .ct-figure__caption {
	margin-top: 12px;
}

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

/* A photo with its own desktop crop shows that crop from 1025px up. */
.ct-photos__item.has-desktop .ct-figure__media img:not(.ct-photos__desktop) {
	display: none;
}

/* Edge to edge on desktop: the photos run across the screen, captions 16 in. */
@media (min-width: 1025px) {
	.ct-photos--full .ct-photos__rows {
		width: 100%;
	}

	.ct-photos--full .ct-photos__item .ct-figure__media {
		border-radius: 0;
	}

	.ct-photos--full .ct-figure__caption {
		padding-inline: 16px;
	}
}

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

@media (max-width: 1024px) {
	.ct-photos--grid {
		--ct-ph1: var(--ct-photos-h1, 219px);
		--ct-ph2: var(--ct-photos-h2, 167px);
	}

	.ct-photos--row {
		--ct-ph1: var(--ct-photos-h1, 241px);
		--ct-pgap: var(--ct-photos-gap, 16px);
	}

	.ct-photos--grid .ct-photos__heading {
		margin-bottom: 32px;
	}

	.ct-photos--row .ct-photos__heading,
	.ct-photos__heading:has(+ .ct-photos__included),
	.ct-photos__included {
		margin-bottom: 28px;
	}

	.ct-photos__rows {
		gap: 16px;
	}

	.ct-photos__item.has-desktop .ct-figure__media img:not(.ct-photos__desktop) {
		display: block;
	}

	.ct-photos__item.has-desktop .ct-photos__desktop {
		display: none;
	}
}

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

@media (max-width: 767px) {
	.ct-photos--grid {
		--ct-ph1: var(--ct-photos-h1, 300px);
		--ct-ph2: var(--ct-photos-h2, 240px);
		--ct-tw: var(--ct-photos-tw, 220px);
		--ct-tw-wide: 330px;
	}

	.ct-photos--row {
		--ct-ph1: var(--ct-photos-h1, 346px);
		--ct-tw: var(--ct-photos-tw, 260px);
		--ct-tw-wide: 330px;
	}

	.ct-photos .ct-heading__text {
		margin-top: 8px;
	}

	.ct-photos--grid .ct-photos__heading,
	.ct-photos--row .ct-photos__heading {
		margin-bottom: 24px;
	}

	.ct-photos__heading:has(+ .ct-photos__included),
	.ct-photos__included {
		margin-bottom: 20px;
	}

	.ct-photos__included {
		flex-direction: column;
		gap: 8px;
	}

	/* Every row scrolls sideways, bleeding to the screen edge. */
	.ct-photos__row {
		display: flex;
		gap: var(--ct-pgap);
		margin-inline: calc(-1 * var(--ct-gutter));
		padding-inline: var(--ct-gutter);
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scroll-padding-inline: var(--ct-gutter);
		scrollbar-width: none;
	}

	.ct-photos__row::-webkit-scrollbar {
		display: none;
	}

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

	.ct-photos__item.is-wide {
		width: var(--ct-tw-wide);
	}

	.ct-photos .ct-figure__caption {
		margin-top: 8px;
	}

	.ct-photos--row .ct-figure__caption {
		margin-top: 12px;
	}
}