/* Дополнительные стили NORT поверх собранного styles.*.css. Файл не участвует в сборке фронтенда,
   поэтому переживает пересборку стилей. Подключён в templates/base.html после build/styles. */

/* Кнопка 3D tour на странице проекта: подложка чуть темнее общего затенения, при наведении как у остальных кнопок */
.btn--tour{background-color:rgba(0,0,0,.15)}
.btn--tour:hover{background-color:rgba(255,255,255,.2)}

/* Видео на паузе: обложка спрятана, над текущим кадром остаётся только кнопка play */
.video-slider__item.is-paused .video-slider__img-ratio{visibility:hidden}
.video-slider__item.is-paused .video-slider__tip{display:none}

/* Строка копирайта: одинаково на главной (после «Tap here») и в футере всех страниц: 17px, тонкое начертание, капс, белый 35% */
.page-header__copyright p,.page-footer__text p,.page-logo__text p{display:inline;font-weight:200!important;font-size:17px!important;line-height:26px!important;letter-spacing:0;text-transform:uppercase;color:rgba(255,255,255,.35)!important;margin:0!important}
.page-header__copyright p+p:before,.page-footer__text p+p:before,.page-logo__text p+p:before{content:" "}  /* если разметка старая, с двумя абзацами, всё равно одна строка */
/* базовый отступ до строки; точное выравнивание до 120px на всех страницах делает nort-footer.js */
.page-footer{padding-top:40px!important;padding-bottom:25px!important}
@media (min-width:1024px){.page-footer{padding-top:100px!important}}

/* ===== Projects: плитки разделов на /projects/ и страницы разделов /projects/residential/, /projects/commercial/ ===== */
/* Плитка раздела без показанных проектов: та же пропорция, что у карточек, чёрная плашка без чужих фото.
   На десктопе тонкая рамка 1px (как у .btn, но 15% белого). На телефоне плитка во всю ширину экрана, поэтому без рамки */
.projects-list__img-wrap--empty{background-color:#000}
@media (min-width:1024px){.projects-list__img-wrap--empty{box-shadow:inset 0 0 0 1px rgba(255,255,255,.15)}}
/* Coming soon: шрифт текста страницы (16/24, на десктопе 18/26), капс, белый 50%. На телефоне поднята на 30px над полосой с названием */
.projects-list__soon{position:absolute;top:calc(50% - 30px);left:0;width:100%;padding:0 20px;transform:translateY(-50%);font-weight:400;font-size:16px;line-height:24px;text-align:center;text-transform:uppercase;white-space:nowrap;color:rgba(255,255,255,.5)}
@media (min-width:1024px){.projects-list__soon{top:50%;font-size:18px;line-height:26px}}
/* Страница раздела: строка «All projects / другой раздел» под сеткой, шрифт и наведение как у Previous / Next на странице проекта */
.projects__nav{display:flex;flex-wrap:nowrap;justify-content:space-between;align-items:center;width:100%;padding-top:22px}
@media (min-width:1024px){.projects__nav{padding-top:48px}}
.projects__nav-link{position:relative;font-weight:400;font-size:16px;line-height:24px;text-transform:uppercase;white-space:nowrap;color:#fff}
.projects__nav-link::after{content:"";position:absolute;top:-10px;right:-10px;bottom:-10px;left:-10px} /* зона нажатия 44px, текст не сдвигается */
.projects__nav-link:hover,.projects__nav-link:active{color:rgba(255,255,255,.85)}
.projects__nav-link:focus-visible{outline:1px solid rgba(255,255,255,.65);outline-offset:4px}
/* Раздел без проектов: строка «готовятся к публикации» приглушена до 50%, как надпись на плитке */
.projects-empty .desc-slider__content p{color:rgba(255,255,255,.5)}
/* Один проект в разделе (например, первый офис): карточка по центру. Только на страницах разделов, секретную комнату не трогает */
@media (min-width:1024px){.projects-list--category .projects-list__item:only-child{margin-right:auto;margin-left:auto}}
/* Телефон в альбомной ориентации: строка разделов с теми же отступами от выреза экрана, что тексты страницы */
@media (max-width:1023px) and (orientation:landscape){.projects__nav{margin-right:-20px;margin-left:-20px;width:auto;padding-right:max(20px,env(safe-area-inset-right));padding-left:max(20px,env(safe-area-inset-right))}}
/* Фокус с клавиатуры на плитках и карточках: тонкая рамка внутри карточки, название приглушено как при наведении */
.projects-list__link:focus-visible{outline:1px solid rgba(255,255,255,.65);outline-offset:-1px}
.projects-list__link:focus-visible .projects-list__title{color:rgba(255,255,255,.65)}
/* Плитки разделов на /projects/: название раздела обычным начертанием (400) по центру плитки, ширина 80%.
   Кегль = var(--fit) процентов ширины плитки (cqw), поэтому надпись масштабируется вместе с плиткой без рывков;
   --fit для каждого слова один раз считает js/nort-fit.js, до этого стоит приблизительные 13%. Подпись под плиткой не нужна: название уже на фото.
   Лёгкое затемнение фото, чтобы белое слово читалось и на светлом интерьере */
.projects-list--sections .projects-list__img-wrap{container-type:inline-size}
.projects-list--sections .projects-list__img-wrap::before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,.75);z-index:1}
.projects-list__overlay{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:2;pointer-events:none}
.projects-list__label{margin:0;padding:0;font-weight:400;font-size:13cqw;font-size:calc(var(--fit,13) * 1cqw);line-height:1;letter-spacing:0;text-transform:uppercase;white-space:nowrap;color:rgba(255,255,255,.8);text-shadow:0 4px 8px rgba(0,0,0,.3)}
.projects-list--sections .projects-list__soon{position:static;top:auto;left:auto;width:auto;padding:0;margin-top:.6em;transform:none}
/* Плитки разделов затемнены на 75% и при наведении остаются тёмными; при наведении надпись раздела плавно темнеет
   на 35%: с белого 80% до непрозрачного серого #858585 (80% × 0,65 = 52% яркости, фото сквозь буквы не просвечивает), с кривой сайта (просьба Романа 29.09.2026, заменяет осветление фото до 55%).
   Только там, где есть мышь: на телефоне касание сразу открывает раздел. С клавиатуры (Tab) надпись темнеет так же.
   Своё затемнение карточек (::after) здесь выключено */
