/*
 * Кирпич · всплывающее окно записи.
 *
 * Запись поверх списка, вместо перехода на её страницу. В каталоге
 * смотрят товар за товаром, и окно оставляет список на месте: закрыть
 * его дешевле, чем возвращаться назад.
 *
 *     dialog.popup
 *         button.popup__close
 *         div.popup__body      ← содержимое страницы записи
 *
 * Тег dialog, а не div поверх страницы: он сам уводит фокус внутрь,
 * закрывается по Esc и не даёт нажимать то, что под ним. Своими руками
 * это повторяется десятком правил, и каждое можно забыть.
 *
 * Содержимое приносит поведение со страницы самой записи, поэтому
 * здесь описана только рамка. Внутренности выглядят так же, как на
 * странице: это она и есть.
 */
.popup {
    /* Место под окном держит сам dialog, поэтому размеры задаются ему,
       а не обёртке: лишний слой ничего бы не добавил.

       Шире страницы: внутри две колонки, и в ширину строки чтения они
       обе не помещаются. */
    width: min(1100px, calc(100vw - var(--site-gutter) * 2));
    max-width: none;
    /* Высота фиксирована относительно viewport: пустой каркас и готовая
       запись занимают один размер. Текст меняет только внутренний scroll,
       но никогда не геометрию самого окна. */
    height: min(680px, calc(100vh - var(--site-gutter) * 4));
    max-height: calc(100vh - var(--site-gutter) * 4);
    padding: 0;
    border: none;
    border-radius: var(--image-radius);
    corner-shape: var(--corner-shape);
    background: var(--color-page);
    color: var(--color-text);
    overflow: hidden;
}

.popup::backdrop {
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

/* Как у окна авторизации Gamester: окно приходит снизу на 100px и
   одновременно проявляется. Настройка ставит data-transition; без неё
   native dialog открывается сразу. */
.popup[data-transition="gamester"][open] {
    animation: popup-gamester-in 0.8s ease-in-out;
}

.popup[data-transition="gamester"]::backdrop {
    background: rgba(50, 50, 50, 0.6);
    backdrop-filter: saturate(100%) blur(20px);
    -webkit-backdrop-filter: saturate(100%) blur(20px);
    animation: popup-gamester-backdrop-in 0.2s ease-in-out;
}

@keyframes popup-gamester-in {
    from {
        opacity: 0;
        transform: translateY(100px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes popup-gamester-backdrop-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Во время shared-element перехода копия изображения выходит за рамку
   dialog к исходной плитке. В обычном состоянии окно снова обрезает всё
   своим радиусом. */
.popup__transition-layer {
    position: fixed;
    inset: 0;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    pointer-events: none;
    overflow: visible;
}

.popup__flying-image {
    position: fixed;
    z-index: 2;
    display: block;
    max-width: none;
    object-fit: fill;
    pointer-events: none;
    background: var(--color-page);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.14);
    will-change: left, top, width, height, border-radius;
}

@media (prefers-reduced-motion: reduce) {
    .popup[data-transition="gamester"][open],
    .popup[data-transition="gamester"]::backdrop {
        animation: none;
    }

    .popup__flying-image {
        display: none;
    }
}

/*
 * Прокрутка внутри окна, а не у страницы: страница под окном стоит на
 * месте, и список остаётся там, где его оставили.
 */
.popup__body {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    max-height: 100%;
    padding: 50px;
    overflow-y: auto;
    overscroll-behavior: contain;
}

/*
 * Первый заголовок без верхнего отступа: его роль здесь играет поле
 * окна, и двойной просвет отрывает название от края.
 */
.popup__body > :first-child {
    margin-top: 0;
}

/*
 * Две колонки: картинки слева, текст справа.
 *
 * Раскладка окна, а не страницы. На странице товар читают сверху вниз,
 * и там картинки идут первыми во всю ширину. В окне ширина есть, а
 * высоты нет: экран поделён пополам рамкой, и колонкой текст виден
 * сразу, без прокрутки мимо снимка.
 *
 * Разметка та же, что у страницы: скрипт заворачивает галерею и остаток
 * в две обёртки, больше ничего не трогая. Поэтому здесь только грид.
 */
.popup__grid {
    display: grid;
    /* Картинке ровно половина: снимок товара на белом фоне и так почти
       квадратный, а текст в правой колонке набирается строкой, которую
       можно читать. */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
    gap: var(--title-space);
}

/* Каркас карточки показывается, пока fetch приносит страницу записи.
   Его размеры повторяют настоящую галерею и текстовую колонку, поэтому
   dialog не меняет высоту после загрузки. */
.popup__skeleton {
    min-height: 100%;
}

.popup__skeleton i,
.popup__skeleton-image {
    display: block;
    position: relative;
    overflow: hidden;
    background: var(--menu-back);
}

.popup__skeleton i::after,
.popup__skeleton-image::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, 0.12) 50%, transparent 80%);
    transform: translateX(-100%);
    animation: popup-skeleton-shimmer 1.2s ease-in-out infinite;
}

