/* SEO-блог: общая вёрстка статей (layout + липкое TOC + мобильное меню) */



.sd-main.sd-blog-page {

  width: 100%;

  max-width: min(1400px, 100%);

  overflow: visible;

}



.sd-layout {

  overflow: visible;

}



.blog-page-wrap {

  width: 100%;

  box-sizing: border-box;

  padding: max(10px, 1vh) 0 1.5rem;

}



@media (min-width: 992px) {

  .blog-page-wrap {

    padding-inline: max(0px, 0.5%);

  }

}



.layout-main-inner {

  display: flex;

  flex-wrap: wrap;

  justify-content: flex-start;

  align-items: flex-start;

  gap: 1rem 1.25rem;

  width: 100%;

  min-width: 0;

}



@media (min-width: 992px) {

  .layout-main-inner {

    flex-wrap: nowrap;

  }

}



.layout-sidebar-col {

  flex: 0 0 auto;

  width: 100%;

  max-width: 100%;

}



@media (min-width: 992px) {

  .layout-sidebar-col {

    width: min(248px, 24vw);

    max-width: 260px;

  }

}



@media (max-width: 991.98px) {

  .layout-sidebar-col--desktop {

    display: none;

  }

}



.layout-article {

  flex: 1 1 auto;

  min-width: 0;

  width: 100%;

}



@media (min-width: 992px) {

  .layout-article {

    flex: 1 1 0%;

    max-width: none;

  }

}



.sidebar-pin {

  position: sticky;

  top: 10px;

  z-index: 20;

  width: 100%;

}



body.sd-has-shell .sidebar-pin {

  top: calc(var(--sd-header-h) + 10px);

}



.glass-card {

  position: relative;

  z-index: 10;

  border-radius: var(--sd-radius, 12px);

  border: 1px solid var(--sd-border);

  box-shadow: var(--sd-shadow);

  background: var(--sd-bg-elevated);

  color: var(--sd-text);

  overflow: hidden;

}



.glass-card--nav {

  padding: 0;

}



.glass-card--article {

  margin: 0;

}



.glass-card__inner {

  position: relative;

  z-index: 2;

  max-width: 100%;

  overflow-x: hidden;

  padding: 1.2rem 1.35rem 0.5rem;

  color: var(--sd-text);

}



.glass-card__inner h1,

.glass-card__inner h2,

.glass-card__inner h3,

.glass-card__inner h4,

.glass-card__inner p,

.glass-card__inner li,

.glass-card__inner strong,

.glass-card__inner dt,

.glass-card__inner dd {

  color: inherit;

}



.glass-card__inner .sd-lead,

.glass-card__inner .sd-hero p {

  color: var(--sd-text-muted);

}



.glass-card--nav .toc-in-sidebar {

  margin: 0;

  padding: 1.2rem 1.35rem;

  max-height: calc(100vh - var(--sd-header-h, 4rem) - 20px);

  overflow-y: auto;

  overscroll-behavior: contain;

  scrollbar-gutter: stable;

  background: transparent;

  border: none;

  border-radius: 0;

  max-width: none;

  text-align: left;

  color: var(--sd-text);

}



body:not(.sd-has-shell) .glass-card--nav .toc-in-sidebar {

  max-height: calc(100vh - 20px);

}



.glass-card--nav .toc-in-sidebar .toc-title {

  text-align: left;

  font-size: 1rem;

  margin-top: 0;

}



.toc-title {

  font-weight: 700;

  margin: 0 0 1rem;

  font-size: 1.1rem;

  color: var(--sd-text);

}



.toc-list {

  margin: 0;

  padding-left: 1.35rem;

  line-height: 1.85;

  text-align: left;

  overflow-wrap: anywhere;

  word-break: break-word;

  color: var(--sd-text-muted);

}



.toc-list a {

  color: var(--sd-text-muted);

  text-decoration: none;

  transition: color 0.15s ease;

}



.toc-list a:hover,

.toc-list a:focus {

  color: var(--sd-text);

}



.toc-list a.is-active {

  color: var(--sd-accent);

  font-weight: 600;

}



