/* ============================================
   COSMIC FANTASY GALLERY MOBILE
   Мобильные стили для галереи - 4 карточки в ряд
   ============================================ */

/* Мобильная галерея - 4 карточки в ряд */
@media (max-width: 768px) {
    /* Основной грид галереи - возвращаем grid для мобильных */
    .gallery-grid,
    .gallery-section .gallery-grid {
        column-count: unset !important;
        column-gap: unset !important;
        display: grid !important;
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 8px !important;
        padding: 0 12px;
        margin-bottom: 24px;
    }
    
    /* Карточки галереи */
    .gallery-item {
        border-radius: 8px;
        overflow: hidden;
        min-height: 0;
        border-width: 1px;
        display: block !important;
        break-inside: unset !important;
        page-break-inside: unset !important;
        margin-bottom: 0 !important;
    }
    
    /* Обертка изображения */
    .gallery-image-wrapper {
        aspect-ratio: 1;
        min-height: 0;
        width: 100%;
    }
    
    .gallery-image-wrapper img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }
    
    /* Скрываем overlay на мобильных для компактности */
    .gallery-overlay {
        display: none !important;
    }
    
    /* Скрываем текст на мобильных */
    .gallery-prompt,
    .gallery-size {
        display: none !important;
    }
    
    /* Убираем hover эффекты на мобильных */
    .gallery-item:hover {
        transform: none;
        box-shadow: none;
    }
}

/* Очень маленькие экраны - оставляем 4 колонки, но уменьшаем gap */
@media (max-width: 480px) {
    .gallery-grid,
    .gallery-section .gallery-grid {
        column-count: unset !important;
        column-gap: unset !important;
        display: grid !important;
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 6px !important;
        padding: 0 8px;
    }
    
    .gallery-item {
        border-radius: 6px;
        display: block !important;
        break-inside: unset !important;
        page-break-inside: unset !important;
        margin-bottom: 0 !important;
    }
}