/**
 * Shared masonry photo grid.
 *
 * Single source of truth for the column-masonry tile layout used by the event
 * gallery (single-event_instance.php) and the photo-search results
 * (inc/photo-search.php), so the two stay visually identical.
 *
 * The `.ce-masonry--js` variant is the JS-enhanced absolute-positioned layout
 * used on event singles (assets/js/event-instance.js); the base column layout
 * works without JS, which is what the search results use.
 *
 * Vote-heart styling that overlaps masonry tiles stays in event-instance.css —
 * it is event-gallery-specific.
 *
 * @package car-events
 * @since   0.31.0
 */

.ce-masonry {
	column-count: 4;
	column-gap: var(--density-gap);
}

@media (max-width: 1200px) {
	.ce-masonry { column-count: 3; }
}
@media (max-width: 820px) {
	.ce-masonry { column-count: 2; }
}
@media (max-width: 520px) {
	.ce-masonry { column-count: 1; }
}

.ce-masonry__item {
	break-inside: avoid;
	margin-bottom: var(--density-gap);
	border-radius: 8px;
	overflow: hidden;
	position: relative;
	cursor: zoom-in;
	background: var(--bg-2);
}

.ce-masonry--js {
	position: relative;
}

.ce-masonry--js .ce-masonry__item {
	position: absolute;
	top: 0;
	left: 0;
	margin-bottom: 0;
	will-change: transform;
}

.ce-masonry__item img {
	width: 100%;
	height: auto;
	display: block;
	transition: transform 500ms cubic-bezier(.2, .7, .2, 1);
}

.ce-masonry__item:hover img {
	transform: scale(1.03);
}

.ce-masonry__item__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, transparent 60%, rgba(10, 10, 12, 0.75) 100%);
	opacity: 0.7;
	transition: opacity 200ms;
}

.ce-masonry__item:hover .ce-masonry__item__overlay {
	opacity: 1;
}

.ce-masonry__item__caption {
	position: absolute;
	bottom: 10px;
	left: 10px;
	right: 10px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-family: var(--font-mono);
	font-size: 10px;
	color: var(--fg-2);
	letter-spacing: 0.04em;
}

/* Deep-linked photo highlight: applied transiently by focusDeepLinkedPhoto()
   (assets/js/event-instance.js) when a photo-search result scrolls a gallery
   tile into view. Generic enough to sit on either a featured or masonry tile. */
.ce-photo-target {
	outline: 3px solid var(--accent);
	outline-offset: 3px;
	border-radius: 8px;
	animation: ce-photo-target-pulse 2.4s ease-out;
}

@keyframes ce-photo-target-pulse {
	0% {
		box-shadow: 0 0 0 0 color-mix(in oklab, var(--accent) 65%, transparent);
	}
	100% {
		box-shadow: 0 0 0 20px transparent;
	}
}