.gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 15px; }
.gallery-item { position: relative; overflow: hidden; cursor: pointer; border-radius: 4px; }
.gallery-item img { width: 100%; height: 300px; object-fit: cover; transition: transform 0.5s ease; display: block; }
.gallery-item:hover img { transform: scale(1.1); }
.caption { position: absolute; bottom: -50px; left: 0; width: 100%; background: rgba(62,47,38,0.8); color: #fff; padding: 15px; text-align: center; transition: bottom 0.3s ease; font-weight: bold; }
.gallery-item:hover .caption { bottom: 0; }

/* Lightbox purely CSS & JS */
.lightbox { display: none; position: fixed; z-index: 2000; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.9); }
.lightbox-content { margin: auto; display: block; width: 80%; max-width: 900px; max-height: 80vh; margin-top: 5vh; object-fit: contain; animation: zoomIn 0.3s; }
#lightbox-caption { margin: auto; display: block; width: 80%; max-width: 900px; text-align: center; color: #ccc; padding: 15px 0; font-size: 1.2rem; font-family: var(--font-heading); }
.close { position: absolute; top: 20px; right: 35px; color: #f1f1f1; font-size: 40px; font-weight: bold; cursor: pointer; transition: 0.3s; }
.close:hover { color: var(--sand-beige); }
@keyframes zoomIn { from {transform:scale(0)} to {transform:scale(1)} }