/* ============================================================
   СПБ Переезд — благодарственные письма (галерея-карусель А4)
   Клик по письму открывает Lightbox with PhotoSwipe
   ============================================================ */

.sp-letters{position:relative;display:flex;align-items:center;gap:8px}

.sp-letters__track{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;
  scroll-behavior:smooth;padding:6px 2px 14px;flex:1;
  scrollbar-width:none;-ms-overflow-style:none}
.sp-letters__track::-webkit-scrollbar{display:none}

/* карточка письма — формат А4 (вертикаль) */
.sp-letter{scroll-snap-align:start;flex:0 0 clamp(220px,26%,270px);margin:0}
.sp-letter__link{display:block;position:relative;border-radius:var(--r);overflow:hidden;
  border:1px solid var(--line);box-shadow:var(--sh);background:var(--card);
  aspect-ratio:1/1.414;transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.sp-letter__link:hover{transform:translateY(-4px);box-shadow:var(--sh-lg)}
.sp-letter__link img{width:100%;height:100%;object-fit:cover;display:block}

/* иконка-лупа при наведении */
.sp-letter__zoom{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:rgba(12,22,38,.35);color:#fff;opacity:0;transition:opacity var(--dur) var(--ease)}
.sp-letter__link:hover .sp-letter__zoom{opacity:1}
.sp-letter__zoom svg{width:40px;height:40px}

/* подпись компании (h3) */
.sp-letter__cap{margin-top:12px;text-align:center}
.sp-letter__cap h3{font-size:14.5px;font-weight:600;color:var(--ink);margin:0;line-height:1.35}

/* стрелки */
.sp-letters__nav{flex:none;width:44px;height:44px;border-radius:50%;border:1px solid var(--line);
  background:var(--card);color:var(--ink-2);cursor:pointer;display:flex;align-items:center;
  justify-content:center;box-shadow:var(--sh);transition:var(--dur) var(--ease);z-index:2}
.sp-letters__nav:hover{background:var(--brand);border-color:var(--brand);color:#fff}
.sp-letters__nav svg{width:20px;height:20px}
.sp-letters__nav:disabled{opacity:.35;cursor:default;pointer-events:none}

/* дотсы (точки-индикаторы) */
.sp-letters__dots{display:flex;justify-content:center;gap:8px;margin-top:16px}
.sp-letters__dots button{width:8px;height:8px;padding:0;border:none;border-radius:50%;
  background:var(--line);cursor:pointer;transition:var(--dur) var(--ease)}
.sp-letters__dots button.is-active{background:var(--brand);width:22px;border-radius:4px}

.sp-letters__more{text-align:center;margin-top:26px}
.sp-letters__more .sp-btn svg{width:19px;height:19px;transition:transform var(--dur) var(--ease)}
.sp-letters__more .sp-btn:hover svg{transform:translateX(3px)}

@media(max-width:600px){
  .sp-letter{flex-basis:78%}
  .sp-letters__nav{display:none}
  .sp-letters{gap:0}
  .sp-letters__track{gap:14px;-webkit-overflow-scrolling:touch}
}