/**
 * Mobile spacing rhythm (Figma ~320px).
 * Loads last — fixes desktop rules that sit after @media in page-*.css.
 */
@media (max-width: 900px) {
  /* Хабы и каталоги: 60px между секциями main (вместо gap:0) */
  #design-root.design-root--knowledge-hub .page-main--knowledge-hub,
  #design-root.design-root--expert-hub .page-main--expert-hub,
  #design-root.design-root--press .page-main--press,
  #design-root.design-root--video-hub .page-main--video-hub,
  #design-root.design-root--memo-hub .page-main--memo-hub,
  #design-root.design-root--contacts .page-main--contacts,
  #design-root.design-root--case-hub .page-main--case-hub,
  #design-root.design-root--course-hub .page-main--course-hub,
  #design-root.design-root--expert .page-main--expert,
  #design-root.design-root--course .page-main--course {
    gap: 60px;
  }

  /*
   * Детальная решения (Figma 320px): margin-top у секций в page-decision.css,
   * без gap на main — иначе 60+60 между блоками.
   */
  #design-root.design-root--decision .page-main--decision {
    gap: 0;
  }

  #design-root.design-root--decision .page-main--decision > *:not(.decision-hero) {
    margin-top: 60px !important;
  }

  #design-root.design-root--decision .page-main--decision > .method-section {
    margin-bottom: 0 !important;
    gap: 32px;
  }

  #design-root.design-root--decision .page-main--decision > .home-faq {
    gap: 32px;
  }

  #design-root.design-root--decision .decision-change-metrics {
    margin-top: 40px !important;
  }

  #design-root.design-root--decision .page-main--decision .home-faq__list {
    gap: 44px;
  }

  #design-root.design-root--decision .decision-roadmap__bottom {
    row-gap: 44px;
  }

  /* О компании — 48px по макету */
  #design-root.design-root--about .page-main--about {
    gap: 48px;
  }

  /* С gap у main — убираем дублирующие margin-top у прямых детей */
  #design-root.design-root--expert .page-main--expert > .expert-details-shell,
  #design-root.design-root--expert .page-main--expert > .courses-wrap,
  #design-root.design-root--expert .page-main--expert > .method-section,
  #design-root.design-root--knowledge-hub .page-main--knowledge-hub > .knowledge-hub-search,
  #design-root.design-root--knowledge-hub .page-main--knowledge-hub > .knowledge-hub-results,
  #design-root.design-root--knowledge-hub .page-main--knowledge-hub > .knowledge-hub-featured,
  #design-root.design-root--press .page-main--press > .press-filters,
  #design-root.design-root--press .page-main--press > .press-grid,
  #design-root.design-root--case-hub .page-main--case-hub > .case-hub-filters,
  #design-root.design-root--course-hub .page-main--course-hub > .course-hub-filters,
  #design-root.design-root--video-hub .page-main--video-hub > .video-hub-filters,
  #design-root.design-root--video-hub .page-main--video-hub > .videos-section--video-hub,
  #design-root.design-root--video-hub .page-main--video-hub > .video-hub-invite,
  #design-root.design-root--memo-hub .page-main--memo-hub > .memo-hub-filters,
  #design-root.design-root--memo-hub .page-main--memo-hub > .memo-hub-grid,
  #design-root.design-root--memo-hub .page-main--memo-hub > .memo-hub-invite,
  #design-root.design-root--memo-hub .page-main--memo-hub > .expert-hub-intro,
  #design-root.design-root--expert-hub .page-main--expert-hub > .about-team--expert-hub,
  #design-root.design-root--case-hub .page-main--case-hub > .home-faq,
  #design-root.design-root--course-hub .page-main--course-hub > .home-faq,
  #design-root.design-root--knowledge-hub .page-main--knowledge-hub > .home-faq {
    margin-top: 0 !important;
  }

  #design-root.design-root--contacts .page-main--contacts > .contacts-info,
  #design-root.design-root--contacts .page-main--contacts > .contacts-info + .contacts-invite {
    margin-top: 0 !important;
  }

  #design-root.design-root--expert .page-main--expert > .courses-wrap,
  #design-root.design-root--case-hub .page-main--case-hub > .case-hub-filters,
  #design-root.design-root--course-hub .page-main--course-hub > .course-hub-filters,
  #design-root.design-root--press .page-main--press > .press-filters,
  #design-root.design-root--video-hub .page-main--video-hub > .video-hub-filters,
  #design-root.design-root--memo-hub .page-main--memo-hub > .memo-hub-filters {
    margin-bottom: 0 !important;
  }

  /* Сетки карточек — 24px между карточками */
  #design-root .case-hub-grid,
  #design-root .courses-list,
  #design-root .knowledge-hub-grid,
  #design-root .press-grid,
  #design-root .video-hub-grid,
  #design-root .memos-grid {
    gap: 24px;
  }

  /* Видео-хаб: Frame 693 — 32px между карточками */
  #design-root.design-root--video-hub .videos-section--video-hub .videos-grid {
    gap: 32px;
  }

  /* Заголовок секции → контент (course-блоки без flex gap) */
  #design-root .course-section > .course-section__title,
  #design-root .course-section > h2.course-section__title {
    margin-bottom: 40px;
  }

  #design-root .home-faq {
    gap: 32px;
  }

  #design-root .home-faq__title {
    margin-bottom: 0;
  }

  /* gap на main — сверху не дублируем; снизу 60px (padding-bottom у main обнулён :has(.expert-hub-intro)) */
  #design-root .page-main > .expert-hub-intro,
  #design-root .course-hub-intro,
  #design-root .press-intro {
    margin-top: 0 !important;
    margin-bottom: 60px !important;
  }

  /* FAQ → invite: только gap main (60px), без desktop margin-top */
  #design-root.design-root--course-hub .page-main--course-hub > .home-faq + .course-hub-invite {
    margin-top: 0 !important;
  }

  /* Диагностика: SEO в pod-open-tail (не прямой ребёнок main) — 60px сверху/снизу */
  #design-root.design-root--pod-open .pod-open-tail:not([hidden]) > .expert-hub-intro {
    margin-top: 60px !important;
    margin-bottom: 60px !important;
    padding-left: 25px;
    padding-right: 25px;
    box-sizing: border-box;
  }

  /*
   * Hero h1: WYSIWYG inline font-size (46px из редактора) не пробивает mobile layout.
   * Грузится последним — перебивает page-*.css и inline style на span/p.
   */
  #design-root .home-hero__title,
  #design-root .home-hero__title :where(p, span, strong, em, b, i, [style*="font-size"]) {
    font-size: 24px !important;
    line-height: 105% !important;
    font-weight: 480 !important;
  }

  #design-root [class*="-hub-hero__title"],
  #design-root [class*="-hub-hero__title"] :where(span, [style*="font-size"]) {
    font-size: 30px !important;
    line-height: 105% !important;
  }

  #design-root .hero-title,
  #design-root .hero-title :where(span, [style*="font-size"]) {
    font-size: 24px !important;
    line-height: 105% !important;
  }

  /*
   * Согласие в формах: на мобилке всегда макетный кегль (10/12),
   * без десктопных размеров из page-*.css / админки / WYSIWYG.
   */
  #design-root :is(
    .press-invite__consent,
    .memo-hub-invite__consent,
    .video-hub-invite__consent,
    .expert-hub-invite__consent,
    .course-hub-invite__consent,
    .course-invite__consent,
    .decision-invite__consent,
    .pod-open-surveys__invite-consent,
    .callback-modal__consent,
    .case-aside-consent,
    .memo-aside-consent
  ) {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    align-items: flex-start;
    box-sizing: border-box;
  }

  #design-root :is(
    .press-invite__consent span,
    .press-invite__consent span a,
    .memo-hub-invite__consent span,
    .memo-hub-invite__consent span a,
    .video-hub-invite__consent span,
    .video-hub-invite__consent span a,
    .expert-hub-invite__consent span,
    .expert-hub-invite__consent span a,
    .course-hub-invite__consent span,
    .course-hub-invite__consent span a,
    .course-invite__consent span,
    .course-invite__consent span a,
    .decision-invite__consent span,
    .decision-invite__consent span a,
    .pod-open-surveys__invite-consent span,
    .pod-open-surveys__invite-consent span a,
    .callback-modal__consent-text,
    .callback-modal__consent-text a,
    .case-aside-consent__text,
    .case-aside-consent__link,
    .memo-aside-consent__text,
    .memo-aside-consent__link
  ),
  #design-root :is(
    .press-invite__consent,
    .memo-hub-invite__consent,
    .video-hub-invite__consent,
    .expert-hub-invite__consent,
    .course-hub-invite__consent,
    .course-invite__consent,
    .decision-invite__consent,
    .pod-open-surveys__invite-consent,
    .callback-modal__consent,
    .case-aside-consent,
    .memo-aside-consent
  ) :where(p, span, a, strong, em, b, i, [style*="font-size"]):not(
    .case-aside-checkbox-ui,
    .memo-aside-checkbox-ui
  ) {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 10px !important;
    line-height: 12px !important;
  }

  /* п.22: квадратик галочки не сжимать во flex (особенно формы без серой плашки) */
  #design-root :is(
    .press-invite__consent input[type="checkbox"],
    .memo-hub-invite__consent input[type="checkbox"],
    .video-hub-invite__consent input[type="checkbox"],
    .expert-hub-invite__consent input[type="checkbox"],
    .course-hub-invite__consent input[type="checkbox"],
    .course-invite__consent input[type="checkbox"],
    .decision-invite__consent input[type="checkbox"],
    .pod-open-surveys__invite-consent input[type="checkbox"],
    .callback-modal__consent input[type="checkbox"],
    .case-aside-checkbox-ui,
    .memo-aside-checkbox-ui
  ) {
    flex: none !important;
    flex-shrink: 0 !important;
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
    min-height: 16px !important;
    max-width: 16px !important;
    max-height: 16px !important;
    aspect-ratio: 1 / 1;
    box-sizing: border-box;
  }

  /*
   * Баннеры с иллюстрациями (комментарии 11.09.2026 п.1):
   * на мобилке убираем декор — не наползает на текст.
   * Главная, 3 решения, диагностика, БЗ, обучение, опрос, о нас.
   */
  #design-root .home-hero__deco,
  #design-root .decision-hero__deco,
  #design-root .pod-open-hero__deco,
  #design-root .knowledge-hub-hero__deco,
  #design-root .open-surveys-hero__deco,
  #design-root .about-hero__decor,
  #design-root .hero-img {
    display: none !important;
  }

  /* Страница опроса (п.8–9): заголовок на всю ширину, методика в потоке без наложений */
  #design-root .open-surveys-hero__surface,
  #design-root .open-surveys-hero__layout {
    height: auto !important;
    min-height: 0 !important;
  }

  #design-root .open-surveys-hero__layout {
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
    padding: 60px 20px 20px !important;
  }

  #design-root .open-surveys-hero__content {
    max-width: none !important;
    width: 100% !important;
    min-width: 0 !important;
    gap: 16px !important;
  }

  #design-root .open-surveys-hero__title {
    width: 100% !important;
    max-width: none !important;
    font-size: clamp(20px, 5.6vw, 24px) !important;
    line-height: 1.2 !important;
    overflow-wrap: anywhere !important;
  }

  #design-root .open-surveys-hero__aside {
    position: static !important;
    inset: auto !important;
    width: 100% !important;
    pointer-events: auto !important;
  }

  #design-root .open-surveys-hero__method {
    position: static !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
  }

  #design-root .open-surveys-hero__method-text {
    line-height: 1.5 !important;
    min-width: 0 !important;
    overflow-wrap: anywhere !important;
  }

  #design-root .open-surveys-hero__method-link {
    text-underline-offset: 2px;
    text-decoration-thickness: 1px;
  }

  /* Решение: декор был в background-image баннера — оставляем только градиент */
  #design-root .decision-hero {
    background-image: linear-gradient(131deg, #22344d 0%, #294366 100%) !important;
    overflow-x: clip !important;
    overflow-y: visible !important;
    height: auto !important;
    min-height: 0 !important;
  }

  /*
   * Страница решения (п.2): текст героя/карточек не должен обрезаться.
   * Десктопные flex/min-width и overflow:hidden резали H1 и «Эффект».
   */
  #design-root.design-root--decision .decision-hero__cover,
  #design-root.design-root--decision .decision-hero__stack,
  #design-root.design-root--decision .decision-hero__lead-row,
  #design-root.design-root--decision .decision-hero__metrics,
  #design-root.design-root--decision .decision-hero__metric,
  #design-root.design-root--decision .decision-hero__metric-text,
  #design-root.design-root--decision .decision-hero__title,
  #design-root.design-root--decision .decision-hero__lead {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    overflow: visible !important;
    white-space: normal !important;
    box-sizing: border-box !important;
  }

  #design-root.design-root--decision .decision-hero__metrics,
  #design-root.design-root--decision .decision-hero__metric {
    flex: none !important;
    min-height: 0 !important;
  }

  #design-root.design-root--decision .decision-hero__title,
  #design-root.design-root--decision .decision-hero__title :where(p, span, strong, em, b, i, [style*="font-size"]) {
    font-size: 24px !important;
    line-height: 105% !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    white-space: normal !important;
  }

  #design-root.design-root--decision .decision-hero__lead,
  #design-root.design-root--decision .decision-hero__lead :where(p, span, strong, em, b, i, [style*="font-size"]) {
    font-size: 12px !important;
    line-height: 15px !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    white-space: normal !important;
  }

  #design-root.design-root--decision .decision-hero__metric-text,
  #design-root.design-root--decision .decision-hero__metric-text :where(p, span, strong, em, b, i, [style*="font-size"]) {
    font-size: 12px !important;
    line-height: 15px !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    white-space: normal !important;
  }

  #design-root.design-root--decision .decision-hero__cta {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-top: 0 !important;
  }

  /*
   * Опыт в цифрах (п.3): Главная / О нас / эксперт —
   * высота по контенту, все кубики в сетке — как самый высокий.
   */
  #design-root .about-strip__metrics,
  #design-root .about-stats__row,
  #design-root .expert-metrics {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-auto-rows: 1fr !important;
    align-items: stretch !important;
    gap: 10px !important;
  }

  #design-root .about-strip__metric,
  #design-root .about-stat-card,
  #design-root .expert-metric-card {
    width: auto !important;
    max-width: none !important;
    height: auto !important;
    min-height: 126px !important;
    align-self: stretch !important;
    overflow: visible !important;
    gap: 12px !important;
  }

  #design-root .about-strip__metric-label,
  #design-root .about-stat-card__label,
  #design-root .expert-metric-card__text {
    max-width: 100% !important;
    min-width: 0 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
  }

  /*
   * Универсальные плашки (п.4–6): одна плашка на всю ширину,
   * заголовок не режется, теги не ломаются посередине слова.
   */
  #design-root .method-slider__track {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    grid-template-columns: none !important;
    align-items: stretch !important;
    gap: 12px !important;
    width: auto !important;
    max-width: none !important;
  }

  #design-root .method-slider__track .method-card,
  #design-root .method-slider__track .knowledge-hub-result-card,
  #design-root .method-slider__track .home-whats-new__card,
  #design-root .method-slider__track .home-whats-new__card--digest {
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  #design-root .knowledge-hub-result-card__title,
  #design-root .method-slider__track .knowledge-hub-result-card__title,
  #design-root .method-section .knowledge-hub-result-card__title {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
  }

  #design-root .method-card__head {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
  }

  #design-root .method-card__title {
    height: auto !important;
    -webkit-line-clamp: 3 !important;
    line-clamp: 3 !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
  }

  #design-root .knowledge-hub-result-card__tag,
  #design-root .method-slider__track .knowledge-hub-result-card__tag {
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
    max-width: 100% !important;
  }

  #design-root .knowledge-hub-result-card__tag-label,
  #design-root .method-slider__track .knowledge-hub-result-card__tag-label {
    overflow-wrap: normal !important;
    word-break: normal !important;
    white-space: nowrap !important;
  }

  /* Материалы: на мобилке высота по карточке, не фикс. 551px */
  #design-root .method-section.is-materials-clipped .method-slider,
  #design-root .method-section[data-materials-expand] .method-slider,
  #design-root .method-section--expand.is-materials-clipped .method-slider {
    height: auto !important;
    min-height: 0 !important;
    margin-bottom: 0 !important;
  }

  #design-root .method-section .method-slider__viewport,
  #design-root .method-section.is-materials-clipped .method-slider__viewport,
  #design-root .method-section[data-materials-expand] .method-slider__viewport {
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    flex: none !important;
  }

  #design-root .method-section .method-slider .Rectangle866 {
    display: none !important;
  }

  #design-root .hero-img::before,
  #design-root .hero-img::after {
    content: none !important;
    display: none !important;
    background: none !important;
  }

  /* Результаты опроса (п.10–11): критерии/круги/ширина выводов */
  #design-root .open-surveys-result-dimensions__panel,
  #design-root .open-surveys-result-overview__surface {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  #design-root .open-surveys-result-dimensions__desc {
    max-width: none !important;
    width: 100% !important;
    overflow-wrap: anywhere !important;
  }

  #design-root .open-surveys-result-dimensions__ring {
    width: 72px !important;
    height: 72px !important;
    overflow: visible !important;
  }

  #design-root .open-surveys-result-dimensions__ring-progress {
    width: 72px !important;
    height: 72px !important;
  }

  #design-root .open-surveys-result-dimensions__percent {
    inset: 0 !important;
    left: 0 !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    transform: none !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 14px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  /* Страница курса (п.13–15) */
  #design-root .course-hero__title {
    max-width: none !important;
    width: 100% !important;
    font-size: clamp(18px, 5.4vw, 24px) !important;
    line-height: 1.15 !important;
    overflow-wrap: anywhere !important;
  }

  #design-root .course-hero__btn-secondary[data-course-pdf-download] {
    display: none !important;
  }

  #design-root .course-program-module__digit-wrap {
    left: 12px !important;
    right: auto !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important;
    height: 40px !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  #design-root .course-program-module__digit-num {
    font-size: 18px !important;
    line-height: 1 !important;
  }

  #design-root .course-program-module__shell {
    padding: 4px !important;
  }

  #design-root .course-program-module__head {
    width: 100% !important;
    padding: 14px 12px 14px 62px !important;
  }

  #design-root .course-program-module__title {
    font-size: 12px !important;
    line-height: 1.25 !important;
    overflow-wrap: anywhere !important;
  }

  #design-root .course-program-module__list li {
    display: flex !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  #design-root .course-program-module__list li span {
    display: block !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    overflow-wrap: anywhere !important;
    white-space: normal !important;
  }
}