/* Scattered Gallery Pro - Base Styles */

/* Reset */
.sgp-container {
    width: 100%;
    position: relative;
    box-sizing: border-box;
}

.sgp-container *,
.sgp-container *::before,
.sgp-container *::after {
    box-sizing: border-box;
}

.sgp-gallery {
    width: 100%;
    position: relative;
}

/* Card */
.sgp-card {
    position: relative;
    overflow: hidden;
}

.sgp-card__image {
    overflow: hidden;
}

.sgp-card__image img {
    display: block;
    width: 100%;
    height: 100%;
}

.sgp-card__title {
    margin: 0;
}

/* Link overlay */
.sgp-card__link-overlay {
    display: block;
    text-decoration: none;
}

/* Selected state */
.sgp-card--selected {
    z-index: 10 !important;
}

/* Focus visible for keyboard navigation */
.sgp-card:focus-visible {
    outline: 2px solid rgba(59, 130, 246, 0.8);
    outline-offset: 2px;
}

.sgp-card:focus:not(:focus-visible) {
    outline: none;
}

/* Load More button hover */
.sgp-load-more:hover {
    background: rgba(0, 0, 0, 0.8) !important;
}

.sgp-load-more:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

/* Lightbox */
.sgp-lightbox {
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}

.sgp-lightbox__close:hover {
    opacity: 0.7;
}

.sgp-lightbox__close:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

/* RTL */
[dir="rtl"] .sgp-container,
.sgp-container[dir="rtl"] {
    direction: rtl;
}

/* Scrollbar defaults */
.sgp-gallery::-webkit-scrollbar {
    width: 6px;
}

.sgp-gallery::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.1);
}

.sgp-gallery::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 3px;
}

.sgp-gallery {
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.3) rgba(0, 0, 0, 0.1);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .sgp-card,
    .sgp-card img,
    .sgp-lightbox,
    .sgp-lightbox__content,
    .sgp-load-more {
        transition: none !important;
    }
}

/* Editor mode - disable link clicks */
.elementor-editor-active .sgp-card__link-overlay {
    pointer-events: none;
}

/* Print */
@media print {
    .sgp-card {
        break-inside: avoid;
        position: static !important;
        transform: none !important;
    }

    .sgp-gallery {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
        position: static !important;
        height: auto !important;
    }

    .sgp-card {
        width: 30% !important;
    }

    .sgp-lightbox {
        display: none !important;
    }

    .sgp-load-more {
        display: none !important;
    }
}