/* ============================================
   НАШ СКЛАД В КИТАЕ

   Трест-блок: реальные фото склада с вывеской
   и адрес. Просто показываем — без действий.
   ============================================ */

.warehouse {
  padding-block: var(--space-16);
  /* Белый фон, как у соседних секций («О компании» и футер) —
     блок сливается с ними в единый поток, а не торчит цветной полосой.
     Структуру держат заголовок, тени фото и карты. */
  background-color: var(--color-surface);
}

.warehouse__title {
  text-align: center;
  color: var(--color-ink);
}

/* Вводный абзац под заголовком */
.warehouse__intro {
  max-width: 680px;
  margin: var(--space-4) auto 0;
  text-align: center;
  color: var(--color-ink-soft);
  font-size: clamp(1rem, 1.3vw, 1.125rem);
  line-height: 1.5;
}

/* Строка адреса под заголовком */
.warehouse__address {
  margin-top: var(--space-4);
  text-align: center;
  font-size: clamp(1rem, 1.4vw, 1.25rem); /* 16px → 20px */
  line-height: 1.4;
}

.warehouse__label {
  color: var(--color-ink-soft);
}

/* Сам адрес — иероглифы. Inter их не содержит, браузер берёт
   системный CJK-шрифт (этому помогает lang="zh" в разметке). */
.warehouse__value {
  font-weight: var(--fw-semibold);
  color: var(--color-ink);
}

/* --------------------------------------------
   Контент: слева фото, справа карта
   -------------------------------------------- */
.warehouse__content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
  /* Карта тянется на высоту фото (и наоборот) */
  align-items: stretch;
  margin-top: var(--space-10);
}

/* Галерея из двух фото — занимает левую половину */
.warehouse__gallery {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}

.warehouse__gallery img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-xl);
  box-shadow: 0 20px 40px rgba(10, 30, 80, 0.12);
}

/* Карта. Контейнер держит три слоя: снизу — запасная картинка,
   поверх — интерактивный Leaflet (виден, когда загрузились плитки),
   сверху — ссылка на Google (видна всегда). */
.warehouse__map {
  position: relative;
  display: block;
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: 0 20px 40px rgba(10, 30, 80, 0.12);
  min-height: 320px;
}

/* Запасная статичная карта — нижний слой (z1) */
.warehouse__map-fallback {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Подпись лицензии для запасной картинки (у интерактивной — своя от Leaflet).
   z1: когда интерактивная карта поверх — эта подпись скрыта под ней. */
.warehouse__map-attr {
  position: absolute;
  right: 6px;
  bottom: 6px;
  z-index: 1;
  padding: 2px 6px;
  border-radius: 4px;
  background-color: rgba(255, 255, 255, 0.8);
  color: #555;
  font-size: 0.6875rem; /* 11px */
}

/* Интерактивная карта (z2). Прозрачна, пока не загрузились плитки —
   тогда снизу видна запасная картинка. */
.warehouse__map-canvas {
  position: absolute;
  inset: 0;
  z-index: 2;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
}

.warehouse__map-canvas.is-ready {
  opacity: 1;
  pointer-events: auto;
}

/* Ссылка на Google Карты — верхний слой (z3), видна в обоих режимах */
.warehouse__map-open {
  position: absolute;
  left: var(--space-3);
  bottom: var(--space-3);
  z-index: 3;
  padding: 7px 12px;
  border-radius: 999px;
  background-color: rgba(10, 30, 80, 0.72);
  color: #fff;
  font-size: 0.8125rem; /* 13px */
  font-weight: var(--fw-semibold);
  transition: background-color 0.2s ease;
}

.warehouse__map-open:hover {
  background-color: var(--color-brand);
}

/* Своя метка на интерактивной карте — синяя точка */
.wh-pin span {
  display: block;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--color-brand);
  border: 3px solid #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
}

/* Планшеты: карта уходит под фото */
@media (max-width: 900px) {
  .warehouse__content {
    grid-template-columns: 1fr;
  }

  /* В своей строке карте нужна явная высота */
  .warehouse__map {
    height: 320px;
  }
}

/* На телефоне фото остаются в 2 колонки (1 ряд) — по просьбе.
   Базовое правило .warehouse__gallery (1fr 1fr) действует и здесь. */