/* ГИКПРОМГРАМ в карточке товара: слайдер последних постов на месте блока
   «Метрологическая служба» (.psvc). Разметка — product/gp-hero.html, логика — js/gp-gram-card.js.
   Вид «Эфир» (выбран 25.09.2026): шапка как у плеера — название, сегменты прогресса, стрелки;
   ниже листаются посты (резкое фото + время и заголовок); фон — размытое фото текущего поста.
   Слайдер лежит в одной ячейке сетки .gpgx с блоком поверки и вынут из потока (absolute):
   высоту ячейки (147 px) задаёт только .psvc, кадр фото товара не двигается.
   Заголовок бота (до 70 знаков) помещается целиком на колонке 280–400 px. */

.gpc .gpgx {position:relative;display:grid;flex:none;margin-top:12px}
.gpc .gpgx > .psvc, .gpc .gpgx > .gpgs {grid-area:1/1;min-width:0;margin-top:0}
.gpc .gpgx > .gpgs {position:absolute;inset:0}
.gpc .gpgx > .psvc {visibility:hidden}
.gpc .gpgx--off > .psvc {visibility:visible}
.gpc .gpgx--off > .gpgs {display:none}
/* Страховка без JS: если скрипт не ответил за 6 с, возвращаем блок поверки */
.gpc .gpgx:not(.gpgx--on):not(.gpgx--off) > .psvc {animation:gpgxShow 0s 6s forwards}
.gpc .gpgx:not(.gpgx--on):not(.gpgx--off) > .gpgs {animation:gpgxHide 0s 6s forwards}
@keyframes gpgxShow {to {visibility:visible}}
@keyframes gpgxHide {to {visibility:hidden}}

