/* ===========================
   car_detail_galary.css  (Desktop-only — подключайте с media="(min-width: 861px)")
   - Галерея 490px; основное фото 368px (скругление 6px)
   - Миниатюры: 5 в ряд; 88×66; активная — равные поля по 6px со всех сторон → 76×54
   - Рамка активной: белая 3px, без щелей (накладывается поверх)
   - Плейсхолдеры:
       • Большое фото — фон .cdg-main
       • Миниатюры — видны СРАЗУ (до загрузки), скрываются по .is-ready
   - Стрелки в галерее: хит-зона от края до стрелки; opacity .5 → 1 при hover/focus
   - Лайтбокс: 935×701; стрелки снаружи по 15px; крестик снаружи (15/15)
   =========================== */

/* -------- Галерея -------- */
.cdg-gallery {
  --cdg-w: 490px;
  --cols: 5;

  /* миниатюры */
  --thumb-w: 88px;
  --thumb-h: 66px;

  /* равные поля активной превью: 6px со всех сторон */
  --pad: 6px;
  --active-w: calc(var(--thumb-w) - var(--pad) * 2); /* 76 */
  --active-h: calc(var(--thumb-h) - var(--pad) * 2); /* 54 */

  --frame: 3px;

  /* равные промежутки между 5 миниатюрами на ширину 490 */
  --gap: calc((var(--cdg-w) - var(--cols) * var(--thumb-w)) / (var(--cols) - 1));

  width: var(--cdg-w);
  display: block;
}

/* Основной кадр (плейсхолдер — фоновая заливка до загрузки) */
.cdg-main {
  position: relative;
  width: var(--cdg-w);
  height: 368px;
  border-radius: 6px;
  overflow: hidden;
  background: #1A2238; /* плейсхолдер большого кадра */
}
#cdg-main-image {
  position: relative;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Стрелки внутри основного кадра — узкая хит-зона (от края до стрелки) */
.cdg-nav {
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto 0;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  z-index: 10;
  line-height: 0;
  display: flex;
  align-items: center;
  opacity: .5;
  transition: opacity .18s ease;
}
.cdg-nav:hover,
.cdg-nav:focus-visible { opacity: 1; }
.cdg-nav--prev { left: 0;  justify-content: flex-start; padding-left: 15px; }
.cdg-nav--next { right: 0; justify-content: flex-end;  padding-right: 15px; }
/* размеры SVG не задаём */
.cdg-nav img { display: block; pointer-events: none; }
.cdg-nav--prev img { transform: scaleX(-1); }

/* -------- Миниатюры -------- */
.cdg-thumbs {
  margin-top: 12px;
  display: grid;
  grid-template-columns: repeat(var(--cols), var(--thumb-w));
  column-gap: var(--gap);
  row-gap: var(--gap);
}

/* Кнопка превью */
.cdg-thumb {
  position: relative;
  width: var(--thumb-w);
  height: var(--thumb-h);
  border: 0;
  padding: 0;
  background: transparent;   /* без подложки вокруг */
  cursor: pointer;
  border-radius: 3px;
  overflow: hidden;
  outline: none;
}

/* Плейсхолдер миниатюры — ВИДЕН СРАЗУ, исчезает когда .is-ready */
.cdg-thumb::before {
  content: "";
  position: absolute;
  left: 0; top: 0;
  width: 100%; height: 100%;
  background: #1A2238;
  opacity: 1;
  transition: opacity .18s ease;
  pointer-events: none;
  z-index: 4; /* поверх картинки до готовности */
}
.cdg-thumb.is-ready::before { opacity: 0; }

/* Рамка активной — поверх, без влияния на размеры */
.cdg-thumb::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: var(--active-w);
  height: var(--active-h);
  border: var(--frame) solid #fff;
  border-radius: 3px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease;
  z-index: 5;
}
.cdg-thumb.is-active::after { opacity: 1; }

/* Картинка превью — по центру; плавно меняем только размеры */
.cdg-thumb img {
  position: absolute;
  left: 50%; top: 50%;
  width: var(--thumb-w);
  height: var(--thumb-h);
  transform: translate(-50%, -50%);
  object-fit: cover;
  z-index: 3;
  transition: width .18s ease, height .18s ease;
}
/* Активная — равные поля со всех сторон (уменьшение на 6px × 2) */
.cdg-thumb.is-active img {
  width: var(--active-w);
  height: var(--active-h);
}

/* -------- Лайтбокс -------- */
.cdg-lightbox {
  position: fixed;
  inset: 0;
  background: rgba(10, 13, 20, .9);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 20000;
}
.cdg-lightbox.is-open { display: flex; }

.cdg-lb-box {
  position: relative;
  width: 935px;
  height: 701px;
  overflow: visible; /* стрелки/крестик снаружи картинки не режем */
}
.cdg-lb-img {
  display: block;
  width: 935px;
  height: 701px;
  object-fit: cover;
  border-radius: 6px;
  background: #0b0f1a; /* фон под большой картинкой */
}

/* Крестик — снаружи справа (15/15 от угла картинки) */
.cdg-lb-close {
  position: absolute;
  top: -40px;      /* над верхним краем картинки */
  left: 100%;      /* прижали к правому краю картинки */
  margin-left: 15px;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  line-height: 0;
  z-index: 3;
}
.cdg-lb-close img { display: block; pointer-events: none; }

/* Стрелки лайтбокса — снаружи, по 15px от краёв, без прозрачности */
.cdg-lb-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  z-index: 1;
  line-height: 0;
  display: flex;
  align-items: center;
  opacity: 1;
}
.cdg-lb-nav--prev { right: 100%; margin-right: 15px; justify-content: flex-start; }
.cdg-lb-nav--next { left: 100%;  margin-left: 15px;  justify-content: flex-end; }
.cdg-lb-nav img { display: block; pointer-events: none; }
.cdg-lb-nav--prev img { transform: scaleX(-1); }

/* никаких hover-анимаций для превью, кроме изменения размеров активной */