/**
 * Hero Gallery Styles
 * Gestapelde foto galerij met auto-rotate
 */

/* ============================================
   GALLERY CONTAINER
   ============================================ */

.hero-gallery {
    position: relative;
    width: 100%;
    max-width: 420px;
    aspect-ratio: 3 / 4;
    cursor: pointer;
}

.gallery-stack {
    position: relative;
    width: 100%;
    height: 100%;
    perspective: 1000px;
}

/* ============================================
   STACK ITEMS
   ============================================ */

.stack-item {
    position: absolute;
    inset: 0;
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    transform-origin: center center;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
}

/* Gouden frame effect */
.stack-item::before {
    content: '';
    position: absolute;
    inset: -3px;
    background: linear-gradient(135deg, #C9A962 0%, #E8D5A3 50%, #C9A962 100%);
    border-radius: 14px;
    z-index: -1;
}

.stack-item::after {
    content: '';
    position: absolute;
    inset: 0;
    border: 1px solid rgba(201, 169, 98, 0.3);
    border-radius: 12px;
    pointer-events: none;
    z-index: 2;
}

/* Stack posities - achterste items */
.stack-item:nth-child(1) {
    transform: translateX(24px) translateY(-16px) rotate(4deg) scale(0.94);
    z-index: 1;
    opacity: 0.6;
}

.stack-item:nth-child(2) {
    transform: translateX(12px) translateY(-8px) rotate(2deg) scale(0.97);
    z-index: 2;
    opacity: 0.8;
}

.stack-item:nth-child(3) {
    transform: translateX(0) translateY(0) rotate(0deg) scale(1);
    z-index: 3;
    opacity: 1;
}

.stack-item:nth-child(4) {
    transform: translateX(-12px) translateY(8px) rotate(-2deg) scale(0.97);
    z-index: 2;
    opacity: 0.8;
}

.stack-item:nth-child(5) {
    transform: translateX(-24px) translateY(16px) rotate(-4deg) scale(0.94);
    z-index: 1;
    opacity: 0.6;
}

/* Active item (vooraan) */
.stack-item.active {
    transform: translateX(0) translateY(0) rotate(0deg) scale(1) !important;
    z-index: 10 !important;
    opacity: 1 !important;
}

/* Transitioning items */
.stack-item.to-back {
    animation: sendToBack 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes sendToBack {
    0% {
        transform: translateX(0) translateY(0) rotate(0deg) scale(1);
        z-index: 10;
        opacity: 1;
    }
    50% {
        transform: translateX(40px) translateY(-30px) rotate(8deg) scale(0.9);
        opacity: 0.5;
    }
    100% {
        transform: translateX(24px) translateY(-16px) rotate(4deg) scale(0.94);
        z-index: 1;
        opacity: 0.6;
    }
}

/* ============================================
   STACK FRAME & IMAGE
   ============================================ */

.stack-frame {
    width: 100%;
    height: 100%;
    /* Warme crème/beige achtergrond passend bij hout-thema */
    background: linear-gradient(145deg, #F5EFE6 0%, #E8DFD0 50%, #F0E9DC 100%);
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
}

.stack-frame img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    transition: transform 0.4s ease;
    border-radius: 4px;
    /* Subtiele schaduw om de foto los te laten komen van de achtergrond */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.stack-item:hover .stack-frame img {
    transform: scale(1.02);
}

/* Artwork info overlay */
.stack-info {
    position: absolute;
    bottom: 12px;
    left: 12px;
    right: 12px;
    padding: 16px;
    background: rgba(44, 62, 45, 0.9);
    backdrop-filter: blur(4px);
    color: white;
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.3s ease;
    border-radius: 8px;
}

.stack-item.active:hover .stack-info {
    opacity: 1;
    transform: translateY(0);
}

.stack-info-title {
    font-family: var(--font-heading, 'Cormorant Garamond', serif);
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 4px;
}

.stack-info-category {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    opacity: 0.8;
}

/* ============================================
   PLACEHOLDER (wanneer geen afbeeldingen)
   ============================================ */

.stack-item.placeholder .stack-frame {
    background: linear-gradient(135deg, #FAF8F5 0%, #F0EBE3 100%);
}

.stack-item.placeholder .placeholder-art {
    text-align: center;
    color: var(--color-text-muted, #999);
}

.stack-item.placeholder .art-icon {
    width: 80px;
    height: 80px;
    margin-bottom: 12px;
    opacity: 0.5;
}

.stack-item.placeholder span {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
}

/* ============================================
   GALLERY INDICATORS
   ============================================ */

.gallery-indicators {
    position: absolute;
    bottom: -30px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 20;
}

.indicator-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-accent-light, #E8D5A3);
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 0;
}

.indicator-dot:hover {
    background: var(--color-accent, #C9A962);
    transform: scale(1.2);
}

.indicator-dot.active {
    background: var(--color-primary, #2C3E2D);
    width: 24px;
    border-radius: 4px;
}

/* ============================================
   CLICK HINT
   ============================================ */

.gallery-hint {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.6);
    color: white;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    z-index: 15;
}

.hero-gallery:hover .gallery-hint {
    opacity: 1;
}

.hero-gallery.has-images .gallery-hint {
    display: none;
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 1024px) {
    .hero-gallery {
        max-width: 350px;
    }
}

@media (max-width: 768px) {
    .hero-gallery {
        max-width: 300px;
        margin: 0 auto;
    }
    
    .gallery-indicators {
        bottom: -24px;
    }
    
    .stack-item:nth-child(1) {
        transform: translateX(16px) translateY(-12px) rotate(3deg) scale(0.95);
    }
    
    .stack-item:nth-child(2) {
        transform: translateX(8px) translateY(-6px) rotate(1.5deg) scale(0.97);
    }
    
    .stack-item:nth-child(4) {
        transform: translateX(-8px) translateY(6px) rotate(-1.5deg) scale(0.97);
    }
    
    .stack-item:nth-child(5) {
        transform: translateX(-16px) translateY(12px) rotate(-3deg) scale(0.95);
    }
}

@media (max-width: 480px) {
    .hero-gallery {
        max-width: 260px;
    }
    
    .stack-info {
        padding: 12px;
    }
    
    .stack-info-title {
        font-size: 1rem;
    }
}