.gpc .gpgs {display:flex;flex-direction:column;gap:6px;min-height:0;padding:10px 14px 12px;border-radius:16px;overflow:hidden;
  background:#141a2e;border:1px solid #141a2e;color:#fff;container-type:inline-size;isolation:isolate}

/* Фон: размытое фото текущего поста, слои сменяются плавно */
.gpc .gpgs__bgs {position:absolute;z-index:0;inset:0;pointer-events:none}
.gpc .gpgs__bgl {position:absolute;inset:-30px;background:#2b3556 center/cover no-repeat;filter:blur(22px) saturate(1.5);opacity:0;transition:opacity .6s ease}
.gpc .gpgs__bgl.on {opacity:.8}
.gpc .gpgs__bgs:after {content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(20,26,46,.35) 0%,rgba(20,26,46,.76) 55%)}

/* Шапка: название, прогресс, стрелки. Не листается — посты под неё не заходят */
.gpc .gpgs__head {position:relative;z-index:1;display:flex;align-items:center;gap:10px;height:24px;flex:none}
.gpc .gpgs__live, .gpc .gpgs__cnt {display:none}
.gpc .gpgs__name {flex:none;font-size:12.5px;line-height:18px;font-weight:700;color:rgba(255,255,255,.78);white-space:nowrap;border-radius:4px}
.gpc .gpgs__name:hover {color:#fff}
.gpc .gpgs__prog {flex:1;min-width:0;display:flex;gap:4px}
.gpc .gpgs__seg {flex:1;height:3px;border-radius:2px;background:rgba(255,255,255,.26);overflow:hidden}
.gpc .gpgs__seg i {display:block;width:0;height:100%;border-radius:inherit;background:#fff}
.gpc .gpgs__seg.done i {width:100%}
.gpc .gpgs__seg.run i {animation:gpgsFill 6s linear forwards}
.gpc .gpgs--hold .gpgs__seg.run i, .gpc .gpgs--away .gpgs__seg.run i {animation-play-state:paused}
@keyframes gpgsFill {from {width:0} to {width:100%}}
.gpc .gpgs__nav {position:relative;flex:none;width:24px;height:24px;padding:0;border-radius:50%;display:grid;place-items:center;cursor:pointer;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.34);color:#fff;transition:background .15s,color .15s,border-color .15s,opacity .15s}
.gpc .gpgs__nav + .gpgs__nav {margin-left:-4px}
.gpc .gpgs__nav:before {content:"";position:absolute;inset:-8px}
.gpc .gpgs__nav svg {width:13px;height:13px}
.gpc .gpgs__nav:hover:not(:disabled) {background:#fff;border-color:#fff;color:var(--navy)}
.gpc .gpgs__nav:disabled {opacity:.4;cursor:default}
.gpc .gpgs--one .gpgs__nav, .gpc .gpgs--one .gpgs__prog {visibility:hidden}

/* Лента постов: край в край блока, чтобы пост уезжал за границу, а не обрезался на отступе.
   Снизу лента заходит в отступ блока (margin/padding 12 px) — там помещается тень фото, иначе её срезает край ленты. */
.gpc .gpgs__track {position:relative;z-index:1;list-style:none;display:flex;flex:1;min-height:0;margin:0 -14px -12px;padding-bottom:12px;
  overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none}
.gpc .gpgs__track::-webkit-scrollbar {display:none}
.gpc .gpgs__it {flex:0 0 100%;min-width:0;height:100%;scroll-snap-align:start}
.gpc .gpgs__card {display:flex;align-items:center;gap:14px;height:100%;padding:0 14px;color:#fff;border-radius:12px}
.gpc .gpgs a.gpgs__card:focus-visible {outline:2px solid #fff;outline-offset:-2px}
.gpc .gpgs a.gpgs__name:focus-visible, .gpc .gpgs__nav:focus-visible {outline:2px solid #fff;outline-offset:2px}

.gpc .gpgs__ph {position:relative;flex:none;width:92px;height:92px;border-radius:12px;overflow:hidden;background:#2b3556;
  box-shadow:0 10px 24px rgba(0,0,0,.42),0 0 0 1px rgba(255,255,255,.14);transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.gpc .gpgs__card:hover .gpgs__ph {transform:scale(1.03)}
.gpc .gpgs img {position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;object-position:50% 40%;opacity:0;transition:opacity .3s ease}
.gpc .gpgs img.is-ok {opacity:1}
.gpc .gpgs img.is-bad {visibility:hidden}
/* Фото сильно не квадратное — вписываем целиком на его же размытую копию (класс ставит скрипт) */
.gpc .gpgs-fit {isolation:isolate}
.gpc .gpgs-fit:before {content:"";position:absolute;z-index:0;inset:-16px;background:var(--bg) center/cover no-repeat;filter:blur(14px) saturate(1.2);opacity:.75}
.gpc .gpgs-fit img {z-index:1;object-fit:contain}

.gpc .gpgs__tx {flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.gpc .gpgs__when {display:flex;align-items:center;gap:8px;height:16px;flex:none;font-size:12px;line-height:16px;color:rgba(255,255,255,.78);white-space:nowrap}
.gpc .gpgs__own {flex:none;padding:0 6px;border-radius:4px;background:var(--green);color:#fff;font-size:11px;line-height:16px;font-weight:500}
.gpc .gpgs__t {flex:none;font-size:14.5px;line-height:17.5px;font-weight:700;color:#fff;overflow-wrap:break-word;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;overflow:hidden}

.gpc .gpgs__sk {background:linear-gradient(90deg,#2b3556 25%,#39456b 50%,#2b3556 75%);background-size:200% 100%;animation:gpgsSk 1.2s linear infinite}
.gpc .gpgs__skl {display:block;height:10px;border-radius:5px}
.gpc .gpgs__it--sk .gpgs__tx {gap:8px;padding-top:4px}
@keyframes gpgsSk {to {background-position:-200% 0}}

/* Узкая колонка (окно ~1000–1200 px): фото меньше, текст чуть мельче — 70 знаков влезают целиком */
@container (max-width:340px) {
  .gpc .gpgs__ph {width:72px;height:72px;border-radius:10px}
  .gpc .gpgs__card {gap:12px}
  .gpc .gpgs__t {font-size:13.5px;line-height:16.5px}
  .gpc .gpgs__head {gap:8px}
}

@media(prefers-reduced-motion:reduce) {
  .gpc .gpgs__seg.run i {animation:none;width:100%}
  .gpc .gpgs__sk {animation:none}
  .gpc .gpgs img, .gpc .gpgs__ph, .gpc .gpgs__bgl {transition:none}
  .gpc .gpgs__card:hover .gpgs__ph {transform:none}
}

/* Телефон (12.10.2026): с 01.10 блок поверки на ≤760 px ужат в строку 56 px (gp-card.css), слайдер в неё
   не помещался. Здесь колонки идут друг под другом, кадр фото от высоты ячейки не зависит, поэтому слайдер
   возвращается в поток и задаёт высоту сам. Пустая лента (.gpgx--off) — снова строка поверки 56 px. */
@media (max-width:760px) {
  html body .gpc .gpgx {margin-top:8px}
  html body .gpc .gpgx > .gpgs {position:relative;inset:auto;height:128px;padding:9px 12px 12px;border-radius:12px}
  html body .gpc .gpgs__track {margin:0 -12px -12px}
  html body .gpc .gpgs__card {padding:0 12px;gap:12px}
  html body .gpc .gpgs__ph {width:72px;height:72px;border-radius:10px}
  html body .gpc .gpgs__t {font-size:13.5px;line-height:16.5px}
}