/*
 * Reunion photo wall.
 */

.tobata-photo-wall {
	background:
		linear-gradient(180deg, rgba(5, 6, 7, 0.96), rgba(16, 17, 18, 0.98)),
		#08090a;
	color: #f4f0e8;
	margin-inline: calc(var(--wp--style--root--padding-left, 0px) * -1);
	overflow: hidden;
	padding: clamp(3rem, 7vw, 7rem) var(--wp--style--root--padding-left, 1.5rem);
	position: relative;
}

.tobata-photo-wall--band {
	--tobata-band-active-height: 132px;
	--tobata-band-active-width: 176px;
	--tobata-band-photo-height: 120px;
	--tobata-band-photo-width: 160px;
	background: transparent;
	color: inherit;
	height: var(--tobata-band-active-height);
	margin-block: clamp(0.85rem, 2vw, 1.35rem);
	margin-left: calc(50% - 50vw) !important;
	margin-right: calc(50% - 50vw) !important;
	max-width: 100vw !important;
	overflow: hidden;
	padding: 0;
	position: relative;
	width: 100vw !important;
}

.tobata-photo-wall__grid {
	display: grid;
	gap: clamp(0.5rem, 1.35vw, 1.1rem);
	grid-auto-flow: dense;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	margin-inline: auto;
	max-width: 1440px;
	position: relative;
}

.tobata-photo-wall--band .tobata-photo-wall__grid {
	align-items: center;
	display: flex;
	gap: clamp(6px, 0.7vw, 10px);
	height: 100%;
	justify-content: flex-start;
	margin-inline: 0;
	max-width: none;
	transition: transform 900ms cubic-bezier(0.22, 1, 0.36, 1);
	width: max-content;
	will-change: transform;
}

.tobata-photo-wall--band .tobata-photo-wall__grid.is-jump-reset {
	transition: none;
}

.tobata-photo-wall__item {
	aspect-ratio: 4 / 5;
	background: #151515;
	border-radius: 2px;
	box-shadow: 0 18px 54px rgba(0, 0, 0, 0.3);
	margin: 0;
	overflow: hidden;
	position: relative;
	transform: translateZ(0);
	z-index: 0;
}

.tobata-photo-wall--band .tobata-photo-wall__item,
.tobata-photo-wall--band .tobata-photo-wall__item:nth-child(n) {
	aspect-ratio: auto;
	background: transparent;
	border-radius: 0;
	box-shadow: none;
	flex: 0 0 var(--tobata-band-photo-width);
	grid-column: auto;
	grid-row: auto;
	height: var(--tobata-band-photo-height);
	min-width: var(--tobata-band-photo-width);
	outline: 0;
	transition:
		flex-basis 900ms cubic-bezier(0.22, 1, 0.36, 1),
		height 900ms cubic-bezier(0.22, 1, 0.36, 1),
		min-width 900ms cubic-bezier(0.22, 1, 0.36, 1),
		opacity 1200ms cubic-bezier(0.2, 0.8, 0.2, 1),
		transform 1800ms cubic-bezier(0.2, 0.8, 0.2, 1);
	width: var(--tobata-band-photo-width);
}

.tobata-photo-wall__item[data-photo-wall-clone="true"] {
	display: none;
}

.tobata-photo-wall--band .tobata-photo-wall__item[data-photo-wall-clone="true"] {
	display: block;
}

.tobata-photo-wall--band .tobata-photo-wall__item:nth-child(1) {
	grid-column: 1 / span 4;
	grid-row: 1 / span 2;
}

.tobata-photo-wall--band .tobata-photo-wall__item:nth-child(2) {
	grid-column: 5 / span 3;
	grid-row: 1 / span 1;
}

.tobata-photo-wall--band .tobata-photo-wall__item:nth-child(3) {
	grid-column: 8 / span 3;
	grid-row: 1 / span 2;
}

.tobata-photo-wall--band .tobata-photo-wall__item:nth-child(4) {
	grid-column: 11 / span 2;
	grid-row: 1 / span 1;
}

.tobata-photo-wall--band .tobata-photo-wall__item:nth-child(5) {
	grid-column: 4 / span 3;
	grid-row: 2 / span 2;
}

.tobata-photo-wall--band .tobata-photo-wall__item:nth-child(6) {
	grid-column: 7 / span 2;
	grid-row: 3 / span 1;
}

.tobata-photo-wall--band .tobata-photo-wall__item:nth-child(7) {
	grid-column: 9 / span 4;
	grid-row: 3 / span 2;
}

