/**
 * PXBuilder Frontend Styles
 *
 * Styles for the rendered grid on the frontend
 */

/* Grid Wrapper - Container for responsive detection */
.pxbuilder-grid-wrapper {
    container-type: inline-size;
    width: 100%;
}

/* Grid Container */
.pxbuilder-grid {
    margin: 0 auto;
    box-sizing: border-box;
}

/* Grid Item */
.pxbuilder-grid .pxbuilder-item {
    overflow: hidden;
    box-sizing: border-box;
}

/* Image Items */
.pxbuilder-item--image {
    display: flex;
    align-items: stretch;
    justify-content: stretch;
}

.pxbuilder-item-image {
    width: 100%;
    height: 100%;
    /* object-fit is set dynamically via inline style */
    display: block;
}

/* ==========================================================================
   Responsive Layout - Container Queries + Masonry
   ========================================================================== */

/**
 * Mobile Masonry Layout using CSS Container Queries
 * Automatically switches to masonry when viewport is narrower than grid width
 */

/* Container query: When wrapper is narrower than typical tablet width, switch to masonry */
@container (max-width: 768px) {
    .pxbuilder-grid {
        display: block !important;
        columns: 2;
        column-gap: 16px;
        max-width: 100% !important;
        width: 100%;
    }

    .pxbuilder-grid .pxbuilder-item {
        break-inside: avoid;
        margin-bottom: 16px;
        grid-column: auto !important;
        grid-row: auto !important;
        position: relative !important;
        width: 100%;
    }

    .pxbuilder-item--image {
        display: block;
        height: auto !important;
    }

    .pxbuilder-item-image {
        width: 100%;
        height: auto;
        object-fit: contain;
    }
}

/* Smartphone: Single column masonry */
@container (max-width: 480px) {
    .pxbuilder-grid {
        columns: 1;
    }
}

/* ==========================================================================
   Fallback for browsers without Container Query support (Safari <16, etc.)
   ========================================================================== */

@supports not (container-type: inline-size) {
    @media (max-width: 768px) {
        .pxbuilder-grid {
            display: block !important;
            columns: 2;
            column-gap: 16px;
            max-width: 100% !important;
            width: 100%;
        }

        .pxbuilder-grid .pxbuilder-item {
            break-inside: avoid;
            margin-bottom: 16px;
            grid-column: auto !important;
            grid-row: auto !important;
            position: relative !important;
            width: 100%;
        }

        .pxbuilder-item--image {
            display: block;
            height: auto !important;
        }

        .pxbuilder-item-image {
            width: 100%;
            height: auto;
            object-fit: contain;
        }
    }

    @media (max-width: 480px) {
        .pxbuilder-grid {
            columns: 1;
        }
    }
}

/* Print Styles */
@media print {
    .pxbuilder-grid {
        break-inside: avoid;
    }

    .pxbuilder-item-image {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}

/* Accessibility - Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
    .pxbuilder-item,
    .pxbuilder-item-image {
        transition: none;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .pxbuilder-item {
        outline: 1px solid currentColor;
    }
}

/* ==========================================================================
   Lightbox Styles
   ========================================================================== */

/* Lightbox trigger items */
.pxbuilder-item--lightbox {
    cursor: zoom-in;
}

.pxbuilder-item--lightbox:focus {
    outline: 2px solid #007bff;
    outline-offset: 2px;
}

.pxbuilder-item--lightbox:hover .pxbuilder-item-image {
    opacity: 0.9;
}

/* Lightbox overlay and container */
.pxbuilder-lightbox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    visibility: hidden;
    opacity: 0;
    transition: visibility 0.3s, opacity 0.3s;
}

.pxbuilder-lightbox--open {
    visibility: visible;
    opacity: 1;
}

/* Dark overlay background */
.pxbuilder-lightbox-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
}

/* Content container */
.pxbuilder-lightbox-content {
    position: relative;
    max-width: 90vw;
    max-height: 90vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Lightbox image */
.pxbuilder-lightbox-image {
    max-width: 90vw;
    max-height: 90vh;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 4px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
    transform: scale(0.95);
    transition: transform 0.3s ease;
}

.pxbuilder-lightbox--open .pxbuilder-lightbox-image {
    transform: scale(1);
}

/* Close button */
.pxbuilder-lightbox-close {
    position: absolute;
    top: -40px;
    right: 0;
    width: 36px;
    height: 36px;
    background: transparent;
    border: none;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border-radius: 50%;
    transition: background-color 0.2s;
}

.pxbuilder-lightbox-close:hover,
.pxbuilder-lightbox-close:focus {
    background: rgba(255, 255, 255, 0.2);
    outline: none;
}

.pxbuilder-lightbox-close:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .pxbuilder-lightbox-close {
        top: 10px;
        right: 10px;
        background: rgba(0, 0, 0, 0.5);
    }

    .pxbuilder-lightbox-image {
        max-width: 95vw;
        max-height: 85vh;
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .pxbuilder-lightbox,
    .pxbuilder-lightbox-image {
        transition: none;
    }
}