/**
 * Electric Ant Photos — the photo wall on the event's blog post.
 *
 * Photos are the only color the zine ever carries, so by default the grid
 * runs them grayscale, hard-framed like a photocopied contact sheet, and lets
 * the color back in on hover and in the lightbox.
 */

.eap-wall {
	margin: var(--ea-gap, 1.5rem) 0;
}

.eap-wall__count {
	font-family: var(--ea-mono);
	font-size: 0.72rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	margin: 0 0 0.9em;
	opacity: 0.85;
}

/* Column masonry keeps mixed portrait/landscape phone shots from being
   cropped into a uniform grid — the ragged bottom edge is the point. */
.eap-wall__grid {
	column-count: var(--eap-cols, 3);
	column-gap: 0.75rem;
}

@media (max-width: 900px) {
	.eap-wall__grid { column-count: 2; }
}

@media (max-width: 520px) {
	.eap-wall__grid { column-count: 1; }
}

/* These are scoped under .eap-wall on purpose: the theme styles
   `.entry-content figure` and `.entry-content figcaption` directly, and this
   grid lives inside .entry-content on the event's post. Two classes beat a
   class-plus-element, so the wall keeps its own layout. */
.eap-wall .eap-shot {
	break-inside: avoid;
	margin: 0 0 0.75rem;
	border: var(--ea-rule, 3px) solid var(--ea-white);
	background: var(--ea-black);
	position: relative;
	transition: transform 0.08s steps(2);
}

.eap-wall .eap-shot:hover {
	transform: translate(-2px, -2px);
	box-shadow: 6px 6px 0 var(--ea-white);
}

.eap-wall .eap-shot__btn {
	display: block;
	width: 100%;
	padding: 0;
	margin: 0;
	border: 0;
	background: none;
	cursor: zoom-in;
	line-height: 0;
}

.eap-wall .eap-shot__btn img {
	width: 100%;
	height: auto;
	display: block;
	margin: 0;
	/* The theme photocopies every image inside an article to 1-bit
	   (`article img:not(.ea-icon)`). The wall opts back out: these photos are
	   the whole point of the post, and the night was not in grayscale.
	   Two classes plus an element beats the theme's element-plus-pseudo. */
	filter: none;
}

.eap-wall--bw .eap-shot__btn img {
	filter: grayscale(1) contrast(1.12);
	transition: filter 0.12s steps(2);
}

.eap-wall--bw .eap-shot:hover .eap-shot__btn img,
.eap-wall--bw .eap-shot__btn:focus-visible img {
	filter: none;
}

.eap-wall .eap-shot__credit {
	display: block;
	font-family: var(--ea-mono);
	font-size: 0.66rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	padding: 0.5em 0.65em;
	margin: 0;
	border-top: 2px solid var(--ea-white);
	background: var(--ea-black);
	color: var(--ea-fg);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.eap-wall-empty {
	font-family: var(--ea-mono);
	font-size: 0.78rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	opacity: 0.8;
}

/* ---------------- lightbox ---------------- */

.eap-lb {
	width: min(100vw, 100%);
	max-width: 100vw;
	max-height: 100vh;
	height: 100vh;
	padding: 0;
	border: 0;
	background: var(--ea-black, #000);
	color: var(--ea-white, #fff);
}

.eap-lb::backdrop {
	background: rgba(0, 0, 0, 0.92);
}

.eap-lb[open] {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
}

.eap-lb__figure {
	margin: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.8rem;
	min-width: 0;
	height: 100vh;
	padding: 3.5rem 0.5rem 1.5rem;
}

.eap-lb__img {
	max-width: 100%;
	max-height: calc(100vh - 8rem);
	object-fit: contain;
	border: var(--ea-rule, 3px) solid var(--ea-white);
	/* Full color at full size, whatever the grid is doing. */
	filter: none;
}

.eap-lb__caption {
	display: flex;
	gap: 1.2em;
	align-items: baseline;
	font-family: var(--ea-mono);
	font-size: 0.72rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.eap-lb__counter { opacity: 0.7; }

.eap-lb__close,
.eap-lb__nav {
	background: transparent;
	color: var(--ea-white);
	border: 0;
	cursor: pointer;
	font-family: var(--ea-mono);
	line-height: 1;
}

.eap-lb__close {
	position: absolute;
	top: 0.6rem;
	right: 0.9rem;
	font-size: 2.4rem;
	padding: 0.1em 0.3em;
	z-index: 2;
}

.eap-lb__nav {
	font-size: 1.8rem;
	padding: 1.5rem 1rem;
	align-self: center;
}

.eap-lb__close:hover,
.eap-lb__nav:hover {
	background: var(--ea-white);
	color: var(--ea-black);
}

@media (max-width: 640px) {
	.eap-lb__nav { padding: 1.2rem 0.5rem; font-size: 1.4rem; }
}