/* ============================================================================
   SEOTON — мобильная адаптация.
   Десктоп свёрстан инлайн-стилями (dc-runtime → React inline styles), которые
   нельзя переопределить media-query без !important. Поэтому здесь — только
   мобильные правила: классы-хуки + !important, навешанные на контейнеры в
   шаблонах. Десктоп (≥961px) не трогаем.
   Брейкпоинты: 960 (планшет), 640 (телефон), 380 (узкие телефоны).

   ВАЖНО: для схлопнутых колонок используем minmax(0,1fr), а не 1fr. Иначе
   grid-колонка не может стать уже min-content своего содержимого (широкая
   карточка / текст с white-space:nowrap), раздувается шире вьюпорта, и контент
   обрезается из-за overflow-x:hidden на body.
   ========================================================================== */

/* По умолчанию бургер и мобильное меню скрыты — видны только на узких экранах. */
.r-burger { display: none; }
.r-mobile-menu { display: none; }
/* Контент только для мобильных (парный к .r-hide-sm): на десктопе скрыт. */
.r-only-sm { display: none; }
.r-only-sm-flex { display: none; }

/* ------------------------------------------------------------------ ≤960px -- */
@media (max-width: 960px) {
  /* 3 колонки → 2 */
  .r-g3 { grid-template-columns: minmax(0,1fr) minmax(0,1fr) !important; }
  /* 4 колонки → 2 */
  .r-g4 { grid-template-columns: minmax(0,1fr) minmax(0,1fr) !important; }
  /* bento → 2 колонки, сбрасываем спаны */
  .r-bento { grid-template-columns: minmax(0,1fr) minmax(0,1fr) !important; }
  .r-bento > * { grid-column: auto !important; grid-row: auto !important; }
}

/* ------------------------------------------------- шапка/меню ≤860px --------- */
@media (max-width: 860px) {
  /* десктоп-навигация и правый блок (email + CTA) прячутся */
  .r-desktop-nav { display: none !important; }
  /* кнопка-бургер появляется и прижимается вправо */
  .r-burger {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    margin-left: auto;
  }
  /* hero: текст|сцена → одна колонка (текст сверху, сцена снизу) */
  .r-hero { grid-template-columns: minmax(0,1fr) !important; }
  /* hero-сцена с absolute-детьми → вертикальный столбик */
  .r-scene {
    min-height: auto !important;
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 14px !important;
    margin-top: 8px;
  }
  .r-scene > * {
    position: static !important;
    transform: none !important;
    width: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
    left: auto !important; right: auto !important;
    top: auto !important; bottom: auto !important;
    margin: 0 !important;
  }
  /* мобильное меню (показывается dc-runtime'ом по menuOpen) */
  .r-mobile-menu { display: flex !important; flex-direction: column !important; }
}

