/* ==========================================================================
   Карточка объекта и сетки объектов

   Макет: главная 1:496 (сетка 2×2, карточка 910×598 с точечными лидерами),
   страница объектов 1:1907 (сетка 4×2, карточка 1:3930 — 445×547 с бейджами
   и описанием). Файл подключается на главной, на списке объектов и на
   карточке объекта (блок «Другие реализованные объекты», нода 1:2458).

   Два варианта карточки — это два разных компонента макета, а не одна
   карточка с модификатором. Поэтому общего в `.project-card` оставлено
   ровно столько, сколько совпадает у обоих: колонка и серая заливка.
   Размеры, отступы и радиусы у каждого варианта свои.
   ========================================================================== */

.projects__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

/* Сетка списка объектов, нода 1:1907 (1840×1118).
   Колонки 445, шаг по горизонтали 20 (465 − 445), по вертикали 24
   (Row 2 на y=571 при высоте ряда 547). Шаги разные — так в макете. */
.projects-archive__grid {
  --projects-col-gap: 20px;
  --projects-row-gap: 24px;

  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--projects-row-gap) var(--projects-col-gap);
}

.project-card {
  display: flex;
  flex-direction: column;
  /* Ячейка сетки по умолчанию не уже своего min-content, а min-content
     карточки тянет за собой натуральную ширину фото. Без min-width:0
     карточка вылезает из колонки и даёт странице горизонтальный скролл. */
  min-width: 0;
  background: var(--color-bg-soft);
}

/* Фильтр по отрасли прячет карточки через `hidden` (assets/js/main.js).
   Без этой строки display:flex перебивает атрибут и карточки не прячутся. */
.project-card[hidden] { display: none; }

.project-card__media {
  display: block;
  overflow: hidden;
  background: var(--color-border-soft);
}

.project-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-card) var(--ease-out);
}

.project-card:hover .project-card__media img { transform: scale(1.03); }

/* --- Вариант «rows»: главная, нода 1:3984 «card content» ------------------
   910×598: padding 32, радиус 24, фото 858×308 с радиусом 32, до блока
   с текстом 39 px. Высота карточки в макете жёсткая, и на неё завязана
   вся секция (1:496 — ровно 1414). Поэтому min-height: у объектов, где
   заказчик не заполнил «Объем» и «Сроки», строк лидеров меньше трёх,
   и без него ряд сетки уезжает вверх. */

.project-card--rows {
  gap: 39px;
  min-height: 598px;
  padding: var(--space-32);
  border-radius: var(--radius-lg);
}

.project-card--rows .project-card__media {
  height: 308px;
  flex-shrink: 0;
  border-radius: var(--radius-xl);
}

/* Нода 1:3986: строка с названием, ниже через 32 px точечные лидеры. */
.project-card--rows .project-card__details {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: var(--space-32);
}

.project-card--rows .project-card__body {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-24);
}

/* Лидеры прижаты к низу: в макете строк всегда три, а в базе бывает одна. */
.project-card--rows .dot-rows { margin-top: auto; }

/* Нода 1:3988 — заголовок в одну строку (whitespace-nowrap), от него
   и считается высота карточки 598. Названия объектов у заказчика длиннее
   рыбы «Название объекта», поэтому лишнее уходит в многоточие: иначе
   вторая строка ломает высоту всей секции. */
.project-card--rows .project-card__title {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: var(--fs-32);
  font-weight: var(--fw-medium);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-32);
}

.project-card--rows .link-more { flex-shrink: 0; }

/* --- Вариант «badges»: список объектов, нода 1:3930 -----------------------
   445×547, padding 24, радиус 24, внутренний шаг 20. Высота карточки в
   макете фиксированная, поэтому заголовок зажат в две строки, а описание —
   в три: иначе карточки в ряду разъедутся по высоте от длины текста. */

.project-card--badges {
  gap: 20px;
  padding: var(--space-24);
  border-radius: var(--radius-lg);
}

.project-card--badges .project-card__media {
  height: 240px;
  border-radius: var(--radius-md);
  flex-shrink: 0;
}

.project-card__badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
}

/* Бейдж, ноды 1:3933 (синий) и 1:3935 (серый), высота 35 = 8 + 19 + 8.
   Обводка серого бейджа в макете того же цвета, что и заливка, — рисовать
   её отдельно незачем, она бы только добавила 2 px к высоте. */
