/* =========================================================================
   Проекты домов: список (/stroitelstvo-domov/proekty/) и страницы проектов.
   Список переиспользует тёмную шапку и карточки каталога объектов
   (.objects-page, .obj-card); здесь — фильтр-кнопки и страница проекта.
   ========================================================================= */

/* ---------- Фильтр списка: два выпадающих списка ----------
   Базовый .dd/.dd__btn/.dd__list — из pages.css; здесь раскладка и работа
   на нативном <details> (открывается и без JS). */
.proj-filters {
  position: relative; z-index: 3; display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: center;
  gap: 12px; margin-top: 56px; text-align: left;
  font-size: var(--filter-control-size, 16px); line-height: 1.3;
}
.proj-select { min-width: 220px; }
.proj-status { display: flex; align-items: center; gap: 16px; margin-left: auto; }
.proj-count { color: rgb(247 244 239 / 65%); white-space: nowrap; }
.proj-select > summary { display: block; list-style: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.proj-select > summary::-webkit-details-marker { display: none; }
.proj-select > summary::marker { content: ""; }
.proj-select > summary.is-set { background: var(--color-accent); color: #fff; }
.proj-select > summary.is-set { padding-right: 76px; }
.dd__clear {
  position: absolute; right: 44px; top: 50%; width: 24px; height: 24px; margin-top: -12px; padding: 0;
  border: 0; border-radius: 50%; background: transparent; color: inherit; cursor: pointer;
  transition: background-color .2s ease;
}
.dd__clear::before, .dd__clear::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.5px; margin: -1px 0 0 -6px;
  background: currentColor; transform: rotate(45deg);
}
.dd__clear::after { transform: rotate(-45deg); }
.dd__clear:hover { background: rgb(255 255 255 / 20%); }
.dd__clear:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }
.proj-select[open] > .dd__list { opacity: 1; visibility: visible; transform: none; transition: none; }
.proj-select[open] > .dd__btn::after { transform: rotate(-135deg); margin-top: -2px; }
.proj-select .dd__list { left: 0; right: auto; min-width: max(100%, 240px); }
.proj-select .dd__opt { display: block; font: inherit; color: rgb(247 244 239 / 80%); text-decoration: none; }
.proj-select a.dd__opt:hover, .proj-select a.dd__opt:focus-visible { color: #fff; background: rgb(255 255 255 / 8%); }
.proj-select .dd__opt[aria-current] { color: var(--color-accent); background: rgb(255 255 255 / 8%); }
.proj-select .dd__opt span { opacity: .5; font-size: .875em; margin-left: 4px; }
.proj-select .dd__opt.is-empty { opacity: .45; }
.proj-reset { padding: 12px 20px; border-radius: 999px; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 25%); color: rgb(247 244 239 / 85%); text-decoration: none; transition: background-color .2s ease, color .2s ease; }
.proj-reset:hover { background: rgb(255 255 255 / 8%); }
.proj-reset:hover { color: #fff; }
.proj-reset[hidden] { display: none; }
@media (max-width: 640px) {
  .proj-filters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 40px; }
  .proj-select { min-width: 0; }
  .proj-select:nth-of-type(2) .dd__list { left: auto; right: 0; }
  .proj-status { grid-column: 1 / -1; justify-content: space-between; margin-left: 0; }
}

