/* Фотоальбом теплохода: сетка превью (d.photoalboom.php) и просмотр на весь экран (skin/js/boat-gallery.js).
   Контент сайта — 900 px: 4 колонки по 216 px, превью 432x324 (двойная плотность). Классы — bg-*, без «button»
   (RenderButtons() в front.min.js достраивает всё с классом button), шрифт задан явно (стили сайта бьют каждый div). */

.bg-album { margin: 12px 0 22px; }
.bg-grid {
    display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 162px; gap: 12px;
}
.bg-item {
    position: relative; display: block; overflow: hidden; border-radius: 8px;
    background: #dfe8f3; text-decoration: none; outline: none; cursor: zoom-in;
    box-shadow: 0 1px 2px rgba(0, 53, 121, .18), 0 3px 10px rgba(0, 53, 121, .08);
    transition: box-shadow .25s;
}
.bg-item img {
    display: block; width: 100%; height: 100%; object-fit: cover; border: 0;
    transition: transform .45s cubic-bezier(.2, .7, .3, 1);
}
.bg-item:hover { box-shadow: 0 2px 4px rgba(0, 53, 121, .22), 0 8px 22px rgba(0, 53, 121, .20); }
.bg-item:hover img, .bg-item:focus-visible img { transform: scale(1.06); }
.bg-item:focus-visible { box-shadow: 0 0 0 3px #559ced; }
.bg-cap {
    position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 10px 8px;
    font: 12px/1.35 Tahoma, Verdana, Geneva, Arial, Helvetica, sans-serif; color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .45);
    background: linear-gradient(to top, rgba(0, 25, 55, .82), rgba(0, 25, 55, 0));
    opacity: 0; transform: translateY(8px); transition: opacity .25s, transform .25s;
}
.bg-item:hover .bg-cap, .bg-item:focus-visible .bg-cap { opacity: 1; transform: none; }
.bg-album .bg-note { margin: 12px 0 0; font: 11px Tahoma, Verdana, Geneva, Arial, Helvetica, sans-serif; color: #6a7380; }

/* просмотр на весь экран */
html.bg-lb-lock { overflow: hidden; }
.bg-lb {
    position: fixed; left: 0; top: 0; right: 0; bottom: 0; z-index: 10000;
    display: none; flex-direction: column;
    background: rgba(6, 12, 22, .985); color: #fff;
    font: 13px Tahoma, Verdana, Geneva, Arial, Helvetica, sans-serif;
    -webkit-user-select: none; user-select: none;
    touch-action: none;   /* жесты в окне — свои (свайп), страница под ним не двигается и не масштабируется */
}
.bg-lb.is-open { display: flex; animation: bg-lb-in .2s ease-out; }
@keyframes bg-lb-in { from { opacity: 0; } to { opacity: 1; } }
.bg-lb button {
    display: flex; align-items: center; justify-content: center;
    margin: 0; padding: 0; border: 0; background: none; color: #fff; cursor: pointer;
    font-family: Arial, Helvetica, sans-serif; outline: none;
}
.bg-lb button svg { display: block; flex: none; pointer-events: none; }
.bg-lb button:focus-visible { box-shadow: 0 0 0 2px #ffc563; }
.bg-lb-top { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px 0 20px; flex: 0 0 auto; }
.bg-lb-count { color: rgba(255, 255, 255, .75); letter-spacing: .03em; }
.bg-lb-close {
    width: 44px; height: 44px; border-radius: 50%;
    transition: background .2s;
}
.bg-lb-close svg { width: 24px; height: 24px; }
.bg-lb-close:hover { background: rgba(255, 255, 255, .14); }
.bg-lb-stage {
    position: relative; flex: 1 1 auto; min-height: 0;
    display: flex; align-items: center; justify-content: center; padding: 6px 84px 0;
}
.bg-lb-fig { margin: 0; display: flex; flex-direction: column; align-items: center; max-width: 100%; max-height: 100%; }
.bg-lb-img {
    display: block; max-width: 100%; max-height: calc(var(--bg-lb-h, 100vh) - 200px); width: auto; height: auto;   /* --bg-lb-h — высота окна (boat-gallery.js) */
    border-radius: 4px; box-shadow: 0 12px 48px rgba(0, 0, 0, .55);
    opacity: 0; transition: opacity .25s;
}
.bg-lb-img.is-shown { opacity: 1; }
.bg-lb-cap {
    margin: 12px 0 0; max-width: 820px; min-height: 18px; text-align: center;
    font: 14px/1.4 Tahoma, Verdana, Geneva, Arial, Helvetica, sans-serif; color: rgba(255, 255, 255, .92);
}
.bg-lb-prev, .bg-lb-next {
    position: absolute; top: 50%; width: 56px; height: 56px; margin-top: -28px; border-radius: 50%;
    background: rgba(255, 255, 255, .12) !important;
    transition: background .2s;
}
.bg-lb-prev svg, .bg-lb-next svg { width: 28px; height: 28px; }
.bg-lb-prev { left: 16px; }
.bg-lb-next { right: 16px; }
.bg-lb-prev:hover, .bg-lb-next:hover { background: rgba(255, 255, 255, .26) !important; }
.bg-lb-spin {
    position: absolute; left: 50%; top: 50%; width: 38px; height: 38px; margin: -19px 0 0 -19px;
    border: 3px solid rgba(255, 255, 255, .2); border-top-color: #fff; border-radius: 50%;
    animation: bg-lb-spin .8s linear infinite; display: none;
}
.bg-lb.is-loading .bg-lb-spin { display: block; }
@keyframes bg-lb-spin { to { transform: rotate(360deg); } }
.bg-lb-strip {
    flex: 0 0 auto; display: flex; gap: 6px; padding: 12px 16px 16px; overflow-x: auto; scrollbar-width: thin;
}
.bg-lb-strip::before, .bg-lb-strip::after { content: ""; margin: auto; }   /* по центру, пока лента помещается */
.bg-lb-th {
    flex: 0 0 auto; width: 76px; height: 57px; border-radius: 5px; overflow: hidden;
    border: 2px solid transparent !important; opacity: .5; transition: opacity .2s, border-color .2s;
}
.bg-lb-th img { display: block; width: 100%; height: 100%; object-fit: cover; border: 0; }
.bg-lb-th:hover { opacity: .85; }
.bg-lb-th.is-current { opacity: 1; border-color: #ffc563 !important; }
.bg-lb.is-single .bg-lb-prev, .bg-lb.is-single .bg-lb-next, .bg-lb.is-single .bg-lb-strip { display: none; }

/* телефон: поля меньше, стрелки поверх фото */
@media (max-width: 600px) {
    .bg-lb-stage { padding: 4px 6px 0; }
    .bg-lb-prev, .bg-lb-next {
        width: 42px; height: 42px; margin-top: -21px;
        background: rgba(0, 0, 0, .38) !important;
        box-shadow: 0 0 0 1px rgba(255, 255, 255, .3);   /* видно и на тёмном фото */
    }
    .bg-lb-prev svg, .bg-lb-next svg { width: 22px; height: 22px; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .6)); }
    .bg-lb-prev { left: 8px; }
    .bg-lb-next { right: 8px; }
    .bg-lb-img { max-height: calc(var(--bg-lb-h, 100vh) - 170px); border-radius: 2px; }
    .bg-lb-cap { font-size: 13px; padding: 0 8px; }
    .bg-lb-th { width: 60px; height: 45px; }
}

@media print {
    .bg-lb { display: none !important; }
    .bg-cap { display: none; }
}