/* Neo Gallery — frontend masonry grid + fullscreen lightbox */

/* =========================================================
   Masonry grid
   - No-JS fallback uses CSS columns.
   - With JS, .is-js switches to flex columns for balanced,
     row-order placement (see gallery.js).
   ========================================================= */
.neo-mason {
	--neo-gap: 12px;
	column-count: 3;
	column-gap: var(--neo-gap);
	margin: 1.5rem 0;
}
.neo-mason[data-columns="1"] { column-count: 1; }
.neo-mason[data-columns="2"] { column-count: 2; }
.neo-mason[data-columns="4"] { column-count: 4; }

.neo-mason.is-js {
	column-count: auto;
	display: flex;
	align-items: flex-start;
	gap: var(--neo-gap);
}
.neo-mason__col {
	display: flex;
	flex-direction: column;
	gap: var(--neo-gap);
	flex: 1 1 0;
	min-width: 0;
}

.neo-item {
	position: relative;
	margin: 0 0 var(--neo-gap);
	break-inside: avoid; /* fallback (CSS columns) only */
}
.neo-mason.is-js .neo-item { margin: 0; }

.neo-item__btn {
	display: block;
	position: relative;
	width: 100%;
	padding: 0;
	margin: 0;
	border: 0;
	background: #f0f0f1;
	cursor: pointer;
	overflow: hidden;
	line-height: 0;
}
/* Single hover effect: a 45% black overlay over the image. */
.neo-item__btn::after {
	content: "";
	position: absolute;
	inset: 0;
	background: #000;
	opacity: 0;
	transition: opacity 0.3s ease;
	pointer-events: none;
}
.neo-item:hover .neo-item__btn::after { opacity: 0.45; }
.neo-item__btn:focus-visible {
	outline: 3px solid #2271b1;
	outline-offset: 2px;
}

.neo-item__img {
	display: block;
	width: 100%;
	height: auto; /* preserves exact aspect ratio */
}

/* Caption — appears at the bottom of the image on hover. */
.neo-item__cap {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 2;
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
	padding: 1.4rem 1.1rem 1.05rem;
	color: #fff;
	text-align: left;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.78), rgba(0, 0, 0, 0));
	opacity: 0;
	transform: translateY(10px);
	transition: opacity 0.3s ease, transform 0.3s ease;
	pointer-events: none;
}
.neo-item:hover .neo-item__cap { opacity: 1; transform: translateY(0); }
.neo-item__cap-title { font-size: 1.02rem; font-weight: 600; line-height: 1.25; }
.neo-item__cap-text { font-size: 0.86rem; line-height: 1.35; opacity: 0.85; }

/* Responsive column counts (JS reads these same breakpoints) */
@media ( max-width: 999px ) {
	.neo-mason,
	.neo-mason[data-columns="4"] { column-count: 2; }
}
@media ( max-width: 599px ) {
	.neo-mason,
	.neo-mason[data-columns="2"],
	.neo-mason[data-columns="4"] { column-count: 1; }
}

/* =========================================================
   Lightbox
   ========================================================= */
.neo-lb {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	flex-direction: column;
	background: #0c0c0c;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.25s ease, visibility 0.25s ease;
}
.neo-lb.is-open {
	opacity: 1;
	visibility: visible;
}

.neo-lb__stage {
	position: relative;
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 0;
	padding: 1px 2vmin 0;
}

.neo-lb__img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	display: block;
	user-select: none;
	-webkit-user-drag: none;
}

