/* cn3-plus / mobile: единые боковые поля сайта.
   Принцип как у Apple: один токен --gutter на весь сайт, контент не шире экрана,
   горизонтальные ленты выходят к краям, заголовки блоков — по левому краю. */
:root { --gutter: 16px; }
@media (min-width: 601px) { :root { --gutter: 24px; } }
@media (min-width: 901px) { :root { --gutter: 28px; } }

@media (max-width: 1100px) {
  /* все обёртки страниц получают одно и то же поле (иначе у каждой своё: 12, 16, 18, 20, 32px) */
  body .container,
  body .re-archive,
  body .re-single,
  body .cn3-wrap,
  body .cn3-mfr-arc .cn3-wrap,
  body .cn3-thub-single .cn3-wrap,
  body .cn3-folio .cn3-wrap,
  body .cn3-evt-wrap,
  body .cn3-evt-hero__inner,
  body .cn3-hsec .container,
  body .cn3-trendbar .container,
  body .cn3-feat .container,
  body .konkursy-block .container {
    box-sizing: border-box;
    width: 100%;
    max-width: none;
    padding-left: max(var(--gutter), env(safe-area-inset-left));
    padding-right: max(var(--gutter), env(safe-area-inset-right));
  }
  body .container--single { max-width: 800px; }
  /* вложенные обёртки не удваивают поле */
  body .container .container,
  body .cn3-wrap .container,
  body .re-archive .container,
  body .cn3x-mag .container { padding-left: 0; padding-right: 0; }
  body .single-post--l2 .cn3-l2-hero__inner { padding-left: var(--gutter); padding-right: var(--gutter); }
}

/* телефон: ленты выходят к краям экрана, карточка первой начинается у поля */
@media (max-width: 680px) {
  body .konkursy-block .kk-head { padding-right: 0; }
  body .konkursy-block .kk-cards {
    margin-inline: calc(var(--gutter) * -1);
    padding: 4px var(--gutter) 14px;
    scroll-padding-inline: var(--gutter);
  }
  body .cn3x-history__list { margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); }
  body .cn3-trendbar__scroll { margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); }
  /* текст на телефоне читается слева; по центру — только пустые состояния и кнопки */
  body .container__title--center { text-align: left; }
}

/* шапка записи: «…» больше не налезает на «Аа» и «Поделиться» */
@media (max-width: 700px) {
  body .post-info { padding-right: 48px; min-height: 40px; align-items: center; }
  body .post-info-ellipses__wrap { top: 50%; bottom: auto; right: 0; transform: translateY(-50%); }
  body .post-info-ellipses__wrap.is-moved { transform: translateY(-50%) rotate(-90deg); }
  body .post-info .cn3x-tools { margin-left: auto; padding-left: .6rem; }
  body .post-info-mobile { right: 0; }
}

/* ═══ Шапка на планшетах ═══
 * 700–1100 px (и более широкие окна, где меню не помещается: класс cn3-compact ставит ui.js):
 * первая строка — логотип и кнопки (поиск, тема, бургер), вторая — меню прокручиваемой лентой.
 * Подпункты раскрываются в бургер-меню. На телефонах (до 699 px) остаётся только бургер. */
.site-header__wrap--inline .site-header__btns { flex-shrink: 0 !important; }
.site-header__wrap--inline .site-nav--inline { min-width: 0; }

@media (min-width: 700px) and (max-width: 1100px) {
  html body .site-header__wrap--inline { flex-wrap: wrap !important; row-gap: 6px; padding-top: 8px; padding-bottom: 0; }
  html body .site-header__wrap--inline .site-header__branding { order: 1; }
  html body .site-header__wrap--inline .site-header__btns { order: 2; margin-left: auto !important; }
  html body .site-header__wrap--inline .site-nav--inline { display: block !important; order: 3; flex: 0 0 100% !important; width: 100%; }
}
html.cn3-compact body .site-header__wrap--inline { flex-wrap: wrap !important; row-gap: 6px; padding-top: 8px; padding-bottom: 0; }
html.cn3-compact body .site-header__wrap--inline .site-header__branding { order: 1; }
html.cn3-compact body .site-header__wrap--inline .site-header__btns { order: 2; margin-left: auto !important; }
html.cn3-compact body .site-header__wrap--inline .site-nav--inline { display: block !important; order: 3; flex: 0 0 100% !important; width: 100%; }
html.cn3-compact body .mobile-menu-btn { display: block; }

