/* Просмотр фотографий фигуры комплекта. Разметку окна строит figure_viewer.js,
   кнопку фигуры дают шаблоны product.jinja и work_page.jinja. */

/* Фигура в сетке – кнопка, а не картинка: по ней ходят и мышью, и с клавиатуры. */
.fig_open {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: inherit;
    text-align: center;
    cursor: pointer;
}
.fig_open img { display: block; transition: opacity .15s; }
.fig_open:hover img { opacity: .82; }
.fig_open:focus-visible { outline: 2px solid var(--color-dark); outline-offset: 3px; }

/* Пока окно открыто, страница под ним не прокручивается. Свой класс, а не
   общий #blankie: тот принадлежит меню и всплывающим окнам шапки. */
html.fv_lock, html.fv_lock body { overflow: hidden; }

.fv[hidden] { display: none; }
.fv {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    /* сверху – место под крестик, он держится угла окна браузера */
    padding: 56px 24px 24px;
}
/* Затемнение почти сплошное: при более прозрачном фоне подписи страницы
   просвечивали сквозь счётчик и подпись снимка, и читать их было трудно. */
.fv_back { position: absolute; inset: 0; background: rgba(11, 18, 38, .96); }
.fv_box {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    width: 100%;
    max-width: 960px;
}
.fv_stage {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}
.fv_img {
    display: block;
    max-width: 100%;
    /* высота окна минус подпись и поля – снимок виден целиком, без обрезки */
    max-height: calc(100vh - 160px);
    width: auto;
    height: auto;
    border-radius: 8px;
    background: rgba(255, 255, 255, .06);
    user-select: none;
}
.fv_nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 46px;
    height: 46px;
    flex-shrink: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .92);
    color: #0b1226;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
}
.fv_nav:hover { background: #fff; }
.fv_nav[hidden] { display: none; }
.fv_prev { left: 10px; }
.fv_next { right: 10px; }
/* Крестик держится угла окна: у высокого снимка верх карточки уезжает за
   край экрана, и кнопка над ней оказалась бы недосягаема. */
.fv_x {
    position: fixed;
    top: 14px;
    right: 16px;
    width: 42px;
    height: 42px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .22);
    color: #fff;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
}
.fv_x:hover { background: rgba(255, 255, 255, .38); }
.fv_foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px 18px;
    color: #fff;
    font-size: 15px;
    text-align: center;
}
.fv_num { opacity: .72; }
.fv_num[hidden] { display: none; }
.fv_card { color: #fff; text-decoration: underline; }
.fv_card[hidden] { display: none; }

/* Телефон: снимок во всю ширину – боковых полей у него нет, и стрелки намеренно
   лежат поверх снимка по краям: разводить их там некуда. */
@media (max-width: 620px) {
    .fv { padding: 52px 0 14px; }
    .fv_box { gap: 10px; }
    .fv_img { max-height: calc(100vh - 140px); border-radius: 0; }
    .fv_nav { width: 40px; height: 40px; font-size: 22px; }
    .fv_prev { left: 4px; }
    .fv_next { right: 4px; }
    .fv_x { top: 8px; right: 10px; }
    .fv_foot { font-size: 14px; padding: 0 12px; }
}