/* prem-house prs.css — заглушка первого экрана страниц проектов (вынесена из project.css 22.09.2026).

   Зачем отдельный файл: project.css подключён в блоке страницы ПОСЛЕ самой статики, поэтому его правила
   доезжают на 100–150 мс позже первой отрисовки — ровно столько посетитель и видел «техническую вёрстку».
   Этот файл подключается из общего служебного блока Tilda (rec2387788801), который стоит выше статики
   в документе, поэтому правила успевают к первому кадру.

   Файл маленький намеренно: он блокирует разбор страницы до своей загрузки, и это правильно — статика
   не должна отрисоваться раньше него. Ничего, кроме заглушки, сюда не добавлять.

   project.css подтягивает этот же файл через @import — страховка для страниц, где блок ещё не обновлён. */

/* ═══════════════════════════════════════════════════════════════════════════════════════════════════════
   ЗАГЛУШКА ПЕРВОГО ЭКРАНА (22.09.2026, шаг 2 раскатки «пункта 1»)

   До появления карточки посетитель видел статичный SEO-блок #ph-pr-static «технической» вёрсткой: крошки,
   длинный заголовок «Проект дома «X» в стиле Y — N м²», характеристики списком, фото в рамке, абзацы, цены.
   Здесь он приводится к виду первого экрана карточки, чтобы подмена была незаметна. Значения выверены по
   пикселям на пилоте /sovr200 (вставка ph-prs-jsmode v5, см. prem-house-audit/reports/2026-09-22-punkt1-a-v5.md).

   Почему через @media (scripting: enabled), а не через класс на html: класс пришлось бы ставить скриптом,
   а project-test.js подключён с defer и выполняется ПОЗЖЕ первой отрисовки — техническая вёрстка успела бы
   мелькнуть. Эта медиа-фича истинна только при включённом JS, поэтому правила применяются с первого кадра,
   а робот без JS и браузер с отключённым JS видят прежнюю статику со всем текстом.
   В браузерах без поддержки фичи правила просто не применяются — остаётся прежнее поведение.

   html:not(.ph-js) — чтобы не спорить с пилотом /sovr200: там заглушка живёт в самом блоке и ставит ph-js
   инлайн-скриптом ещё до разбора статики.
   ═══════════════════════════════════════════════════════════════════════════════════════════════════════ */
