/* =========================================================
   Проекты
   Макет: Figma → Final → «Проекты / Страница проекта» (1920 / 1200 / 640 / 320).
   Фрейм 1200 — уменьшенный 1920 (× 0.625): размеры блоков — через --s (пиксель фрейма 1920, style.css).
   Карточки проектов — общие плитки с линиями (.tile-list / .tile), галерея — общий слайдер [data-slider] (main.js).
   Заголовки, подписи, тексты и отступы между секциями — общие классы и токены из style.css.
   ========================================================= */

/* =========================================================
   Первый экран: карта под прозрачной светлой шапкой, крошки и заголовок слева.
   Высота — окно (не ниже минимума), шапка заходит на картинку
   ========================================================= */

.pr-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: calc(var(--header-h) + max(var(--hero-min), var(--screen)));
  margin-top: calc(-1 * var(--header-h));
  padding-top: var(--header-h);
  overflow: hidden;
  background: #ebebeb; /* фон карты — пока картинка грузится */
}

.pr-hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: 50% 50%;
}

.pr-hero__head {
  position: relative;
  z-index: 1;
}

.pr-hero__intro {
  grid-column: 1 / span 6;
  padding-top: var(--head-pt); /* крошки — как на «Услугах» и «Каталоге» */
}

.pr-hero__title { max-width: calc(880 * var(--s)); } /* ширина текста во фрейме 1200 (550 / 0.625) */

/* =========================================================
   Выделенный проект: светлая плашка по полям, фото слева на половину, текст справа.
   Заголовок сверху, текст и кнопка прижаты к низу
   ========================================================= */

.pr-featured { padding: var(--gap-section) var(--margin) 0; }

.pr-featured__box {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  background: var(--c-soft);
}

.pr-featured__img {
  width: 100%;
  height: 100%;
  aspect-ratio: 930 / 777;
  object-fit: cover;
}

.pr-featured__body {
  display: flex;
  flex-direction: column;
  padding: calc(30 * var(--s));
}

.pr-featured__text {
  max-width: calc(613 * var(--s));
  margin-top: auto;
  padding-top: var(--gap-title);
}

.pr-featured__btn {
  align-self: flex-start;
  margin-top: calc(30 * var(--s));
}

/* =========================================================
   Все проекты: заголовок и плитки (общий блок)
   ========================================================= */

.pr-all { padding-top: var(--gap-section); }

.pr-all__title {
  grid-column: 1 / -1;
  padding-bottom: var(--gap-title);
}

/* =========================================================
   Галерея проектов: подпись 1–3, заголовок 4–9, стрелки справа по нижнему краю заголовка.
   Слайд — три фото: малое, большое, малое (443 / 915 / 442 во фрейме), по верхнему краю
   ========================================================= */

.gallery {
  padding-top: var(--gap-section);
  align-items: start;
}

.gallery__label { grid-column: 1 / span 3; }

.gallery__title {
  grid-column: 4 / span 6;
  max-width: calc(865 * var(--s));
}

.gallery__nav {
  grid-column: 10 / -1;
  justify-self: end;
  align-self: end;
}

.gallery__viewport {
  grid-column: 1 / -1;
  display: flex;
  margin-top: var(--gap-title);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.gallery__viewport::-webkit-scrollbar { display: none; }

.gallery__slide {
  flex: 0 0 100%;
  display: grid;
  grid-template-columns: 443fr 915fr 442fr;
  column-gap: var(--gutter);
  align-items: start;
  scroll-snap-align: start;
}

.gallery__img {
  display: block;
  width: 100%;
  height: auto; /* иначе работает атрибут height, а не пропорция */
  aspect-ratio: 443 / 442;
  object-fit: cover;
  background: var(--c-soft);
}
.gallery__img--big { aspect-ratio: 915 / 706; }

/* =========================================================
   Планшет 640–1024 (фрейм 640)
   ========================================================= */
@media (max-width: 1024px) {
  .pr-hero__intro { grid-column: 1 / span 5; }
  .pr-hero__title { max-width: 330px; }

  /* Плашка: текст слева, фото справа во всю высоту; заголовок во фреймах 20px — средний размер */
  .pr-featured__body { padding: 20px 15px 30px; }
  .pr-featured__title { font-size: var(--fs-h2); line-height: 1.2; }
  .pr-featured__img { aspect-ratio: auto; min-height: 100%; }
  .pr-featured__text {
    max-width: none;
    margin-top: 0;
    padding-top: var(--gap-title);
  }
  .pr-featured__btn { margin-top: 30px; }

  /* Галерея: подпись 1–2, заголовок с 3-й, стрелки под фото слева от большого */
  .gallery__label { grid-column: 1 / span 2; }
  .gallery__title {
    grid-column: 3 / -1;
    max-width: none;
  }
  .gallery__nav {
    grid-column: 3 / -1;
    justify-self: start;
    order: 1;
    margin-top: 15px;
  }
  .gallery__slide {
    grid-template-columns: 141fr 298fr 141fr;
    column-gap: var(--gutter);
  }
  .gallery__img { aspect-ratio: 141 / 134; }
  .gallery__img--big { aspect-ratio: 298 / 307; }
}

/* Вертикальный экран: карта ниже заголовка, чтобы текст не ложился на метки */
@media (max-width: 1024px) and (orientation: portrait) {
  .pr-hero__img {
    top: auto;
    height: 72%;
    object-position: 60% 50%;
  }
}

/* =========================================================
   Мобильный ≤639 (фрейм 320)
   ========================================================= */
@media (max-width: 639px) {
  .pr-hero__intro { grid-column: 1 / -1; }
  .pr-hero__title { max-width: 290px; }

  /* Плашка: фото сверху, текст под ним */
  .pr-featured__box { grid-template-columns: minmax(0, 1fr); }
  .pr-featured__img {
    aspect-ratio: 300 / 233;
    min-height: 0;
  }
  .pr-featured__body { padding: 15px 15px 30px; }
  .pr-featured__text { padding-top: 15px; }
  .pr-featured__btn { margin-top: 20px; }

  /* Галерея: по одному фото на слайд, стрелки слева под фото */
  .gallery__label,
  .gallery__title,
  .gallery__nav { grid-column: 1 / -1; }
  .gallery__title { margin-top: var(--gap-label); }
  .gallery__slide { display: contents; }
  .gallery__img,
  .gallery__img--big {
    flex: 0 0 100%;
    aspect-ratio: 300 / 307;
    scroll-snap-align: start;
  }
}