/**
 * SSOT: Общие стили для карточек изображений в альбомах
 * Используется на страницах manage и detail
 */

/* Базовые стили для карточек изображений */
.image-card-wrapper {
    position: relative;
}

/* SSOT: Hover эффект применяется к самой карточке, а не к wrapper */
/* Тень должна быть по border карточки, а не по margin wrapper */
.image-card-wrapper .image-card,
.image-card-wrapper .card.image-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Hover эффект для карточек изображений - SSOT */
/* Применяем напрямую к карточке, чтобы тень была по border */
.image-card-wrapper:hover .image-card,
.image-card-wrapper:hover .card.image-card {
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15) !important;
}

/* Стили для drag & drop сортировки */
#imagesGrid[data-sortable="true"] .image-card-wrapper {
    cursor: move;
    cursor: grab;
}

/* На странице manage hover тоже применяется к карточке, а не к wrapper */
#imagesGrid[data-sortable="true"] .image-card-wrapper:hover .image-card,
#imagesGrid[data-sortable="true"] .image-card-wrapper:hover .card.image-card {
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15) !important;
}

#imagesGrid[data-sortable="true"] .image-card-wrapper.sortable-ghost {
    opacity: 0.4;
    cursor: grabbing;
}

#imagesGrid[data-sortable="true"] .image-card-wrapper.sortable-drag {
    opacity: 0.8;
    transform: scale(1.05);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
    z-index: 1000;
}

/* Индикатор сортировки - корпоративный синий, на изображении */
.sort-indicator {
    position: absolute;
    top: 5px;
    left: 5px;
    background: rgb(0, 102, 153);
    color: white;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 0.7rem;
    font-weight: bold;
    z-index: 10;
    display: block;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

/* Скрываем индикаторы сортировки на мобильных устройствах */
@media (max-width: 768px) {
    .sort-indicator {
        display: none;
    }

    /* Отключаем курсор grab на мобильных */
    #imagesGrid[data-sortable="true"] .image-card-wrapper {
        cursor: default;
    }
}