/* ЛОКАЛЬНЫЙ СЛОЙ — первый экран.
   Высота не вычитается из 100vh константами: секция задаёт вилку, портрет
   вписывается в неё. Поэтому шапка или полоса цифр могут менять высоту,
   не ломая раскладку. */

.zw-hero {
  padding-block: clamp(28px, 3.4vw, 44px) clamp(24px, 3.4vw, 48px);
}

.zw-hero__inner {
  display: grid;
  gap: clamp(24px, 4.2vw, 60px);
  align-items: end;
  min-height: clamp(460px, 68vh, 720px);
}

.zw-hero__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-self: stretch;
  gap: clamp(20px, 2vw, 28px);
}

/* ширину строки задаёт колонка, как в макете, а не искусственный лимит */
.zw-hero__title { text-wrap: pretty; }

.zw-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px;
}

/* Телефон здесь крупнее и плотнее общего .zw-phone: он второе действие
   рядом с кнопкой, а не служебная строка. Интерлиньяж свой — корпусный
   1,55 разносил пару «номер + подпись» на лишние восемь пикселей. */
.zw-hero__call { display: flex; flex-direction: column; gap: 2px; }
.zw-hero__call .zw-phone {
  font-size: clamp(18px, 1rem + 0.45vw, 23px);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.02em;
}
.zw-hero__call-note { font-size: 13px; line-height: 1.25; color: var(--ink-muted); }

/* Адрес и часы: две колонки в 32px, адрес одним куском в 300px — как в макете.
   Разбивать его на «жирную первую строку» и остаток не нужно, это лишний
   акцент в самом низу экрана. */
.zw-hero__facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3) 32px;
  font-size: var(--size-small);
  line-height: 1.5;
  color: var(--ink-body);
}

.zw-hero__addr { max-width: 300px; }

/* портрет садится на нижнюю кромку секции и заходит на полосу цифр */
.zw-hero__figure {
  margin: 0 0 calc(clamp(24px, 3.4vw, 48px) * -1);
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

/* Портрет: высотой правит строка сетки, ширина следует за пропорцией.
   min-width: 0 обязателен — иначе картинка большого разрешения распирает
   flex-строку и начинает диктовать ширину колонки. */
.zw-hero__photo {
  width: auto;
  min-width: 0;
  max-width: 100%;
  height: 100%;
  /* высота портрета идёт от окна, как в макете: экран целиком минус шапка,
     полоса цифр и отступы секции */
  max-height: clamp(320px, calc(100vh - 240px), 720px);
  object-fit: contain;
  object-position: bottom;
}

@media (min-width: 900px) {
  .zw-hero__inner { grid-template-columns: 1.15fr 1fr; }
  .zw-hero__figure { align-self: stretch; }
}

@media (max-width: 899px) {
  .zw-hero__inner { grid-template-columns: 1fr; min-height: 0; }
  .zw-hero__figure { order: -1; }
  .zw-hero__photo { max-height: clamp(240px, 42vh, 380px); }
}

@media (max-width: 520px) {
  .zw-hero__actions { align-items: flex-start; flex-direction: column; gap: var(--sp-4); }
  .zw-hero__actions .zw-btn { width: 100%; justify-content: space-between; }
}