/* ============================================================
   tg-gallery — переиспользуемый компонент «Галерея работ» (.ghc + .plb).
   ПЕРЕНОС (не редизайн) боевой галереи главной «Наши работы».
   Правила .ghc*/.plb* СКОПИРОВАНЫ из site/css/ai-test-sections.css
   (главная заморожена — её файл не редактируется и не импортируется).
   Источник-донор: ai-test-sections.css, блоки [H] Gallery Hover Carousel + Lightbox.
   JS: /site/js/portfolio-variants.js (навигация), /site/js/portfolio-lightbox.js (лайтбокс).

   Точки внедрения: слот .tg-method__gallery (страницы метода) и карточка товара
   (typography_product.html) вместо legacy bxSlider+Fancybox.
   ВНИМАНИЕ: portfolio-variants.js берёт .ghc через querySelector — РОВНО одна
   галерея .ghc на страницу. portfolio-lightbox.js собирает все .ghc__card документа.
   ============================================================ */

/* ── Обёртка + заголовок блока (Manrope 700 22px, = .tg-article-body h2) ── */
.tg-gallery{margin:0}
.tg-gallery__title{
  margin:0 0 20px;
  font-family:'Manrope',Arial,sans-serif;font-weight:700;font-size:22px;line-height:1.3;
  color:#0a0a0a;
}

/* ── Gallery Hover Carousel ── */
.ghc{position:relative}
.ghc__track{
  display:flex;gap:20px;overflow-x:auto;
  scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
  scrollbar-width:none;padding-bottom:4px;
}
.ghc__track::-webkit-scrollbar{display:none}
.ghc__card{
  position:relative;flex:0 0 320px;aspect-ratio:1 / 1;
  border-radius:16px;overflow:hidden;background:#111;
  scroll-snap-align:start;cursor:zoom-in;
  margin:0;padding:0;border:0;
}
.ghc__media{position:absolute;inset:0;height:100%;overflow:hidden}
.ghc__media img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .35s ease;
}
.ghc__card:hover .ghc__media img{transform:scale(1.08)}
.ghc__nav{display:flex;gap:12px;margin-top:20px}
.ghc__btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:52px;height:52px;border-radius:50%;
  border:2px solid #0a0a0a;background:#fff;color:#0a0a0a;
  cursor:pointer;
  transition:background .2s ease, color .2s ease, transform .2s ease;
}
.ghc__btn svg{width:20px;height:20px;display:block}
.ghc__btn:hover{background:#ffce00;transform:translateY(-2px)}
.ghc__btn:focus-visible{outline:3px solid #0a0a0a;outline-offset:3px}

@media(prefers-reduced-motion:reduce){
  .ghc__media img,.ghc__btn{transition:none}
}

/* ── Лайтбокс ── */
html.plb-lock{overflow:hidden}
.plb{
  position:fixed;inset:0;z-index:9999;
  display:none;align-items:center;justify-content:center;
  background:rgba(10,10,10,.92);padding:24px;
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
}
.plb.is-open{display:flex;animation:plb-fade .2s ease}
@keyframes plb-fade{from{opacity:0}to{opacity:1}}
.plb__figure{margin:0;max-width:90vw;max-height:86vh;display:flex}
.plb__img{
  max-width:90vw;max-height:86vh;width:auto;height:auto;object-fit:contain;
  border-radius:10px;box-shadow:0 24px 80px rgba(0,0,0,.6);
}
.plb__close{
  position:absolute;top:20px;right:24px;
  display:flex;align-items:center;justify-content:center;
  width:52px;height:52px;padding:0;margin:0;box-sizing:border-box;
  border:0;border-radius:50%;background:rgba(255,255,255,.12);color:#fff;cursor:pointer;
  transition:background .2s ease, color .2s ease, transform .2s ease;
}
.plb__close:hover{background:#ffce00;color:#0a0a0a;transform:rotate(90deg)}
.plb__close svg{width:22px;height:22px;display:block}
.plb__nav{
  position:absolute;top:50%;transform:translateY(-50%);
  display:flex;align-items:center;justify-content:center;
  width:60px;height:60px;padding:0;margin:0;box-sizing:border-box;
  border:0;border-radius:50%;background:rgba(255,255,255,.12);color:#fff;cursor:pointer;
  transition:background .2s ease, color .2s ease, transform .2s ease;
}
.plb__nav:hover{background:#ffce00;color:#0a0a0a}
.plb__nav svg{width:22px;height:22px;display:block}
.plb__prev{left:24px}
.plb__next{right:24px}
.plb__close:focus-visible,.plb__nav:focus-visible{outline:3px solid #ffce00;outline-offset:3px}

/* ── Адаптив ── */
@media screen and (max-width:639px){
  .tg-gallery__title{font-size:20px}
  .ghc__card{flex-basis:78vw}
  .plb__nav{width:48px;height:48px}
  .plb__prev{left:10px}
  .plb__next{right:10px}
}