/* ==========================================================================
   Проекты_01 — Figma node 3515:4745 (fileKey o1dtSkoTovK5La7uhTgo3C)
   Шапка/хлебные крошки/футер переиспользованы 1:1 из index.html/architects.html
   (крошки — общий .arch-crumbs из architects.css).
   ========================================================================== */

/* --- Фильтр категорий (node 3515:4882) --- */
.proj-filter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: #fff;
  margin-top: 56px; /* gap до хлебных крошек: 226-170=56 */
}

.proj-search {
  display: flex;
  flex: 0 0 98.63px;
  align-items: center;
  gap: 8px;
  box-sizing: border-box;
  height: 50px;
  padding: 0 15px;
  border: 1px solid #E2480A;
  background: #fff;
  cursor: text;
}

.proj-search:focus-within,
.proj-search--filled {
  flex-basis: 173px;
}

.proj-search__icon {
  flex: 0 0 14.63px;
  width: 14.63px;
  height: 14.37px;
  background: #E2480A;
  -webkit-mask: url("../img/icon-search.d8c98b10b332.svg") center / contain no-repeat;
  mask: url("../img/icon-search.d8c98b10b332.svg") center / contain no-repeat;
  pointer-events: none;
}

.proj-search__input {
  min-width: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: #E2480A;
  font-family: 'DINPro Cond Medium', 'Inter', Arial, sans-serif;
  font-size: 18px;
  font-weight: 500;
  line-height: 50px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  cursor: text;
  appearance: none;
}

.proj-search__input::placeholder {
  color: #E2480A;
  opacity: 1;
}

.proj-search:focus-within .proj-search__input::placeholder,
.proj-search--filled .proj-search__input::placeholder {
  color: rgb(0 0 0 / 40%);
}

.proj-search__input::-webkit-search-cancel-button {
  display: none;
}

.proj-filter__item {
  display: flex;
  align-items: center;
  height: 50px;
  padding: 0 16px;
  background: #F6F1E9;
  font-family: 'DINPro Cond Medium', 'Inter', Arial, sans-serif;
  font-size: 18px;
  letter-spacing: 0.9px;
  color: #000;
  text-transform: uppercase;
  white-space: nowrap;
  border: none;
  cursor: pointer;
}

.proj-filter__item--active {
  background: #E2480A;
  color: #fff;
}

