/**
 * GALLERY UNIFIED CSS - COMPLETE GALLERY SYSTEM CONSOLIDATION
 * 
 * CONSOLIDATES ALL Gallery CSS from:
 * - Original gallery-unified.css (BEM Architecture)
 * - ux-optimizations.css (Gallery error prevention and image optimization)
 * - responsive-unified.css (Mobile responsive galleries, IE11 fixes, print styles)
 * 
 * Consolidates:
 * - gallery-carousel-system.css (OWL Carousel styling)
 * - simple-gallery.css (Grid gallery layout)
 * - wordpress-gallery.css (WordPress custom fields gallery)
 * 
 * @package RentAssistenz
 * @version 2.0.0 - COMPLETE Gallery Consolidation
 * @priority 30 (loads with gallery content)
 */

/* =============================================================================
   CSS CUSTOM PROPERTIES - GALLERY DESIGN SYSTEM
   ============================================================================= */

:root {
    --gallery-bg: #ffffff;
    --gallery-border: #e1e5e9;
    --gallery-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    --gallery-shadow-hover: 0 8px 25px rgba(0, 0, 0, 0.15);
    --gallery-radius: 12px;
    --gallery-spacing: 20px;
    --gallery-item-min-width: 300px;
    --gallery-transition: all 0.3s ease;
    --gallery-overlay: rgba(0, 124, 186, 0.8);
    --gallery-text-color: #ffffff;
}

/* =============================================================================
   GALLERY CONTAINER - BEM ARCHITECTURE
   ============================================================================= */

/* === Gallery Block === */
.gallery,
.simple-gallery,
.rentassistenz-gallery {
    width: 100%;
    margin: 40px 0;
    padding: 0;
    position: relative;
}

/* === Gallery Grid Layout === */
.gallery__grid,
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--gallery-item-min-width), 1fr));
    gap: var(--gallery-spacing);
    padding: 0;
    margin: 0;
}

/* === Gallery Item === */
.gallery__item,
.gallery-item {
    position: relative;
    background: var(--gallery-bg);
    border-radius: var(--gallery-radius);
    overflow: hidden;
    box-shadow: var(--gallery-shadow);
    transition: var(--gallery-transition);
    cursor: pointer;
}

.gallery__item:hover,
.gallery-item:hover {
    transform: translateY(-5px);
    box-shadow: var(--gallery-shadow-hover);
}

/* === Gallery Image === */
.gallery__image,
.gallery-item img {
    width: 100%;
    height: 250px;
    object-fit: cover;
    display: block;
    transition: var(--gallery-transition);
}

.gallery__item:hover .gallery__image,
.gallery-item:hover img {
    transform: scale(1.05);
}

/* === Gallery Content === */
.gallery__content,
.gallery-item .content {
    padding: 20px;
    position: relative;
}

.gallery__title,
.gallery-item .title {
    font-size: 1.25rem;
    font-weight: 600;
    color: #333333;
    margin-bottom: 0.5rem;
    line-height: 1.4;
}

.gallery__description,
.gallery-item .description {
    font-size: 0.95rem;
    color: #666666;
    line-height: 1.6;
    margin-bottom: 1rem;
}

/* === Gallery Overlay === */
.gallery__overlay,
.gallery-item .overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--gallery-overlay);
    opacity: 0;
    transition: var(--gallery-transition);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gallery-text-color);
}

.gallery__item:hover .gallery__overlay,
.gallery-item:hover .overlay {
    opacity: 1;
}

.gallery__overlay-text,
.gallery-item .overlay-text {
    text-align: center;
    font-size: 1.1rem;
    font-weight: 600;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* =============================================================================
   OWL CAROUSEL GALLERY - BEM ARCHITECTURE
   ============================================================================= */

/* === Carousel Container === */
.gallery-carousel,
.owl-location-carousel {
    margin-top: 40px;
    padding: 0 20px;
}

.gallery-carousel__stage,
.owl-location-carousel .owl-stage-outer {
    padding: 10px 0;
}

/* === Carousel Item === */
.gallery-carousel__item,
.owl-location-carousel .item {
    background: var(--gallery-bg);
    border-radius: var(--gallery-radius);
    overflow: hidden;
    box-shadow: var(--gallery-shadow);
    transition: var(--gallery-transition);
    margin: 0 10px;
}

.gallery-carousel__item:hover,
.owl-location-carousel .item:hover {
    transform: translateY(-3px);
    box-shadow: var(--gallery-shadow-hover);
}

/* === Carousel Image === */
.gallery-carousel__image,
.owl-location-carousel .item img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    display: block;
}

