.lew-project-gallery { margin: var(--lew-space-6) 0; }
.lew-gallery-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--lew-space-3); }
.lew-gallery-layout-masonry .lew-gallery-grid { grid-auto-rows: 10px; }
.lew-gallery-item { position: relative; border-radius: var(--lew-radius-md); overflow: hidden; aspect-ratio: 4/3; background: var(--lew-color-surface); }
.lew-gallery-img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.lew-gallery-item:hover .lew-gallery-img { transform: scale(1.06); }
.lew-gallery-overlay {
	position: absolute; inset: 0; background: rgba(10,31,51,.45); display: flex; align-items: center; justify-content: center;
	opacity: 0; transition: opacity .25s ease;
}
.lew-gallery-item:hover .lew-gallery-overlay { opacity: 1; }
.lew-icon-zoom-in::before { content: "🔍"; font-size: 1.4rem; }

.lew-modal.lew-gallery-lightbox {
	position: fixed; inset: 0; z-index: 9999; background: rgba(10,31,51,.94);
	display: none; align-items: center; justify-content: center; flex-direction: column;
}
.lew-modal.lew-gallery-lightbox.is-open { display: flex; }
.lew-gallery-lightbox__content { max-width: 90vw; max-height: 80vh; }
.lew-gallery-lightbox__image { max-width: 100%; max-height: 80vh; border-radius: var(--lew-radius-md); }
.lew-modal__close { position: absolute; top: var(--lew-space-6); right: var(--lew-space-6); background: transparent; border: none; color: #fff; font-size: 2rem; cursor: pointer; }
.lew-gallery-lightbox__prev, .lew-gallery-lightbox__next {
	position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,.1); border: none; color: #fff;
	font-size: 1.5rem; width: 48px; height: 48px; border-radius: 50%; cursor: pointer;
}
.lew-gallery-lightbox__prev { left: var(--lew-space-6); }
.lew-gallery-lightbox__next { right: var(--lew-space-6); }
.lew-gallery-lightbox__prev:hover, .lew-gallery-lightbox__next:hover { background: var(--lew-color-primary); }

@media (max-width: 1024px) { .lew-gallery-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 767px)  { .lew-gallery-grid { grid-template-columns: repeat(2, 1fr); } }