/* Просмотр фото, вариант D (п. 394). */

/* ⚠️ Размер рамки задаётся ТОЛЬКО окном браузера: `vw`/`vh` и ничего
   от картинки. Поэтому стрелки, стоящие снаружи рамки, не двигаются
   при смене фото — ни на пиксель. Прежде рамкой служила сама картинка
   (`max-width:100%` у `<img>`), и вертикальный кадр был вдвое уже
   горизонтального: стрелки прыгали из-под мыши. */
:root{
  --phv-w: min(76vw, 1280px);
  --phv-h: min(72vh, 860px);
}

.phv{position:fixed;inset:0;z-index:70;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:14px;padding:16px;
  background:#000000d9;overscroll-behavior:contain}

/* Счётчик — сверху по центру, крупно (п. 394). */
.phv__count{flex:0 0 auto;font-size:20px;font-weight:600;color:#fff;letter-spacing:.2px}

/* Ряд: стрелка — рамка — стрелка. Стрелки СНАРУЖИ рамки. */
.phv__stage{flex:0 0 auto;display:flex;align-items:center;justify-content:center;gap:16px}

.phv__frame{width:var(--phv-w);height:var(--phv-h);flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;
  /* Фон рамки чуть светлее затемнения — видно её границы. */
  background:#ffffff14;border-radius:12px;overflow:hidden}
/* Фото вписано ЦЕЛИКОМ: обрезать кадр, который пришли рассмотреть, нельзя. */
.phv__frame img{max-width:100%;max-height:100%;width:auto;height:auto;
  object-fit:contain;display:block}

.phv__nav{flex:0 0 auto;width:56px;height:56px;border-radius:50%;border:0;
  background:#ffffff1f;color:#fff;font-size:34px;line-height:1;cursor:pointer;
  display:grid;place-items:center;padding:0}
.phv__nav:hover{background:#ffffff33}
.phv__nav[hidden]{display:none}

/* Полоса превью — под рамкой, прокручивается при большом числе фото. */
.phv__strip{flex:0 0 auto;display:flex;gap:8px;max-width:min(92vw,1400px);
  overflow-x:auto;overflow-y:hidden;padding:4px;scrollbar-width:thin}
.phv__strip[hidden]{display:none}
.phv__thumb{flex:0 0 auto;width:84px;height:60px;padding:0;border-radius:8px;
  border:2px solid transparent;background:#ffffff14;cursor:pointer;overflow:hidden}
.phv__thumb img{width:100%;height:100%;object-fit:cover;display:block}
.phv__thumb.is-current{border-color:#fff}

.phv__bar{flex:0 0 auto;display:flex;align-items:center;gap:10px;min-height:0}
/* Счётчик «всего / лимит поста» — предупреждение, а не справка (п. 82). */
.phv__limit{padding:4px 12px;border-radius:999px;background:#ffffff1f;color:#fff;font-size:13px}
.phv__limit--over{background:var(--bad,#c0392b);color:#fff;font-weight:600}
.phv__del{background:#fff;color:#111}
.phv__undo{display:flex;align-items:center;gap:8px;color:#fff;font-size:13px}
.phv__undo[hidden]{display:none}
.phv__bar:empty{display:none}

.phv__x{position:fixed;top:12px;right:16px;width:44px;height:44px;border:0;
  border-radius:50%;background:#ffffff1f;color:#fff;font-size:26px;cursor:pointer}
.phv__x:hover{background:#ffffff33}

/* ⚠️ Узкий экран (планшет): рамка ужимается, и стрелки ложатся ПОВЕРХ её
   краёв — места по бокам больше нет. Двигаться при смене фото они от
   этого не начинают: позиция считается от рамки, а рамка постоянна. */
@media (max-width: 900px){
  :root{ --phv-w: min(92vw, 900px); --phv-h: min(62vh, 700px); }
  .phv__stage{position:relative;gap:0}
  .phv__nav{position:absolute;top:50%;transform:translateY(-50%);z-index:2;
    width:48px;height:48px;background:#000000a6}
  .phv__nav--prev{left:6px}
  .phv__nav--next{right:6px}
  .phv__thumb{width:68px;height:50px}
  .phv__count{font-size:17px}
}