/* sp-photo.css — серия фото: сцена + миниатюры + фулскрин. Версия 1.4 */
.sp-photo{margin:24px 0}
.sp-photo-inner{border-radius:20px;border:1px solid rgba(94,168,220,.36);
  background:rgba(255,255,255,.72);padding:14px;overflow:hidden}
.sp-photo-stage{border-radius:14px;overflow:hidden;position:relative;background:#20303b}
.sp-photo-stage img{width:100%;display:block;aspect-ratio:3/2;object-fit:cover}
.sp-photo-stage .sp-photo-cap{position:absolute;left:14px;bottom:12px;font-size:12.5px;color:#fff;
  background:rgba(22,34,42,.5);padding:4px 12px;border-radius:999px}
.sp-photo-count{position:absolute;right:14px;top:12px;font-size:12px;color:#fff;
  background:rgba(22,34,42,.5);padding:4px 10px;border-radius:999px;z-index:3}
.sp-photo-next,.sp-photo-prev{position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  width:42px;height:42px;border-radius:50%;border:none;cursor:pointer;color:#fff;
  background:rgba(22,34,42,.35);opacity:0;transition:opacity .25s;
  display:flex;align-items:center;justify-content:center;font-size:0}
.sp-photo-next{right:10px}.sp-photo-prev{left:10px}
.sp-photo:hover .sp-photo-next,.sp-photo:hover .sp-photo-prev{opacity:.9}
.sp-photo-next:before{content:"";width:10px;height:10px;border-top:2px solid #fff;border-right:2px solid #fff;transform:rotate(45deg)}
.sp-photo-prev:before{content:"";width:10px;height:10px;border-top:2px solid #fff;border-left:2px solid #fff;transform:rotate(-45deg)}
.sp-photo-fs{position:absolute;right:14px;top:44px;z-index:3;border:none;cursor:pointer;
  background:rgba(22,34,42,.5);color:#fff;font:600 12px var(--sans);padding:6px 12px;border-radius:999px}

.sp-photo-thumbs{margin-top:12px;position:relative}
/* min-width:0 — иначе флекс-элемент не сжимается ниже картинки и миниатюра раздувается на всю ширину */
.sp-photo .swiper-slide{min-width:0}
.sp-photo-thumbs .swiper-slide{cursor:pointer;border-radius:10px;overflow:hidden;
  border:2px solid transparent;opacity:.6;transition:.2s}
.sp-photo-thumbs .swiper-slide img{width:100%;display:block;aspect-ratio:3/2;object-fit:cover}
.sp-photo-thumbs .swiper-slide-thumb-active{border-color:var(--edge,#4a9fd8);opacity:1}

/* стрелки ленты миниатюр: видны только когда миниатюры не помещаются целиком */
.sp-photo-tnext,.sp-photo-tprev{position:absolute;top:50%;transform:translateY(-50%);z-index:4;
  width:28px;height:28px;border-radius:50%;border:none;cursor:pointer;color:#fff;font-size:0;
  background:rgba(22,34,42,.55);box-shadow:0 1px 4px rgba(16,26,34,.18);
  display:none;align-items:center;justify-content:center;transition:opacity .2s,background .2s}
.sp-photo-tnext{right:4px}.sp-photo-tprev{left:4px}
.sp-photo-tnext:hover,.sp-photo-tprev:hover{background:rgba(22,34,42,.78)}
.sp-photo.sp-thumbs-nav .sp-photo-tnext,.sp-photo.sp-thumbs-nav .sp-photo-tprev{display:flex}
.sp-photo-tnext.swiper-button-disabled,.sp-photo-tprev.swiper-button-disabled{opacity:.3;cursor:default}
.sp-photo-tnext:before{content:"";width:8px;height:8px;border-top:2px solid #fff;border-right:2px solid #fff;
  transform:rotate(45deg);margin-left:-2px}
.sp-photo-tprev:before{content:"";width:8px;height:8px;border-top:2px solid #fff;border-left:2px solid #fff;
  transform:rotate(-45deg);margin-right:-2px}

.sp-photo-lightbox{position:fixed;inset:0;background:#0b0f14;z-index:9999}
.sp-photo-lightbox{display:none}
.sp-photo-lightbox.sp-open{display:flex;align-items:center;justify-content:center}
.sp-photo-lightbox img{max-width:94vw;max-height:88vh;border-radius:10px}
.sp-photo-lightbox .sp-photo-fx{position:absolute;right:20px;top:18px;color:#fff;font-size:18px;cursor:pointer;
  width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,.12);border:none}
.sp-photo-lb-count{display:none}
body.sp-lb-open{overflow:hidden}

/* телефон: просмотрщик на весь экран, фото во всю ширину, счётчик внизу */
@media (max-width:860px){
  .sp-photo-lightbox img{max-width:100vw;max-height:100vh;max-height:100dvh;width:auto;height:auto;border-radius:0}
  .sp-photo-lightbox .sp-photo-fx{right:12px;top:calc(env(safe-area-inset-top,0px) + 10px);
    background:rgba(12,16,20,.55);backdrop-filter:blur(6px)}
  .sp-photo-lb-count{display:block;position:absolute;left:50%;transform:translateX(-50%);
    bottom:calc(env(safe-area-inset-bottom,0px) + 18px);color:#fff;font:600 12px var(--sans);
    letter-spacing:.04em;background:rgba(12,16,20,.6);padding:6px 13px;border-radius:999px;pointer-events:none}
}

/* выравнивание через Gutenberg */
.sp-photo.alignwide{width:min(920px,100%);margin-left:auto;margin-right:auto}
.sp-photo.alignfull{width:100%}

@media (max-width:620px){
  .sp-photo-inner{padding:10px;border-radius:16px}
  .sp-photo-tnext,.sp-photo-tprev{width:26px;height:26px}
  .sp-photo-tnext{right:2px}.sp-photo-tprev{left:2px}
}