/* Nikosi Gallery — frontend */
.nikosi-gallery{ --ng-columns:4; --ng-gap:12px; --ng-radius:8px; }
.nikosi-gallery *{ box-sizing:border-box; }

/* Filters */
.ng-filters{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:20px; }
.ng-chip{
	border:1px solid rgba(19,41,34,0.15); background:#fff; color:#132922;
	padding:8px 16px; border-radius:100px; font-size:13.5px; font-weight:500;
	cursor:pointer; transition:all .15s ease; font-family:inherit;
}
.ng-chip:hover{ border-color:#132922; }
.ng-chip.active{ background:var(--ng-ink,#132922); color:#fff; border-color:var(--ng-ink,#132922); }

/* Grid layout */
.ng-grid.ng-layout-grid{
	display:grid;
	grid-template-columns:repeat(var(--ng-columns), 1fr);
	gap:var(--ng-gap);
}
.ng-layout-grid .ng-item{ aspect-ratio:1/1; }

/* Masonry layout */
.ng-grid.ng-layout-masonry{
	columns:var(--ng-columns);
	column-gap:var(--ng-gap);
}
.ng-layout-masonry .ng-item{ width:100%; margin-bottom:var(--ng-gap); break-inside:avoid; }

/* Carousel layout */
.ng-grid.ng-layout-carousel{
	display:flex; gap:var(--ng-gap); overflow-x:auto; scroll-snap-type:x mandatory;
	padding-bottom:6px;
}
.ng-layout-carousel .ng-item{ flex:0 0 auto; width:min(46vw,320px); aspect-ratio:4/3; scroll-snap-align:start; }
.ng-layout-carousel::-webkit-scrollbar{ height:6px; }
.ng-layout-carousel::-webkit-scrollbar-thumb{ background:rgba(19,41,34,0.25); border-radius:10px; }

/* Item */
.ng-item{
	position:relative; display:block; width:100%; padding:0; border:0; margin:0;
	background:#132922; border-radius:var(--ng-radius); overflow:hidden; cursor:pointer;
	appearance:none; -webkit-appearance:none;
}
.ng-item img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .35s ease; }
.ng-layout-masonry .ng-item img{ height:auto; }

.ng-item-cap{
	position:absolute; left:0; right:0; bottom:0; padding:12px 14px;
	background:linear-gradient(180deg, transparent, rgba(8,17,14,0.85));
	color:#fff; font-size:13px; text-align:left; opacity:0; transform:translateY(6px);
	transition:all .2s ease;
}

.ng-hover-zoom .ng-item:hover img{ transform:scale(1.07); }
.ng-hover-darken .ng-item:hover img{ filter:brightness(0.55); }
.ng-hover-darken .ng-item:hover .ng-item-cap,
.ng-hover-zoom .ng-item:hover .ng-item-cap{ opacity:1; transform:translateY(0); }

@media (max-width:760px){
	.ng-grid.ng-layout-grid{ grid-template-columns:repeat(2, 1fr); }
	.ng-grid.ng-layout-masonry{ columns:2; }
}

/* ============ Lightbox ============ */
.ng-lightbox{
	position:fixed; inset:0; z-index:99999; background:rgba(6,13,10,0.95);
	display:none; flex-direction:column; align-items:center; justify-content:center;
}
.ng-lightbox.ng-open{ display:flex; }
.ng-lightbox.ng-zoomed .ng-lb-stage img{ max-width:none; max-height:none; width:auto; cursor:zoom-out; transform:scale(1.6); }

.ng-lightbox-bar{
	position:absolute; top:0; left:0; right:0; display:flex; align-items:center; justify-content:space-between;
	padding:16px 22px; color:#fff; font-family:inherit; font-size:13.5px; z-index:2;
}
.ng-lb-count{ opacity:0.75; letter-spacing:.02em; }
.ng-lb-actions{ display:flex; gap:8px; }
.ng-lb-btn{
	width:38px; height:38px; border-radius:50%; border:1px solid rgba(255,255,255,0.2);
	background:rgba(255,255,255,0.06); color:#fff; display:flex; align-items:center; justify-content:center;
	cursor:pointer; text-decoration:none;
}
.ng-lb-btn:hover{ background:rgba(255,255,255,0.16); }
.ng-lb-btn svg{ width:17px; height:17px; }

.ng-lb-stage{ width:100%; height:100%; display:flex; align-items:center; justify-content:center; padding:70px 90px; overflow:auto; }
.ng-lb-stage img{ max-width:100%; max-height:100%; border-radius:4px; box-shadow:0 30px 80px -20px rgba(0,0,0,0.6); }

.ng-lb-nav{
	position:absolute; top:50%; transform:translateY(-50%);
	width:46px; height:46px; border-radius:50%; border:1px solid rgba(255,255,255,0.2);
	background:rgba(255,255,255,0.06); color:#fff; font-size:22px; line-height:1; cursor:pointer; z-index:2;
}
.ng-lb-nav:hover{ background:rgba(255,255,255,0.16); }
.ng-lb-prev{ left:20px; } .ng-lb-next{ right:20px; }
@media (max-width:700px){
	.ng-lb-stage{ padding:70px 20px; }
	.ng-lb-prev{ left:6px; } .ng-lb-next{ right:6px; }
}

.ng-lb-caption{
	position:absolute; bottom:0; left:0; right:0; text-align:center;
	color:#fff; font-size:14px; padding:16px 20px; opacity:0.85;
}