.popup__skeleton-image {
    width: 100%;
    aspect-ratio: 4 / 3;
    border-radius: var(--image-radius);
}

.popup__skeleton-thumbs {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: var(--icon-space);
    margin-top: var(--icon-space);
}

.popup__skeleton-thumbs i {
    aspect-ratio: 1;
    border-radius: var(--image-radius);
}

.popup__skeleton-title {
    width: 76%;
    height: calc(var(--title-size) * 1.2);
    margin-bottom: var(--title-space);
    border-radius: 100px;
}

.popup__skeleton-line {
    width: 100%;
    height: var(--line);
    margin-bottom: var(--step);
    border-radius: 100px;
}

.popup__skeleton-line--short { width: 42%; }
.popup__skeleton-line--medium { width: 68%; }

@keyframes popup-skeleton-shimmer {
    to { transform: translateX(100%); }
}

@media (prefers-reduced-motion: reduce) {
    .popup__skeleton i::after,
    .popup__skeleton-image::after {
        animation: none;
    }
}

/* Левая колонка липнет к верху: описание бывает длинным, и снимок
   уезжал бы из виду вместе с ним. */
.popup__media {
    position: sticky;
    top: 0;
}

/*
 * Галерея в окне: крупный снимок и полоса остальных под ним.
 *
 * Сеткой, как на странице, здесь нельзя: в половине ширины четыре
 * снимка встали бы по сотне пикселей, и разглядеть товар стало бы
 * невозможно — а именно за этим окно и открывают.
 *
 * Первая ссылка крупная, остальные полосой: скрипт ничего не
 * переставляет, порядок держат стили.
 */
.popup .gallery {
    display: block;
    margin-block: 0;
}

/*
 * Миниатюры: пять квадратов в один ряд под крупным снимком.
 *
 * Шестая и следующие продолжают полосу вправо: горизонтальный scroll
 * сохраняет высоту окна и не уменьшает сами превью.
 */
.popup__thumbs {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - var(--icon-space) * 4) / 5);
    gap: var(--icon-space);
    margin-top: var(--icon-space);
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
}

.popup__thumbs::-webkit-scrollbar { display: none; }

.popup__thumbs a {
    box-sizing: border-box;
    border: var(--hairline) solid var(--separator);
}

.popup__thumbs img {
    aspect-ratio: 1 / 1;
}

/* Крупный снимок: вся ширина колонки, остальные уходят под него. */
.popup .gallery a:first-child {
    box-sizing: border-box;
    border: var(--hairline) solid var(--separator);
}

.popup .gallery a:first-child img {
    aspect-ratio: 4 / 3;
}

/*
 * Строка категорий под заголовком: приглушённая, как подписи в списках.
 * Отвечает на вопрос «что это такое» раньше характеристик.
 */
.entry-category {
    margin: calc(var(--step) * -1 + 4px) 0 var(--step);
    color: var(--color-muted);
    font-size: var(--text);
    line-height: var(--line);
}

/*
 * Заголовок в окне мельче страничного: он стоит в половине ширины, и
 * страничный кегль забирал бы под него четыре строки из шести.
 */
.popup__text > h1 {
    margin-top: 0;
    /* Место под крестик: он висит в углу окна и накрывал бы последнее
       слово заголовка, которое стоит ровно под ним. */
    padding-right: calc(var(--icon-size) + var(--step));
    font-size: var(--title-size);
    line-height: calc(var(--title-size) * 1.2);
}

/*
 * Крестик поверх содержимого, а не строкой над ним: строка заняла бы
 * высоту у самой записи, ради которой окно и открыли.
 */
.popup__close {
    position: absolute;
    top: var(--step);
    right: var(--step);
    z-index: 1;
    width: var(--icon-size);
    height: var(--icon-size);
    padding: 0;
    border: none;
    border-radius: 50%;
    background: var(--menu-back);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    color: var(--color-muted);
    font-family: var(--font);
    font-size: var(--title-size);
    line-height: 1;
    cursor: pointer;
}

.popup__close:hover {
    color: var(--color-title);
}

/*
 * Тесное окно: колонки складываются в одну.
 *
 * Порог считается от окна, а не от экрана: на ноутбуке 1280 окно уже
 * самого экрана, и делить его пополам значит оставить под текст триста
 * пикселей, где «Мощность мотора» и «4500Вт» уже не встают в строку.
 */
@media (max-width: 68rem) {
    .popup__grid {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--gap);
    }

    /* Липкость снимается: в одной колонке он прижимался бы к верху и
       наезжал на текст, который под ним прокручивают. */
    .popup__media {
        position: static;
    }
}

/*
 * Узкий экран: окна нет вовсе.
 *
 * Поведение туда и не заходит, ссылка работает ссылкой. Правило стоит
 * на случай, если окно осталось открытым, а экран повернули: на
 * телефоне оно заняло бы его целиком и от страницы не отличалось бы,
 * а кнопки «назад» у него нет.
 */
@media (max-width: 59.99rem) {
    .popup[open] {
        display: none;
    }
}