/* ГАЛЕРЕЯ РАБОТ УЧЕНИКОВ
 *
 * Публичная страница /gallery и «Мои работы» (/account/gallery).
 * Одеты как страница книг: тёмно-синяя сцена с фото крыла
 * и мягким голубым светом вверху, золото вторым акцентом,
 * Cormorant крупно, плоские кнопки с разрядкой, тонкие линии.
 * Цвета и шрифты — из tokens.css. */

:root {
    --gl-ink: #0b1d2b;
    --gl-ink-2: #10304a;
    --gl-gold: #d8b46a;
    --gl-gold-soft: rgba(216, 180, 106, 0.35);
    --gl-gold-text: #8a6a2e;
    --gl-line: rgba(29, 79, 107, 0.14);
    --gl-ease: cubic-bezier(.2, .7, .2, 1);
}

body {
    background: var(--bg-secondary);
    color: var(--text-main);
    font-family: var(--font-body);
}

/* Страница короче окна — подвал не должен висеть посередине */

body.gallery-body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

body.gallery-body .gallery-page {
    flex: 1 0 auto;
}


/* ----- Кнопки — как .bk-btn ----- */

.g-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    min-height: 48px;
    padding: 0 28px;

    background: var(--butterfly-strong);
    border: 1px solid var(--butterfly-strong);
    border-radius: 0;
    color: var(--white);

    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 2.4px;
    text-transform: uppercase;
    text-decoration: none;
    line-height: 1.3;
    cursor: pointer;

    transition:
        transform 0.25s var(--gl-ease),
        background-color 0.25s ease,
        border-color 0.25s ease,
        box-shadow 0.25s ease,
        color 0.25s ease;
}

.g-button:hover:not(:disabled) {
    transform: translateY(-2px);

    background: var(--butterfly-deep);
    border-color: var(--butterfly-deep);

    box-shadow: 0 14px 28px -16px rgba(16, 48, 74, 0.55);
}

.g-button:focus-visible {
    outline: 2px solid var(--gl-gold);
    outline-offset: 3px;
}

.g-button:disabled {
    opacity: 0.55;
    cursor: default;
}

.g-button--line {
    background: transparent;
    color: var(--gl-ink);
    border-color: var(--gl-ink);
}

.g-button--line:hover:not(:disabled) {
    background: var(--gl-ink);
    color: var(--white);
    border-color: var(--gl-ink);
}

.g-button--danger {
    background: transparent;
    color: #9a3a3a;
    border-color: rgba(154, 58, 58, 0.35);
}

.g-button--danger:hover:not(:disabled) {
    background: rgba(154, 58, 58, 0.08);
    color: #7d2a2a;
    border-color: #9a3a3a;

    box-shadow: none;
}


/* ========================================
   ПУБЛИЧНАЯ ГАЛЕРЕЯ
======================================== */

.gallery-page {
    padding: 0 0 96px;

    overflow-x: clip;
}

/* Первый экран — тёмная сцена с крылом на всю ширину окна */

.gallery-hero {
    position: relative;
    isolation: isolate;

    margin: 0 calc(50% - 50vw) 64px;
    padding: 104px calc(50vw - 50%) 88px;

    overflow: hidden;

    background: var(--gl-ink);
    color: var(--white);

    text-align: center;
}

.gallery-hero::before {
    content: "";

    position: absolute;
    inset: 0;
    z-index: -2;

    background:
        radial-gradient(50% 80% at 50% 10%, rgba(56, 183, 215, 0.22), transparent 70%),
        linear-gradient(180deg, rgba(8, 21, 32, 0.55), rgba(8, 21, 32, 0.92)),
        url("/static/images/bg-gallery.webp") right bottom / cover no-repeat;
}

.gallery-title {
    margin: 0 0 22px;

    color: var(--white);

    font-family: var(--font-header);
    font-size: clamp(52px, 8vw, 104px);
    font-weight: 500;
    line-height: 0.92;
    letter-spacing: 0.02em;
    text-transform: none;
}

.gallery-lead {
    max-width: 560px;
    margin: 0 auto 36px;

    font-size: 17px;
    line-height: 1.7;
    text-align: center;
    color: rgba(255, 255, 255, 0.8);
}

.gallery-share {
    margin: 0;
    text-align: center;
}

/* На сцене главная кнопка — золотая, как у бесплатной книги */

.gallery-hero .g-button {
    min-height: 52px;

    background: var(--gl-gold);
    border-color: var(--gl-gold);
    color: var(--gl-ink);
}

