/* Gallery section styles */
.gallery-section {
    width: 900px;
    max-width: 100%;
    margin: 28px auto;
    transition: width 420ms cubic-bezier(.2,.9,.2,1), padding 420ms ease;
    background: rgba(26,26,26,0.95);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.45);
    padding: 16px;
}
.gallery-section h2 { margin-top: 0; margin-bottom: 12px; text-align: center; }
.gallery-section.expanded { width: min(80vw, 1200px); padding: 28px; }

.gallery-grid { justify-items: center; }
.gallery-item { width: 100%; max-width: 320px; }

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 10px;
}

.gallery-item {
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    border: 1px solid var(--border-color);
    background: var(--card-bg-color);
    cursor: pointer;
    height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.gallery-item img, .gallery-item video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.gallery-item .video-overlay {
    position: absolute;
    inset: 0;
    display:flex;
    align-items:center;
    justify-content:center;
    pointer-events:none;
}

.gallery-item .play-icon {
    width:48px; height:48px; border-radius:50%; background:rgba(0,0,0,0.5);
    display:flex; align-items:center; justify-content:center; color:white; font-size:20px;
}

/* Lightbox modal */
.gallery-modal {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.85);
    z-index: 2000;
}
.gallery-modal.open { display:flex; }
.gallery-modal .gallery-media-wrap { max-width: 92vw; max-height: 82vh; }
.gallery-modal img, .gallery-modal video { max-width: 92vw; max-height: 82vh; border-radius: 8px; }
.gallery-close, .gallery-prev, .gallery-next {
    position: absolute; background: transparent; border: none; color: white; font-size: 28px; cursor: pointer;
    padding: 12px; opacity:0.9;
}
.gallery-close { top: 18px; right: 22px; font-size:34px; }
.gallery-prev { left: 18px; top:50%; transform: translateY(-50%); }
.gallery-next { right: 18px; top:50%; transform: translateY(-50%); }
.gallery-caption { position: absolute; bottom: 18px; left: 20px; right: 20px; color: #ddd; font-size:14px; text-align:center; }

@media (max-width: 700px) {
    .gallery-item { height: 120px; }
    .gallery-grid { grid-template-columns: 1fr; gap: 8px; }
    .gallery-modal .gallery-media-wrap { max-height: 76vh; }
}

@media (prefers-reduced-motion: reduce) { .gallery-section { transition: none; } }