/*
 * Gallery vitrine CSS contract:
 * RU: Контракт CSS базового витринного слоя.
 * - Base visual layer for all POVs.
 *   RU: Базовые визуальные правила для всех режимов.
 * - Contains only neutral gallery layout/typography styles.
 *   RU: Только нейтральная сетка/типографика галереи.
 * - Must not include office/form edit-state overrides.
 *   RU: Нельзя добавлять сюда edit-override для office/form.
 */

/* Общие переменные геометрии галереи. */
:root {
  --g-ratio: 5 / 3;
  --g-minipic-w: clamp(88px, 20vw, 128px);
}

/* Главный pic: full-width рамка 5:3. */
.g-pic-frame {
  width: 100%;
  aspect-ratio: var(--g-ratio);
  position: relative;
  overflow: hidden;
}

/* Изображение в рамке (кадрирование без искажений). */
.g-pic {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transform-origin: center center;
}

/* Подпись активного изображения в галерее. */
.g-caption {
  margin: 6px 0 0;
  font-size: var(--font-size-sm);
  font-weight: 300;
  color: var(--tg-theme-hint-color);
  line-height: 1.4;
  /* Стабильная высота ряда при пустом/непустом caption (плейсхолдер всё равно держит строку). */
  min-height: calc(1.4 * 1em);
}

/* Горизонтальная полоса миникартинок. */
.g-strip {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 4px 0;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.g-strip::-webkit-scrollbar {
  display: none;
}

.g-strip--single {
  display: none;
}

/* Миникартинка: тот же ratio 5:3, адаптивная ширина. */
.g-minipic {
  width: var(--g-minipic-w);
  aspect-ratio: var(--g-ratio);
  padding: 0;
  border: 1px solid var(--tg-theme-section-separator-color);
  border-radius: var(--border-radius-sm);
  overflow: hidden;
  background: var(--tg-theme-bg-color);
  flex: 0 0 auto;
}

/* Контент миникартинки. */
.g-minipic__pic {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

/* Активная миникартинка. */
.g-minipic.is-active {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--tg-theme-link-color);
}

/* Этап 3 (план): стили только галереи (имя класса/блока — назначение)
 * - .g-minipic--add / .g-strip__add — плюс в начале полосы;
 * - .g-viewer-overlay — контейнер кнопок заменить/удалить на рамке;
 * - .g-pic-frame--empty — плейсхолдер без изображения;
 * - .g-caption__input — textarea подписи в edit (типографика из токенов темы).
 */