/**
 * Gallery Styles
 * Nest & Fern PG for Women
 */

/* Hide scrollbar for room type navigation */
.scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.scrollbar-hide::-webkit-scrollbar {
    display: none;
}

/* Gallery image grid adjustments */
.gallery-img {
    aspect-ratio: 4/3;
    object-fit: cover;
}

.gallery-img:first-child {
    aspect-ratio: 4/3;
}

/* Gallery modal animations */
#gallery-modal {
    animation: fadeIn 0.2s ease-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

#gallery-modal img {
    animation: scaleIn 0.2s ease-out;
}

@keyframes scaleIn {
    from {
        transform: scale(0.95);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

/* Toast animation */
#toast {
    animation: slideUp 0.3s ease-out;
}

@keyframes slideUp {
    from {
        transform: translate(-50%, 100%);
        opacity: 0;
    }
    to {
        transform: translate(-50%, 0);
        opacity: 1;
    }
}

/* Room card hover effects */
section[id^="single-"],
section[id^="double-"],
section[id^="triple-"] {
    transition: transform 0.3s ease;
}

/* Sticky navigation shadow on scroll */
.sticky {
    transition: box-shadow 0.3s ease;
}

/* Image loading placeholder */
.gallery-img {
    background: linear-gradient(135deg, #E8D4A8 0%, #C9A962 100%);
    transition: opacity 0.3s ease;
}

.gallery-img:hover {
    opacity: 0.9;
}

/* Feature tags animation */
.flex-wrap span {
    transition: transform 0.2s ease, background-color 0.2s ease;
}

.flex-wrap span:hover {
    transform: scale(1.05);
}

/* Mobile touch feedback */
@media (hover: none) {
    .gallery-img:active {
        opacity: 0.8;
    }
    
    button:active {
        transform: scale(0.95);
    }
}

/* Responsive gallery grid */
@media (max-width: 640px) {
    .gallery-img {
        aspect-ratio: 1/1;
    }
    
    .col-span-2.row-span-2 .gallery-img {
        aspect-ratio: 4/3;
    }
}

/* High contrast mode support for gallery */
@media (prefers-contrast: high) {
    #gallery-modal {
        background-color: black;
    }
    
    #gallery-modal button {
        border: 2px solid white;
        padding: 0.5rem;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    #gallery-modal,
    #gallery-modal img,
    #toast,
    .gallery-img,
    .flex-wrap span {
        animation: none;
        transition: none;
    }
}

/* Print styles - hide gallery elements */
@media print {
    #gallery-modal,
    #toast,
    button[onclick^="copyRoomLink"],
    .sticky {
        display: none !important;
    }
}