/* site-layout.css — только публичный сайт: шапка, wrap, сетка main/sidebar, типографика поста, embed медиатеки */

header.siteHeader {
  position: sticky;
  top: 0;
  /* Выше HvCustomSelect portal на body (120), ниже mobile drawer (200) */
  z-index: 150;
  border-bottom: 1px solid rgba(96, 165, 250, 0.15);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

/* Заголовки в контенте; шапка бренда — vitrine.css (.siteHeader__brandLockup) */
main h1 {
  margin: 0;
}

header.siteHeader .wrap {
  position: relative;
  padding: 12px 24px;
}

header.siteHeader .wrap::before,
header.siteHeader .wrap::after {
  content: "";
  position: absolute;
  top: 12px;
  bottom: 12px;
  width: 1px;
  background: linear-gradient(180deg, transparent, var(--accent, #60a5fa), transparent);
  opacity: 0.2;
}
header.siteHeader .wrap::before { left: 0; }
header.siteHeader .wrap::after { right: 0; }

.headerMainNav .headerNavLink {
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text, #e5e7eb);
  opacity: 0.75;
  transition: opacity 0.2s, color 0.2s;
}
.headerMainNav .headerNavLink:hover {
  opacity: 1;
  color: var(--accent, #60a5fa);
}

.controls{
  --header-ctrl-h:36px;
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
}
.headerNavLink{
  display:inline-flex;
  align-items:center;
  min-height:var(--header-ctrl-h);
  box-sizing:border-box;
}
.headerMainNav{
  display:flex;
  flex-wrap:wrap;
  gap:6px 10px;
  align-items:center;
}
.headerNavSep{
  opacity:.45;
  user-select:none;
  font-weight:600;
}
.headerNavStatic{
  font-size:13px;
  color:var(--muted, #64748b);
  min-height:var(--header-ctrl-h);
  display:inline-flex;
  align-items:center;
}
.headerNavSubGroup{
  display:inline-flex;
  flex-wrap:wrap;
  gap:6px 10px;
  align-items:center;
}
.headerLoginBtn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:var(--header-ctrl-h);
  padding:0 14px;
  box-sizing:border-box;
  border-radius:999px;
  border:1px solid var(--line, #e2e8f0);
  background:var(--panel2, #f1f5f9);
  color:var(--link, var(--accent, #2563eb));
  text-decoration:none;
  font-size:12px;
  font-weight:600;
  white-space:nowrap;
  touch-action:manipulation;
  transition:border-color .15s ease, background .15s ease;
}
.headerLoginBtn:hover{
  border-color:var(--accent, #2563eb);
  background:color-mix(in oklab, var(--accent, #2563eb) 14%, var(--panel2, #f1f5f9));
}
.headerLoginBtn:focus-visible{
  outline:2px solid var(--accent, #2563eb);
  outline-offset:2px;
}

.headerUserMenu{
  position:relative;
}
.headerUserMenu > summary{
  list-style:none;
  display:inline-flex;
  align-items:center;
  min-height:var(--header-ctrl-h);
  cursor:pointer;
  user-select:none;
  touch-action:manipulation;
}
.headerUserMenu > summary::-webkit-details-marker{
  display:none;
}
.headerUserMenuPill{
  margin:0;
  min-height:var(--header-ctrl-h);
  box-sizing:border-box;
  display:inline-flex;
  align-items:center;
}
.headerUserMenuChevron{
  width:0;
  height:0;
  border-left:4px solid transparent;
  border-right:4px solid transparent;
  border-top:5px solid var(--muted, #64748b);
  flex-shrink:0;
  transition:transform .15s ease;
  transform-origin:50% 35%;
}
.headerUserMenu[open] .headerUserMenuChevron{
  transform:rotate(180deg);
}
.headerUserMenuSummary:focus-visible{
  outline:2px solid var(--accent, #2563eb);
  outline-offset:2px;
  border-radius:999px;
}
.headerUserMenuPanel{
  position:absolute;
  top:calc(100% + 6px);
  right:0;
  min-width:220px;
  padding:6px;
  background:var(--card-bg, var(--panel, #fff));
  border:1px solid var(--line, #ddd);
  border-radius:12px;
  box-shadow:0 10px 30px rgba(0,0,0,.12);
  z-index:60;
}
.headerUserMenuItem{
  display:flex;
  align-items:center;
  gap:8px;
  padding:10px 12px;
  border-radius:8px;
  font-size:13px;
  color:var(--text, #111);
  text-decoration:none;
  transition:background .12s ease;
}
a.headerUserMenuItem{
  color:var(--link, var(--accent, #2563eb));
  font-weight:600;
}
a.headerUserMenuItem:hover{
  background:color-mix(in oklab, var(--accent, #2563eb) 12%, transparent);
}
.headerUserMenuItemStatic{
  color:var(--muted, #64748b);
  font-size:12px;
  cursor:default;
}
.headerUserMenuSep{
  height:1px;
  margin:6px 4px;
  background:var(--line, #e2e8f0);
}
.headerUserMenuLogoutForm{
  margin:0;
}
.headerUserMenuLogout{
  display:block;
  width:100%;
  margin:0;
  padding:10px 12px;
  border-radius:8px;
  border:1px solid var(--line, #ddd);
  background:var(--panel, #f5f5f5);
  color:var(--text, #111);
  font-size:13px;
  cursor:pointer;
  text-align:center;
  transition:border-color .12s ease, background .12s ease;
}
.headerUserMenuLogout:hover{
  border-color:var(--accent, #2563eb);
  background:var(--panel2, #f1f5f9);
}
.headerUserMenuLogout:focus-visible{
  outline:2px solid var(--accent, #2563eb);
  outline-offset:2px;
}

/* Шапка: телефоны и узкие окна */
@media (max-width: 640px){
  .wrap{
    padding:calc(12px + env(safe-area-inset-top, 0px)) calc(12px + env(safe-area-inset-right, 0px)) 12px calc(12px + env(safe-area-inset-left, 0px));
  }
  .topbar{
    align-items:flex-start;
  }
  .controls{
    --header-ctrl-h:44px;
    width:100%;
    justify-content:flex-end;
    row-gap:10px;
    column-gap:6px;
  }
  .headerNavLink{
    padding:6px 2px;
    font-size:13px;
  }
  .headerLoginBtn{
    padding:0 16px;
    font-size:13px;
  }
  .headerUserMenu{
    flex:0 0 auto;
  }
  .headerUserMenuPanel{
    max-width:min(300px, calc(100vw - 24px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)));
  }
  .headerUserMenuItem,
  .headerUserMenuLogout{
    min-height:44px;
    padding-top:12px;
    padding-bottom:12px;
  }
}

@media (max-width: 380px){
  .subtitle{
    display:block;
    width:100%;
    margin-top:2px;
  }
}
main{ padding:16px 0 24px; }

/* Страница входа: центр по горизонтали и вертикали между шапкой и подвалом */
body.pageAuthCenter{
  min-height:100svh;
  min-height:100dvh;
  display:flex;
  flex-direction:column;
}
main.mainAuthCenter{
  flex:1;
  display:flex;
  flex-direction:column;
  min-height:0;
  padding-top:24px;
  padding-bottom:32px;
}
/* После shell: .wrap внутри .colMain — цепочка flex до карточки входа/обслуживания */
main.mainAuthCenter > .siteMain__bound--shellGrid {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* Любая сетка shell (grid-full / grid-both-sides / …): растягиваем на высоту main, центр — в colMain */
main.mainAuthCenter .siteMain__bound--shellGrid > .grid {
  flex: 1;
  min-height: 0;
  grid-template-rows: 1fr;
}

main.mainAuthCenter .siteMain__bound--shellGrid .colMain {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 0;
}

main.mainAuthCenter .colMain > .wrap.siteMain__boundInner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex: 1;
  width: 100%;
  min-height: 0;
  box-sizing: border-box;
}
.loginPageCard{
  width:100%;
  max-width:420px;
}
.loginPageCard__fields{
  display:grid;
  gap:10px;
}
.loginPageCard__forgot{
  margin-top:12px;
}

/* Обслуживание и др.: shell без сайтовой шапки — чуть больше воздуха сверху */
body[data-shell-no-header].pageAuthCenter main.mainAuthCenter{
  padding-top:max(28px, env(safe-area-inset-top, 0px));
}
.maintenancePageCard{
  width:100%;
  max-width:520px;
}

/* Header widgets контейнер над меню */
.headerWidgets{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:8px;
}
.themeToggleForm{
  margin:0;
  display:inline-flex;
}
.themeToggleBtn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:var(--header-ctrl-h, 36px);
  height:var(--header-ctrl-h, 36px);
  padding:0;
  border-radius:999px;
  border:1px solid var(--line, #ddd);
  background:var(--panel, #f5f5f5);
  color:var(--muted, #64748b);
  cursor:pointer;
  touch-action:manipulation;
  flex-shrink:0;
  transition:border-color .15s ease, background .15s ease, color .15s ease;
}
.themeToggleBtn:hover{
  border-color:var(--accent, #2563eb);
  color:var(--text, #0f172a);
}
.themeToggleBtn:focus-visible{
  outline:2px solid var(--accent, #2563eb);
  outline-offset:2px;
}
.themeToggleBtn svg{
  display:block;
}

.headerPanelBtn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:6px 14px;
  min-height:36px;
  box-sizing:border-box;
  border-radius:999px;
  border:1px solid var(--line, #e2e8f0);
  background:var(--panel2, #f1f5f9);
  color:var(--link, var(--accent, #2563eb));
  text-decoration:none;
  font-size:12px;
  font-weight:600;
  white-space:nowrap;
  transition:border-color .15s ease, background .15s ease;
}
.headerPanelBtn:hover{
  border-color:var(--accent, #2563eb);
  background:color-mix(in oklab, var(--accent, #2563eb) 14%, var(--panel2, #f1f5f9));
}
.headerPanelBtn:focus-visible{
  outline:2px solid var(--accent, #2563eb);
  outline-offset:2px;
}
/* embed-режим файлов: публичный header не подключаем (см. assets.ejs pickEmbed). */
body.adminAssetsPickEmbed main{
  padding-bottom:88px;
}
.assetPickCoverBar{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  z-index:50;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 16px;
  background:color-mix(in oklab, var(--panel, #1e293b) 96%, #000);
  border-top:1px solid var(--line, #334155);
  box-shadow:0 -8px 24px rgba(0,0,0,0.25);
}
.assetPickCoverBar__hint{
  margin:0;
  flex:1;
  min-width:200px;
}
.assetPickCoverBar__actions{
  margin:0;
}
tr.assetPickRow--selected{
  outline:2px solid var(--accent, #60a5fa);
  outline-offset:-2px;
  background:color-mix(in oklab, var(--accent, #60a5fa) 12%, transparent);
}
article.assetGridItem.assetPickGrid--selected{
  outline:2px solid var(--accent, #60a5fa);
  outline-offset:2px;
  border-radius:12px;
}
.postBodyCover{
  margin:0 0 14px;
  border-radius:10px;
  overflow:hidden;
  background:var(--panel2, #f1f5f9);
}
/* Обложка через hv-image-preview: уголки визира, без обрезки декора */
.postBodyCover.postBodyCover--hvPreview{
  overflow:visible;
  border-radius:0;
  background:transparent;
}
.postBodyCover img{
  display:block;
  width:100%;
  height:auto;
  vertical-align:middle;
}

.postBodyCoverComposite{
  display:flow-root;
  margin:0 0 14px;
}
/* Текст и видео — прямые потомки композита: без отдельного BFC-колонки, основной текст обтекает float-обложку.
   Фоны blockquote/pre — см. их собственные display: flow-root внутри .postBodyHtml */
.postBodyCoverComposite > .postBodyHtml{
  display:block;
  min-width:0;
}
.postBodyCoverComposite > .itemPostVideoPanel{
  clear:both;
}
.postBodyCover--float_left{
  float:left;
  width:38%;
  max-width:300px;
  min-width:100px;
  margin:0 16px 10px 0;
}
/* object-fit / object-position задаёт hv-image (превью); не перебиваем — иначе contain из медиатеки не работает */
.postBodyCover--float_left img{
  width:100%;
  height:auto;
  max-height:min(42vh, 360px);
}
.postBodyCover--float_left .hvImagePreview{
  max-height:min(42vh, 360px);
}
@media (max-width:640px){
  .postBodyCover--float_left{
    float:none;
    width:100%;
    max-width:none;
    min-width:0;
    margin:0 0 14px;
  }
  .postBodyCover--float_left img{
    max-height:none;
    object-fit:initial;
  }
  .postBodyCover--float_left .hvImagePreview{
    max-height:none;
  }
}

.postBodyHtml{
  line-height:1.65;
  overflow-wrap:break-word;
  /* BFC: обтекание float-figure и фоны blockquote/pre не залезают под картинки в тексте */
  display:flow-root;
  min-width:0;
  /* Цитата: акцент и фон в духе Telegram (тёмная тема и светлая через color-mix) */
  --post-bq-accent:#ee686e;
  --post-bq-bg:color-mix(in oklab, var(--post-bq-accent) 14%, var(--panel2, #f1f5f9));
}
.postBodyHtml p{
  margin:0 0 0.85em;
  white-space:pre-line;
  text-align:justify;
}
/* Текстовые блоки из contenteditable без класса — как абзацы (отступ как у p) */
.postBodyHtml > div:not([class]){
  margin:0 0 0.85em;
  white-space:pre-line;
}
.postBodyHtml .post-text-align-left,
.postBodyHtml .post-text-align-center,
.postBodyHtml .post-text-align-right,
.postBodyHtml .post-text-align-justify{
  display:block;
  width:100%;
  max-width:100%;
  box-sizing:border-box;
}
.postBodyHtml .post-text-align-left{
  text-align:left;
}
.postBodyHtml .post-text-align-center{
  text-align:center;
}
.postBodyHtml .post-text-align-right{
  text-align:right;
}
.postBodyHtml .post-text-align-justify{
  text-align:justify;
}
.postBodyHtml .post-text-uppercase{
  text-transform:uppercase;
}
/* Инлайн-цитата внутри абзаца; <blockquote> в <p> по HTML5 недопустим и ломает DOM */
.postBodyHtml .post-text-inline-quote{
  position:relative;
  display:inline-block;
  vertical-align:baseline;
  /* Запас справа: ::after с кавычкой в absolute не расширяет строку — без margin следующий текст заезжает под ” */
  margin:0 calc(0.95em + 12px) 0 2px;
  padding:0 5px 0 6px;
  line-height:1.28;
  border-radius:4px;
  border-left:3px solid var(--post-bq-accent);
  border-right:3px solid var(--post-bq-accent);
  background:var(--post-bq-bg);
  box-decoration-break:clone;
  -webkit-box-decoration-break:clone;
  max-width:100%;
  box-sizing:border-box;
}
/* Кавычка после правой полосы (не между текстом и border-right) */
.postBodyHtml .post-text-inline-quote::after{
  content:"\201D";
  position:absolute;
  right:calc(-0.55em - 8px);
  top:50%;
  transform:translateY(-50%);
  color:var(--post-bq-accent);
  font-family:Georgia,"Times New Roman",Times,serif;
  font-size:0.82em;
  font-weight:600;
  line-height:1;
  opacity:0.92;
  pointer-events:none;
}
.postBodyHtml h2,
.postBodyHtml h3{
  margin:1em 0 0.5em;
  line-height:1.25;
}
.postBodyHtml ul,
.postBodyHtml ol{
  margin:0 0 0.85em 1.25em;
  padding:0;
}
.postBodyHtml pre{
  display:flow-root;
  max-width:100%;
}
.postBodyHtml blockquote{
  position:relative;
  margin:0 0 0.85em;
  padding:10px 40px 10px 14px;
  border-radius:8px;
  border-left:3px solid var(--post-bq-accent);
  background:var(--post-bq-bg);
  color:var(--text, inherit);
  box-sizing:border-box;
  max-width:100%;
  display:flow-root;
}
.postBodyHtml blockquote::after{
  content:"\201D";
  position:absolute;
  right:12px;
  top:50%;
  transform:translateY(-50%);
  font-size:1.4rem;
  font-weight:600;
  line-height:1;
  color:var(--post-bq-accent);
  opacity:0.88;
  pointer-events:none;
  font-family:Georgia,"Times New Roman",Times,serif;
}
.postBodyHtml .post-inline-figure{
  margin:0 0 14px;
  max-width:100%;
}
.postBodyHtml .post-inline-figure.alignleft{
  float:left;
  margin:4px 16px 12px 0;
  max-width:min(48%, 420px);
}
.postBodyHtml .post-inline-figure.alignright{
  float:right;
  margin:4px 0 12px 16px;
  max-width:min(48%, 420px);
}
.postBodyHtml .post-inline-figure.aligncenter{
  text-align:center;
  margin-left:auto;
  margin-right:auto;
  clear:both;
}
.postBodyHtml .post-inline-figure.aligncenter img{
  margin-left:auto;
  margin-right:auto;
}
.postBodyHtml .post-inline-figure.alignnone{
  clear:both;
  display:flow-root;
  width:fit-content;
  max-width:100%;
}
.postBodyHtml .post-inline-img{
  max-width:100%;
  height:auto;
  display:block;
  border-radius:8px;
}
/* Редактор: object-fit + класс post-inline-img--hvFit — ограничиваем высоту, чтобы contain/cover были заметны в колонке текста */
.postBodyHtml img.post-inline-img.post-inline-img--hvFit{
  max-height:min(65vh, 560px);
}
.postBodyHtml figcaption{
  font-size:0.88em;
  color:var(--muted, #64748b);
  margin-top:6px;
  text-align:center;
}
.postBodyHtml::after{
  content:"";
  display:table;
  clear:both;
}

/* iframe в публикации: заполняет inner у item-post-video-embed (hv-panel-block + aspect-ratio) */
.postVkVideoIframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
  display:block;
  background:var(--panel2, #020617);
}
/* Свой код: один <iframe> без обёртки — те же размеры (иначе width/height с YouTube ломают сетку) */
.itemPostVideoPanel--customIframe.hvPanelBlock--aspect .hvPanelBlock__inner > iframe{
  position:absolute;
  inset:0;
  width:100% !important;
  height:100% !important;
  max-width:100%;
  border:0;
  display:block;
  background:var(--panel2, #020617);
}
.itemPostVideoPanel--customIframe:not(.hvPanelBlock--aspect) .hvPanelBlock__inner{
  width:100%;
}

.footerNav{
  padding:12px 0 0;
  display:flex;
  flex-wrap:wrap;
  gap:6px 10px;
  align-items:center;
  border-top:1px solid var(--line, #e2e8f0);
  margin-top:8px;
}
.footerBar{
  padding:24px 0;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:12px 20px;
}
.footerSocial{
  display:flex;
  flex-wrap:wrap;
  gap:10px 16px;
}
.footerSocial__link,
.footerSocial__static{
  display:inline-flex;
  align-items:center;
  gap:6px;
}
.footerSocial--stack .footerSocial__link,
.footerSocial--stack .footerSocial__static{
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:4px;
}
.footerSocial--iconOnly .footerSocial__link,
.footerSocial--iconOnly .footerSocial__static{
  gap:0;
}
.footerSocial__static{
  color:inherit;
  opacity:0.92;
}
.footerSocial__icon{
  display:block;
  width:18px;
  height:18px;
  object-fit:contain;
  flex-shrink:0;
  opacity:0.92;
}
/* Крупнее только «столбик» и «только иконки»; в ряд с подписью справа — прежний размер */
.footerSocial--stack .footerSocial__icon,
.footerSocial--iconOnly .footerSocial__icon{
  width:36px;
  height:36px;
}
/* Без «подчёркивания» глобального .link (dashed border-bottom) — только иконка/подпись */
.footerSocial a.footerSocial__link,
.footerSocial a.footerSocial__link:visited,
.footerSocial a.footerSocial__link:hover,
.footerSocial a.footerSocial__link:active{
  text-decoration:none;
  border-bottom:none;
}
.footerSocial a.footerSocial__link:hover{
  opacity:0.95;
}
.footerSocial a.footerSocial__link:active{
  background-color:transparent;
}