/* ==========================================================================
   Карточка объекта — макет 1:2378 (1920×3358).

   Экран из двух колонок по 910 с шагом 20 (нода 1:2380, 1840×1360):
   слева галерея (1:2382), справа весь текст (1:2389). Высоту задаёт
   правая колонка, левая короче — так в макете.

   Карточки в блоке «Другие реализованные объекты» те же, что на списке
   объектов, они лежат в front-projects.css.
   ========================================================================== */

/* Крошки в макете на y=222, шапка кончается на 190 — сверху 32. */
.project-single {
  padding-block: var(--space-32) 0;
}

.project-single__cols {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  align-items: start;
}

/* --- Галерея, ноды 1:2382–1:2388 ------------------------------------------
   Фото 910×520 и под ним четыре превью по 200 в высоту, шаг 12, радиус 12
   у всех пяти. */

/* min-width:0 у обеих колонок: иначе ячейка сетки не сжимается уже своего
   min-content, а у галереи это натуральная ширина фото, у правой колонки —
   таблица состава поставки. На узком экране это давало горизонтальный
   скролл всей странице. */
.project-gallery,
.project-main { min-width: 0; }

.project-gallery {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}

.project-gallery__hero,
.project-gallery__thumb {
  margin: 0;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-bg-soft);
}

.project-gallery__hero { aspect-ratio: 910 / 520; }

.project-gallery__hero img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.project-gallery__thumbs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-12);
}

.project-gallery__thumb { height: 200px; }

.project-gallery__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --- Правая колонка, нода 1:2389 ------------------------------------------ */

.project-main {
  display: flex;
  flex-direction: column;
  gap: var(--space-32);
}

.project-main__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
}

/* Бейджи те же, что в карточке списка, но шаг 12, а не 8 (нода 1:2391). */
.project-main__head .project-card__badges { gap: var(--space-12); }

.project-main__heading {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
}

/* Нода 1:2399: 40 Medium — на карточке объекта H1 меньше, чем на остальных
   внутренних страницах (там 48). */
.project-single__title {
  font-size: var(--fs-40);
  font-weight: var(--fw-medium);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-40);
}

.project-single__summary {
  font-size: var(--fs-20);
  font-weight: var(--fw-regular);
  line-height: var(--lh-loose);
  letter-spacing: var(--ls-20);
  color: var(--color-text-muted);
}

/* Нода 1:2401 — линия на всю ширину колонки. */
.project-single__rule {
  height: 1px;
  margin: 0;
  border: 0;
  background: var(--color-border-soft);
}

/* --- Серые панели, нода 1:2402 --------------------------------------------
   Три панели с шагом 12, у каждой padding 32 и радиус 32. */

.project-panels {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}

.project-panel {
  padding: var(--space-32);
  border-radius: var(--radius-xl);
  background: var(--color-bg-soft);
}

.project-panel__title {
  margin: 0 0 var(--space-48);
  font-size: var(--fs-32);
  font-weight: var(--fw-medium);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-32);
}

/* Серый описания проекта (нода 1:2416) светлее, чем text_grey в лиде выше, —
   это второй серый макета, он заведён токеном `--color-text-faint`. */
.project-panel__text {
  font-size: var(--fs-20);
  font-weight: var(--fw-regular);
  line-height: var(--lh-loose);
  letter-spacing: var(--ls-20);
  color: var(--color-text-faint);
}

.project-panel__text > :first-child { margin-top: 0; }
.project-panel__text > :last-child { margin-bottom: 0; }
.project-panel__text p + p { margin-top: var(--space-24); }

/* --- Показатели, ноды 1:2403–1:2412 ---------------------------------------
   Три колонки в одной панели, шаг 48, значение синим 32, подпись серым 16. */

.project-facts {
  display: flex;
  gap: var(--space-48);
}

.project-fact {
  display: flex;
  flex: 1 1 0;
  min-width: 0;
  flex-direction: column;
  gap: var(--space-8);
}

.project-fact__value {
  font-size: var(--fs-32);
  font-weight: var(--fw-medium);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-32);
  color: var(--color-brand);
}

.project-fact__label {
  font-size: var(--fs-16);
  font-weight: var(--fw-medium);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-16);
  color: var(--color-text-muted);
}

/* --- Состав поставки, нода 1:2419 -----------------------------------------
   Таблица 846 в рамке с радиусом 16: шапка серая, строки через одну белые.
   Колонки в макете: 350 / 150 по центру / 250, между ними 24, по краям 24.
   Отсюда фиксированная раскладка и ширины боксов 174 и 286 — с ними текст
   переносится там же, где в макете, и строка выходит те же 70 px. */