@media (min-width: 700px) and (max-width: 1100px) {
  html body .site-nav--inline .nav-menu { display: flex; flex-flow: row nowrap !important; justify-content: flex-start !important; gap: 4px; margin: 0; padding: 2px 0 8px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  html body .site-nav--inline .nav-menu::-webkit-scrollbar { display: none; }
  html body .site-nav--inline .menu-item { flex: 0 0 auto; margin: 0 !important; }
  html body .site-nav--inline .menu-item > a { display: block; padding: 8px 14px !important; border-radius: 999px; white-space: nowrap; font-size: var(--t-ui, .88rem); }
  html body .site-nav--inline .menu-item > a:hover, html body .site-nav--inline .current-menu-item > a { background: var(--greyBg); }
  html body .site-nav--inline .sub-menu { display: none !important; }
  html body .site-nav--inline .menu-item-has-children > a::after { display: none; }
  html body .site-header__branding .site-title__logo { max-height: 38px !important; height: 38px !important; }
  html body .mobile-menu-btn { width: 44px; height: 44px; }
}
html.cn3-compact body .site-nav--inline .nav-menu { display: flex; flex-flow: row nowrap !important; justify-content: flex-start !important; gap: 4px; margin: 0; padding: 2px 0 8px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
html.cn3-compact body .site-nav--inline .nav-menu::-webkit-scrollbar { display: none; }
html.cn3-compact body .site-nav--inline .menu-item { flex: 0 0 auto; margin: 0 !important; }
html.cn3-compact body .site-nav--inline .menu-item > a { display: block; padding: 8px 14px !important; border-radius: 999px; white-space: nowrap; font-size: var(--t-ui, .88rem); }
html.cn3-compact body .site-nav--inline .menu-item > a:hover, html.cn3-compact body .site-nav--inline .current-menu-item > a { background: var(--greyBg); }
html.cn3-compact body .site-nav--inline .sub-menu { display: none !important; }
html.cn3-compact body .site-nav--inline .menu-item-has-children > a::after { display: none; }
html.cn3-compact body .site-header__wrap--inline { align-items: center !important; gap: 10px !important; }
html.cn3-compact body .site-header__wrap--inline .site-header__btns { display: flex !important; align-items: center; gap: 8px !important; width: auto !important; flex: 0 0 auto !important; }
html.cn3-compact body .site-header__wrap--inline .site-header__branding { flex: 0 1 auto !important; width: auto !important; }
html.cn3-compact body .site-header__branding .site-title__logo { max-height: 38px; }
/* лента меню: плавное затухание справа подсказывает, что её можно прокрутить */
@media (min-width: 700px) and (max-width: 1100px) {
  html body .site-nav--inline .nav-menu { -webkit-mask-image: linear-gradient(to right, #000 92%, transparent); mask-image: linear-gradient(to right, #000 92%, transparent); }
}
html.cn3-compact body .site-nav--inline .nav-menu { -webkit-mask-image: linear-gradient(to right, #000 92%, transparent); mask-image: linear-gradient(to right, #000 92%, transparent); }

/* ═══ Сенсорные экраны: отзывчивость, жесты, плавность ═══ */
html { -webkit-tap-highlight-color: transparent; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
/* нет задержки нажатия и случайного увеличения двойным касанием */
a, button, [role="button"], summary, label, select, input[type="checkbox"], input[type="radio"] { touch-action: manipulation; }
/* страница не уезжает вбок при случайном выступе элемента */
html, body { overflow-x: clip; }

/* горизонтальные ленты не запускают жест «назад» в браузере и не тянут страницу */
.cn3x-topics__row, .re-filter__group, .kk-cards, .cn3x-history__list, .cn3-trendbar__scroll,
.ral-tabs, .ral-app .ral-tabs, .site-nav--inline .nav-menu, .cmp-tray__chips, .cn3x-marquee { overscroll-behavior-x: contain; }
.mobile-nav-panel, .cmp-modal__box { overscroll-behavior: contain; }

/* iOS не увеличивает страницу при вводе: поля не меньше 16 px */
@media (max-width: 700px) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="submit"]):not([type="button"]),
  select, textarea { font-size: 16px !important; }
}

/* карточки не «залипают» в приподнятом состоянии после касания */
@media (hover: none) {
  .authors-list__item:hover, .cn3-etl__card:hover, .cn3-feat-card:hover, .cn3-folio-card:hover, .cn3-hcard:hover,
  .cn3-tcard:hover, .cn3-thub-tile:hover, .cn3-tpill:hover, .cn3x-bu:hover, .cn3x-dl:hover, .cn3x-mk:hover,
  .load-more-posts:hover, .re-card:hover, .kk-card:hover, .swatch:hover, .cn3-card:hover { transform: none; box-shadow: none; }
  .cn3x-jr:hover .cn3x-jr__cover { transform: none; }
  .magazine-issue-card:hover .magazine-issue-cover img, .popular-item:hover .zoom-img img, .zoom-img:hover img { transform: none; }
  /* вместо hover — быстрый отклик на нажатие */
  .re-card:active, .kk-card:active, .cn3-hcard:active, .cn3x-bu:active, .cn3x-dl:active, .cn3x-jr:active, .cn3x-nv-lead:active, .cn3x-nv-row:active { opacity: .82; }
}

/* ниже экрана блоки главной отрисовываются позже: быстрее первая прокрутка на слабых телефонах */
@media (max-width: 1100px) {
  .home-section, .cn3x-trending, .cn3x-history, .cn3x-showcase, .cn3x-bureaus-home, .cn3x-journals, .footer {
    content-visibility: auto;
    contain-intrinsic-size: auto 520px;
  }
}