@media (scripting: enabled) {
  /* Тексты статики прячем, пока строится карточка. Где браузер умеет переключать display анимацией
     (Chrome 116+, Safari 17.4+, Firefox 129+ — те же, что понимают transition-behavior), скрытие задано
     анимацией с задержкой: через 6 секунд она сама возвращает содержимое. Это страховка на случай,
     когда project.css доехал, а project-test.js нет — иначе посетитель остался бы с обрезанным экраном
     и без текстов. Там, где анимации display нет, остаётся простое скрытие, а возврат делает скрипт. */
  @supports not (transition-behavior: allow-discrete) {
    html:not(.ph-js) body .ph-prs__specs,
    html:not(.ph-js) body .ph-prs p,
    html:not(.ph-js) body .ph-prs__prices,
    html:not(.ph-js) body .ph-prs__plans,
    html:not(.ph-js) body .ph-prs__photos,
    html:not(.ph-js) body .ph-prs__rel,
    html:not(.ph-js) body .ph-prs__all { display: none !important; }
  }
  @supports (transition-behavior: allow-discrete) {
    /* both, а не forwards: пока идёт шестисекундная задержка, действует кадр from (скрыто) */
    html:not(.ph-js) body .ph-prs__specs { animation: ph-prs-vernut-flex 0s step-end 6s both !important; }
    html:not(.ph-js) body .ph-prs p,
    html:not(.ph-js) body .ph-prs__prices,
    html:not(.ph-js) body .ph-prs__plans,
    html:not(.ph-js) body .ph-prs__photos,
    html:not(.ph-js) body .ph-prs__rel,
    html:not(.ph-js) body .ph-prs__all { animation: ph-prs-vernut-block 0s step-end 6s both !important; }
  }

  /* Верх секции = высота шапки + постоянный зазор до крошек. Обе величины ступенчаты по ширине окна и сняты
     с живой карточки /yrban520 (22.09.2026): шапка 63 до 600 px, 75 до 991, 141 от 992; зазор 54 до 960 и 88
     от 961. Поэтому они заданы здесь переменными по брейкпойнтам, а не одним значением «для телефона» —
     иначе на планшете крошки встали бы на 12 px выше, а на ноутбуке на 78.
     Скрипт затем уточняет --ph-prs-hdr по живой высоте шапки (inline на html перебивает эти значения) и на
     страницах с несколькими планировками добавляет --ph-prs-chips: у таких карточек полоса с ценой выше на 9 px. */
  html:not(.ph-js) { --ph-prs-hdr: 63px; --ph-prs-gap: 54px; }
  @media (min-width: 601px) { html:not(.ph-js) { --ph-prs-hdr: 75px; } }
  @media (min-width: 961px) { html:not(.ph-js) { --ph-prs-gap: 88px; } }
  @media (min-width: 992px) { html:not(.ph-js) { --ph-prs-hdr: 141px; } }

  html:not(.ph-js) body #ph-pr-static {
    position: relative;
    padding: calc(var(--ph-prs-hdr) + var(--ph-prs-gap) + var(--ph-prs-chips, 0px)) 0 0 !important;
    min-height: calc(100vh + 1px);
    background: #fff;
  }
  /* на широком экране чипы площади в полосу не добавляются — высота полосы там постоянная */
  @media (min-width: 961px) {
    html:not(.ph-js) body #ph-pr-static { padding-top: calc(var(--ph-prs-hdr) + var(--ph-prs-gap)) !important; }
  }
  html:not(.ph-js) body .ph-prs::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0; height: 100vh;
    background: linear-gradient(rgba(255,255,255,.62), rgba(255,255,255,.62)),
      url('https://static.tildacdn.com/tild3231-3230-4462-b130-343639353362/12-.jpg') center top / cover no-repeat;
    pointer-events: none; z-index: 0;
  }
  html:not(.ph-js) body .ph-prs__inner {
    position: relative; z-index: 1;
    box-sizing: border-box; max-width: 1240px; margin: 0 auto; padding: 0 20px 6px !important;
  }

  /* крошки и заголовок — как в карточке (.ph-pnh__bc / .ph-pnh__title) */
  html:not(.ph-js) body .ph-prs__bc {
    font-family: Arial, Helvetica, sans-serif !important; font-size: 13px !important; line-height: normal !important;
    color: rgba(36,45,51,.5) !important; margin: 0 0 14px !important;
  }
  html:not(.ph-js) body .ph-prs__bc a { color: rgba(36,45,51,.6) !important; text-decoration: none !important; }
  html:not(.ph-js) body .ph-prs__sep { margin: 0 7px; color: rgba(36,45,51,.35); }
  html:not(.ph-js) body .ph-prs h1 {
    font-family: 'Times New Roman', Times, serif !important; font-size: clamp(26px, 2.8vw, 40px) !important;
    font-weight: 700 !important; line-height: 1.1 !important; text-transform: uppercase !important;
    letter-spacing: .02em !important; color: #242D33 !important; margin: 0 0 10px !important;
  }
  /* Заголовок статики — SEO-формулировка («Проект дома «X» в стиле Y — N м²»), карточка ставит короткое название.
     Текст скрыт, пока скрипт не подставит короткое (~300 мс после того, как страница стала видна), и блок
     держится ровно в одну строку. Так он занимает столько же, сколько заголовок карточки у 142 проектов
     из 214 — там первый экран стоит неподвижно от первого кадра и до карточки. У остальных 72 название
     длиннее строки: у них блок подрастёт в момент подмены, зато дальше заглушка совпадает с карточкой
     и при её появлении уже ничего не двигается. Без ограничения прыгали бы все 214: в статике заголовок
     длиннее («Проект дома «X» в стиле Y — N м²»), чем короткое название в карточке.
     Страховка на случай, если скрипт не загрузился вовсе: через 6 с ограничение снимается. */
  html:not(.ph-js) body .ph-prs h1 {
    height: 1.1em; overflow: hidden; margin: 0 0 10px !important;
    visibility: hidden;
    animation: ph-prs-pokazat 0s step-end 6s forwards;   /* forwards: во время задержки действуют строки выше и класс ph-prs-t */
  }
  html:not(.ph-js).ph-prs-t body .ph-prs h1 { visibility: visible; height: auto; overflow: visible; }

  /* Главное фото = кадр карточки, 16:9. Отступ сверху равен зазору «низ заголовка → верх кадра» у карточки:
     70 px на телефоне и планшете, 108 на десктопе. Зазор постоянный при любой длине названия (проверено на
     /yrban520, /granit и /enelevo-s: заголовок 29, 114 и 143 px — зазор везде 70). Нижний margin заголовка
     с ним схлопывается, поэтому задаём полную величину.
     Светлая подложка галереи, которая у карточки выглядывает над кадром, нарисована тенью самого кадра:
     тень — копия кадра, сжатая по бокам на 20 и поднятая на 64, поэтому над кадром остаётся ровно та же
     полоса (44 px), а по бокам она не вылезает. Так подложка следует за кадром сама и не зависит от того,
     на какой высоте оказался заголовок. */
  html:not(.ph-js) body .ph-prs__photo {
    display: block !important; width: calc(100% + 40px) !important; max-width: none !important;
    margin: 70px -20px 0 !important; border-radius: 0 !important;
    aspect-ratio: 16 / 9 !important; height: auto !important; object-fit: cover !important;
    background: #d8dadd;
    box-shadow: 0 -64px 0 -20px rgba(238, 240, 244, .7);
  }

  @media (min-width: 961px) {
    /* на десктопе кадр занимает левую колонку карточки: ширина контента минус панель 380 и зазор 26 */
    html:not(.ph-js) body .ph-prs__photo {
      width: calc(100% - 406px) !important; max-width: none !important;
      margin: 108px 0 0 !important; border-radius: 16px !important;
      /* подложка здесь той же ширины, что кадр, и выглядывает сверху на 82 px */
      box-shadow: 0 -82px 0 0 rgba(238, 240, 244, .7);
    }
  }
  @media (min-width: 1800px) {
    html:not(.ph-js) body .ph-prs__photo { width: calc(100% - 436px) !important; }   /* правая колонка там 410 */
  }
  @media (min-width: 1500px) { html:not(.ph-js) body .ph-prs__inner { max-width: 1340px; } }
  @media (min-width: 1800px) { html:not(.ph-js) body .ph-prs__inner { max-width: 1440px; } }
  @media (min-width: 2200px) { html:not(.ph-js) body .ph-prs__inner { max-width: 1640px; } }

  /* шаблон не отрисовал карточку (сбой или очень медленная сеть) — возвращаем статике обычный вид,
     чтобы посетитель остался с текстом, а не с обрезанным первым экраном (класс ставит project-test.js) */
  html.ph-prs-late body .ph-prs__specs { display: flex !important; margin-top: 18px; }
  html.ph-prs-late body .ph-prs p,
  html.ph-prs-late body .ph-prs__prices,
  html.ph-prs-late body .ph-prs__plans,
  html.ph-prs-late body .ph-prs__photos,
  html.ph-prs-late body .ph-prs__rel,
  html.ph-prs-late body .ph-prs__all { display: block !important; }
  html.ph-prs-late body .ph-prs h1 {
    visibility: visible !important; height: auto !important; overflow: visible !important;
    margin: 0 0 10px !important; animation: none !important;
  }
  html.ph-prs-late body .ph-prs__photo {
    width: 100% !important; max-width: 1136px !important; margin: 0 0 24px !important; border-radius: 14px !important;
    box-shadow: none !important;
  }
  /* на телефоне у статики кадр тоже в рамке контейнера, а не от края до края — возвращаем именно такой вид */
  @media (max-width: 960px) {
    html.ph-prs-late body .ph-prs__photo { width: 100% !important; max-width: none !important; margin: 0 0 24px !important; border-radius: 14px !important; }
  }

  /* Кадр при возврате без скрипта остаётся в геометрии заглушки (16:9 во всю ширину): его правила заданы
     через !important, а анимация в каскаде слабее, поэтому вернуть его чисто стилями нельзя. Содержимое
     при этом на месте, а скрипт, если он загрузился, доводит вид до обычного через свои 12 секунд. */
}
@keyframes ph-prs-pokazat { to { visibility: visible; height: auto; overflow: visible; } }
/* скрытие с самовозвратом: значение from держится всю задержку, в конце переключается на видимое */
@keyframes ph-prs-vernut-flex { from { display: none; } to { display: flex; } }
@keyframes ph-prs-vernut-block { from { display: none; } to { display: block; } }