.project-table__frame {
  --project-table-radius: 16px;

  border-radius: var(--project-table-radius);
  border: 1px solid var(--color-border-soft);
  overflow: hidden;
}

.project-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  font-size: var(--fs-16);
  font-weight: var(--fw-medium);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-16);
}

.project-table th,
.project-table td {
  padding: var(--space-16) var(--space-12);
  text-align: left;
  vertical-align: top;
  /* Разделитель тенью, а не border: в макете обводка нарисована внутрь и
     высоту строки (70 px) не увеличивает. */
  box-shadow: inset 0 -1px 0 var(--color-border-soft);
}

.project-table th:first-child,
.project-table td:first-child { padding-left: var(--space-24); }

.project-table th:last-child,
.project-table td:last-child { padding-right: var(--space-24); }

.project-table thead th {
  background: var(--color-bg-soft);
  font-weight: var(--fw-medium);
  color: var(--color-text-muted);
}

.project-table tbody tr:nth-child(odd) td { background: var(--color-bg); }
.project-table tbody tr:nth-child(even) td { background: var(--color-bg-soft); }
.project-table tbody tr:last-child td { box-shadow: none; }

.project-table__qty { width: 174px; text-align: center; }
.project-table__cat { width: 286px; color: var(--color-brand); }

.project-table thead .project-table__cat { color: var(--color-text-muted); }

/* --- Другие объекты, нода 1:2448 ------------------------------------------
   Заголовок 48 и пара круглых стрелок 44 справа, через 48 px — ряд из
   четырёх карточек. В макете стрелки есть, значит ряд листается: делаем
   его нативным горизонтальным скроллом на четыре карточки в кадре. */

/* 128 px от нижней панели до заголовка (1633 → 1761) и 190 px от ряда
   карточек до тёмной панели подвала — половину даёт страница, половину
   padding-top подвала. */
.project-others {
  margin-top: var(--section-gap-sm);
  padding-bottom: calc(var(--section-gap) / 2);
}

.project-others__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-24);
}

.project-others__title {
  margin: 0;
  font-size: var(--fs-48);
  font-weight: var(--fw-medium);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-48);
}

.project-others__nav {
  display: flex;
  flex-shrink: 0;
  gap: var(--space-12);
}

.project-others__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--color-brand);
  color: var(--color-text-invert);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}

.project-others__btn svg { display: block; width: 20px; height: 20px; }

.project-others__btn[disabled] {
  background: var(--color-bg-soft);
  color: var(--color-text-muted);
  cursor: default;
}

.project-others__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 60px) / 4);
  gap: 20px;
  margin-top: var(--space-48);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.project-others__track::-webkit-scrollbar { display: none; }
.project-others__track .project-card { scroll-snap-align: start; }

/* --- Ниже 1920 px ----------------------------------------------------------
   Планшета и мобильной в макете нет, раскладка ниже — решение вёрстки.
   Правило одно: горизонтального скролла у страницы быть не должно. */

@media (max-width: 1400px) {
  .project-others__track { grid-auto-columns: calc((100% - 40px) / 3); }
}

@media (max-width: 1100px) {
  .project-single__cols { grid-template-columns: 1fr; gap: var(--space-32); }
  .project-others__track { grid-auto-columns: calc((100% - 20px) / 2); }
  .project-panel__title { margin-bottom: var(--space-32); }
}

@media (max-width: 900px) {
  .project-single__title { font-size: var(--fs-32); }
  .project-others__title { font-size: var(--fs-32); }
  .project-facts { flex-wrap: wrap; gap: var(--space-24); }
  .project-fact { flex-basis: 40%; }
}

@media (max-width: 700px) {
  .project-panel { padding: var(--space-24); }
  .project-table { table-layout: auto; }
  .project-table__qty,
  .project-table__cat { width: auto; }
  .project-table__frame { overflow-x: auto; }
  .project-others__track { grid-auto-columns: 85%; }
  .project-gallery__thumbs { grid-template-columns: repeat(2, 1fr); }

  /* Заголовок «Другие реализованные проекты» шире экрана телефона:
     прижатые к нему стрелки вылезали за правый край и давали
     горизонтальный скролл. Переносим их под заголовок. */
  .project-others__head { flex-wrap: wrap; }
}

/* --- Телефон: размеры, не попавшие в блоки выше ---------------------------- */
@media (max-width: 700px) {
  .project-panel__title,
  .project-fact__value { font-size: var(--fs-24); letter-spacing: var(--ls-24); }

  /* Превью галереи на телефоне стоят по два в ряд — при высоте 200
     два ряда съедали весь экран. */
  .project-gallery__thumb { height: 120px; }
}