.gallery-hero .g-button:hover:not(:disabled) {
    background: var(--white);
    border-color: var(--white);
    color: var(--gl-ink);

    box-shadow: 0 18px 34px -18px rgba(0, 0, 0, 0.6);
}

.gallery-empty {
    max-width: 460px;
    margin: 0 auto;
    padding: 56px 24px;

    border: 1px solid var(--gl-gold-soft);

    font-family: var(--font-header);
    font-size: 24px;
    font-style: italic;
    line-height: 1.4;
    text-align: center;
    color: var(--gl-ink);
}

/* Колонки: рисунки разной пропорции ложатся без пустот */

.gallery-grid {
    margin: 0 auto;
    padding: 0;
    max-width: 1100px;
    list-style: none;

    column-width: 240px;
    column-gap: 22px;
}

.g-item {
    margin: 0 0 22px;
    break-inside: avoid;

    background: var(--white);
    border: 1px solid var(--gl-line);
    border-radius: 0;

    transition:
        transform 0.35s var(--gl-ease),
        box-shadow 0.35s ease,
        border-color 0.35s ease;
}

@media (hover: hover) {
    .g-item:hover {
        transform: translateY(-4px);

        border-color: var(--butterfly-border);

        box-shadow: 0 30px 50px -34px rgba(16, 48, 74, 0.55);
    }
}

.g-open {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: var(--bg-secondary);
    cursor: zoom-in;
    overflow: hidden;
}

.g-open:focus-visible {
    outline: 2px solid var(--gl-gold);
    outline-offset: 2px;
}

.g-open img {
    display: block;
    width: 100%;
    height: auto;

    transition: transform 1.1s var(--gl-ease);
}

@media (hover: hover) {
    .g-item:hover .g-open img {
        transform: scale(1.04);
    }
}

.g-author {
    position: relative;

    margin: 0;
    padding: 14px 16px 16px;

    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--gl-gold-text);
}

.gallery-pages {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 36px;
}

.gallery-legal {
    padding-bottom: 28px;
}

/* Окно с большой работой */

.g-lightbox {
    /* Общий сброс полей убирает auto у dialog: возвращаем центр */
    position: fixed;
    inset: 0;
    margin: auto;
    width: fit-content;
    height: fit-content;

    max-width: 96vw;
    max-height: 96vh;
    padding: 0;
    border: 0;
    background: transparent;
    overflow: visible;
}

.g-lightbox::backdrop {
    background:
        radial-gradient(60% 60% at 50% 40%, rgba(56, 183, 215, 0.16), transparent 70%),
        rgba(8, 21, 32, 0.92);
}

.g-lightbox img {
    display: block;
    max-width: 94vw;
    max-height: 88vh;
    margin: 0 auto;
    background: var(--white);

    box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.7);
}

.g-lightbox-close {
    position: absolute;
    top: -48px;
    right: 0;
    width: 40px;
    height: 40px;

    border: 1px solid rgba(255, 255, 255, 0.3);
    background: transparent;
    color: var(--white);
    font-size: 26px;
    line-height: 1;
    cursor: pointer;

    transition: border-color 0.2s ease, color 0.2s ease;
}

.g-lightbox-close:hover {
    border-color: var(--gl-gold);
    color: var(--gl-gold);
}


/* ========================================
   «МОИ РАБОТЫ»
======================================== */

/* Шапка страницы — та же тёмная сцена, что приветствие кабинета */

.gallery-mine-body .account-main {
    overflow-x: clip;
}

.gallery-mine-body .welcome {
    position: relative;
    isolation: isolate;

    margin: 0 calc(50% - 50vw);
    padding: 72px calc(50vw - 50%) 56px;

    overflow: hidden;

    background: var(--gl-ink);
    color: var(--white);
}

.gallery-mine-body .welcome::before {
    content: "";

    position: absolute;
    inset: 0;
    z-index: -1;

    background:
        radial-gradient(55% 90% at 78% 30%, rgba(56, 183, 215, 0.22), transparent 70%),
        linear-gradient(90deg, rgba(8, 21, 32, 0.92) 0%, rgba(8, 21, 32, 0.55) 55%, rgba(8, 21, 32, 0.25) 100%),
        url("/static/images/bg-gallery.webp") right bottom / cover no-repeat;
}

.gallery-mine-body .welcome h1 {
    margin: 0;

    color: var(--white);

    font-size: clamp(44px, 6vw, 80px);
    font-weight: 500;
    line-height: 0.95;
    letter-spacing: 0.01em;
    text-transform: none;
}

