/**
 * Project Photos block — hero, full-width single, or a side-by-side pack of two.
 */

.sn-photos {
	box-sizing: border-box;
	width: 100%;
	margin: 0;
	display: grid;
	gap: 0.7rem;
}

.sn-photos--hero,
.sn-photos--full-width,
.sn-photos--pair,
.sn-photos--inset {
	padding-inline: 0;
}

.sn-photos--hero,
.sn-photos--full-width {
	grid-template-columns: 1fr;
	gap: 0;
}

.sn-photos--pair {
	align-items: stretch;
}

.sn-photos--pair .sn-photos__item {
	display: flex;
	flex-direction: column;
	min-height: 100%;
}

.sn-photos--pair .sn-photos__media {
	position: relative;
	flex: 1 0 auto;
	width: 100%;
	overflow: hidden;
}

.sn-photos--pair .sn-photos__sizer {
	display: block;
	width: 100%;
	height: auto;
	visibility: hidden;
	pointer-events: none;
}

.sn-photos--pair .sn-photos__image,
.sn-photos--pair .sn-photos__placeholder {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.sn-photos--split-50-50 {
	grid-template-columns: 1fr 1fr;
}

.sn-photos--split-60-40 {
	grid-template-columns: 6fr 4fr;
}

.sn-photos--split-40-60 {
	grid-template-columns: 4fr 6fr;
}

.sn-photos--split-30-70 {
	grid-template-columns: 3fr 7fr;
}

.sn-photos--split-70-30 {
	grid-template-columns: 7fr 3fr;
}

.sn-photos__item {
	margin: 0;
	min-width: 0;
}

.sn-photos__media {
	position: relative;
	overflow: hidden;
	background-color: #e4e2d8;
}

.sn-photos--hero .sn-photos__media,
.sn-photos--full-width .sn-photos__media {
	aspect-ratio: auto;
	background-color: transparent;
}

.sn-photos__image,
.sn-photos__placeholder {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.sn-photos--hero .sn-photos__image,
.sn-photos--full-width .sn-photos__image {
	height: auto;
	object-fit: contain;
}

.sn-photos--hero .sn-photos__placeholder,
.sn-photos--full-width .sn-photos__placeholder {
	aspect-ratio: 16 / 9;
	min-height: 12rem;
}

.sn-photos__placeholder {
	background: #e4e2d8;
	min-height: 100%;
}

html[data-theme="dark"] .sn-photos__media,
html[data-theme="dark"] .sn-photos__placeholder {
	background: #1a1a1a;
}

.sn-project-content > .sn-photos,
.sn-project-content > .wp-block-acf-project-photos {
	width: 100%;
	max-width: none;
}

.sn-project-content > .sn-photos--hero,
.sn-project-content > .wp-block-acf-project-photos:has(.sn-photos--hero) {
	width: calc(100% + (2 * var(--sn-project-inset)) + (2 * var(--sn-gutter)));
	max-width: none;
	margin-inline: calc(-1 * (var(--sn-project-inset) + var(--sn-gutter)));
}

.editor-styles-wrapper .is-root-container > .wp-block-acf-project-photos {
	max-width: none;
	width: 100%;
	margin: 2rem 0;
}

.editor-styles-wrapper .is-root-container > .wp-block-acf-project-photos:has(.sn-photos--hero) {
	width: calc(100% + 2 * var(--sn-gutter));
	margin-left: calc(-1 * var(--sn-gutter));
	margin-right: calc(-1 * var(--sn-gutter));
}

@media (max-width: 782px) {
	.sn-photos--pair {
		grid-template-columns: 1fr;
	}

	.sn-photos--pair .sn-photos__sizer {
		display: none;
	}

	.sn-photos--pair .sn-photos__image {
		position: static;
		height: auto;
		object-fit: contain;
	}
}