/* GLightbox Theme Integration
 * Overrides default GLightbox styles to use design system tokens
 */

/* Overlay background - dark for all themes */
.glightbox-container .goverlay {
    background: #000000 !important;
    opacity: 0.95 !important;
}

/* Remove drop shadow from lightbox images */
.glightbox-container .gslide-media,
.glightbox-container .gslide-inner-content,
.glightbox-container img {
    box-shadow: none !important;
}

/* Close button */
.glightbox-container .gclose,
.glightbox-container .gnext,
.glightbox-container .gprev {
    color: var(--color-primary) !important;
    background: transparent !important;
}

.glightbox-container .gclose:hover,
.glightbox-container .gnext:hover,
.glightbox-container .gprev:hover {
    color: var(--color-link) !important;
}

/* Image counter */
.glightbox-container .gslide-number {
    color: var(--color-secondary) !important;
    font-family: 'IBM Plex Mono', monospace !important;
    font-size: 0.85rem !important;
}

/* Description container - no padding, no fixed height */
.glightbox-clean .gslide-description {
    background: var(--color-surface-emphasized) !important;
    border-top: 1px solid var(--color-border) !important;
    padding: 0 !important;
    height: auto !important;
}

/* Inner wrapper - this provides the padding */
.glightbox-clean .gdesc-inner {
    padding: 0.75rem 1.5rem !important;
}

/* Title - no padding, no margin, no border */
.glightbox-clean .gslide-title {
    color: var(--color-secondary) !important;
    font-family: var(--font-primary) !important;
    font-size: 0.8rem !important;
    line-height: 1.4 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
}

.glightbox-clean .gslide-title a {
    color: var(--color-link) !important;
    text-decoration: underline !important;
}

/* Loading spinner */
.glightbox-container .gloader {
    border-color: var(--color-divider) !important;
    border-top-color: var(--color-accent-1) !important;
}

/* Navigation arrows */
.glightbox-container .gprev svg,
.glightbox-container .gnext svg {
    stroke: var(--color-primary) !important;
}

.glightbox-container .gprev:hover svg,
.glightbox-container .gnext:hover svg {
    stroke: var(--color-link) !important;
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .glightbox-container .gslide-description {
        padding: 0.625rem 1rem !important;
    }
}