/* =========================================
   GALLERY PAGE STYLES
   ========================================= */

/* --- 1. HERO SECTION --- */
.gallery-hero {
    height: 50vh;
    background: url('../images/gallery-hero.jpg') no-repeat center center/cover;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    background-attachment: fixed; /* Parallax */
}

/* Fallback color */
.gallery-hero { background-color: #050505; }

.hero-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(to bottom, rgba(0,0,0,0.3), #0a0a0a);
}

.hero-text {
    position: relative;
    z-index: 2;
}

.hero-text h1 {
    font-family: 'Cinzel', serif;
    font-size: 4rem;
    color: #C5A059;
    letter-spacing: 10px;
    margin: 0;
    text-shadow: 0 4px 10px rgba(0,0,0,0.8);
}

.hero-text p {
    color: #E6DCCA;
    font-size: 1.2rem;
    letter-spacing: 3px;
    margin-top: 10px;
}

.gold-line {
    width: 100px; height: 3px;
    background: #C5A059;
    margin: 20px auto;
}

/* --- 2. FILTER BAR --- */
.filter-sticky-bar {
    display: flex;
    justify-content: center;
    padding: 30px;
    background: #0a0a0a;
    position: sticky;
    top: 80px; /* Below header */
    z-index: 100;
    border-bottom: 1px solid #222;
    gap: 15px;
}

/* We use the .lux-btn class from global-style.css, but add specific spacing here */
.filter-sticky-bar .lux-btn {
    margin: 0 10px;
}

/* --- 3. EDITORIAL SHOWCASE --- */
.editorial-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 50px 20px;
    overflow: hidden;
}

.art-piece {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 150px;
    opacity: 1;
    transition: opacity 0.5s ease;
}

.reverse-layout {
    flex-direction: row-reverse;
}

/* IMAGE STYLING */
.art-image {
    width: 50%;
    position: relative;
    cursor: pointer;
}

.img-frame {
    width: 100%;
    height: 600px;
    overflow: hidden;
    border: 1px solid #333;
    position: relative;
}

.img-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1.5s cubic-bezier(0.19, 1, 0.22, 1);
}

.art-piece:hover .img-frame img {
    transform: scale(1.1);
}

/* Shine Effect */
.shine {
    position: absolute;
    top: 0; left: -100%;
    width: 50%; height: 100%;
    background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(197,160,89,0.2) 50%, rgba(255,255,255,0) 100%);
    transform: skewX(-25deg);
    transition: 0.5s;
}

.art-piece:hover .shine {
    left: 150%;
    transition: 0.7s;
}

/* TEXT STYLING */
.art-details {
    width: 40%;
    padding: 40px;
}

.art-details h2 {
    font-family: 'Cinzel', serif;
    font-size: 2.5rem;
    color: #C5A059;
    margin-bottom: 10px;
}

.art-details h3 {
    font-family: 'Lato', sans-serif;
    text-transform: uppercase;
    color: #666;
    letter-spacing: 4px;
    font-size: 0.9rem;
    margin-bottom: 30px;
}

.art-details p {
    color: #E6DCCA;
    line-height: 1.8;
    font-size: 1.1rem;
    margin-bottom: 40px;
}

/* --- LIGHTBOX --- */
.lightbox-modal {
    display: none; position: fixed; z-index: 9999;
    top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(0,0,0,0.95);
    justify-content: center; align-items: center;
}
.lightbox-img { max-width: 90%; max-height: 90%; border: 2px solid #C5A059; }
.close-lightbox {
    position: absolute; top: 20px; right: 40px;
    color: #fff; font-size: 50px; cursor: pointer;
}


/* =========================================================================
   GALLERY SPECIFIC RESPONSIVE QUERIES
   ========================================================================= */

/* ##Device = Desktops
  ##Screen = 1281px to higher resolution desktops
*/
@media (min-width: 1281px) {
  /* Default styles apply */
}

/* ##Device = Laptops, Desktops
  ##Screen = B/w 1025px to 1280px
*/
@media (min-width: 1025px) and (max-width: 1280px) {
    .editorial-container { padding: 50px 40px; }
    .img-frame { height: 500px; }
}

/* ##Device = Tablets, Ipads (portrait)
  ##Screen = B/w 768px to 1024px
*/
@media (min-width: 768px) and (max-width: 1024px) {
    .gallery-hero { height: 40vh; }
    
    /* Slightly squeeze text/image ratio for tablets */
    .art-image { width: 45%; }
    .art-details { width: 55%; padding: 20px; }
    
    .filter-sticky-bar { padding: 20px; }
    .filter-sticky-bar .lux-btn {
        margin: 0 5px;
        font-size: 0.8rem;
    }
}

/* ##Device = Tablets, Ipads (landscape)
  ##Screen = B/w 768px to 1024px
*/
@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
    .gallery-hero { height: 50vh; }
}

/* ##Device = Low Resolution Tablets, Mobiles (Landscape)
  ##Screen = B/w 481px to 767px
*/
@media (min-width: 481px) and (max-width: 767px) {
    /* Stack content for smaller landscape screens */
    .art-piece, .reverse-layout {
        flex-direction: column !important;
        margin-bottom: 80px;
    }
    .art-image, .art-details { width: 100%; }
    .art-details { text-align: center; padding: 30px 20px; }
    .img-frame { height: 350px; }

    /* Filter Bar Wrap */
    .filter-sticky-bar { flex-wrap: wrap; gap: 10px; }
    .filter-sticky-bar .lux-btn { margin: 0; flex: 1 1 auto; }
}

/* ##Device = Most of the Smartphones Mobiles (Portrait)
  ##Screen = B/w 320px to 480px
*/
@media (min-width: 320px) and (max-width: 480px) {
    /* 1. HERO FIX */
    .gallery-hero {
        height: 40vh;
        background-attachment: scroll; /* Fix zoom on mobile */
    }
    .hero-text h1 { font-size: 2.5rem; letter-spacing: 5px; }

    /* 2. FILTER BAR FIX (Wrapping Buttons) */
    .filter-sticky-bar {
        flex-wrap: wrap;       /* Buttons drop to next line */
        justify-content: center;
        padding: 15px 10px;
        gap: 10px;
    }
    .filter-sticky-bar .lux-btn {
        flex: 1 1 auto;        /* Fill width evenly */
        min-width: 100px;      
        margin: 0;
        font-size: 0.8rem;     /* Smaller text */
    }
    .btn-text-primary, .btn-text-secondary {
        padding: 10px 15px;    /* Tighter padding */
    }

    /* 3. GALLERY STACKING */
    .art-piece, .reverse-layout {
        flex-direction: column !important; /* Stack Vertical */
        margin-bottom: 60px;
    }
    .art-image { width: 100%; }
    .img-frame { height: 350px; } /* Smaller images */
    
    .art-details { 
        width: 100%; 
        text-align: center; 
        padding: 30px 10px; 
    }
    
    .art-details h2 { font-size: 2rem; }
}