/*
 * gallery.css — экран галереи и модали (Flow 9, 9a, 9b, 9c).
 * Hero scroll panel для gallery-result и gallery-original-confirm — app-view-screens.css.
 */

/* Сдвиг под хедер + паддинги между секциями */
.app-screen--gallery > section:first-child {
    padding-top: calc(var(--header-height) + var(--padding-large));
    padding-bottom: var(--padding-large);
}

.app-screen--gallery .gallery-tabs-section {
    padding-bottom: var(--padding-middle);
}

.app-screen--gallery .gallery-grid-section {
    padding-top: var(--padding-middle);
    padding-bottom: var(--padding-large);
}

.app-screen--gallery .gallery-button-section {
    padding-bottom: var(--padding-large);
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--padding-micro);
}

.gallery-item {
    aspect-ratio: 1 / 1;
    border-radius: var(--border-radius-middle);
    overflow: hidden;
    position: relative;
    background: var(--color-background-dark-2);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.gallery-item-media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ---- Бейдж фото/видео ---- */
.gallery-item-type-badge {
    position: absolute;
    bottom: var(--padding-small);
    left: var(--padding-small);
    width: 2.8rem;
    height: 2.8rem;
    border-radius: var(--border-radius-small);
    background: var(--color-background-dark-1);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
    pointer-events: none;
}

.gallery-item-type-badge img {
    display: block;
    width: 1.4rem;
    height: auto;
}

/* Flow 9: ячейка «в обработке» в сетке (клик → Flow 9b) */
.gallery-item--processing .gallery-item-media {
    filter: blur(0.6rem);
    transform: scale(1.05);
}

.gallery-item-processing-icon {
    position: absolute;
    top: var(--padding-small);
    right: var(--padding-small);
    width: 2.8rem;
    height: 2.8rem;
    border-radius: var(--border-radius-small);
    background: var(--color-background-dark-1);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    pointer-events: none;
}

.gallery-item-processing-icon object {
    display: block;
    width: 1.6rem;
    height: 1.6rem;
    pointer-events: none;
}

/* Flow 9a/9c: hero scroll panel модалей (layout как app-screen--result) */
.gallery-result.modal--with-hero:not(.modal--hero-fullscreen) .modal-panel > section.content-section,
.gallery-original-confirm.modal--with-hero:not(.modal--hero-fullscreen) .modal-panel > section.content-section {
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + var(--padding-large));
}

/* Flow 9d: gallery-delete-confirm — компактный bottom sheet (modal--confirm) */
.gallery-delete-confirm .modal-panel-body {
    padding-top: var(--padding-large);
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + var(--padding-large));
}

/* Flow 9b: gallery-processing — modal--hero-fullscreen */

/* ---- Скрытые панели (hidden attribute) ---- */
[data-gallery-panel][hidden] {
    display: none;
}

/* ---- Пустое состояние ---- */
.gallery-empty-state {
    text-align: center;
    padding: var(--padding-large) 0;
}

.gallery-empty-state[aria-hidden="true"] {
    display: none;
}

/* ---- Заглушка-плейсхолдер ---- */
.gallery-item--placeholder {
    background:
        linear-gradient(
            135deg,
            var(--color-background-dark-3) 0%,
            var(--color-background-dark-5) 50%,
            var(--color-background-dark-6) 100%
        );
    pointer-events: none;
    cursor: default;
    filter: blur(4px);
    transform: scale(1.04);
}

.gallery-item--placeholder::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    pointer-events: none;
}