/* Галерея — лента карточек на белом фоне (как модельный ряд Tesla).
   Размер карточки повторяет Tesla product-card mobile: 330×520, gap 16,
   внешний gutter 12. Фото режется cover; правая часть уходит первой. */

.section--gallery {
  background: var(--surface);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(14px, 2.5vh, 26px);
  padding: clamp(28px, 4vh, 44px) 0;
  overflow: hidden;
}

/* Лента: трек во всю ширину, карточки сужены — следующая выглядывает справа. */
.gallery__slider { width: 100%; max-width: none; height: auto; }
.gallery__slider .slider__track {
  flex: 0 0 auto;
  align-items: center;
  gap: 16px;
  padding-inline: 12px;
  scroll-snap-type: x mandatory;
}
.gallery__slide { flex: 0 0 auto; scroll-snap-align: center; }

/* Просто изображение — скруглённое, без обводки, тени и фона.
   Карточка выше и уже (срез по бокам через object-fit: cover) — световая
   панель в кадре остаётся целиком, листаем модельный ряд как у Tesla. */
.gallery__card {
  position: relative;
  width: min(330px, calc(100vw - 24px));
  aspect-ratio: 330 / 520;
  border-radius: var(--radius-md);
  overflow: hidden;
}
/* Фото заполняет карточку целиком (cover). Перебиваем общее правило
   слайдера .slider__slide img (object-fit:contain) более специфичным
   селектором — иначе появляются белые поля и кнопка «съезжает» под фото. */
.gallery__card .gallery__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left center;
}
/* Две кнопки внизу карточки — в ряд, равными половинками (синяя «Заказать» +
   ghost «Подробнее»), как пары CTA на Каспере/Свете. Шрифт чуть меньше, текст
   может переноситься на узких карточках — кнопки тянутся по высоте вместе. */
.gallery__card-actions {
  position: absolute;
  left: 16px; right: 16px; bottom: 16px;
  display: flex; flex-direction: row; align-items: stretch; gap: 8px;
  z-index: 2;
}
.gallery__card-actions .btn {
  flex: 1 1 0;
  min-width: 0;
  height: auto; min-height: var(--btn-h);
  padding: 0.4rem 0.6rem;
  font-size: clamp(0.72rem, 2.5vw, 0.82rem);
  line-height: 1.12;
  white-space: normal;
}

/* Точки — на белом фоне (стиль по умолчанию из slider.css). */
.gallery__slider .slider__dots { margin-top: clamp(14px, 2.5vh, 24px); }

@media (min-width: 1024px) {
  .gallery__card-actions {
    left: 50%;
    right: auto;
    width: auto;
    transform: translateX(-50%);
    justify-content: center;
  }

  .gallery__card-actions .btn {
    flex: 0 0 145px;
    width: 145px;
  }

  .gallery__slider .slider__dots { display: none; }
}