/* ОБЪЕКТ — навигация по странице (objpn-*): карточка проекта и основные страницы (см. objekt-page-nav.php).
   Стоит сразу под первым экраном и при прокрутке прилипает ровно под шапкой сайта: top ставит objekt-page-nav.js
   (шапка + панель админа, если она есть). Когда навигация прилипла, у шапки убирается тень — шапка и навигация
   выглядят одной панелью, тень одна, под навигацией. На компьютере слева подпись «Навигация по странице».
   main.css гасит рамку фокуса у всего — поэтому у :focus-visible здесь !important. */

/* main.css на телефоне ставит body{overflow-x:hidden} — body становится контейнером прокрутки и «прилипание»
   перестаёт работать. clip режет так же, но прокрутку не создаёт. */
body.objpn-page,
body.objpt-page{overflow-x:visible;overflow-x:clip;}

.objpn{
  --objpn-h:52px;
  --objpn-w:calc(100% - 32px);
  position:sticky;top:calc(var(--objn-top, 0px) + var(--objn-hs, 68px));z-index:900;
  display:block;margin:0;padding:0;
  background:var(--objekt-color-bg);
  border-bottom:1px solid var(--objekt-color-line);
  font-family:var(--objekt-font-body);
  transition:box-shadow .2s ease;
}
@media (min-width:390px){ .objpn{--objpn-w:calc(100% - 40px);} }
@media (min-width:600px){ .objpn{--objpn-w:calc(100% - 64px);--objpn-h:58px;} }
@media (min-width:1200px){ .objpn{--objpn-w:min(81.77083vw, 1600px);} }
/* компьютер: прилипшая навигация ниже (46px) — вместе с компактной шапкой занимают меньше места */
@media (min-width:1280px){
  .objpn .objpn-link{transition:color .2s ease, height .2s ease;}
  .objpn.is-stuck{--objpn-h:46px;}
}
.objpn.is-stuck{box-shadow:0 6px 24px rgba(0,0,0,0.25);}
html.objpn-stuck .objn .objn-bar{box-shadow:none !important;}
.objpn,
.objpn *{box-sizing:border-box;}
.objpn .objpn-wrap{position:relative;display:flex;align-items:center;width:var(--objpt-w, var(--objpn-w));margin:0 auto;}
.objpn .objpn-cap{display:none;}
.objpn .objpn-list{
  flex:1 1 auto;min-width:0;
  display:flex;justify-content:space-between;gap:clamp(22px, 2.6vw, 48px);margin:0;padding:0;list-style:none;
  overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.objpn .objpn-list::-webkit-scrollbar{display:none;}
/* пункты не помещаются — край строки мягко гаснет с той стороны, где есть ещё пункты (классы ставит скрипт) */
.objpn .objpn-list.is-more-r{-webkit-mask-image:linear-gradient(90deg, #000 calc(100% - 56px), transparent);mask-image:linear-gradient(90deg, #000 calc(100% - 56px), transparent);}
.objpn .objpn-list.is-more-l{-webkit-mask-image:linear-gradient(90deg, transparent, #000 56px);mask-image:linear-gradient(90deg, transparent, #000 56px);}
.objpn .objpn-list.is-more-l.is-more-r{-webkit-mask-image:linear-gradient(90deg, transparent, #000 56px, #000 calc(100% - 56px), transparent);mask-image:linear-gradient(90deg, transparent, #000 56px, #000 calc(100% - 56px), transparent);}
.objpn .objpn-list li{flex-shrink:0;margin:0;padding:0;list-style:none;}
.objpn .objpn-list li::before{content:none;}
.objpn .objpn-link{
  display:flex;align-items:center;height:var(--objpn-h, 52px);white-space:nowrap;
  font-size:clamp(14px, 0.9vw, 17px);color:rgba(245,242,237,0.7);text-decoration:none;
  transition:color .2s ease;
}
.objpn .objpn-link:hover,
.objpn .objpn-link.is-active{color:var(--objekt-color-cream);}
.objpn .objpn-link:focus-visible{outline:2px solid var(--objekt-color-accent) !important;outline-offset:-4px;}
/* подчёркивание активного пункта — плавно переезжает (позицию и ширину ставит скрипт) */
.objpn .objpn-bar{position:absolute;left:0;bottom:-1px;height:2px;width:0;background:var(--objekt-color-accent);transform:translateX(var(--x, 0px));transition:transform .25s cubic-bezier(.2,.7,.2,1), width .25s cubic-bezier(.2,.7,.2,1);pointer-events:none;}
/* подсказка «Листайте» на плотной подложке — не смешивается с пунктами; после показа исчезает совсем */
.objpn .objpn-hint{position:absolute;right:0;top:0;bottom:0;z-index:3;display:flex;align-items:center;padding:0 10px 0 44px;background:linear-gradient(90deg, rgba(28,26,26,0) 0, var(--objekt-color-bg) 40px);pointer-events:none;}
.objpn .objpn-hint.is-done{display:none;}
.objpn .objpn-hint[hidden]{display:none;}
@media (min-width:768px){ .objpn .objpn-hint{display:none;} }
/* компьютер: подпись «Навигация по странице» слева, за ней тонкая черта (как у eyebrow) */
@media (min-width:1024px){
  .objpn .objpn-cap{display:flex;align-items:center;gap:16px;flex:none;margin-right:clamp(24px, 2.4vw, 44px);font-size:var(--objekt-fs-caption, 12px);letter-spacing:.2em;text-transform:uppercase;white-space:nowrap;color:var(--objekt-color-accent);}
  .objpn .objpn-cap::after{content:"";display:block;width:clamp(24px, 2vw, 40px);height:1px;background:var(--objekt-color-line-strong);}
}

@media (prefers-reduced-motion: reduce){
  .objpn,
  .objpn .objpn-bar{transition:none;}
}
/* переход по ссылке с якорем (…/#proekty): заголовок раздела не прячется под шапкой и панелью */
[data-objpn-sec]{scroll-margin-top:calc(var(--objn-top, 0px) + var(--objn-hs, 72px) + 66px);}
@media (min-width:1280px){ [data-objpn-sec]{scroll-margin-top:calc(var(--objn-top, 0px) + var(--objn-hs, 64px) + 58px);} }

/* стрелки «ещё разделы»: поверх гаснущего края строки; слева — сразу за подписью (позицию ставит скрипт) */
.objpn .objpn-arr{position:absolute;top:50%;z-index:2;display:none;place-items:center;width:34px;height:34px;margin-top:-17px;padding:0;border:1px solid var(--objekt-color-line-strong);border-radius:50%;background:var(--objekt-color-bg);color:var(--objekt-color-cream);cursor:pointer;transition:border-color .2s ease, color .2s ease, background-color .2s ease, opacity .2s ease;}
.objpn .objpn-arr svg{width:18px;height:18px;}
.objpn .objpn-arr:hover{border-color:var(--objekt-color-accent);color:var(--objekt-color-accent);}
.objpn .objpn-arr:focus-visible{outline:2px solid var(--objekt-color-accent) !important;outline-offset:2px;}
.objpn .objpn-arr--r{right:0;}
.objpn .objpn-arr[hidden]{display:none !important;}
.objpn .objpn-arr{display:grid;}
/* телефон: стрелки поменьше, подсказка «Листайте» — левее правой стрелки */
@media (max-width:767px){
  .objpn .objpn-arr{width:30px;height:30px;margin-top:-15px;}
  .objpn .objpn-arr svg{width:16px;height:16px;}
  .objpn .objpn-hint{right:36px;}
}
/* под стрелками — чуть шире гаснущий край, чтобы стрелка не лежала на тексте пункта */
@media (min-width:768px){
  .objpn .objpn-list.is-more-r{-webkit-mask-image:linear-gradient(90deg, #000 calc(100% - 84px), transparent calc(100% - 20px));mask-image:linear-gradient(90deg, #000 calc(100% - 84px), transparent calc(100% - 20px));}
  .objpn .objpn-list.is-more-l{-webkit-mask-image:linear-gradient(90deg, transparent 20px, #000 84px);mask-image:linear-gradient(90deg, transparent 20px, #000 84px);}
  .objpn .objpn-list.is-more-l.is-more-r{-webkit-mask-image:linear-gradient(90deg, transparent 20px, #000 84px, #000 calc(100% - 84px), transparent calc(100% - 20px));mask-image:linear-gradient(90deg, transparent 20px, #000 84px, #000 calc(100% - 84px), transparent calc(100% - 20px));}
}
/* мышью строку можно тащить влево-вправо */
.objpn .objpn-list.is-draggable{cursor:grab;}
.objpn .objpn-list.is-dragging{cursor:grabbing;-webkit-user-select:none;user-select:none;}
.objpn .objpn-list.is-dragging .objpn-link{pointer-events:none;}
.objpn .objpn-link{-webkit-user-drag:none;}
.objpn .objpn-bar.is-off{opacity:0;}