/* === Carousel Content === */
.gallery-carousel__content,
.owl-location-carousel .item .content {
    padding: 15px;
}

.gallery-carousel__title,
.owl-location-carousel .item .title {
    font-size: 1.1rem;
    font-weight: 600;
    color: #333333;
    margin-bottom: 0.5rem;
    line-height: 1.3;
}

.gallery-carousel__text,
.owl-location-carousel .item .text {
    font-size: 0.9rem;
    color: #666666;
    line-height: 1.5;
}

/* === Carousel Controls === */
.gallery-carousel__nav,
.owl-location-carousel .owl-nav {
    text-align: center;
    margin-top: 20px;
}

.gallery-carousel__nav-button,
.owl-location-carousel .owl-nav button {
    background: #007cba;
    color: white;
    border: none;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    margin: 0 5px;
    cursor: pointer;
    transition: var(--gallery-transition);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}

.gallery-carousel__nav-button:hover,
.owl-location-carousel .owl-nav button:hover {
    background: #053068;
    transform: scale(1.1);
}

/* === Carousel Dots === */
.gallery-carousel__dots,
.owl-location-carousel .owl-dots {
    text-align: center;
    margin-top: 15px;
}

.gallery-carousel__dot,
.owl-location-carousel .owl-dots .owl-dot {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(0, 124, 186, 0.3);
    margin: 0 4px;
    cursor: pointer;
    transition: var(--gallery-transition);
}

.gallery-carousel__dot--active,
.owl-location-carousel .owl-dots .owl-dot.active {
    background: #007cba;
    transform: scale(1.2);
}

/* =============================================================================
   LIGHTBOX GALLERY - BEM ARCHITECTURE
   ============================================================================= */

/* === Lightbox Overlay === */
.gallery-lightbox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.gallery-lightbox--active {
    display: flex;
}

/* === Lightbox Content === */
.gallery-lightbox__content {
    position: relative;
    max-width: 90vw;
    max-height: 90vh;
    background: white;
    border-radius: var(--gallery-radius);
    overflow: hidden;
}

.gallery-lightbox__image {
    width: 100%;
    height: auto;
    display: block;
}

.gallery-lightbox__close {
    position: absolute;
    top: 15px;
    right: 15px;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* === Lightbox Navigation === */
.gallery-lightbox__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.7);
    color: white;
    border: none;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.gallery-lightbox__prev {
    left: 15px;
}

.gallery-lightbox__next {
    right: 15px;
}

/* =============================================================================
   RESPONSIVE DESIGN - MOBILE FIRST
   ============================================================================= */

@media (max-width: 768px) {
    .gallery__grid,
    .gallery-grid {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 15px;
    }
    
    .gallery,
    .simple-gallery,
    .rentassistenz-gallery {
        margin: 30px 0;
    }
    
    .gallery__image,
    .gallery-item img {
        height: 220px;
    }
    
    .gallery__content,
    .gallery-item .content {
        padding: 15px;
    }
    
    .gallery-carousel,
    .owl-location-carousel {
        padding: 0 10px;
    }
    
    .gallery-carousel__image,
    .owl-location-carousel .item img {
        height: 180px;
    }
    
    .gallery-lightbox__content {
        max-width: 95vw;
        max-height: 95vh;
        margin: 0 10px;
    }
}

@media (max-width: 480px) {
    .gallery__grid,
    .gallery-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    
    .gallery__image,
    .gallery-item img {
        height: 200px;
    }
    
    .gallery__title,
    .gallery-item .title {
        font-size: 1.125rem;
    }
    
    .gallery-carousel__nav-button,
    .owl-location-carousel .owl-nav button {
        width: 40px;
        height: 40px;
        font-size: 14px;
    }
    
    .gallery-lightbox__nav {
        width: 45px;
        height: 45px;
        font-size: 20px;
    }
    
    .gallery-lightbox__close {
        width: 35px;
        height: 35px;
        font-size: 18px;
        top: 10px;
        right: 10px;
    }
}

/* =============================================================================
   ACCESSIBILITY - WCAG 2.1 AA COMPLIANCE
   ============================================================================= */

