/* Лента документов анкеты и лайтбокс (21.09.2026) — разметка и поведение в
   js/docs-viewer.js. Общий файл для карточки каталога и страницы анкеты;
   высоту миниатюр задают страницы (card.css / refresh.css). */

.dt-docs { margin: 0; }
.dt-docs__strip {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 10px;
    margin: 0;
    padding: 4px 0 8px;            /* место под тень */
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
}
.dt-docs__strip::-webkit-scrollbar { display: none; }
.dt-docs__item,
.dt-docs__more {
    flex: none;
    display: block;
    height: var(--dt-docs-h, 132px);
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 0;
    border-radius: 12px;
    background: #f3f0e8;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .06), 0 10px 24px -16px rgba(15, 23, 42, .25);
    scroll-snap-align: start;
    cursor: zoom-in;
    transition: transform .18s ease, box-shadow .18s ease;
}
.dt-docs__item:hover { transform: translateY(-2px); box-shadow: 0 1px 2px rgba(15, 23, 42, .06), 0 16px 30px -16px rgba(15, 23, 42, .32); }
.dt-docs__item:focus-visible { outline: none; box-shadow: 0 0 0 4px rgba(20, 20, 19, .22); }
.dt-docs__item img {
    display: block;
    width: auto;
    height: 100%;
    max-width: calc(var(--dt-docs-h, 132px) * 1.6);
    margin: 0;
    object-fit: cover;
    border: 0;
    border-radius: 0;
}
/* «+N» в карточке каталога: остальные документы открываются в лайтбоксе */
.dt-docs__more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: calc(var(--dt-docs-h, 132px) * .72);
    padding: 0 16px;
    background: rgba(20, 20, 19, .06);
    box-shadow: none;
    color: #1d1d1f;
    font: 700 17px/1 var(--dt-font, 'Open Sans', Arial, sans-serif);
    cursor: pointer;
}
.dt-docs__more:hover { background: rgba(20, 20, 19, .10); }

/* ---------- лайтбокс ---------- */

/* страница под окном заморожена позиционированием (top ставит скрипт):
   overflow:hidden на html iOS воспринимал как сброс прокрутки к началу */
html.dt-lb-open body { position: fixed; left: 0; right: 0; width: 100%; overflow: hidden; }
.dt-lb {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    flex-direction: column;
    background: rgba(20, 20, 19, .92);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    font-family: var(--dt-font, 'Open Sans', Arial, sans-serif);
    color: #fff;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
}
.dt-lb[hidden] { display: none; }
.dt-lb * { box-sizing: border-box; }
.dt-lb__bar {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 60px;
    padding: 0 12px 0 20px;
}
.dt-lb__count { font-size: 15px; font-weight: 600; color: rgba(255, 255, 255, .8); font-variant-numeric: tabular-nums; }
.dt-lb__close,
.dt-lb__arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .12);
    color: #fff;
    cursor: pointer;
    transition: background-color .15s ease;
}
.dt-lb__close:hover, .dt-lb__arrow:hover { background: rgba(255, 255, 255, .22); }
.dt-lb__close:focus-visible, .dt-lb__arrow:focus-visible { outline: none; box-shadow: 0 0 0 4px rgba(255, 255, 255, .35); }
.dt-lb__stage {
    position: relative;
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
    padding: 0 72px;
}
.dt-lb__track {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    touch-action: none;
    cursor: grab;
}
.dt-lb__img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    margin: 0;
    border-radius: 6px;
    box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .8);
    background: #fff;
    transition: transform .22s ease, opacity .22s ease;
    will-change: transform;
}
.dt-lb.is-loading .dt-lb__img { filter: saturate(.96); }
.dt-lb__arrow { position: absolute; top: 50%; transform: translateY(-50%); }
.dt-lb__arrow--prev { left: 16px; }
.dt-lb__arrow--next { right: 16px; }
.dt-lb.is-single .dt-lb__arrow,
.dt-lb.is-single .dt-lb__dots { display: none; }
.dt-lb__dots {
    flex: none;
    display: flex;
    justify-content: center;
    gap: 6px;
    height: 34px;
    padding: 10px 0 0;
}
.dt-lb__dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, .35); }
.dt-lb__dots i.is-on { background: #fff; }

@media (max-width: 767px) {
    .dt-lb__stage { padding: 0 8px; }
    .dt-lb__arrow { display: none; }     /* на телефоне листают свайпом */
    .dt-lb__img { border-radius: 4px; }
    .dt-lb__bar { height: 56px; padding: 0 8px 0 16px; }
}