/**
 * iOS Safari Viewport & Image Fix
 * Исправляет проблему с масштабированием изображений при сворачивании Safari
 */

/* Используем CSS переменную для высоты viewport вместо vh */
:root {
  --vh: 1vh;
}

/* Фикс для изображений и видео - предотвращаем масштабирование */
img,
video,
picture {
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-perspective: 1000;
  perspective: 1000;
}

/* Фикс для изображений в контейнерах с aspect-ratio */
.projects__img img,
.projects__img video,
.projects__img picture,
.about__item img,
.about__item video,
.about__item picture,
.media__block img,
.media__block video,
.media__block picture {
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  will-change: auto;
}

/* Фикс для header video */
.header__video {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* Предотвращаем overflow при изменении viewport */
body {
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

/* Фикс для iOS Safari - предотвращаем bounce эффект */
html,
body {
  overscroll-behavior-y: none;
  -webkit-overflow-scrolling: touch;
}

/* Фикс для контейнеров с фиксированной высотой */
.h-100,
.body-flex {
  height: 100vh;
  height: calc(var(--vh, 1vh) * 100);
}

/* Фикс для offcanvas меню */
@media (max-width: 991px) {
  .offcanvas {
    height: calc(100vh - 70px) !important;
    height: calc(var(--vh, 1vh) * 100 - 70px) !important;
  }

  .offcanvas-backdrop {
    height: calc(100vh - 70px) !important;
    height: calc(var(--vh, 1vh) * 100 - 70px) !important;
  }
}

/* Дополнительная стабилизация для iOS */
@supports (-webkit-touch-callout: none) {

  /* iOS specific fixes */
  img,
  video,
  picture {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
  }

  /* Предотвращаем resize изображений при изменении viewport */
  .projects__img,
  .about__item,
  .media__block {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
}

/* Фикс для Safari на iOS - предотвращаем масштабирование при фокусе на input */
@media screen and (max-width: 991px) {

  input,
  textarea,
  select {
    font-size: 16px !important;
  }
}