/* Start:/local/components/custom/user.photogallery/templates/.default/style.css?177262124512101*/
/* ═══════════════════════════════════════════════════════════
   Фотогалерея с видео — изолированные стили. Namespace: upg-
   ═══════════════════════════════════════════════════════════ */

.upg-wrap { box-sizing: border-box; font-family: inherit; line-height: 1.5; color: inherit; width: 100%; }
.upg-wrap *, .upg-wrap *::before, .upg-wrap *::after { box-sizing: border-box; }

/* ── Включаемая текстовая область ────────────────────── */
.upg-intro-text { margin-bottom: 28px; color: #374151; font-size: 15px; line-height: 1.7; }
.upg-intro-text p { margin: 0 0 12px; }
.upg-intro-text p:last-child { margin-bottom: 0; }
.upg-intro-text h1, .upg-intro-text h2, .upg-intro-text h3 { color: #111827; margin: 0 0 10px; line-height: 1.3; }
.upg-intro-text a { color: #3b82f6; }
.upg-intro-text a:hover { color: #1d4ed8; }

/* ── Сетка альбомов ──────────────────────────────────── */
.upg-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}
@media (max-width: 1100px) { .upg-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 767px)  { .upg-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; } }
@media (max-width: 480px)  { .upg-grid { grid-template-columns: 1fr; } }

/* ── Карточка альбома ────────────────────────────────── */
.upg-card {
    display: flex; flex-direction: column;
    text-decoration: none; color: inherit;
    border-radius: 4px; overflow: hidden;
    background: #f3f4f6;
    transition: box-shadow .22s ease, transform .22s ease;
}
.upg-card:hover { box-shadow: 0 6px 28px rgba(0,0,0,.14); transform: translateY(-2px); text-decoration: none; color: inherit; }

/* Главный превью — квадрат */
.upg-card__thumb {
    position: relative; width: 100%; padding-top: 100%;
    background: #f3f4f6; overflow: hidden;
}
.upg-card__img {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; display: block; transition: transform .3s ease;
}
.upg-card:hover .upg-card__img { transform: scale(1.04); }
.upg-card__no-img {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 42px; color: #9ca3af;
}
/* Значок видео на превью */
.upg-card__video-badge {
    position: absolute; bottom: 8px; right: 8px;
    width: 32px; height: 32px; border-radius: 50%;
    background: rgba(0,0,0,.55);
    display: flex; align-items: center; justify-content: center;
    color: #fff;
}
.upg-card__video-badge svg { width: 16px; height: 16px; margin-left: 2px; }

/* Превью-полоса: 2 фото + 1 видео */
.upg-card__strip {
    display: flex; gap: 2px; height: 56px;
    background: #e5e7eb;
}
.upg-card__strip-item {
    position: relative; flex: 1; overflow: hidden; background: #d1d5db;
}
.upg-card__strip-item img {
    width: 100%; height: 100%; object-fit: cover; display: block;
}
.upg-card__strip-novideo {
    width: 100%; height: 100%; background: #1f2937;
}
.upg-card__strip-play {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    background: rgba(0,0,0,.4);
    color: #fff;
}
.upg-card__strip-play svg { width: 18px; height: 18px; }

/* Подпись */
.upg-card__info { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 3px; }
.upg-card__title { font-weight: 600; font-size: 14px; color: #1f2937; line-height: 1.4; }
.upg-card__count { font-size: 12px; color: #6b7280; }

/* ── Детальная страница ──────────────────────────────── */
.upg-detail__header { margin-bottom: 20px; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.upg-detail__title { margin: 0; padding: 0; border: none; background: none; font-size: 26px; font-weight: 700; color: #111827; line-height: 1.3; }
@media (max-width: 767px) { .upg-detail__title { font-size: 21px; } }
.upg-detail__desc { margin-bottom: 24px; color: #374151; font-size: 15px; line-height: 1.7; }

/* ── Миксованная сетка медиа ─────────────────────────── */
.upg-media-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}
@media (max-width: 1100px) { .upg-media-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 767px)  { .upg-media-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; } }
@media (max-width: 480px)  { .upg-media-grid { grid-template-columns: 1fr; } }

.upg-media-item {
    position: relative; width: 100%; padding-top: 100%;
    overflow: hidden; border-radius: 4px;
    background: #f3f4f6; cursor: pointer; outline: none;
}
.upg-media-item:focus-visible { outline: 3px solid #3b82f6; outline-offset: 2px; }

.upg-media-img {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: contain; display: block;
    transition: transform .25s ease;
}
.upg-media-item:hover .upg-media-img { transform: scale(1.03); }

/* Заглушка для загруженного видеофайла */
.upg-media-video-thumb {
    position: absolute; inset: 0;
    background: #1e293b;
    display: flex; align-items: center; justify-content: center;
    flex-direction: column; gap: 8px;
}
.upg-media-video-thumb--rutube { background: #1a1a2e; }
.upg-media-video-thumb--vk     { background: #07569d; }
.upg-media-video-thumb--youtube { background: #1a1a1a; }
.upg-media-filmicon { width: 40px; height: 40px; color: rgba(255,255,255,.4); }
.upg-media-service  { color: rgba(255,255,255,.7); font-size: 13px; font-weight: 700; letter-spacing: 1px; }

/* Оверлей-плей для видео */
.upg-media-play-overlay {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    background: rgba(0,0,0,.15);
    transition: background .2s;
}
.upg-media-item:hover .upg-media-play-overlay { background: rgba(0,0,0,.3); }
.upg-media-play-btn {
    width: 52px; height: 52px; border-radius: 50%;
    background: rgba(0,0,0,.6); backdrop-filter: blur(2px);
    display: flex; align-items: center; justify-content: center;
    color: #fff; transition: transform .2s, background .2s;
}
.upg-media-item:hover .upg-media-play-btn { transform: scale(1.1); background: rgba(0,0,0,.8); }
.upg-media-play-btn svg { width: 22px; height: 22px; margin-left: 3px; }

/* Оверлей-лупа для фото */
.upg-media-hover-overlay {
    position: absolute; inset: 0;
    background: rgba(0,0,0,0);
    display: flex; align-items: center; justify-content: center;
    transition: background .2s;
}
.upg-media-item:hover .upg-media-hover-overlay { background: rgba(0,0,0,.3); }
.upg-media-zoom {
    width: 36px; height: 36px; color: #fff;
    opacity: 0; transition: opacity .2s;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,.4));
}
.upg-media-item:hover .upg-media-zoom { opacity: 1; }

/* ── Лайтбокс ───────────────────────────────────────── */
.upg-lb {
    display: none; position: fixed; inset: 0;
    z-index: 99999; align-items: center; justify-content: center;
}
.upg-lb--active { display: flex; }
.upg-lb__overlay {
    position: absolute; inset: 0;
    background: rgba(0,0,0,.92);
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.upg-lb__stage {
    position: relative; z-index: 1;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    width: 100%; height: 100%;
    padding: 60px 80px 70px;
}
@media (max-width: 767px) { .upg-lb__stage { padding: 56px 48px 66px; } }
@media (max-width: 480px) { .upg-lb__stage { padding: 52px 14px 62px; } }

.upg-lb__close {
    position: absolute; top: 14px; right: 14px;
    width: 44px; height: 44px; border: none; border-radius: 50%;
    background: rgba(255,255,255,.12); color: #fff; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background .15s; padding: 0;
}
.upg-lb__close:hover { background: rgba(255,255,255,.25); }
.upg-lb__close svg { width: 20px; height: 20px; }

.upg-lb__nav {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 48px; height: 64px; border: none; border-radius: 6px;
    background: rgba(255,255,255,.1); color: #fff; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background .15s; padding: 0;
}
.upg-lb__nav:hover { background: rgba(255,255,255,.22); }
.upg-lb__nav svg   { width: 22px; height: 22px; }
.upg-lb__nav--prev { left: 14px; }
.upg-lb__nav--next { right: 14px; }
@media (max-width: 480px) { .upg-lb__nav--prev { left: 2px; } .upg-lb__nav--next { right: 2px; } }

/* Контентная область лайтбокса */
.upg-lb__content {
    position: relative;
    max-width: 100%; max-height: 100%;
    display: flex; align-items: center; justify-content: center;
    flex: 1; width: 100%;
}
/* Фото */
.upg-lb__img {
    max-width: 100%; max-height: 100%;
    object-fit: contain; border-radius: 4px; display: block;
    box-shadow: 0 8px 40px rgba(0,0,0,.5);
    transition: opacity .2s;
}
/* Загруженное видео */
.upg-lb__video {
    max-width: 100%; max-height: 100%;
    width: 900px; border-radius: 4px; display: block;
    background: #000;
    box-shadow: 0 8px 40px rgba(0,0,0,.5);
}
/* Iframe для YouTube/Rutube/VK */
.upg-lb__iframe {
    width: min(900px, 100%);
    aspect-ratio: 16/9;
    border: none; border-radius: 4px;
    box-shadow: 0 8px 40px rgba(0,0,0,.5);
    background: #000;
}
@supports not (aspect-ratio: 16/9) {
    .upg-lb__iframe { height: 506px; }
}
@media (max-width: 767px) { .upg-lb__iframe { width: 100%; } }

/* Лоадер */
.upg-lb__loader {
    display: none; position: absolute; inset: 0;
    align-items: center; justify-content: center;
}
.upg-lb__loader::after {
    content: ''; display: block; width: 36px; height: 36px;
    border: 3px solid rgba(255,255,255,.2); border-top-color: #fff;
    border-radius: 50%; animation: upg-spin .7s linear infinite;
}
@keyframes upg-spin { to { transform: rotate(360deg); } }

.upg-lb__footer {
    position: absolute; bottom: 14px; left: 0; right: 0;
    display: flex; align-items: center; justify-content: center; gap: 16px; padding: 0 80px;
}
.upg-lb__caption { color: rgba(255,255,255,.8); font-size: 14px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 60vw; }
.upg-lb__counter { color: rgba(255,255,255,.5); font-size: 13px; white-space: nowrap; flex-shrink: 0; }

/* ── Навигация ───────────────────────────────────────── */
.upg-btn-back { display: inline-flex; align-items: center; gap: 5px; color: #3b82f6; text-decoration: none; font-size: 14px; font-weight: 500; padding: 5px 0; }
.upg-btn-back:hover { color: #1d4ed8; text-decoration: underline; }

/* ── Пустые состояния / ошибки ───────────────────────── */
.upg-empty { padding: 56px 24px; text-align: center; color: #6b7280; }
.upg-empty__icon  { font-size: 48px; margin-bottom: 12px; line-height: 1; }
.upg-empty__text  { margin: 0; font-size: 15px; }
.upg-empty .upg-btn-back { margin-top: 16px; display: inline-flex; }
.upg-error { padding: 14px 18px; background: #fef2f2; border: 1px solid #fca5a5; border-radius: 6px; color: #dc2626; font-size: 14px; }

/* End */
/* /local/components/custom/user.photogallery/templates/.default/style.css?177262124512101 */