/* Лайтбокс галереи: <dialog> на весь экран, кадр в естественной пропорции.
   Разметка — views/partials/projects/lightbox.ejs, поведение — public/js/project-gallery.js.
   Файл самодостаточный: живёт и на страницах «Проекты»/«Объект» (test-projects.css),
   и на боевых страницах изделий (блок «Лучшее»), где переменных .pj-body нет —
   поэтому цвета здесь буквами, а кнопка и ссылка описаны заново в области .pj-dialog. */

/* ---------- Сбросы и фокус — только внутри диалога ---------- */
.pj-dialog [hidden] { display: none !important; }
:where(.pj-dialog) button { font: inherit; color: inherit; cursor: pointer; }
.pj-dialog :is(button, a):focus-visible { outline: 2px solid #60a5fa; outline-offset: 2px; border-radius: 4px; }

/* ---------- Диалог ---------- */
.pj-dialog { width: 100vw; max-width: none; height: 100dvh; max-height: none; margin: 0; padding: 0; border: 0; overscroll-behavior: contain; background: #020617; color: #fff; overflow: hidden; font-family: 'Inter', system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
.pj-dialog::backdrop { background: rgba(2, 6, 23, .7); }
.pj-dialog { opacity: 1; transition: opacity .3s ease, display .3s allow-discrete, overlay .3s allow-discrete; }
@starting-style { .pj-dialog[open] { opacity: 0; } }
.pj-dialog-shell { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; height: 100dvh; }
.pj-dialog-top, .pj-dialog-bottom { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem clamp(16px, 3vw, 40px); }
.pj-dialog-top { font-size: 13px; color: #94a3b8; font-variant-numeric: tabular-nums; }
.pj-dialog-top__nav { display: flex; gap: .5rem; }
/* на десктопе листаем стрелками по бокам кадра; вес селектора выше .pj-dialog .pj-icon-btn ниже,
   иначе в панели остаётся вторая пара стрелок и на экране их четыре */
.pj-dialog .pj-dialog-top__nav [data-prev], .pj-dialog .pj-dialog-top__nav [data-next] { display: none; }
@media (max-width: 767px) { .pj-dialog .pj-dialog-top__nav [data-prev], .pj-dialog .pj-dialog-top__nav [data-next] { display: inline-grid; } }
.pj-dialog-top b { color: #fff; font-weight: 700; }
.pj-dialog .pj-icon-btn { width: 44px; height: 44px; display: inline-grid; place-items: center; border: 1px solid rgba(255, 255, 255, .12); border-radius: 999px; background: rgba(255, 255, 255, .06); color: #fff; transition: border-color .25s ease, background-color .25s ease; }
.pj-dialog .pj-icon-btn:hover { border-color: rgba(96, 165, 250, .6); background: rgba(59, 130, 246, .18); }
.pj-stage { position: relative; min-height: 0; overflow: hidden; }
.pj-stage img { position: absolute; inset: 0 clamp(16px, 6vw, 96px); margin: auto; max-width: calc(100% - 2 * clamp(16px, 6vw, 96px)); max-height: 100%; width: auto; height: auto; object-fit: contain; border-radius: .5rem; touch-action: pan-y pinch-zoom; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
/* кадр открывается на весь экран, даже если он меньше экрана (решение владельца 28.09.2026:
   обработанный кадр банка 1376 px, монитор шире). Пропорции — из --pj-ratio, его ставит скрипт;
   высота выходит из атрибутов width/height. На телефоне кадр и так шире экрана — не трогаем. */
@media (min-width: 768px) {
  .pj-stage { container-type: size; }
  .pj-stage img { width: min(100cqw - 2 * clamp(16px, 6vw, 96px), 100cqh * var(--pj-ratio, 1.5)); }
}
.pj-stage__nav { position: absolute; top: 50%; transform: translateY(-50%); }
.pj-stage__nav--prev { left: clamp(8px, 1.5vw, 24px); }
.pj-stage__nav--next { right: clamp(8px, 1.5vw, 24px); }
#pj-image-error { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 1rem 1.25rem; border: 1px solid rgba(255, 255, 255, .12); border-radius: .75rem; font-size: .9375rem; }
.pj-dialog-bottom { border-top: 1px solid rgba(255, 255, 255, .10); }
.pj-dialog-cap { min-width: 0; display: grid; gap: 2px; }
.pj-dialog-cap b { font-weight: 700; font-size: .9375rem; }
.pj-dialog-cap span { font-size: 13px; color: #94a3b8; }
.pj-dialog-actions { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; justify-content: flex-end; }

/* ---------- Кнопка и ссылка внутри диалога (копия примитивов боевого) ---------- */
.pj-dialog .pj-btn { display: inline-flex; align-items: center; justify-content: center; gap: .75rem; min-height: 48px; padding: .75rem 1.5rem; border-radius: .5rem; font-weight: 700; font-size: .9375rem; line-height: 1.2; border: 2px solid transparent; transition: transform .3s cubic-bezier(.22, 1, .36, 1), box-shadow .3s cubic-bezier(.22, 1, .36, 1), background-color .3s ease, color .3s ease, border-color .3s ease; }
.pj-dialog .pj-btn i { font-size: .9em; }
.pj-dialog .pj-btn--primary { background: linear-gradient(90deg, #2563eb, #1d4ed8); color: #fff; box-shadow: 0 10px 15px -3px rgba(30, 58, 138, .3), 0 4px 6px -4px rgba(30, 58, 138, .3); }
.pj-dialog .pj-btn--primary:hover { transform: scale(1.02); box-shadow: 0 20px 25px -5px rgba(30, 58, 138, .4), 0 8px 10px -6px rgba(30, 58, 138, .4); }
.pj-dialog .pj-btn:active { transform: scale(.97); }
.pj-dialog .pj-link { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; border: 0; background: none; padding: 0; color: #fff; font-size: .9375rem; font-weight: 700; text-decoration: none; }
.pj-dialog .pj-link i { font-size: .85em; transition: transform .3s cubic-bezier(.22, 1, .36, 1); }
.pj-dialog .pj-link:hover { color: #93c5fd; text-decoration: underline; text-underline-offset: 5px; }
.pj-dialog .pj-link:hover i { transform: translateX(4px); }

/* защита от «сохранить как»: контекстное меню и перетаскивание гасит скрипт, тут — курсор/выделение */
.pj-dialog img { -webkit-user-drag: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }

/* ---------- Контекст объекта над формой боевого (вставляет скрипт) ---------- */
.pj-context { display: flex; align-items: center; gap: .75rem; border: 1px solid rgba(96, 165, 250, .35); background: rgba(59, 130, 246, .10); padding: 10px 12px; margin-bottom: .75rem; border-radius: .75rem; font-size: 13px; color: rgba(191, 219, 254, .9); }
.pj-context b { color: #fff; font-weight: 600; }
.pj-context button { margin-left: auto; border: 0; background: none; width: 40px; height: 40px; font-size: 1.25rem; line-height: 1; color: rgba(191, 219, 254, .8); border-radius: 999px; }
.pj-context button:hover { color: #fff; background: rgba(255, 255, 255, .08); }
.pj-context[hidden] { display: none; } /* вне .pj-page общий сброс [hidden] не действует, а display:flex его перебивает */

/* ---------- Планшет: подпись и кнопки в столбик ---------- */
@media (max-width: 1000px) {
  .pj-dialog-bottom { flex-direction: column; align-items: flex-start; }
  .pj-dialog-actions { justify-content: flex-start; }
}

/* ---------- Телефон ---------- */
@media (max-width: 767px) {
  /* панель с счётчиком и кнопками прижата к верху, а кадр + подпись + кнопка собраны
     в одну группу по центру оставшейся высоты; иначе альбомный кадр висел посреди пустого экрана */
  .pj-dialog-shell { position: relative; grid-template-rows: auto auto; align-content: center; padding-top: 76px; row-gap: .25rem; }
  .pj-dialog-top { position: absolute; top: 0; left: 0; right: 0; }
  .pj-stage { display: flex; justify-content: center; align-items: center; overflow: visible; }
  .pj-stage img { position: static; inset: auto; margin: 0; max-width: calc(100% - 1.5rem); max-height: min(68dvh, 100%); } /* нижняя панель ужалась до 137px — кадру отдаём освободившуюся высоту */
  #pj-image-error { position: static; transform: none; }
  .pj-dialog .pj-stage__nav { display: none; } /* на тач-экране листаем свайпом и стрелками в верхней панели */
  .pj-dialog-bottom { gap: .75rem; padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); }
  /* кнопка и ссылка в один ряд: в столбик нижняя панель занимала 193px из 659 и портретному кадру
     оставалось 44% ширины экрана */
  .pj-dialog-actions { width: 100%; display: flex; flex-wrap: nowrap; align-items: center; gap: .75rem; }
  .pj-dialog-actions .pj-link { order: 2; flex: 0 0 auto; }
  .pj-dialog .pj-btn { flex: 1 1 auto; min-width: 0; padding-inline: 1rem; white-space: nowrap; } /* поля уже: иначе кнопка со ссылкой не встают в один ряд на 393px */
}
@media (prefers-reduced-motion: reduce) {
  .pj-dialog, .pj-dialog * { animation: none !important; transition: none !important; }
}

/* ---- Меню «Поделиться» (компьютер). popover в верхнем слое: над страницей и над открытым просмотром.
   Место у кнопки ставит project-gallery.js (top/left); цвета — светлая карточка сайта (slate). */
.pj-share { position: fixed; inset: auto; margin: 0; width: 248px; padding: .5rem; border: 1px solid #e2e8f0; border-radius: .75rem; background: #fff; color: #0f172a; box-shadow: 0 20px 25px -5px rgba(15, 23, 42, .18), 0 8px 10px -6px rgba(15, 23, 42, .12); font-family: 'Inter', system-ui, sans-serif; }
.pj-share__title { margin: .25rem .5rem .5rem; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #64748b; }
.pj-share__list { display: grid; gap: 2px; }
.pj-share__item { display: flex; align-items: center; gap: .75rem; width: 100%; min-height: 44px; padding: 0 .75rem; border: 0; border-radius: .5rem; background: none; color: inherit; font: inherit; font-size: .9375rem; font-weight: 600; text-align: left; text-decoration: none; cursor: pointer; transition: background-color .2s ease, color .2s ease; }
.pj-share__item:hover, .pj-share__item:focus-visible { background: #f1f5f9; color: #2563eb; }
.pj-share__item:focus-visible { outline: 2px solid #2563eb; outline-offset: -2px; }
.pj-share__item svg, .pj-share__item i { flex: 0 0 18px; width: 18px; font-size: 16px; text-align: center; color: #64748b; }
.pj-share__item:hover svg, .pj-share__item:hover i { color: inherit; }
.pj-share__done { margin: 0; padding: 0 .75rem; font-size: 13px; color: #15803d; }
.pj-share__done:not(:empty) { padding-block: .5rem .25rem; }