.projects-list--sections .projects-list__img-wrap::after{display:none}
.projects-list--sections .projects-list__label{transition:color .6s cubic-bezier(.52,.16,.24,1)}
@media (hover:hover){.projects-list--sections .projects-list__link:hover .projects-list__label{color:#858585}}
.projects-list--sections .projects-list__link:focus-visible .projects-list__label{color:#858585}
/* Надпись раздела на плитке: белый 80% (Роман 29.09.2026) с тенью как у заголовка баннера About (.banner__title: белый 70%, тень 0 4px 8px) */
/* Страница выбора: под заголовком PROJECTS сразу плитки (подзаголовок перенесён под них), отступ заголовка до плиток */
.projects__header--solo{padding-bottom:30px}
@media (min-width:1024px){.projects__header--solo{padding-bottom:50px}}

/* Слоган под логотипом (блок на главной и выпадающая шапка): на десктопе текст по левому краю, на телефоне и планшете по центру, как было.
   Решение Романа 29.09.2026. Перебивает .desc-slider__content--align_center из собранных стилей только в этих двух местах */
@media (min-width:1024px){.page-logo__content-text .desc-slider__content--align_center,.page-header__content-text .desc-slider__content--align_center{text-align:left;text-wrap:pretty}}  /* pretty: без одного слова в последней строке, где браузер умеет */

/* Карточки проектов (разделы Residential и Commercial, Secret Room): наведение на фото и на название даёт одно и то же,
   фото темнеет на 30% и название сереет. В собранных стилях фото темнело только при наведении на само фото
   (.projects-list__img-wrap:hover), а название при наведении на всю карточку. Просьба Романа 29.09.2026.
   Плитки разделов на /projects/ не затрагивает: там ::after выключен. Как и раньше, только от 1280px, где есть мышь */
@media (min-width:1280px){.projects-list__link:hover .projects-list__img-wrap::after,.projects-list__link:focus-visible .projects-list__img-wrap::after{background-color:rgba(0,0,0,.3)}}

/* Кнопка play на странице Video (просьба Романа 29.09.2026): это активная кнопка, при наведении она темнеет.
   Круг с 75% чёрного до 90%, белый треугольник гаснет до 65% (как название карточки проекта), плавно, с кривой сайта.
   Только там, где есть мышь; с клавиатуры (Tab) так же */
.video-btn{transition:background-color .6s cubic-bezier(.52,.16,.24,1)}
.video-btn::after{transition:opacity .6s cubic-bezier(.52,.16,.24,1)}
@media (hover:hover){.video-btn:hover{background-color:rgba(0,0,0,.9)}.video-btn:hover::after{opacity:.65}}
.video-btn:focus-visible{background-color:rgba(0,0,0,.9)}
.video-btn:focus-visible::after{opacity:.65}

/* Баннер на About (Роман, 30.09.2026): выделенная строка «WE DESIGN FOR BOTH.» жирным начертанием шрифта сайта (700),
   в собранных стилях <strong> в баннере только белее, толщина та же 400. Только баннер About, другие баннеры не трогает */
.about__banner .banner__heading .banner__title strong{font-weight:700}

/* Заголовки текстовых блоков About (Роман, 30.09.2026): заглавными, как основной текст, и жирнее его (700 из общих стилей h3).
   Блоки из админки и блок основателя; баннер и карточки команды не трогает */
.about__text .desc-slider__content h3{text-transform:uppercase}

/* Расстояние между плитками в один столбец (до 1024px) как между роликами на странице Video на телефоне: 11px
   (Роман, 30.09.2026). Плитки Residential/Commercial на /projects/, списки проектов разделов и Secret Room */
@media (max-width:1023px){.projects-list__item+.projects-list__item{margin-top:11px}}

/* Новости со своими страницами (30.09.2026): дата как строка копирайта, заголовок-ссылка в том же виде, что первый абзац
   новости раньше; «Читать далее»; страница новости: подзаголовки, списки, ссылки, FAQ. Одноязычный блок без слайдера
   (.news-single) виден сразу: у .desc-slider__content по умолчанию opacity 0 до активного слайда */
.news-single .desc-slider__content{opacity:1}
.news-date{margin:0 0 6px!important;font-weight:200;font-size:17px!important;line-height:26px!important;letter-spacing:0;text-transform:uppercase;color:rgba(255,255,255,.35)!important}
.desc-slider__content .news-title{margin:0 0 10px;font-weight:400;font-size:16px;line-height:24px;letter-spacing:0;text-transform:uppercase;color:rgba(255,255,255,.7)}
.news-title a{color:inherit;transition:color .3s}
.news-more{display:inline-block;color:rgba(255,255,255,.5);border-bottom:1px solid rgba(255,255,255,.3);transition:color .3s,border-color .3s}
@media (hover:hover){.news-title a:hover,.news-more:hover{color:#fff;border-color:#fff}}
.news-article .desc-slider__content h2,.news-article .desc-slider__content h3{text-transform:uppercase}
.news-article .desc-slider__content ul,.news-article .desc-slider__content ol{margin:0 0 10px;padding-left:1.1em}
.news-article .desc-slider__content li{margin-bottom:4px;font-size:16px;line-height:24px;text-transform:uppercase;color:rgba(255,255,255,.7)}
.news-article .desc-slider__content p a,.news-article .desc-slider__content li a{color:#fff;border-bottom:1px solid rgba(255,255,255,.35);transition:border-color .3s}
@media (hover:hover){.news-article .desc-slider__content p a:hover,.news-article .desc-slider__content li a:hover{border-color:#fff}}
.news-faq{margin-top:48px}
.news-article .news-faq__title{margin:0 0 8px;font-size:24px}
.news-article .news-faq__q{margin:24px 0 8px;font-size:18px;line-height:26px}
.news-article__btns{gap:16px;flex-wrap:wrap}
@media (min-width:1024px){
  .desc-slider__content .news-title,.news-article .desc-slider__content li{font-size:18px;line-height:26px;color:#fff}
  .news-article__btns{gap:24px}
}

/* Заголовки текстовых блоков About (Роман, 30.09.2026, после правки выше): не жирные, в полтора раза крупнее прежних 24px:
   36px на компьютере, 32px на телефоне (в той же пропорции, что текст 18/16). Страницы новостей (.news-article) не трогает */
.about:not(.news-article) .about__text .desc-slider__content h3{font-weight:400;font-size:32px;line-height:1.15}
@media (min-width:1024px){.about:not(.news-article) .about__text .desc-slider__content h3{font-size:36px}}