.project-badge {
  display: inline-flex;
  align-items: center;
  padding: var(--space-8) var(--space-16);
  border-radius: var(--radius-pill);
  background: var(--color-border-soft);
  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);
}

.project-badge--industry {
  background: var(--color-brand);
  color: var(--color-text-invert);
}

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

.project-card--badges .project-card__title {
  /* Нода 1:3940: 24 Medium, две строки (58 px в макете). */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  min-height: calc(var(--fs-24) * var(--lh-tight) * 2);
  font-size: var(--fs-24);
  font-weight: var(--fw-medium);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-24);
}

.project-card--badges .project-card__excerpt {
  /* Нода 1:3941: 16 Regular серым, три строки (57 px в макете). */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  min-height: calc(var(--fs-16) * var(--lh-tight) * 3);
  margin: 0;
  font-size: var(--fs-16);
  font-weight: var(--fw-regular);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-16);
  color: var(--color-text-muted);
}

/* Ссылка «Подробнее» прижата к низу: у карточек с коротким описанием
   иначе поднимается и ломает ряд. */
.project-card--badges .link-more { margin-top: auto; align-self: flex-start; }

/* --- Строки с точечным лидером --------------------------------------------
   Карточка главной: подпись слева, значение справа, между ними точки. */

/* Ноды 1:3990–1:4002: шаг между строками 16, внутри строки тоже 16,
   текст 20 Regular с межстрочным 1.4 — строка ровно 28 px. */

.dot-rows {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  margin: 0;
}

.dot-row {
  display: flex;
  align-items: center;
  gap: var(--space-16);
  font-size: var(--fs-20);
  line-height: var(--lh-loose);
  letter-spacing: var(--ls-20);
}

.dot-row dt {
  flex-shrink: 0;
  color: var(--color-text-muted);
}

.dot-row::before {
  content: '';
  order: 1;
  flex: 1 1 auto;
  align-self: center;
  height: 1px;
  border-bottom: 1px dotted var(--color-border);
}

.dot-row dd {
  order: 2;
  flex-shrink: 0;
  margin: 0;
  text-align: right;
}

/* --- Ниже 1920 px ----------------------------------------------------------
   Планшета и мобильной версии в макете нет (все 42 ноды под 1920), сетка
   ниже — решение вёрстки. Карточка 445 px не сжимается меньше ~300, поэтому
   колонки убираем по одной. */

@media (max-width: 1400px) {
  .projects-archive__grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 1100px) {
  .projects-archive__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 800px) {
  .projects__grid,
  .projects-archive__grid { grid-template-columns: 1fr; }
  .project-card--rows .project-card__body { flex-direction: column; }
  .project-card--rows .project-card__title { font-size: var(--fs-24); }
}

/* Ниже 1920 карточка становится уже подписи: без min-width флекс-элементы
   не сжимаются до многоточия, а вылезают за экран. */
.project-card,
.project-card__details,
.project-card__body { min-width: 0; }

/* Ниже 900 `.project-card__body` разворачивается в колонку, и ширину
   заголовка задаёт уже не flex-shrink, а align-items: без max-width строка
   с nowrap растягивается до max-content и вылезает за экран. */
.project-card__title { max-width: 100%; }

/* `flex-shrink: 0` у подписи и значения верен на 1920, где строка заведомо
   помещается. На узком экране значение переставало сжиматься и вылезало за
   карточку — разрешаем ему сжиматься и переносить длинные слова. */
.dot-row dt,
.dot-row dd { min-width: 0; overflow-wrap: anywhere; }

@media (max-width: 900px) {
  .dot-row dd { flex-shrink: 1; }
}

/* --- Телефон: размеры, не попавшие в блоки выше ---------------------------- */
@media (max-width: 700px) {
  /* Жёсткая высота 598 нужна десктопной сетке 2×2; в колонку она
     оставляет пустоту под текстом. */
  .project-card--rows { min-height: 0; }
  .project-card--rows .project-card__media { height: 200px; }

  /* Селектор с модификаторами: у обоих вариантов карточки заголовок задан
     двумя классами, и одиночный .project-card__title им проигрывает. */
  .project-card__title,
  .project-card--rows .project-card__title,
  .project-card--badges .project-card__title { font-size: var(--fs-20); letter-spacing: var(--ls-20); }
}

/* --- Телефон: карточки во весь экран (см. пояснение в front-hero.css) ------ */
@media (max-width: 700px) {
  .project-card--rows {
    margin-inline: calc(var(--side-padding) * -1);
    border-radius: 0;
  }
}