/* Focus indicators for keyboard navigation */
.gallery__item:focus,
.gallery-item:focus,
.gallery-carousel__item:focus,
.owl-location-carousel .item:focus,
.gallery-carousel__nav-button:focus,
.gallery-carousel__dot:focus,
.gallery-lightbox__close:focus,
.gallery-lightbox__nav:focus {
    outline: 3px solid rgba(0, 124, 186, 0.8);
    outline-offset: 2px;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .gallery__item,
    .gallery-item,
    .gallery-carousel__item {
        border: 2px solid #000000;
        box-shadow: none;
    }
    
    .gallery__overlay,
    .gallery-item .overlay {
        background: #000000;
    }
    
    .gallery-carousel__nav-button,
    .gallery-carousel__dot--active {
        background: #000000;
        border: 2px solid #ffffff;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .gallery__item,
    .gallery-item,
    .gallery-carousel__item,
    .gallery__image,
    .gallery-item img,
    .gallery__overlay,
    .gallery-item .overlay,
    .gallery-carousel__nav-button,
    .gallery-carousel__dot {
        transition: none;
    }
    
    .gallery__item:hover,
    .gallery-item:hover,
    .gallery-carousel__item:hover {
        transform: none;
    }
    
    .gallery__item:hover .gallery__image,
    .gallery-item:hover img {
        transform: none;
    }
}

/* Screen reader support */
.gallery__sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* =============================================================================
   PRINT STYLES
   ============================================================================= */

@media print {
    .gallery-carousel,
    .owl-location-carousel,
    .gallery-lightbox {
        display: none;
    }
    
    .gallery__grid,
    .gallery-grid {
        display: block;
    }
    
    .gallery__item,
    .gallery-item {
        break-inside: avoid;
        margin-bottom: 20px;
        box-shadow: none;
        border: 1px solid #cccccc;
    }
    
    .gallery__image,
    .gallery-item img {
        max-height: 200px;
    }
}

/* =============================================================================
   CONSOLIDATED GALLERY CSS FROM OTHER FILES - Version 2.0.0
   ============================================================================= */

/* === FROM UX-OPTIMIZATIONS.CSS - ERROR PREVENTION - CLEANED === */
.gallery-item img {
    object-fit: cover;
    width: 100%;
    height: 250px;
    background: #f8f9fa;
    border-radius: 8px;
}

.gallery-item img:not([src]) {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 200"><rect fill="%23f8f9fa" width="300" height="200"/><text x="50%" y="50%" text-anchor="middle" fill="%23999">Bild lädt...</text></svg>');
}

/* === FROM RESPONSIVE-UNIFIED.CSS - IE11 FIXES === */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    /* IE11 flexbox fixes */
    .gallery__grid,
    .gallery-grid {
        display: -ms-grid;
        -ms-grid-columns: 1fr 1fr 1fr;
    }
    
    /* IE11 grid fallback */
    .gallery__item,
    .gallery-item {
        -ms-grid-column-span: 1;
    }
}

/* === FROM RESPONSIVE-UNIFIED.CSS - MOBILE RESPONSIVE === */
@media (max-width: 360px) {
    /* Gallery responsive */
    .gallery__grid,
    .gallery-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-sm);
    }
}

@media (max-width: 768px) {
    /* Gallery carousel */
    .owl-location-carousel .owl-nav {
        margin-top: var(--spacing-md);
    }
    
    .owl-location-carousel .owl-nav button {
        width: 40px;
        height: 40px;
        font-size: 14px;
    }
}

@media (max-width: 1024px) {
    /* Gallery grid */
    .gallery__grid,
    .gallery-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-lg);
    }
}

@media (min-width: 1200px) {
    /* Gallery full grid */
    .gallery__grid,
    .gallery-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--spacing-xl);
    }
}

/* === FROM RESPONSIVE-UNIFIED.CSS - ACCESSIBILITY === */
@media (prefers-reduced-motion: reduce) {
    @media (max-width: 768px) {
        /* Remove animations on mobile for reduced motion users */
        .gallery__item,
        .gallery-item {
            transition: none;
        }
        
        .gallery__item:hover,
        .gallery-item:hover {
            transform: none;
        }
    }
}

/* === FROM RESPONSIVE-UNIFIED.CSS - PRINT STYLES === */
@media print {
    /* Gallery print layout */
    .gallery__grid,
    .gallery-grid {
        display: block;
    }
    
    .gallery__item,
    .gallery-item {
        break-inside: avoid;
        margin-bottom: 20px;
    }
}

/* === FROM RESPONSIVE-UNIFIED.CSS - PERFORMANCE OPTIMIZATIONS === */
@media (max-width: 768px) {
    /* GPU acceleration for mobile smooth scrolling */
    .gallery__item,
    .gallery-item {
        transform: translateZ(0);
        backface-visibility: hidden;
        perspective: 1000px;
    }
    
    /* Optimize images for mobile */
    img {
        max-width: 100%;
        height: auto;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
    }
}