/* --- Position cursor zones (over the image) --- */
.neo-lb__zone {
	position: absolute;
	top: 0;
	bottom: 0;
	z-index: 2;
}
.neo-lb__zone--prev {
	left: 0;
	width: 33%;
	cursor: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='44'%20height='44'%3E%3Cpath%20d='M28%2012L18%2022l10%2010'%20fill='none'%20stroke='black'%20stroke-width='6'%20stroke-linecap='round'%20stroke-linejoin='round'%20opacity='.4'/%3E%3Cpath%20d='M28%2012L18%2022l10%2010'%20fill='none'%20stroke='white'%20stroke-width='3'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E") 14 22, w-resize;
}
.neo-lb__zone--close {
	left: 33%;
	width: 34%;
	cursor: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='44'%20height='44'%3E%3Cg%20fill='white'%20stroke='black'%20stroke-width='1.5'%20stroke-opacity='.45'%3E%3Crect%20x='12'%20y='12'%20width='8'%20height='8'%20rx='1.5'/%3E%3Crect%20x='24'%20y='12'%20width='8'%20height='8'%20rx='1.5'/%3E%3Crect%20x='12'%20y='24'%20width='8'%20height='8'%20rx='1.5'/%3E%3Crect%20x='24'%20y='24'%20width='8'%20height='8'%20rx='1.5'/%3E%3C/g%3E%3C/svg%3E") 22 22, pointer;
}
.neo-lb__zone--next {
	right: 0;
	width: 33%;
	cursor: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='44'%20height='44'%3E%3Cpath%20d='M16%2012L26%2022l-10%2010'%20fill='none'%20stroke='black'%20stroke-width='6'%20stroke-linecap='round'%20stroke-linejoin='round'%20opacity='.4'/%3E%3Cpath%20d='M16%2012L26%2022l-10%2010'%20fill='none'%20stroke='white'%20stroke-width='3'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E") 30 22, e-resize;
}

/* --- Centered side arrows (visible affordance over zones) --- */
.neo-lb__arrow {
	position: absolute;
	top: 50%;
	transform: translateY( -50% );
	z-index: 3;
	display: none; /* desktop uses cursor zones; shown on touch via media query */
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	padding: 0;
	color: #fff;
	font-size: 40px;
	line-height: 1;
	background: none;
	border: 0;
	cursor: pointer;
	opacity: 0.55;
	transition: opacity 0.2s ease, transform 0.2s ease;
	text-shadow: 0 1px 6px rgba( 0, 0, 0, 0.6 );
}
.neo-lb__arrow:hover { opacity: 1; }
.neo-lb__arrow--prev { left: 1vmin; }
.neo-lb__arrow--next { right: 1vmin; }
.neo-lb.is-single .neo-lb__arrow { display: none; }

/* --- Caption --- */
.neo-lb__caption {
	flex: 0 0 auto;
	padding: 0.35rem 6vmin 0;
	text-align: center;
	color: #e8e8e8;
}
.neo-lb__caption:empty { display: none; }
.neo-lb__title {
	display: block;
	font-size: 0.95rem;
	font-weight: 600;
}
.neo-lb__text {
	display: block;
	font-size: 0.85rem;
	color: #a9a9a9;
	margin-top: 0.15rem;
}

/* --- Bottom toolbar (mirrors the reference) --- */
.neo-lb__bar {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1.4rem;
	padding: 0.45rem 1rem 0.6rem;
	color: #cfcfcf;
	font-size: 0.78rem;
	letter-spacing: 0.04em;
}
.neo-lb__btn {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	background: none;
	border: 0;
	color: #cfcfcf;
	font: inherit;
	letter-spacing: inherit;
	cursor: pointer;
	padding: 0.3rem 0.2rem;
	transition: color 0.2s ease;
}
.neo-lb__btn:hover { color: #fff; }
.neo-lb__counter {
	color: #8c8c8c;
	min-width: 5ch;
	text-align: center;
}
.neo-lb__icon { width: 16px; height: 16px; display: block; }
.neo-lb.is-single .neo-lb__prev,
.neo-lb.is-single .neo-lb__next { display: none; }

/* Touch / mobile: show the side arrows (desktop relies on the cursor zones). */
@media ( max-width: 768px ), ( hover: none ) {
	.neo-lb:not( .is-single ) .neo-lb__arrow { display: flex; }
}
@media ( max-width: 599px ) {
	.neo-lb__arrow { width: 44px; height: 44px; font-size: 30px; }
	.neo-lb__bar { gap: 0.9rem; flex-wrap: wrap; }
}

@media ( prefers-reduced-motion: reduce ) {
	.neo-lb,
	.neo-lb__arrow { transition-duration: 0.001ms; }
}
/* Touch devices have no hover — show the captions by default. */
@media ( hover: none ) {
	.neo-item__cap { opacity: 1; transform: none; }
}