.gallery-mine-body .welcome p {
    max-width: 640px;
    margin-top: 22px;
    padding-top: 22px;

    border-top: 1px solid rgba(255, 255, 255, 0.14);

    color: rgba(255, 255, 255, 0.78);

    font-size: 16px;
    line-height: 1.7;
}

.gallery-mine-body .welcome p a {
    color: var(--gl-gold);
    text-decoration: underline;
    text-decoration-color: var(--gl-gold-soft);
    text-underline-offset: 5px;

    transition: text-decoration-color 0.2s ease, color 0.2s ease;
}

.gallery-mine-body .welcome p a:hover {
    color: var(--white);
    text-decoration-color: var(--white);
}

/* Назад в кабинет — круглая кнопка со стрелкой, как на странице урока */
.g-back {
    display: grid;
    place-items: center;

    width: 40px;
    height: 40px;
    margin-bottom: 26px;

    border: 1px solid rgba(216, 180, 106, 0.55);
    border-radius: 50%;

    color: #d8b46a;
    text-decoration: none;

    transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease, transform 0.25s ease;
}

@media (hover: hover) {
    .g-back:hover {
        color: #0b1d2b;
        background: #d8b46a;
        border-color: #d8b46a;
        transform: translateX(-3px);
    }
}

.g-back:focus-visible {
    outline: 2px solid #d8b46a;
    outline-offset: 3px;
}

.gm-upload {
    padding: 56px 0 8px;
}

.gm-form {
    position: relative;

    max-width: 680px;
    padding: 34px 34px 30px;

    background: var(--white);
    border: 1px solid var(--gl-line);
    border-radius: 0;
}

.gm-form::before {
    content: "";

    position: absolute;
    left: 34px;
    top: -1px;

    width: 56px;
    height: 1px;

    background: var(--gl-gold);
}

.gm-heading {
    margin: 0 0 20px;

    color: var(--gl-ink);

    font-family: var(--font-header);
    font-size: clamp(28px, 3vw, 36px);
    font-weight: 500;
    letter-spacing: 0.01em;
    text-transform: none;
}

.gm-file input {
    width: 100%;
    padding: 18px;

    background: var(--bg-secondary);
    border: 1px dashed var(--gl-gold-soft);

    font-size: 14px;
    color: var(--text-muted);
}

.gm-hint,
.gm-data {
    margin: 12px 0 0;
    font-size: 13px;
    line-height: 1.6;
    color: var(--text-muted);
}

.gm-consent {
    margin: 22px 0 0;
    padding-top: 20px;

    border-top: 1px solid var(--gl-line);
}

.gm-check {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 0 0 14px;

    font-size: 14px;
    line-height: 1.6;
    cursor: pointer;
}

.gm-check strong {
    color: var(--gl-ink);
}

.gm-check input {
    flex: none;
    width: 18px;
    height: 18px;
    margin: 3px 0 0;
    accent-color: var(--butterfly-strong);
}

.gm-check--sub {
    margin-left: 30px;
}

.gm-check.is-off {
    opacity: 0.5;
    cursor: default;
}

.gm-check--small {
    font-size: 13px;
}

.gm-link {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: var(--butterfly-deep);
    text-decoration: underline;
    text-decoration-color: var(--gl-gold-soft);
    text-underline-offset: 4px;
    cursor: pointer;
}

.gm-link:hover {
    text-decoration-color: var(--gl-gold);
}

.gm-form .g-button {
    margin-top: 18px;
}

.gm-status {
    min-height: 1.4em;
    margin: 12px 0 0;
    font-size: 14px;
}

.gm-status.is-ok { color: var(--butterfly-deep); }
.gm-status.is-error { color: #9a3a3a; }

.gm-note {
    max-width: 680px;
    padding: 28px 30px;

    border: 1px solid var(--gl-gold-soft);

    font-family: var(--font-header);
    font-size: 21px;
    font-style: italic;
    line-height: 1.45;
    color: var(--gl-ink);
}

.gm-list {
    padding: 40px 0 88px;
}

.gm-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 22px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.gm-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 12px 12px 16px;

    background: var(--white);
    border: 1px solid var(--gl-line);
    border-radius: 0;

    transition:
        transform 0.35s var(--gl-ease),
        box-shadow 0.35s ease,
        border-color 0.35s ease;
}