.sd-blog-page [id],

.blog-page-wrap [id] {

  scroll-margin-top: calc(var(--sd-header-h, 4rem) + 1rem);

}



body:not(.sd-has-shell) .blog-page-wrap [id] {

  scroll-margin-top: 1.25rem;

}



/* Мобильное меню содержания */

.mobile-nav-bar {

  display: flex;

  align-items: center;

  gap: 0.75rem;

  position: fixed;

  top: 0;

  left: 0;

  right: 0;

  z-index: 1030;

  padding: max(8px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) 10px max(12px, env(safe-area-inset-left));

  background: var(--sd-mobile-nav-bg, var(--sd-bg-elevated));

  border-bottom: 1px solid var(--sd-border);

  box-shadow: var(--sd-shadow);

  color: var(--sd-text);

}



body.sd-has-shell .mobile-nav-bar {

  top: var(--sd-header-h);

  z-index: 9999;

}



@media (min-width: 992px) {

  .mobile-nav-bar,

  .blog-toc-drawer {

    display: none !important;

  }

}



.mobile-nav-title {

  font-size: 0.95rem;

  font-weight: 700;

  color: var(--sd-text);

  letter-spacing: 0.02em;

}



.mobile-nav-burger {

  display: flex;

  align-items: center;

  justify-content: center;

  width: 2.75rem;

  height: 2.75rem;

  margin: 0;

  padding: 0;

  border: 1px solid var(--sd-border);

  border-radius: 10px;

  background: var(--sd-nav-hover-bg);

  color: var(--sd-text);

  cursor: pointer;

  flex-shrink: 0;

}



.mobile-nav-burger-lines {

  position: relative;

  display: block;

  width: 1.25rem;

  height: 2px;

  background: currentColor;

  border-radius: 1px;

  box-shadow: 0 -6px 0 currentColor, 0 6px 0 currentColor;

}



.blog-toc-drawer {

  position: fixed;

  inset: 0;

  z-index: 10040;

}



.blog-toc-drawer[hidden] {

  display: none;

}



.blog-toc-drawer__backdrop {

  position: absolute;

  inset: 0;

  background: rgba(0, 0, 0, 0.45);

}



.blog-toc-drawer__sheet {

  position: absolute;

  top: 0;

  left: 0;

  width: min(20rem, 88vw);

  height: 100%;

  display: flex;

  flex-direction: column;

  background: var(--sd-bg-elevated);

  color: var(--sd-text);

  border-right: 1px solid var(--sd-border);

  animation: blog-toc-slide-in 0.25s ease;

}



@keyframes blog-toc-slide-in {

  from { transform: translateX(-100%); }

  to { transform: translateX(0); }

}



.blog-toc-drawer__head {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 0.5rem;

  padding: 1rem;

  border-bottom: 1px solid var(--sd-border);

}



.blog-toc-drawer__head h2 {

  margin: 0;

  font-size: 1rem;

  font-weight: 700;

  color: var(--sd-text);

}



.blog-toc-drawer__close {

  width: 2rem;

  height: 2rem;

  border: 1px solid var(--sd-border);

  border-radius: 0.45rem;

  background: var(--sd-nav-hover-bg);

  color: var(--sd-text);

  font-size: 1.35rem;

  line-height: 1;

  cursor: pointer;

}



.blog-toc-drawer__body {

  padding: 0.75rem 1rem 1.25rem;

  overflow-y: auto;

}



.blog-toc-drawer__body .toc-in-sidebar {

  margin: 0;

  padding: 0;

  max-height: none;

  overflow: visible;

  border: none;

  background: transparent;

}



body.blog-toc-open {

  overflow: hidden;

}



@media (max-width: 991.98px) {

  body.sd-has-shell.sd-blog-mobile-pad .sd-main.sd-blog-page {

    padding-top: calc(2.75rem + 0.5rem);

  }



  body:not(.sd-has-shell) {

    padding-top: calc(2.75rem + max(8px, env(safe-area-inset-top)) + 10px);

  }



  .layout-main-inner {

    flex-direction: column;

    align-items: stretch;

  }

}