/* Shared header layout and contact dialog. */
:root { --hero-edge: 10px; --hero-chrome-inset: 10px; }
@media (min-width: 1024px) { :root { --hero-edge: 16px; } }
html { scrollbar-gutter: stable; }
html.contact-scroll-lock, html.contact-scroll-lock body { overflow: hidden; overscroll-behavior: none; }
.site-socials {
  position: fixed;
  /* Above .work-toc's rail (z-index 60, case-toc.css) so the open
     "Связаться" dropdown never sits under the TOC rungs. */
  z-index: 65;
  top: var(--page-px, 10px);
  right: calc(var(--page-px, 10px) + var(--chrome-socials-offset, 0px));
  /* Ряд соцсетей центрируется по вертикали в полосе высотой с плашку
     хедера (--header-h меряет layout-chrome.50b482323674.js), поэтому кружки/кнопка
     стоят ровно на уровне кнопки «Резюме PDF», а не по верхней кромке
     плашки. */
  display: flex;
  align-items: center;
  height: var(--header-h, 3.5rem);
  /* Полоса выше самих иконок — только для выравнивания, клики сквозь неё
     идут на баннер; ловят их обратно сами иконки/кнопка. */
  pointer-events: none;
  transition: top 0.25s ease, right 0.25s ease;
}

.contact-trigger {
  pointer-events: auto;
}

/* Меню разделов (site-chrome.js): на десктопе пункты слева от «Связаться»;
   ниже 1000px вместо них гамбургер, а «Резюме PDF» уходит в его шторку. */
.site-socials { gap: 6px; }
.site-nav {
  display: flex;
  align-items: center;
  gap: 6px;
  pointer-events: auto;
}
.site-socials .site-menu-trigger { display: none; pointer-events: auto; }
@media (width < 1000px) {
  .site-nav,
  .site-header .site-header__cta { display: none; }
  .site-socials .site-menu-trigger { display: inline-flex; }
}
/* Три пункта меню до 1200px наезжают на лого по центру — там тоже
   гамбургер, «Резюме PDF» при этом остаётся в хедере. */
@media (1000px <= width < 1200px) {
  .site-nav { display: none; }
  .site-socials .site-menu-trigger { display: inline-flex; }
}
/* На десктопе «Статьи»/«Посты» видны в хедере (активная — с точкой),
   поэтому стрелка «назад» на этих страницах не нужна — хедер как на главной
   (аватар + лого). Ниже 1000px наоборот: стрелка вместо аватара. */
@media (min-width: 1000px) {
  .collection-page .site-header__back { display: none; }
}
@media (width < 1000px) {
  .collection-page .site-header__avatar { display: none; }
}

/* Desktop-only anchored dropdown for "Связаться" — a calm, non-modal
   popover (no backdrop/scroll-lock/focus-trap), same dark-glass recipe
   as .work-toc__panel. The full-screen .contact-dialog sheet stays the
   mobile/tablet variant (see site-chrome.js). */
