/* Фотогалерея комплекса для главной v4 — шорткод [ts_gallery_v4].
   Форк blocks/gallery/ от 02.09.2026: на v4 в ленте на два кадра меньше,
   а общий модуль стоит ещё и на замороженных версиях. Оформление то же,
   отличается только префикс — tsg4-. */


.tsg4{
  --tsg4-h:420px;          /* высота кадра; ширина слайда считается от неё */
  --tsg4-gap:20px;
  --tsg4-r:18px;

  /* Отступ от края окна до левого края сетки сайта (контейнер 1170px
     по центру). Проценты везде, где переменная применяется, считаются
     от родителя во всю ширину окна — поэтому одного значения хватает и
     шапке блока, и полосе прокрутки, и внутреннему отступу ленты.
     Не vw: в 100vw входит полоса прокрутки, и лента промахивалась бы мимо
     края экрана на её ширину. Первая строка — запасная, для браузеров
     без max() внутри calc. */
  --tsg4-lead:15px;
  --tsg4-lead:calc(15px + max(0px, 50% - 585px));

  /* Секция во всю ширину родителя, без боковых отступов: лента должна
     доставать до обоих краёв экрана. По сетке её равняют дети. */
  padding:8px 0 76px;
  background:transparent;                     /* тема красит сами теги section */
  color:var(--ink,#1b1b1d);
  font-family:'Open Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
}
.tsg4 *,.tsg4 *::before,.tsg4 *::after{box-sizing:border-box}
.tsg4 figure{margin:0}
.tsg4 p{margin:0}

/* ── Шапка блока ─────────────────────────────────────── */
/* Шапка блока и полоса прокрутки стоят в сетке — за неё выходит только лента.
   margin-right вместе с max-width держит правый край на месте и на узких
   экранах, где сетка сжимается до ширины окна. */
.tsg4-head,.tsg4-bar{margin-left:var(--tsg4-lead);margin-right:15px;max-width:1140px}
.tsg4-head{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:32px;margin-bottom:28px;
}
.tsg4-label{font-size:13px;color:var(--ink-3,#8e8e96);line-height:1.5;margin-bottom:10px}
.tsg4 .tsg4-title{
  margin:0;font-size:clamp(23px,2.6vw,34px);line-height:1.15;font-weight:700;
  letter-spacing:-.02em;color:var(--ink,#1b1b1d);
  text-transform:none;font-family:inherit;   /* тема поднимает заголовки в верхний регистр */
}
.tsg4-lead{
  margin-top:12px;max-width:620px;
  font-size:15px;line-height:1.6;color:var(--ink-2,#5c5c63);
}
.tsg4 a.tsg4-all{
  flex:0 0 auto;display:inline-flex;align-items:center;gap:9px;
  padding-bottom:4px;border-bottom:2px solid var(--ink,#1b1b1d);
  font-size:14px;font-weight:600;color:var(--ink,#1b1b1d);
  text-decoration:none;transition:color .2s,border-color .2s;
}
.tsg4 a.tsg4-all:hover{color:var(--accent,#e95c0c);border-color:var(--accent,#e95c0c)}
.tsg4-all__arrow{transition:transform .2s}
.tsg4 a.tsg4-all:hover .tsg4-all__arrow{transform:translateX(4px)}

/* ── Лента ───────────────────────────────────────────── */
.tsg4-slider{position:relative}

.tsg4-track{
  display:flex;gap:var(--tsg4-gap);
  overflow-x:auto;overflow-y:hidden;
  /* Лента занимает всю ширину окна, а крайние кадры ставятся по сетке
     внутренними отступами. За счёт этого снимки при прокрутке уезжают
     за сетку в обе стороны — до краёв экрана, а не обрезаются по ней,
     но в начале и в конце лента упирается в сетку, а не в край экрана.
     Сетка отбита от краёв окна симметрично, поэтому отступ один и тот же.
     scroll-padding теми же значениями: иначе привязка к кадрам равняла бы
     их по краю экрана, а не по сетке. */
  padding-left:var(--tsg4-lead);
  padding-right:var(--tsg4-lead);
  scroll-padding-left:var(--tsg4-lead);
  scroll-padding-right:var(--tsg4-lead);
  scroll-snap-type:x mandatory;
  /* без этого лента отбивает вертикальный свайп на телефоне */
  touch-action:pan-x pan-y;
  outline:none;
  /* родную полосу прокрутки прячем — вместо неё своя, ниже */
  scrollbar-width:none;-ms-overflow-style:none;
}
.tsg4-track::-webkit-scrollbar{width:0;height:0;display:none}
.tsg4-track:focus-visible{
  outline:2px solid var(--accent,#e95c0c);outline-offset:6px;border-radius:var(--tsg4-r);
}
.tsg4-track.is-grabbing{cursor:grabbing}

.tsg4-slide{
  flex:0 0 auto;scroll-snap-align:start;
  display:flex;flex-direction:column;
}
/* Последний кадр иначе недосягаем: до его левого края лента не доматывается,
   и при mandatory браузер отщёлкивает назад. Ему — привязка по правому краю. */
.tsg4-slide:last-child{scroll-snap-align:end}
.tsg4-slide--w{width:calc(var(--tsg4-h) * 1.4)}
.tsg4-slide--n{width:calc(var(--tsg4-h) * 1.05)}

/* Тема красит и раздувает любые button — сбрасываем всё явно. */
.tsg4 .tsg4-shot,
.tsg4 .tsg4-shot:hover,
.tsg4 .tsg4-shot:focus{
  display:block;width:100%;min-width:0;height:var(--tsg4-h);
  padding:0;margin:0;border:none;border-radius:var(--tsg4-r);
  background:#e3e0dc;box-shadow:none;overflow:hidden;cursor:zoom-in;
  -webkit-appearance:none;appearance:none;
}
.tsg4 .tsg4-img{
  display:block;width:100%;height:100%;
  object-fit:cover;object-position:center;
  transition:transform .5s cubic-bezier(.2,.7,.3,1);
}
.tsg4-shot:hover .tsg4-img{transform:scale(1.035)}
.tsg4-shot:focus-visible{outline:2px solid var(--accent,#e95c0c);outline-offset:4px}
/* Пока тянут ленту, снимок не должен уезжать за курсором и подсвечиваться. */
.tsg4-track.is-grabbing .tsg4-shot{cursor:grabbing}
.tsg4-track.is-grabbing .tsg4-img{transform:none}

.tsg4-cap{padding:14px 2px 0;display:flex;flex-direction:column;gap:3px}
.tsg4-cap__t{font-size:15px;font-weight:700;line-height:1.3;color:var(--ink,#1b1b1d)}
.tsg4-cap__n{font-size:13px;line-height:1.4;color:var(--ink-2,#5c5c63)}

/* ── Своя полоса прокрутки ───────────────────────────── */
.tsg4-bar{
  position:relative;height:1px;margin-top:30px;
  background:var(--ink,#1b1b1d);border-radius:10px;cursor:pointer;
}
.tsg4-bar__drag{
  position:absolute;top:-4px;left:0;width:60px;height:9px;
  border-radius:10px;background:var(--ink,#1b1b1d);
  transition:background .2s;
  will-change:transform;
}
.tsg4-bar:hover .tsg4-bar__drag,
.tsg4-slider.is-dragging .tsg4-bar__drag{background:var(--accent,#e95c0c)}
/* Если лента целиком помещается на экран, полоса не нужна. */
.tsg4-slider.tsg4--fits .tsg4-bar{display:none}

/* ── Просмотр в полный экран ─────────────────────────── */
.tsg4-box{
  position:fixed;inset:0;z-index:99999;
  display:flex;align-items:center;justify-content:center;gap:12px;
  padding:clamp(14px,3vw,40px);
  background:rgba(16,15,14,.93);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
}
.tsg4-box[hidden]{display:none}
.tsg4-box__fig{
  display:flex;flex-direction:column;align-items:center;gap:16px;
  max-width:min(1240px,100%);max-height:100%;min-width:0;
}
.tsg4-box__img{
  display:block;max-width:100%;max-height:calc(100vh - 170px);
  width:auto;height:auto;border-radius:var(--tsg4-r);
  background:#26241f;
}
.tsg4-box__cap{
  display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 14px;
  justify-content:center;text-align:center;
}
.tsg4-box__t{color:#fff;font-size:17px;font-weight:700}
.tsg4-box__n{color:rgba(255,255,255,.7);font-size:14px}
.tsg4-box__i{color:rgba(255,255,255,.45);font-size:13px;font-variant-numeric:tabular-nums}

.tsg4 .tsg4-box__nav,
.tsg4 .tsg4-box__close{
  flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(255,255,255,.28);background:rgba(255,255,255,.08);
  color:#fff;cursor:pointer;border-radius:50%;
  font-family:inherit;line-height:1;padding:0;margin:0;min-width:0;
  box-shadow:none;-webkit-appearance:none;appearance:none;
  transition:background .2s,border-color .2s,transform .2s;
}
.tsg4 .tsg4-box__nav{width:52px;height:52px;font-size:30px;padding-bottom:4px}
.tsg4 .tsg4-box__close{position:absolute;top:18px;right:18px;width:42px;height:42px;font-size:26px;padding-bottom:3px}
.tsg4 .tsg4-box__nav:hover,
.tsg4 .tsg4-box__close:hover{background:var(--accent,#e95c0c);border-color:var(--accent,#e95c0c);transform:scale(1.06)}
.tsg4 .tsg4-box__nav:focus-visible,
.tsg4 .tsg4-box__close:focus-visible{outline:2px solid #fff;outline-offset:3px}

/* ── Адаптив ─────────────────────────────────────────── */
@media (max-width:1100px){
  .tsg4{--tsg4-h:340px;padding-bottom:60px}
  .tsg4-head{flex-direction:column;align-items:flex-start;gap:18px}
}
@media (max-width:760px){
  /* Кадр пониже, чтобы в узкий экран попадал край следующего снимка —
     иначе не видно, что лента листается. */
  .tsg4{--tsg4-h:210px;--tsg4-gap:14px;padding-bottom:52px}
  .tsg4-cap{padding-top:11px}
  .tsg4-cap__t{font-size:14px}
  .tsg4-cap__n{font-size:12.5px}
  .tsg4-bar{margin-top:22px}
  .tsg4 .tsg4-box__nav{width:42px;height:42px;font-size:24px}
  .tsg4-box__img{max-height:calc(100vh - 210px)}
  .tsg4-box__cap{flex-direction:column;gap:3px}
}

@media (prefers-reduced-motion:reduce){
  .tsg4 .tsg4-img,.tsg4-all__arrow,.tsg4 .tsg4-box__nav,.tsg4 .tsg4-box__close{transition:none}
  .tsg4-shot:hover .tsg4-img{transform:none}
}