.tobata-photo-wall--band .tobata-photo-wall__item:nth-child(8) {
	grid-column: 1 / span 3;
	grid-row: 3 / span 2;
}

.tobata-photo-wall--band .tobata-photo-wall__item:nth-child(9) {
	grid-column: 4 / span 2;
	grid-row: 4 / span 1;
}

.tobata-photo-wall--band .tobata-photo-wall__item:nth-child(10) {
	grid-column: 6 / span 3;
	grid-row: 4 / span 2;
}

.tobata-photo-wall--band .tobata-photo-wall__item:nth-child(11) {
	grid-column: 9 / span 3;
	grid-row: 5 / span 1;
}

.tobata-photo-wall__item--wide {
	aspect-ratio: 16 / 10;
	grid-column: span 2;
}

.tobata-photo-wall__item--tall {
	aspect-ratio: 4 / 6;
	grid-row: span 2;
}

.tobata-photo-wall__item img {
	display: block;
	filter: grayscale(0.18) brightness(0.66) contrast(1.08);
	height: 100%;
	object-fit: cover;
	opacity: 0.82;
	transform: scale(1.01);
	transition:
		filter 1600ms cubic-bezier(0.2, 0.8, 0.2, 1),
		opacity 1600ms cubic-bezier(0.2, 0.8, 0.2, 1),
		transform 2200ms cubic-bezier(0.2, 0.8, 0.2, 1);
	width: 100%;
}

.tobata-photo-wall--band .tobata-photo-wall__item img {
	filter: grayscale(0.05) brightness(0.92) contrast(1.04) saturate(1.02);
	height: 100%;
	max-width: none;
	object-fit: cover;
	opacity: 0.92;
	transform: none;
	transition:
		filter 1100ms cubic-bezier(0.2, 0.8, 0.2, 1),
		opacity 1100ms cubic-bezier(0.2, 0.8, 0.2, 1),
		transform 1500ms cubic-bezier(0.2, 0.8, 0.2, 1);
	width: 100%;
}

.tobata-photo-wall__item.is-active {
	z-index: 2;
}

.tobata-photo-wall--band .tobata-photo-wall__item.is-active {
	flex-basis: var(--tobata-band-active-width);
	height: var(--tobata-band-active-height);
	min-width: var(--tobata-band-active-width);
	width: var(--tobata-band-active-width);
}

.tobata-photo-wall__item.is-active img {
	filter: grayscale(0) brightness(1.08) contrast(1.04);
	opacity: 1;
	transform: scale(1.07);
}

.tobata-photo-wall--band .tobata-photo-wall__item.is-active img {
	filter: grayscale(0) brightness(1.05) contrast(1.03) saturate(1.04);
	opacity: 1;
	transform: none;
}

.tobata-photo-wall__meta,
.tobata-photo-wall-empty {
	font-size: 0.8125rem;
	margin: 1rem auto 0;
	max-width: 1440px;
	opacity: 0.68;
}

@media (max-width: 1024px) {
	.tobata-photo-wall__grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

}

@media (max-width: 640px) {
	.tobata-photo-wall:not(.tobata-photo-wall--band) {
		margin-inline: calc(var(--wp--style--root--padding-left, 1rem) * -1);
		padding-block: 2.75rem;
	}

	.tobata-photo-wall--band .tobata-photo-wall__grid {
		gap: clamp(8px, 2.5vw, 12px);
	}

	.tobata-photo-wall--band .tobata-photo-wall__item,
	.tobata-photo-wall--band .tobata-photo-wall__item:nth-child(n),
	.tobata-photo-wall--band .tobata-photo-wall__item[data-photo-wall-clone="true"] {
		display: block;
		flex: 0 0 auto;
		height: var(--tobata-band-photo-height);
		min-width: var(--tobata-band-photo-width);
		overflow: visible;
		width: var(--tobata-band-photo-width);
	}

	.tobata-photo-wall--band .tobata-photo-wall__item img {
		height: 100%;
		max-width: none;
		object-fit: cover;
		transform: none;
		width: 100%;
	}

	.tobata-photo-wall--band .tobata-photo-wall__item.is-active {
		height: var(--tobata-band-active-height);
		min-width: var(--tobata-band-active-width);
		transform: none;
		width: var(--tobata-band-active-width);
	}

	.tobata-photo-wall--band .tobata-photo-wall__item.is-active img {
		transform: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.tobata-photo-wall--band .tobata-photo-wall__item,
	.tobata-photo-wall__item img,
	.tobata-photo-wall__item.is-active img {
		filter: grayscale(0.06) brightness(0.86) contrast(1.03);
		opacity: 0.95;
		transform: none;
		transition: none;
	}
}