/* ------------------------------------------------------------------ ≤640px -- */
@media (max-width: 640px) {
  /* боковые отступы секций, чтобы контент не упирался в края */
  .r-sec { padding-left: 16px !important; padding-right: 16px !important; }
  /* любые сетки → одна колонка (minmax(0,1fr), чтобы не было распирания) */
  .r-g2,
  .r-g3,
  .r-g4,
  .r-bento { grid-template-columns: minmax(0,1fr) !important; }
  .r-bento > * { grid-column: auto !important; grid-row: auto !important; }
  /* финальный CTA: форма под текстом, уже отступы */
  .r-cta {
    grid-template-columns: minmax(0,1fr) !important;
    padding: 28px 20px !important;
    gap: 24px !important;
  }
  /* широкие таблицы/гантты/таймлайны — горизонтальный скролл внутри блока */
  .r-scroll {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  /* строка-анонс в шапке — компактнее: одна строка, короткий текст, без переноса */
  .r-announce { padding: 8px 16px !important; font-size: 12px !important; gap: 9px !important; flex-wrap: nowrap !important; }
  /* сугубо декоративная мелочь */
  .r-hide-sm { display: none !important; }
  /* короткий мобильный вариант анонса показываем */
  .r-only-sm { display: inline !important; }
  /* мобильные выпадающие фильтры показываем */
  .r-only-sm-flex { display: flex !important; }
  /* CTA-баннер «расчёт за 1 день»: всё в столбик, текст и кнопка на всю ширину */
  .r-estimate { padding: 26px 22px !important; flex-direction: column !important; align-items: stretch !important; gap: 20px !important; }
  .r-est-left { flex-direction: column !important; align-items: flex-start !important; gap: 14px !important; min-width: 0 !important; }
}

/* ------------------------------------------------------------------ ≤380px -- */
@media (max-width: 380px) {
  .r-sec { padding-left: 13px !important; padding-right: 13px !important; }
  /* очень узкие экраны: 2-кол футер/сетки тоже в одну */
  .r-g4 { grid-template-columns: minmax(0,1fr) !important; }
}

/* ============================================================================
   ДЕСКТОПНОЕ МЕГА-МЕНЮ (≥861px). На мобиле вся .r-desktop-nav скрыта,
   поэтому панели тоже не видны. Открытие — чистый CSS: :hover + :focus-within.
   ========================================================================== */
@media (min-width: 861px) {
  .mega-item { position: static; }

  .mega-trigger {
    display: inline-flex; align-items: center; gap: 6px;
    background: none; border: none; cursor: pointer;
    padding: 9px 13px; border-radius: 999px;
    font-family: 'Manrope', system-ui, sans-serif;
    font-size: 15px; font-weight: 500; color: #3A3D44; line-height: 1;
    transition: color .15s, background .15s;
  }
  .mega-trigger.is-active { color: #15171C; font-weight: 700; }
  .mega-item:hover .mega-trigger,
  .mega-item:focus-within .mega-trigger { color: #15171C; background: rgba(21,23,28,.05); }
  .mega-caret { font-size: 9px; opacity: .5; transition: transform .18s; }
  .mega-item:hover .mega-caret,
  .mega-item:focus-within .mega-caret { transform: rotate(180deg); }

  .mega-panel {
    position: absolute; left: 0; right: 0; top: 100%;
    margin-top: -18px; padding-top: 18px;       /* мост через нижний паддинг хедера, чтобы не было разрыва при наведении */
    z-index: 60;
    opacity: 0; visibility: hidden; transform: translateY(6px);
    pointer-events: none;
    transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
  }
  .mega-item:hover .mega-panel,
  .mega-item:focus-within .mega-panel {
    opacity: 1; visibility: visible; transform: none; pointer-events: auto;
    transition: opacity .18s ease, transform .18s ease;
  }

  .mega-panel-bg {
    background: #FBFAF7; border-bottom: 1px solid rgba(21,23,28,.08);
    box-shadow: 0 34px 60px -34px rgba(21,23,28,.5);
  }
  .mega-inner {
    max-width: 1240px; margin: 0 auto; padding: 26px 32px;
    display: grid; grid-template-columns: 1.65fr .9fr; gap: 28px; align-items: stretch;
    background: #FBFAF7; border-bottom: 1px solid rgba(21,23,28,.08);
    box-shadow: 0 34px 60px -34px rgba(21,23,28,.5);
  }

  .mega-list { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-content: start; }
  .mega-link {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 13px 14px; border-radius: 14px; text-decoration: none;
    border: 1px solid transparent; transition: background .15s, border-color .15s;
  }
  .mega-link:hover { background: #fff; border-color: rgba(21,23,28,.08); }
  .mega-link.is-active { background: #fff; border-color: rgba(124,150,30,.55); }
  .mega-ico {
    flex: none; width: 38px; height: 38px; border-radius: 11px;
    background: #15171C; color: #C9F24D;
    display: flex; align-items: center; justify-content: center;
    font-size: 14px; font-weight: 700;
  }
  .mega-tx { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
  .mega-tx b { font-size: 15.5px; font-weight: 700; color: #15171C; letter-spacing: -.01em; }
  .mega-tx small { font-size: 12.5px; line-height: 1.35; color: #6A6E76; }

  /* боковой баннер — кейс */
  .mega-aside { display: flex; }
  .mega-case {
    display: flex; flex-direction: column; width: 100%;
    background: #15171C; border-radius: 18px; overflow: hidden; text-decoration: none;
    transition: transform .15s, box-shadow .15s;
  }
  .mega-case:hover { transform: translateY(-2px); box-shadow: 0 24px 44px -26px rgba(21,23,28,.6); }
  .mega-case-img { display: block; height: 110px; overflow: hidden; background: #1E2A4A; }
  .mega-case-img img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
  .mega-case-body { padding: 15px 18px 17px; display: flex; flex-direction: column; gap: 5px; }
  .mega-case-tag { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: #C9F24D; }
  .mega-case-metric { font-family: 'Unbounded', sans-serif; font-weight: 600; font-size: 22px; letter-spacing: -.02em; color: #F1F0EB; line-height: 1; }
  .mega-case-title { font-size: 12.5px; line-height: 1.4; color: #B7BAC1; }
  .mega-case-cta { margin-top: 4px; font-size: 13px; font-weight: 700; color: #C9F24D; }

  /* боковой баннер — CTA «оставить заявку» */
  .mega-promo {
    display: flex; flex-direction: column; gap: 8px; width: 100%;
    background: #15171C; border-radius: 18px; padding: 22px 20px; color: #F1F0EB;
  }
  .mega-promo-tag { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: #C9F24D; }
  .mega-promo-title { font-family: 'Unbounded', sans-serif; font-weight: 600; font-size: 18px; letter-spacing: -.02em; line-height: 1.18; }
  .mega-promo-text { font-size: 13px; line-height: 1.45; color: #B7BAC1; margin-bottom: 4px; }
  .mega-promo-btn {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 12px 16px; background: #C9F24D; color: #15171C;
    border-radius: 11px; font-weight: 700; font-size: 14px; text-decoration: none;
    transition: transform .15s;
  }
  .mega-promo-btn:hover { transform: translateY(-2px); }
  .mega-promo-tg { text-align: center; font-size: 13px; font-weight: 600; color: #6EC1E4; text-decoration: none; }
  .mega-promo-tg:hover { color: #C9F24D; }

  /* простой пункт меню без панели (напр. «Партнёрам») */
  .mega-plain {
    display: inline-flex; align-items: center; padding: 9px 13px; border-radius: 999px;
    font-family: 'Manrope', system-ui, sans-serif; font-size: 15px; font-weight: 500;
    color: #3A3D44; text-decoration: none; line-height: 1;
    transition: color .15s, background .15s;
  }
  .mega-plain:hover { color: #15171C; background: rgba(21,23,28,.05); }
  .mega-plain.is-active { color: #15171C; font-weight: 700; }
}