.site-socials__panel {
  position: absolute;
  /* 6px от нижнего края кнопки «Связаться»: она центрирована в полосе
     высотой с хедер, поэтому считаем от центра, а не от низа обёртки. */
  top: calc(50% + var(--button-height) / 2 + 6px);
  right: 0;
  /* Shrink to the longest item instead of a fixed width with empty
     space next to short labels. */
  width: max-content;
  max-width: calc(100vw - 32px);
  padding: 8px;
  border-radius: var(--radius-surface);
  background: var(--color-glass);
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  border: 1px solid var(--color-glass-border);
  display: grid;
  gap: 2px;
  opacity: 0;
  transform: translateY(-6px) scale(.98);
  transform-origin: top right;
  transition: opacity .2s ease, transform .2s ease;
  pointer-events: none;
  --mood-bg: var(--color-surface-alt);
  --mood-ink: var(--color-text);
}
.site-socials__panel nav { display: grid; gap: 2px; }
.site-socials__panel .btn { width: 100%; }
.site-socials__panel.is-open {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
@media (width < 1000px) {
  .site-socials__panel { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .site-socials__panel { transition: none; }
}

/* Пока не проскроллено — хедер и соцсети визуально внутри баннера,
   в 10px от его кромки (кромка = --hero-edge от вьюпорта). При скролле
   site-chrome.js ставит html.chrome--pinned → уезжают в углы. */
html:not(.chrome--pinned) .site-socials {
  top: calc(var(--hero-edge, 10px) + var(--hero-chrome-inset, 10px));
  right: calc(var(--hero-edge, 10px) + var(--hero-chrome-inset, 10px) + var(--chrome-socials-offset, 0px));
}

/* Десктоп (≥1000px): хедер слева (в баннере на скролл-топе, в
   углу при скролле), соцсети — отдельная плавающая хрома справа.
   Перебиваем центрирование из header.css. */
.site-header {
  transform: none;
  transition: top 0.25s ease, left 0.25s ease;
}

@media (min-width: 1000px) {
  html:not(.chrome--pinned) .site-header {
    top: calc(var(--hero-edge, 10px) + var(--hero-chrome-inset, 10px));
    left: calc(var(--hero-edge, 10px) + var(--hero-chrome-inset, 10px));
  }

  html.chrome--pinned .site-header {
    left: var(--page-px, 10px);
  }

  /* Лого — по центру экрана, на одной линии с плашкой хедера (аватар и
     «Резюме PDF» остаются слева). top повторяет top хедера (баннер /
     закреплённый) + половину его высоты. В моб-плашке (<1000px) лого
     остаётся в ряду, как было. */
  .site-header__logo {
    position: fixed;
    left: 50%;
    transform: translate(-50%, -50%);
    transition:
      top 0.25s ease,
      scale var(--button-press-duration, 0.12s) ease-out,
      opacity var(--btn-hover-duration, 0.15s) ease;
  }

  html:not(.chrome--pinned) .site-header__logo {
    top: calc(var(--hero-edge, 10px) + var(--hero-chrome-inset, 10px) + var(--header-h, var(--chrome-h)) / 2);
  }

  html.chrome--pinned .site-header__logo {
    top: calc(var(--page-px, 10px) + var(--header-h, var(--chrome-h)) / 2);
  }
}
@media (width < 1000px) {
  .site-header {
    left: 50%;
    transform: translateX(-50%);
    padding-inline: var(--chrome-pad-block);
    /* Паддинг между «Резюме» и кнопкой соцсетей (и заодно до аватара). */
    gap: 6px;
  }
  .site-header:has(.site-header__logo[hidden]) {
    width: calc(100% - 2 * (var(--hero-edge, 10px) + 16px));
  }
  .site-header:has(.site-header__logo[hidden]) .site-header__cta {
    flex: 1 1 auto;
    min-width: 0;
  }
  .site-header__identity,
  .site-header .site-socials { flex-shrink: 0; }
  html:not(.chrome--pinned) .site-header {
    top: calc(var(--hero-edge, 10px) + var(--hero-chrome-inset, 10px));
    left: 50%;
  }
  html.chrome--pinned .site-header {
    top: var(--page-px, 10px);
    left: 50%;
  }

  .site-socials,
  html:not(.chrome--pinned) .site-socials {
    position: static;
    inset: auto;
    height: auto;
    pointer-events: auto;
    display: flex;
    align-items: center;
    transition: none;
  }
  .site-socials__list {
    display: none;
  }
  .contact-trigger__label {
    display: none;
  }
  /* Лого ужимается / убирается из JS (layout-chrome.50b482323674.js), чтобы плашка по
     центру влезала в экран; это — страховочный потолок. */
  .site-header__logo-mark {
    max-width: 42vw;
  }
}

@media (max-width: 480px) {
  .site-header__logo-mark { max-width: 34vw; }
}

.contact-dialog { position: fixed; inset: 0; z-index: 100; }
.contact-dialog[hidden] { display: none; }
.contact-dialog__backdrop { position: absolute; inset: 0; background: rgba(8,10,20,.4); animation: contact-backdrop-in .65s ease both; }
.contact-dialog__panel {
  position: absolute; inset: 10px; display: flex; flex-direction: column;
  padding: clamp(20px, 3vw, 40px); border-radius: var(--radius-surface);
  /* Calm dark chrome close to the page's own background, not the
     saturated mood colour — a dialog this size in vivid --mood-bg
     read as loud/anxious. Background/text set directly. */
  --mood-ink: var(--color-text);
  background: var(--color-surface-alt); color: var(--mood-ink);
  overflow: hidden; isolation: isolate;
  animation: contact-surface-in .8s cubic-bezier(.22,1,.36,1) both;
}
.contact-dialog__body { flex: 1; min-height: 0; display: flex; overflow-y: auto; overscroll-behavior: contain; }
.contact-dialog__inner { width: min(420px, 100%); margin: auto; padding-block: 12px; }
.contact-dialog__head { margin-bottom: 24px; text-align: center; animation: contact-item-in .5s .18s ease both; }
.contact-dialog__title { margin: 0; }
.contact-dialog [data-rows] { display: flex; flex-direction: column; gap: 10px; }
.contact-dialog__item { animation: contact-item-in .5s cubic-bezier(.16,1,.3,1) both; animation-delay: calc(.23s + var(--item-index) * .065s); }
.contact-row { width: 100%; }
.contact-dialog__footer { flex: none; display: flex; justify-content: center; padding-top: 24px; padding-bottom: env(safe-area-inset-bottom, 0px); }
.contact-dialog__close-wrap { animation: contact-item-in .45s .6s cubic-bezier(.16,1,.3,1) both; }
.contact-dialog.is-closing { pointer-events: none; }
.contact-dialog.is-closing .contact-dialog__panel { animation: contact-surface-out .55s .12s cubic-bezier(.65,0,.35,1) both; }
.contact-dialog.is-closing .contact-dialog__backdrop { animation: contact-backdrop-out .6s ease both; }
.contact-dialog.is-closing .contact-dialog__item { animation: contact-item-out .2s ease both; animation-delay: calc((5 - var(--item-index)) * .02s); }
.contact-dialog.is-closing .contact-dialog__head,
.contact-dialog.is-closing .contact-dialog__close-wrap { animation: contact-item-out .18s ease both; }
@keyframes contact-surface-in {
  from { clip-path: var(--contact-origin, inset(0 0 100% 100% round 32px)); }
  to { clip-path: inset(0 round 36px); }
}
@keyframes contact-surface-out {
  from { clip-path: inset(0 round 36px); }
  to { clip-path: var(--contact-origin, inset(0 0 100% 100% round 32px)); }
}
@keyframes contact-item-in { from { opacity: 0; transform: translateY(24px) scale(.9); } to { opacity: 1; transform: none; } }
@keyframes contact-item-out { to { opacity: 0; transform: translateY(10px) scale(.96); } }
@keyframes contact-backdrop-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes contact-backdrop-out { to { opacity: 0; } }
@media (max-width: 599px) {
  .contact-dialog__panel { padding: 20px; border-radius: var(--radius-surface); }
  .contact-dialog [data-rows] { gap: 8px; }
  .contact-dialog__head { margin-bottom: 20px; }
  .contact-dialog__footer { padding-top: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .contact-dialog__panel, .contact-dialog__backdrop, .contact-dialog__head,
  .contact-dialog__item, .contact-dialog__close-wrap { animation: none !important; }
  .site-header, .site-socials { transition: none; }
}

/* Над видео-баннером Главной лого белое; за его пределами — обычное тёмное.
   Класс ставит components/hero-mood/hero-video.d8ca33448ac5.js. */
.site-header__logo { transition-property: top, scale, opacity, color; }
html.chrome--on-hero .site-header__logo { color: #fff; }