/* ---------- Страница проекта: тёмная шапка как у каталога ---------- */
.proekt-page { --proekt-hero: #2b2a29; background: var(--proekt-hero); }
.proekt-hero {
  background: var(--proekt-hero); color: #f7f4ef; padding-bottom: clamp(48px, 5.7vw, 110px);
}
.proekt-hero .page-hero__title { color: #fff; max-width: 18ch; }
.proekt-hero .page-hero__lead { color: rgb(247 244 239 / 72%); max-width: 820px; }
.proekt-hero .breadcrumbs, .proekt-hero .breadcrumbs a { color: rgb(247 244 239 / 60%); }
.proekt-hero .breadcrumbs a:hover { color: #fff; }
.proekt-hero .breadcrumbs [aria-current] { color: rgb(247 244 239 / 85%); }
html .proekt-page .page-hero .btn-line {
  color: var(--btn-dark-text); border-color: var(--btn-dark-line); background: transparent; opacity: 1;
}

/* Тёмный фон кончается на середине главного слайда — как на страницах объектов */
.proekt-page { --pcar-half: calc(62.5vw * 9 / 32); }
@media (max-width: 900px) { .proekt-page { --pcar-half: calc(86vw * 9 / 32); } }
.proekt-gallery {
  margin-top: 0; padding-bottom: 8px;
  /* Тёмная часть прозрачна: сквозь неё виден узор шапки, продлённый до конца тёмной плашки */
  background: linear-gradient(transparent 0 var(--pcar-half), var(--color-bg) var(--pcar-half));
}
.proekt-hero.page-hero--pattern::before { bottom: calc(-1 * var(--pcar-half)); }
/* затухание узора вниз — только у самого края плашки, а не с её середины */
.proekt-hero.page-hero--pattern::before {
  -webkit-mask-image: linear-gradient(100deg, transparent 18%, #000 50%, transparent 82%), linear-gradient(#000 82%, transparent);
          mask-image: linear-gradient(100deg, transparent 18%, #000 50%, transparent 82%), linear-gradient(#000 82%, transparent);
}
.proekt-gallery .pcar__slide { background: var(--proekt-hero); }

/* ---------- О проекте ---------- */
.proekt-about { background: var(--color-bg); }
.proekt-about__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 64px; align-items: start; }
.proekt-about__text { margin-top: 20px; max-width: 620px; font-size: var(--p-size); line-height: 1.6; color: var(--color-text); }
.proekt-about .section__title { margin-bottom: 0; }
.proekt-about__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }
.proekt-floor { margin: 0 0 12px; }
.proekt-floor a { position: relative; display: flex; align-items: center; justify-content: center; padding: 20px; border: 1px solid rgb(43 42 41 / 12%); border-radius: 24px; background: #fff; }
.proekt-floor a::after { content: ""; position: absolute; inset: 0; } /* перехватывает наведение: плашка «Распознать текст» Яндекс.Браузера на img не появляется */
.proekt-floor img { display: block; width: auto; max-width: 100%; max-height: 460px; height: auto; }
.proekt-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0; }
.proekt-facts > div { padding: 20px 24px; border-radius: 20px; background: var(--color-sand); }
.proekt-facts dt { font-size: var(--p-small-size); color: var(--color-muted); }
.proekt-facts dd { margin: 6px 0 0; font-size: 24px; font-weight: 500; line-height: 1.25; color: var(--color-ink); }
.proekt-room-groups { margin-top: var(--space-md); }
.proekt-rooms + .proekt-rooms__title { margin-top: var(--space-md); }
.proekt-rooms__title { margin: 0 0 8px; font-size: var(--card-title-size); font-weight: 500; line-height: 1.3; color: var(--color-ink); }
.proekt-rooms { margin: 0; padding: 0; list-style: none; }
.proekt-rooms li {
  display: flex; justify-content: space-between; gap: 24px; padding: 14px 0;
  border-bottom: 1px solid rgb(43 42 41 / 12%); font-size: var(--p-size); line-height: 1.4; color: var(--color-text);
}
.proekt-rooms li span:last-child { flex: none; text-align: right; color: var(--color-ink); }
@media (max-width: 900px) {
  .proekt-about__grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .proekt-facts > div { padding: 16px 18px; }
  .proekt-facts dd { font-size: 20px; }
}
@media (max-width: 560px) {
  .proekt-actions, .proekt-about__actions { flex-direction: column; }
  .proekt-about__actions > * { width: 100%; }
}

/* ---------- Планировка ---------- */

/* ---------- Другие проекты ---------- */
.proekt-related { background: var(--color-sand); }
.proekt-related__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 40px; }
.proekt-related__head .section__title { margin: 0; }
.proekt-related { container-type: inline-size; }
.proekt-related__track { display: flex; gap: 24px; overflow-x: auto; overflow-y: hidden; padding-block: 20px; margin-block: -20px; overscroll-behavior-y: auto; scroll-snap-type: x mandatory; width: 100%; padding-inline: var(--carousel-edge); scroll-padding-inline: var(--carousel-edge); }
.proekt-related__track > .obj-card { flex: 0 0 clamp(300px, 30vw, 440px); scroll-snap-align: start; }
@media (max-width: 640px) {
  .proekt-related__track { gap: 16px; }
  .proekt-related__track > .obj-card { flex-basis: 85vw; }
  .proekt-related__head { flex-direction: column; align-items: flex-start; gap: 20px; margin-bottom: 28px; }
}
/* карточки вне каталога: светлая подложка и своя пропорция фото */
.proekt-page .obj-card__media.img-reveal { aspect-ratio: 3 / 2; height: auto; }
.proekt-related .obj-card { background: var(--color-bg); }
.proekt-related { background: var(--color-sand); }
.proekt-page .obj-card__status { background: rgb(173 141 108 / 88%); }
.objects-page .obj-card__status { background: rgb(43 42 41 / 70%); }

/* Шапка страницы проекта: всё по центру (крошки остаются слева, как в каталоге) */
.proekt-hero { text-align: center; }
.proekt-hero .breadcrumbs { justify-content: flex-start; text-align: left; }
.proekt-hero .page-hero__title { max-width: none; margin-inline: auto; }
.proekt-hero .page-hero__lead { margin-inline: auto; }
.proekt-hero .page-hero__actions { justify-content: center; }
/* Обе кнопки шапки одной ширины (у «Планировки» из base.css — 220px) */
.proekt-hero .btn-fill { min-width: 220px; justify-content: center; }

/* Пробный кадр: сохраняем весь ракурс без запаса и увеличения карусели. */
.proekt-gallery .pcar__slide--full-frame .pcar__media > img {
  top: 0;
  height: 100%;
  object-fit: cover; /* без полос по краям при соотношении сторон не 16:9 */
  translate: none;
  transform: none;
}

/* Утверждённые кадры проектов: полный ракурс без дополнительного кропа. */
.proekt-page .proekt-gallery .pcar__media.img-reveal > img {
  top: 0;
  height: 100%;
  object-fit: cover; /* без полос по краям при соотношении сторон не 16:9 */
  translate: none;
  transform: none;
}

/* Список: фото с параллаксом при прокрутке (запас 20% высоты рамки и сдвиг — в base.css) */
.proekty-list-page .obj-card__media.img-reveal > img { transform: none; }

/* Карточки используют тот же полный кадр, что и галерея проекта. */
.proekty-list-page .obj-card__media.img-reveal,
.proekt-page .proekt-related .obj-card__media.img-reveal {
  aspect-ratio: 16 / 9;
  height: auto;
}
.proekt-page .proekt-related .obj-card__media.img-reveal > img {
  top: 0;
  height: 100%;
  object-fit: cover; /* без полос по краям при соотношении сторон не 16:9 */
  translate: none;
  transform: none;
}

/* Светлая кромка по краю кадра в галерее: подложка рамки и шторка появления
   были светлыми и просвечивали на сглаженном крае; делаем их цвета шапки,
   а кадр — с запасом в 1px по бокам. */
.proekt-gallery .img-reveal,
.js .proekt-gallery .img-reveal::after { background: var(--proekt-hero); }
.proekt-gallery .pcar__media.img-reveal > img { left: -1px; width: calc(100% + 2px); max-width: none; }

/* Иконки в строке характеристик карточки — на пиксель выше, по оптической середине текста */
.proekty-list-page .obj-card__specs .icon,
.proekt-page .obj-card__specs .icon { position: relative; top: -1px; }

/* ---------- Мобилка: строка «Проектов / Сбросить», кнопки героя проекта ---------- */
@media (max-width: 640px) {
  /* счётчик на одной вертикали с текстом в «Все типы» (внутренний отступ селекта 20px),
     воздуха сверху и снизу на 2px больше */
  .proj-status { padding: 2px 0 2px 20px; }
  /* «Сбросить» — призрачная кнопка без обводки */
  .proj-reset { box-shadow: none; }
  /* две кнопки героя проекта — одной ширины, друг под другом */
  .proekt-hero .page-hero__actions { flex-direction: column; align-items: stretch; }
  .proekt-hero .page-hero__actions > .btn-fill,
  .proekt-hero .page-hero__actions > .btn-line { width: 100%; }
}

/* Страница проекта: левый текстовый блок «О проекте» едет вместе с экраном, пока справа длинная колонка планировки и характеристик */
@media (min-width: 901px) {
  .proekt-about__main { position: sticky; top: calc(var(--header-h, 80px) + 24px); }
}