/* ==========================================================================
   Страница проекта (Страница проекта_02) — Figma node 3539:2660
   (fileKey o1dtSkoTovK5La7uhTgo3C). Шапка/крошки/футер переиспользованы,
   бейдж "КЕЙС ГОДА" и заголовок кейса — те же классы, что на странице
   «Проекты» (.proj-case__badge/.proj-case__title-text).
   ========================================================================== */

/* --- Hero (node 3539:2786) --- */
.pd-hero {
  margin-top: 16px; /* как .arch-crumbs/.arch-hero — единый отступ от шапки на всех целевых страницах, было 40px */
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.pd-hero__media {
  position: relative;
  height: 650px;
  padding: 30px 0 0 30px;
}

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

.pd-hero__title {
  width: 100%;
}

/* --- Мета-таблица + описание (node 3539:2795) --- */
.pd-meta {
  margin-top: 64px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  width: 100%;
}

.pd-meta__table {
  display: flex;
  gap: 40px;
  height: 160px;
  align-items: center;
  width: 477px;
}

.pd-meta__labels {
  width: 225px;
  font-family: 'DINPro Regular', 'Inter', Arial, sans-serif;
  font-size: 16px;
  color: rgba(0, 0, 0, 0.5);
}

.pd-meta__labels p {
  line-height: 32px;
}

.pd-meta__values {
  font-family: 'DINPro Medium', 'Inter', Arial, sans-serif;
  font-size: 18px;
  color: #000;
  white-space: nowrap;
}

.pd-meta__values p {
  line-height: 32px;
}

/* --- Характеристики рядами (см. projects/project_page.html) ---
   Замена двухколоночной конструкции выше. В макете подписи и значения
   были двумя НЕЗАВИСИМЫМИ столбцами <p>, выровненными только совпадением
   line-height: стоило одной подписи ("Ландшафтный дизайн") или значения
   перенестись на две строки — и все пары ниже съезжали друг относительно
   друга. Плюс white-space:nowrap не давал длинному значению из БД
   ("г. Екатеринбург, спортивный комплекс «Калининец»") перенестись —
   оно вылезало за пределы колонки прямо на текст описания справа.
   Рядами обе проблемы невозможны по построению, внешне то же самое. */
.pd-meta__row {
  display: flex;
  gap: 40px;
  align-items: baseline;
  width: 100%;
}

.pd-meta__label {
  width: 225px;
  flex-shrink: 0;
  font-family: 'DINPro Regular', 'Inter', Arial, sans-serif;
  font-size: 16px;
  line-height: 32px;
  color: rgba(0, 0, 0, 0.5);
}

.pd-meta__value {
  flex: 1;
  min-width: 0;   /* без этого flex-элемент не даёт длинному тексту переноситься */
  font-family: 'DINPro Medium', 'Inter', Arial, sans-serif;
  font-size: 18px;
  line-height: 32px;
  color: #000;
}

/* Контейнер под ряды: высота по содержимому (характеристик может быть
   и 4, и 6), но не ниже макетных 160px. :has() — чтобы не трогать
   старую двухколоночную вёрстку, если её где-то ещё используют. */
.pd-meta__table:has(.pd-meta__row) {
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  gap: 0;
  height: auto;
  min-height: 160px;
  flex-shrink: 0;
}

.pd-meta__text {
  width: 600px;
  max-width: 100%;
  font-family: 'DINPro Regular', 'Inter', Arial, sans-serif;
  font-size: 16px;
  color: rgba(0, 0, 0, 0.6);
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}

.pd-meta__text p {
  line-height: 22px;
}

/* --- Галерея + карточка формы (node 3539:2906) --- */
.pd-gallery-section {
  margin-top: 100px;
}

.pd-gallery {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.pd-gallery-big {
  width: 100%;
  height: 650px;
  position: relative;
  overflow: hidden;
}

.pd-gallery-big img,
.pd-gallery-big video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pd-gallery-row {
  display: flex;
  align-items: center;
  gap: 24px;
}

.pd-gallery-tall {
  width: 588px;
  height: 648px;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}

.pd-gallery-tall img,
.pd-gallery-tall video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pd-gallery-stack {
  width: 588px;
  display: flex;
  flex-direction: column;
  gap: 32px;
  flex-shrink: 0;
}

.pd-gallery-half {
  width: 100%;
  height: 308px;
  position: relative;
  overflow: hidden;
}

.pd-gallery-half img,
.pd-gallery-half video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --- Карточка формы "хотите реализовать такой проект вместе?" (node 3539:2814) --- */
.pd-form-card {
  width: 588px;
  height: 648px;
  box-sizing: border-box;
  flex-shrink: 0;
  background: #F6F1E9;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 56px 52px;
}

.pd-form-inner {
  width: 406px;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

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

.pd-form__body {
  display: flex;
  flex-direction: column;
  gap: 32px;
  width: 100%;
}

.pd-form__fields-wrap {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
}

.pd-form__label {
  font-family: 'DINPro Cond Regular', 'Inter', Arial, sans-serif;
  font-weight: 400;
  font-size: 24px;
  color: rgba(0, 0, 0, 0.7);
  text-transform: uppercase;
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}

.pd-form__fields {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}

.pd-form__input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  border: 1px solid rgba(0, 0, 0, 0.6);
  background: transparent;
  padding: 14px 20px;
  font-family: 'DINPro Regular', 'Inter', Arial, sans-serif;
  font-size: 16px;
  line-height: 22px;
  color: rgba(0, 0, 0, 0.6);
}

.pd-form__input::placeholder {
  color: rgba(0, 0, 0, 0.6);
}

.pd-form__consent {
  display: flex;
  flex-direction: column;
  gap: 32px;
  width: 100%;
}

.pd-form__check-row {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  cursor: pointer;
}

.pd-form__checkbox {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  box-sizing: border-box;
  margin: 2px 0 0;
  border: 1px solid rgba(0, 0, 0, 0.6);
  border-radius: 0;
  padding: 0;
  appearance: none;
  background: #fff;
  cursor: pointer;
}

.pd-form__checkbox:checked {
  background: #516b43;
  box-shadow: inset 0 0 0 2px #fff;
}

.pd-form__checkbox:focus-visible {
  outline: 2px solid #e2480a;
  outline-offset: 2px;
}

.pd-form__check-text {
  font-family: 'DINPro Regular', 'Inter', Arial, sans-serif;
  font-size: 12px;
  line-height: 16px;
  color: rgba(0, 0, 0, 0.6);
}

.pd-form__check-text a {
  color: inherit;
  text-decoration: underline;
}

.pd-form__submit {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 50px;
  border: none;
  background: #E2480A;
  color: #fff;
  font-family: 'DINPro Cond Medium', 'Inter', Arial, sans-serif;
  font-size: 18px;
  letter-spacing: 0.9px;
  text-transform: uppercase;
  cursor: pointer;
}

.pd-form__contact {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.pd-form__contact-label {
  font-family: 'DINPro Cond Regular', 'Inter', Arial, sans-serif;
  font-weight: 400;
  font-size: 24px;
  color: rgba(0, 0, 0, 0.7);
  text-transform: uppercase;
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}

.pd-form__contact-phone {
  font-family: 'DINPro Cond Regular', 'Inter', Arial, sans-serif;
  font-weight: 400;
  font-size: 30px;
  color: #E2480A;
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}

/* --- Награды / Публикации (node 3539:2896) --- */
.pd-awards {
  margin-top: 100px;
}

.pd-awards__panel {
  width: 100%;
  aspect-ratio: 1207 / 542;
  position: relative;
  overflow: hidden;
  background: #E4E4E4;
}

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

.pd-awards__map {
  position: absolute;
  inset: 0;
}

/* Ч/б только тайловый слой карты, не метка — тот же приём, что и в
   .map-section__map на Главной (см. style.css), substring-селектор
   переживает смену версии API Yandex Maps. */
.pd-awards__map [class*="ground-pane"] {
  filter: grayscale(1);
}

.pd-awards__cols {
  margin-top: 64px;
  display: flex;
  gap: 40px;
  align-items: center;
  padding: 24px 0;
}

.pd-awards__col {
  flex: 1 0 0;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.pd-awards__col-title {
  font-family: 'DINPro Cond Regular', 'Inter', Arial, sans-serif;
  font-weight: 400;
  font-size: 30px;
  line-height: 1.1;
  color: #000;
  text-transform: uppercase;
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}

.pd-awards__col-text {
  font-family: 'DINPro Regular', 'Inter', Arial, sans-serif;
  font-size: 16px;
  color: rgba(0, 0, 0, 0.6);
}

.pd-awards__col-text p {
  line-height: 22px;
}

/* --- CTA "есть проект? разберем его на первой встрече" (node 3539:2849) --- */
.pd-cta {
  margin-top: 100px;
  background: #FBF8F4;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 68px;
  padding: 100px;
}

.pd-cta__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 35px;
  text-align: center;
  text-transform: uppercase;
  width: 100%;
}

.pd-cta__title {
  width: 100%;
  font-family: 'DINPro Cond Regular', 'Inter', Arial, sans-serif;
  font-weight: 400;
  font-size: 70px;
  color: #000;
}

.pd-cta__title-line {
  display: block;
  line-height: 1.1;
}

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

.pd-cta__subtitle {
  width: 100%;
  font-family: 'DINPro Regular', 'Inter', Arial, sans-serif;
  font-size: 16px;
  color: rgba(0, 0, 0, 0.6);
}

.pd-cta__subtitle p {
  line-height: 22px;
}

.pd-cta__subtitle a {
  color: #E2480A;
  text-decoration: underline;
}

.pd-cta__actions {
  display: flex;
  align-items: center;
  gap: 32px;
}

/* .pd-cta уже несёт свой нижний padding — общий .footer{margin-top:160px}
   (рассчитан на блоки без своего отступа) даёт двойной разрыв, если footer
   идёт сразу после pd-cta */
.pd-cta + .footer {
  margin-top: 0;
}