/* =========================
   Lookbook – Global Styles
   ========================= */

/* Global Reset & Typography */
* { box-sizing: border-box; margin:0; padding:0; }
body { font-family: 'Montserrat', sans-serif; background-color: #0d0d0d; color: #f5f5f5; line-height:1.6; }
a { color: inherit; text-decoration:none; transition: color 0.3s; }
a:hover { color: #ff3366; }

/* Header & Navigation */
header { display:flex; justify-content:space-between; align-items:center; padding:20px 50px; border-bottom:1px solid #222; position:sticky; top:0; z-index:10; background-color: rgba(13,13,13,0.95); }
.logo { font-family:'Archivo Black', sans-serif; font-size:1.5em; letter-spacing:2px; }
nav a { margin-left:30px; font-weight:500; text-transform:uppercase; font-size:0.9em; }

/* Lookbook Grid Layout */
.lookbook-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    padding: 50px;
    margin: 0 auto;
    max-width: 1600px;
}
.lookbook-item { position:relative; overflow:hidden; cursor:pointer; background-color:#1a1a1a; transition: transform 0.4s ease; }
.lookbook-item:hover { transform: scale(1.02); z-index:5; }
.lookbook-item img, .lookbook-item video { width:100%; height:100%; object-fit:cover; display:block; transition: opacity 0.4s ease; }
.item-large { grid-column: span 2; min-height:600px; }
@media (max-width:1200px){ .item-large{min-height:500px;} }

/* Captions */
.caption { position:absolute; bottom:0; left:0; width:100%; padding:20px; background: linear-gradient(to top, rgba(0,0,0,0.7), rgba(0,0,0,0)); color:#fff; pointer-events:none; }
.caption h3 { font-family:'Archivo Black', sans-serif; font-size:1.5em; margin-bottom:5px; text-transform:uppercase; }
.caption p { font-weight:300; font-size:0.9em; }

/* Footer */
footer { text-align:center; padding:30px; border-top:1px solid #222; font-size:0.8em; font-weight:300; color:#888; }

/* Mobile Adjustments */
@media (max-width:768px){
    header { padding:15px 20px; }
    nav a { margin-left:15px; }

    .lookbook-container {
        grid-template-columns: 1fr;
        padding: 15px;
        gap: 15px;
    }

    .lookbook-item,
    .item-large {
        grid-column: span 1 !important;
    }

    .lookbook-item {
        min-height: 280px;
    }

    .item-large {
        min-height: 380px;
    }

    .caption { padding:15px 10px; }
    .caption h3 { font-size:1.2em; }
}

/* Lightbox */
#lightbox-overlay {
    position: fixed; top:0; left:0; width:100%; height:100%;
    background: rgba(0,0,0,0.95);
    display:none; justify-content:center; align-items:center;
    z-index:9999;
    overflow:hidden;
}
#lightbox-content { position: relative; max-width:90%; max-height:90%; z-index:9999; }
#lightbox-content img, #lightbox-content video { width:100%; height:100%; object-fit:contain; }

#lightbox-overlay .arrow, #lightbox-overlay .close {
    position:absolute; font-size:3em; color:#fff; cursor:pointer; user-select:none; z-index:10000; transition:0.3s;
}
#lightbox-overlay .arrow:hover, #lightbox-overlay .close:hover { color: #ff3366 !important; }
#lightbox-overlay .arrow-left { left:20px; top:50%; transform:translateY(-50%); }
#lightbox-overlay .arrow-right { right:20px; top:50%; transform:translateY(-50%); }
#lightbox-overlay .close { top:20px; right:30px; font-size:3em; }

@media (max-width:768px){
    #lightbox-overlay .arrow-left, #lightbox-overlay .arrow-right { font-size:4.8em !important; }
    #lightbox-overlay .close { font-size:4.5em !important; right:15px; top:10px; }
}

.fade { transition: opacity 0.4s ease; }

/* =========================
   Mobile Hero Carousel
   ========================= */
@media (max-width: 768px) {
    .lookbook-item.item-large.hero-carousel {
        min-height: 480px;
        overflow: hidden;
    }

    .lookbook-item.hero-carousel [data-media] {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        opacity: 0;
        transition: opacity 0.8s ease;
    }

    .lookbook-item.hero-carousel [data-media].active-slide {
        opacity: 1;
    }
}