/* Layout */
.cg-gallery{--gap:16px; margin:24px 0; display:grid; grid-template-columns:1fr 220px; grid-gap:var(--gap); align-items:start}
.cg-main{position:relative; height:0; padding-top:66%; grid-column:1}
.cg-stage{position:absolute; inset:0; overflow:hidden; border-radius:8px; background:#f7f7f7}
.cg-slide{position:absolute; inset:0; opacity:0; transition:opacity .35s ease}
.cg-slide.is-active{opacity:1}
.cg-slide img{width:100%;height:100%;object-fit:cover;display:block;cursor:zoom-in}

/* Nav arrows */
.cg-nav{position:absolute; top:50%; transform:translateY(-50%); border:0; background:rgba(0,0,0,.45); color:#fff; width:40px; height:40px; border-radius:20px; cursor:pointer}
.cg-prev{left:10px}
.cg-next{right:10px}

/* Thumbs (right on desktop) */
.cg-thumbs{
  display:flex; flex-direction:column; gap:10px;
  /* ключевое — фиксируем высоту по stage через JS */
  height:var(--cg-thumbs-h, auto);
  max-height:var(--cg-thumbs-h, auto);
  overflow-y:auto; overflow-x:hidden;
  padding-right:4px; /* чтобы был виден частичный последний элемент */
  align-self:stretch; /* растянуть по высоте грида */
}
.cg-thumb{border:2px solid transparent; border-radius:8px; padding:0; background:#fff; cursor:pointer}
.cg-thumb.is-active{box-shadow:0 0 0 2px #ff7f2a inset} /* оранжевая рамка как в примере */
.cg-thumb img{display:block; width:100%; height:120px; object-fit:cover; border-radius:6px}

/* Mobile: thumbs below */
@media (max-width: 768px){
  .cg-gallery{grid-template-columns:1fr; grid-gap:12px}
  .cg-main{padding-top:70%}
  .cg-thumbs{
    height:auto; max-height:none;
    flex-direction:row; overflow-x:auto; overflow-y:hidden;
  }
  .cg-thumb img{width:120px; height:80px}
}

/* Fullscreen overlay */
.cg-overlay{position:fixed; inset:0; background:rgba(0,0,0,.9); display:none; align-items:center; justify-content:center; z-index:9999}
.cg-overlay.is-open{display:flex}
.cg-o-img{max-width:92vw; max-height:92vh}
.cg-o-close,.cg-o-prev,.cg-o-next{position:absolute; top:50%; transform:translateY(-50%); border:0; background:rgba(255,255,255,.15); color:#fff; width:44px;height:44px;border-radius:22px;cursor:pointer}
.cg-o-close{top:24px; right:24px; transform:none}
.cg-o-prev{left:24px}
.cg-o-next{right:24px}
/* Галерея и основное фото */
.cg-gallery{--gap:16px; margin:24px 0; display:grid; grid-template-columns:1fr 220px; grid-gap:var(--gap); align-items:stretch;}
.cg-main{position:relative; aspect-ratio:3/2;}               /* явная высота сразу */
@supports not (aspect-ratio: 1) {
  .cg-main{height:0; padding-top:66%;}                      /* фолбэк для старых браузеров */
}
.cg-stage{position:absolute; inset:0; overflow:hidden; border-radius:8px; background:#f7f7f7}
.cg-slide{position:absolute; inset:0; opacity:0; transition:opacity .35s ease}
.cg-slide.is-active{opacity:1}
.cg-slide img{width:100%;height:100%;object-fit:cover;display:block;cursor:zoom-in}

/* Колонка превью справа */
.cg-thumbs{
  display:flex; flex-direction:column; gap:10px;
  /* ключевые строки: не позволяем контенту растягивать строку */
  min-height:0;                   /* разрешить быть ниже min-content */
  align-self:stretch;
  height:var(--cg-thumbs-h, 100%);     /* сразу 100% строки, потом JS подставит точную высоту */
  max-height:var(--cg-thumbs-h, 100%);
  overflow-y:auto; overflow-x:hidden;
  padding-right:4px;
}
.cg-thumb{border:2px solid transparent; border-radius:8px; padding:0; background:#fff; cursor:pointer}
.cg-thumb.is-active{box-shadow:0 0 0 2px #ff7f2a inset}
.cg-thumb img{display:block; width:100%; height:120px; object-fit:cover; border-radius:6px}

/* Mobile */
@media (max-width: 768px){
  .cg-gallery{grid-template-columns:1fr; grid-gap:12px}
  .cg-thumbs{
    min-height:0; height:auto; max-height:none;
    flex-direction:row; overflow-x:auto; overflow-y:hidden;
  }
  .cg-thumb img{width:120px; height:80px}
}
/* активная миниатюра — заметная рамка */
.cg-thumb.is-active{ border-color:#2897dd; box-shadow:0 0 0 2px #2897dd inset; }

/* чтоб стрелки не терялись под картинкой */
.cg-nav{ z-index:3; }

/* скрываем колонку превью до первой инициализации, чтобы она не растягивала ряд */
.cg-thumbs{ height: 0; max-height: 0; overflow: hidden; opacity: 0; }
.cg-thumbs.is-ready{
  height: var(--cg-thumbs-h, auto);
  max-height: var(--cg-thumbs-h, auto);
  overflow-y: auto;
  opacity: 1;
  transition: opacity .15s ease;
}