@media (hover: hover) {
    .gm-card:hover {
        transform: translateY(-4px);

        border-color: var(--butterfly-border);

        box-shadow: 0 30px 50px -34px rgba(16, 48, 74, 0.55);
    }
}

.gm-pic {
    display: block;
    overflow: hidden;
    background: var(--bg-secondary);
}

.gm-pic img {
    display: block;
    width: 100%;
    height: auto;

    transition: transform 1.1s var(--gl-ease);
}

@media (hover: hover) {
    .gm-card:hover .gm-pic img {
        transform: scale(1.04);
    }
}

.gm-state { margin: 0; }

.gm-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 10px;

    background: var(--bg-secondary);
    border: 1px solid var(--gl-line);
    border-radius: 0;

    font-size: 10px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--text-muted);
}

.gm-badge--public {
    background: var(--gl-ink);
    border-color: var(--gl-gold-soft);
    color: var(--gl-gold);
}

.gm-badge--hidden {
    background: rgba(154, 58, 58, 0.08);
    border-color: rgba(154, 58, 58, 0.3);
    color: #9a3a3a;
}

.gm-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.gm-actions .g-button {
    flex: 1 1 auto;
    min-height: 40px;
    padding: 0 14px;
    font-size: 10.5px;
    letter-spacing: 1.8px;
}

/* display у кнопок и блоков перебивает атрибут hidden */
.gm-publish[hidden],
.gm-card .g-button[hidden] { display: none; }


/* ========================================
   ТЕЛЕФОН
======================================== */

@media (max-width: 640px) {

    .gallery-page { padding: 0 0 64px; }

    .gallery-hero {
        margin-bottom: 40px;
        padding-top: 72px;
        padding-bottom: 60px;
    }

    .gallery-lead { font-size: 15px; }

    .gallery-grid { column-width: 150px; column-gap: 12px; }

    .g-item { margin-bottom: 12px; }

    .g-author { padding: 10px 12px 12px; font-size: 9.5px; letter-spacing: 1.4px; }

    .gallery-mine-body .welcome {
        padding-top: 52px;
        padding-bottom: 40px;
    }

    .gallery-mine-body .welcome p { font-size: 15px; }

    /* На узком экране крыло уходит под текст — фон плотнее */

    .gallery-hero::before,
    .gallery-mine-body .welcome::before {
        background:
            radial-gradient(70% 50% at 80% 10%, rgba(56, 183, 215, 0.22), transparent 70%),
            linear-gradient(180deg, rgba(8, 21, 32, 0.74), rgba(8, 21, 32, 0.9)),
            url("/static/images/bg-gallery.webp") right bottom / cover no-repeat;
    }


    .gm-upload { padding-top: 36px; }

    .gm-form { padding: 26px 18px 22px; }

    .gm-form::before { left: 18px; }

    .gm-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }

    .gm-card { padding: 8px 8px 12px; }

    .gm-actions .g-button { flex: 1 1 100%; }

    .gm-file input { font-size: 13px; padding: 14px; }

    .gm-check--sub { margin-left: 0; }
}


/* ----- Кнопка выбора файла ----- */

.gm-file input::file-selector-button {
    margin-right: 14px;
    padding: 12px 18px;

    background: transparent;
    border: 1px solid var(--gl-ink);
    border-radius: 0;
    color: var(--gl-ink);

    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    cursor: pointer;

    transition: background 0.2s ease, color 0.2s ease;
}

.gm-file input::file-selector-button:hover {
    background: var(--gl-ink);
    color: var(--white);
}


/* ----- Движение ----- */

@media (prefers-reduced-motion: no-preference) {

    @keyframes gl-rise {
        from { opacity: 0; transform: translateY(26px); }
    }

    .gallery-hero > *,
    .gallery-mine-body .welcome > * {
        animation: gl-rise 0.9s var(--gl-ease) backwards;
    }

    .gallery-hero > :nth-child(2),
    .gallery-mine-body .welcome > :nth-child(2) { animation-delay: 0.08s; }

    .gallery-hero > :nth-child(3),
    .gallery-mine-body .welcome > :nth-child(3) { animation-delay: 0.16s; }
}

@media (prefers-reduced-motion: reduce) {

    .g-button,
    .g-item,
    .g-open img,
    .gm-card,
    .gm-pic img {
        transition: none;
    }

    .g-button:hover:not(:disabled),
    .g-item:hover,
    .gm-card:hover { transform: none; }

    .g-item:hover .g-open img,
    .gm-card:hover .gm-pic img { transform: none; }
}