/* --- Featured-кейс (node 3604:1560) --- */
.proj-case {
  margin-top: 40px;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.proj-case__media {
  position: relative;
  height: 650px;
  padding: 30px 0 0 30px;
}

.proj-case__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.proj-case__badge {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  padding: 0 20px;
  border-radius: 99px;
  background: #E2480A;
  font-family: 'DINPro Cond Medium', 'Inter', Arial, sans-serif;
  font-size: 22px;
  color: #fff;
  text-transform: uppercase;
}

.proj-case__info {
  display: flex;
  align-items: center;
  gap: 64px;
}

.proj-case__title-col {
  flex: 1 0 0;
  min-width: 450px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.proj-case__title {
  display: flex;
  align-items: center;
  gap: 16px;
  white-space: nowrap;
}

.proj-case__title-text {
  font-family: 'DINPro Cond Medium', 'Inter', Arial, sans-serif;
  font-size: 30px;
  line-height: 1.1;
  color: #000;
  text-transform: uppercase;
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}

.proj-case__title-arrow {
  width: 20px;
  height: 21px;
  flex-shrink: 0;
}

.proj-case__city {
  font-family: 'DINPro Cond Light', 'Inter', Arial, sans-serif;
  font-weight: 300;
  font-size: 30px;
  line-height: 1.1;
  color: #000;
  text-transform: uppercase;
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}

.proj-case__text {
  flex: 1 0 0;
  font-family: 'DINPro Regular', 'Inter', Arial, sans-serif;
  font-size: 16px;
  line-height: 22px;
  color: rgba(0, 0, 0, 0.6);
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}

/* --- Сетка карточек проектов (node 3539:2560) --- */
.proj-grid {
  margin-top: 84px;
  display: flex;
  flex-direction: column;
  gap: 64px;
}

.proj-row {
  display: flex;
  align-items: flex-start;
  gap: 64px;
}

.proj-col {
  flex: 1 0 0;
  min-width: 0;
}

.proj-col--stack {
  display: flex;
  flex-direction: column;
  gap: 64px;
}

.proj-card {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.proj-card__media {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.proj-card--tall .proj-card__media {
  height: 650px;
}

.proj-card--half .proj-card__media {
  height: 308px;
}

.proj-card__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.proj-card__meta {
  display: flex;
  align-items: flex-start;
  gap: 32px;
}

.proj-card__title-col {
  flex-shrink: 0;
  min-width: 245px;
  max-width: 268px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Стрелка — фон псевдоэлемента, а не <img>, и это не украшательство,
   а единственный способ удержать её у последнего слова.

   Что не сработало и почему:
     * flex с gap (как в макете) — span становится флекс-элементом шириной
       по самой длинной строке, и на двухстрочном заголовке стрелка
       отлетает вправо-вверх. В прототипе все заголовки однострочные,
       поэтому там это не видно;
     * обычный inline-поток с <img>, даже вплотную, без пробела —
       <img> замещаемый элемент, и перенос перед ним разрешён всегда.
       Стрелка уезжала на отдельную строку одна.

   Инлайновый (не inline-block!) псевдоэлемент точек переноса вокруг себя
   не создаёт: разрыв возможен только по пробелу, а его тут нет. Ширину
   даёт padding, саму картинку — background. Если слово со стрелкой не
   влезает, они переносятся вместе, как и должны. */
.proj-card__title {
  display: block;
  /* Место под стрелку (20 ширина + 16 зазор). Инлайновый псевдоэлемент
     переносом не спасается — если не влезает, он просто переполняет
     строку. С этим отступом переполнение упирается ровно в правый край
     колонки и не налезает на описание справа, а текст переносится
     заранее, по ширине 268-36. */
  padding-right: 36px;
}

.proj-card__title-text::after {
  content: "";
  padding-left: 20px;                    /* ширина стрелки из макета */
  margin-left: 16px;                     /* тот же зазор, что давал gap */
  background: url("../img/icon-project-arrow.b242bb07a937.svg") no-repeat center / 20px 21px;
}

.proj-card__title-text {
  font-family: 'DINPro Cond Medium', 'Inter', Arial, sans-serif;
  font-size: 30px;
  line-height: 1.1;
  color: #000;
  text-transform: uppercase;
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}

.proj-card__title-arrow {
  width: 20px;
  height: 21px;
  flex-shrink: 0;
}

.proj-card__city {
  font-family: 'DINPro Cond Light', 'Inter', Arial, sans-serif;
  font-weight: 300;
  font-size: 30px;
  line-height: 1.1;
  color: #000;
  text-transform: uppercase;
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}

.proj-card__desc {
  flex: 1 0 0;
  font-family: 'DINPro Regular', 'Inter', Arial, sans-serif;
  font-size: 14px;
  line-height: 1.1;
  color: rgba(0, 0, 0, 0.6);
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}

/* --- CTA "Начать проект" (node 3515:4992) — полноширинная секция --- */
.proj-cta {
  background: #FAF8F5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 64px;
  padding: 100px;
  margin-top:84px;
}

/* На этой странице футер (node 3515:4761) в Figma начинается ровно там,
   где заканчивается CTA (node 3515:4992, y=0..474) — gap=0. Общий
   .footer{margin-top:160px} из style.css тут не подходит, переопределяем
   точечно, не трогая глобальное правило (на других страницах 160px верны). */
.proj-cta + .footer {
  margin-top: 0;
}

.proj-cta__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  text-align: center;
  text-transform: uppercase;
}

.proj-cta__eyebrow {
  font-family: 'DINPro Medium', 'Inter', Arial, sans-serif;
  font-size: 16px;
  line-height: 22px;
  color: #E2480A;
  width: 100%;
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}

.proj-cta__title {
  font-family: 'DINPro Cond Regular', 'Inter', Arial, sans-serif;
  font-weight: 400;
  font-size: 70px;
  line-height: 60px;
  color: #000;
  width: 100%;
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}

.proj-cta__title em {
  font-family: 'DINPro Cond Italic', 'Inter', Arial, sans-serif;
  font-style: italic;
}

.proj-cta__subtitle {
  font-family: 'DINPro Medium', 'Inter', Arial, sans-serif;
  font-size: 16px;
  line-height: 22px;
  color: rgba(0, 0, 0, 0.6);
  width: 100%;
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}

.proj-cta__actions {
  display: flex;
  align-items: center;
  gap: 24px;
}

.proj-cta__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  padding: 0 60px;
  font-family: 'DINPro Cond Medium', 'Inter', Arial, sans-serif;
  font-size: 18px;
  letter-spacing: 0.9px;
  text-transform: uppercase;
  white-space: nowrap;
}

.proj-cta__btn--filled {
  background: #E2480A;
  color: #fff;
}

.proj-cta__btn--outline {
  border: 1px solid #E2480A;
  color: #E2480A;
}

/* --- Карточки как ссылки ---
   В макете .proj-case и .proj-card были <section>/<div> с плейсхолдерами,
   но на живом сайте по ним кликают. Тег поменялся на <a>, поэтому гасим
   то, что браузер добавляет ссылкам сам: подчёркивание и синий цвет
   (у вложенных <p> цвет свой, но у .proj-case__title-text — inherit). */
a.proj-case,
a.proj-card,
a.proj-mob-card {
  text-decoration: none;
  color: inherit;
}

/* Небольшой отклик на наведение — в макете состояния не нарисованы,
   но кликабельный блок без реакции ощущается сломанным. */
a.proj-card .proj-card__media img,
a.proj-case .proj-case__media img {
  transition: transform 0.4s ease;
}

/* У .proj-card__media обрезка есть в макете изначально, а у .proj-case__media
   её нет — в прототипе там статичная картинка, обрезать было нечего. С нашим
   зумом по наведению она без overflow вылезала за рамку блока. Правило
   навешано на ссылочный вариант, чтобы не менять исходный класс: вдруг он
   где-то используется без ховера. */
a.proj-case .proj-case__media {
  overflow: hidden;
}

a.proj-card:hover .proj-card__media img,
a.proj-case:hover .proj-case__media img {
  transform: scale(1.03);
}

.proj-empty {
  margin: 80px 0;
  font-family: 'DINPro Regular', 'Inter', Arial, sans-serif;
  font-size: 16px;
  color: rgba(0, 0, 0, 0.6);
}

/* Крошки на страницах проектов подняты к шапке: в макете у .arch-crumbs
   тут инлайновый margin-top:20px вместо общих 40px
   (design/projects.html, design/project.html). */
body.is-projects-page .arch-crumbs,
body.is-project-detail-page .arch-crumbs {
  margin-top: 20px;
}