/* Галерея: сетка кадров, просмотрщик картинки и зона перетаскивания
   в админке. Лендинг, /gallery и /admin.
   Палитра и тон — docs/style.md, какая страница что подключает — docs/site/pages.md. */

/* ─────────── Галерея ─────────── */
.shot .frame {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: var(--ratio, 1.5);
    overflow: hidden;
    background: var(--panel-2);
}
.shot .frame img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
/* размытая миниатюра весом в пару сотен байт — она уже в HTML */
.shot .ph {
    filter: blur(12px);
    transform: scale(1.08);
}
.shot .full {
    opacity: 0;
    transition: opacity 0.45s ease;
}
.shot .full.loaded { opacity: 1; }
.shot { transition: transform 0.25s ease, border-color 0.25s ease; }
.shot:hover { transform: translateY(-3px); border-color: #39404d; }
.shot.extra { display: none; }

@keyframes pop {
    from { opacity: 0; transform: translateY(16px) scale(0.98); }
    to   { opacity: 1; transform: none; }
}
.shot.pop { animation: pop 0.45s ease both; }

/* кнопка «показать ещё» с уходом в темноту — намёк, что снизу есть ещё кадры */
.more-wrap {
    position: relative;
    margin-top: -70px;
    padding-top: 70px;
    text-align: center;
    background: linear-gradient(to bottom, rgba(16,18,22,0) 0%, var(--bg) 62%);
}
.more-btn { cursor: pointer; font-family: inherit; }

/* ─────────── Просмотр картинки ───────────
   Клик по кадру открывает его здесь же. Раньше ссылка вела прямо на файл
   в /uploads/ — браузер показывал голую картинку на белом фоне, и вернуться
   к сайту можно было только кнопкой «назад». */
.lb {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 64px;
    background: rgba(9, 10, 13, 0.92);
    backdrop-filter: blur(6px);
    animation: lb-in 0.2s ease both;
}
@keyframes lb-in { from { opacity: 0; } to { opacity: 1; } }

.lb-inner {
    margin: 0;
    max-width: 100%;
    max-height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}
.lb-inner img {
    max-width: 100%;
    /* оставляем место подписи и воздух сверху-снизу */
    max-height: calc(100vh - 140px);
    object-fit: contain;
    border-radius: 10px;
    border: 1px solid var(--line);
    background: var(--panel);
}
.lb-inner figcaption {
    color: var(--milk-dim);
    font-size: 14px;
    text-align: center;
    max-width: 700px;
}

/* Значки внутри кнопок — рисованные, а не текстовые. Раньше здесь стояли
   знаки «×», «‹» и «›» буквами: у каждого шрифта своя высота строки и свои
   поля вокруг такого знака, поэтому они сидели заметно ниже середины кнопки
   и выглядели сбитыми. У линии, нарисованной в svg, полей нет вовсе,
   а flex ставит её ровно по центру в обеих осях. */
.lb-btn {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid var(--line);
    background: rgba(24, 27, 33, 0.9);
    color: var(--milk-dim);
    border-radius: 10px;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
}
.lb-btn:hover { color: var(--milk); border-color: #39404d; }
.lb-btn svg { display: block; width: 18px; height: 18px; }
.lb-close { top: 18px; right: 18px; width: 40px; height: 40px; }
.lb-prev, .lb-next { top: 50%; transform: translateY(-50%); width: 44px; height: 64px; }
.lb-prev { left: 14px; }
.lb-next { right: 14px; }

/* пока открыт просмотр, страница под ним не прокручивается */
body.lb-open { overflow: hidden; }

@media (max-width: 560px) {
    .lb { padding: 56px 12px 20px; }
    .lb-inner img { max-height: calc(100vh - 160px); }
    .lb-prev, .lb-next { width: 38px; height: 52px; }
    .lb-prev { left: 6px; }
    .lb-next { right: 6px; }
}

@media (prefers-reduced-motion: reduce) {
    .lb { animation: none; }
}

/* ─────────── Админка: перетаскивание и вставка ─────────── */
.dropzone {
    position: relative;
    border: 1px dashed var(--line);
    border-radius: 12px;
    padding: 26px 20px;
    text-align: center;
    margin-bottom: 18px;
    transition: border-color 0.2s ease, background 0.2s ease;
}
.dropzone.over { border-color: var(--milk); background: rgba(242,231,213,0.05); }
.dz-title { color: var(--milk-dim); font-size: 15px; }
.dz-sub { color: var(--dim); font-size: 13px; margin-top: 4px; }
.dz-link { color: var(--milk); cursor: pointer; text-decoration: underline; display: inline; }
.dz-overlay {
    position: absolute;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: rgba(16,18,22,0.85);
    color: var(--milk);
    font-size: 16px;
}
.dropzone.over .dz-overlay { display: flex; }

.queue { margin-top: 14px; display: grid; gap: 7px; }
.qitem {
    font-size: 13px;
    padding: 8px 12px;
    border-radius: 7px;
    border: 1px solid var(--line);
    background: var(--panel-2);
    color: var(--muted);
    animation: pop 0.3s ease both;
}
.qitem.err { color: var(--ruby); border-color: rgba(224,64,95,0.35); }

@media (prefers-reduced-motion: reduce) {
    .reveal, .shot, .shot .full { transition: none; }
    .reveal { opacity: 1; transform: none; }
    .shot.pop { animation: none; }
    .mapbg { display: none; }
}