/* PKG-MOBILE-V2 */
/* ============================================================
   RURECORD — GLOBAL MOBILE OPTIMIZATION v2 (PKG-MOBILE-V2)
   Херо-блок с канвасом полностью скрыт на <=768px.
   Добавлен компактный мобильный заголовок .rr-mobile-hero.
   ============================================================ */

/* ---------- Мобильный заголовок: скрыт на десктопе ---------- */
.rr-mobile-hero { display: none; }

/* ---------- Десктоп: херо-блок виден (без изменений) ---------- */

/* ================= МОБИЛЬНЫЕ (<=768) ================= */
@media (max-width: 768px) {

  /* Полностью скрываем тяжёлый херо-блок */
  .rr-ecosystem-hero { display: none !important; }

  /* Показываем компактный мобильный заголовок */
  .rr-mobile-hero {
    display: block;
    padding: 72px 16px 40px;
    background: var(--obsidian, #090909);
    border-bottom: 1px solid rgba(212,175,55,0.18);
    text-align: center;
  }
  .rr-mobile-hero__kicker {
    font-size: 9px;
    letter-spacing: 0.28em;
    color: #D4AF37;
    font-weight: 600;
    margin-bottom: 16px;
    text-transform: uppercase;
  }
  .rr-mobile-hero h1 {
    font-size: clamp(30px, 9vw, 44px) !important;
    line-height: 1.05 !important;
    margin: 0 0 14px !important;
    color: #F6F6F6;
    letter-spacing: 0.02em;
  }
  .rr-mobile-hero p {
    font-size: 14px !important;
    line-height: 1.55 !important;
    color: #A7A7A7;
    max-width: 340px;
    margin: 0 auto 28px !important;
  }
  .rr-mobile-hero__nodes {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    max-width: 480px;
    margin: 0 auto;
    text-align: left;
  }
  .rr-mobile-node {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 13px 14px;
    min-height: 70px;
    border: 1px solid rgba(212,175,55,0.18);
    background: rgba(255,255,255,0.02);
    text-decoration: none;
  }
  .rr-mobile-node strong {
    font-size: 13px;
    line-height: 1.25;
    color: #F6F6F6;
    font-weight: 600;
  }
  .rr-mobile-node small {
    font-size: 11px;
    line-height: 1.3;
    color: #A7A7A7;
  }

  /* Отключаем декоративные слои и канвас (страховка) */
  .rr-ecosystem-hero__canvas,
  .rr-ecosystem-hero__grid,
  .rr-ecosystem-hero__glow,
  .rr-ecosystem-hero__vignette { display: none !important; }

  /* Секции: отступы и типографика */
  .section { padding: 40px 16px !important; }
  .section-header { margin-bottom: 26px !important; }
  .section-header h2 {
    font-size: clamp(22px, 6vw, 30px) !important;
    line-height: 1.2 !important;
  }
  .section-header p { font-size: 15px !important; line-height: 1.6 !important; }
  .section-label {
    font-size: 10px !important;
    letter-spacing: 0.18em !important;
    margin-bottom: 12px !important;
  }

  h3 { font-size: clamp(17px, 4.5vw, 20px) !important; line-height: 1.3 !important; }
  p, li, dd { font-size: 15px !important; line-height: 1.65 !important; }

  /* Сетки → одна колонка */
  .process-grid,
  .principles-grid,
  .ecosystem-grid,
  .roadmap-timeline {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .stats-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 14px !important;
  }

  /* Карточки */
  .process-card, .principle-card, .eco-card,
  .category-card, .holder-card, .team-card,
  .roadmap-item, .stat-item, .rr-geo-card {
    padding: 20px !important;
  }
  .process-num { font-size: 22px !important; margin-bottom: 10px !important; }
  .stat-value { font-size: clamp(26px, 7vw, 34px) !important; }
  .stat-label { font-size: 12px !important; line-height: 1.4 !important; }
  .principle-icon { width: 40px !important; height: 40px !important; margin-bottom: 12px !important; }
  .principle-icon svg { width: 22px !important; height: 22px !important; }

  /* Горизонтальные карусели → тач-скролл со снапом */
  .scroll-container {
    display: flex !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    gap: 12px !important;
    padding-bottom: 12px !important;
  }
  .scroll-container > * {
    flex: 0 0 78% !important;
    scroll-snap-align: start !important;
  }
  .scroll-hint {
    font-size: 11px !important;
    justify-content: center !important;
    margin-top: 8px !important;
  }

  /* Дорожная карта */
  .roadmap-item { padding-left: 28px !important; }

  /* FAQ */
  .faq-item summary {
    padding: 16px !important;
    font-size: 15px !important;
    line-height: 1.45 !important;
  }
  .faq-answer { padding: 0 16px 16px !important; }
  .faq-answer p { font-size: 14px !important; }

  /* GEO-блок */
  .rr-geo-grid { grid-template-columns: 1fr !important; gap: 14px !important; }
  .rr-geo-summary { font-size: 15px !important; line-height: 1.7 !important; }

  /* CTA */
  .cta-section { padding: 48px 16px !important; text-align: center !important; }
  .cta-content h2 { font-size: clamp(22px, 6vw, 30px) !important; }
  .cta-content p { font-size: 15px !important; margin: 14px 0 24px !important; }

  /* Кнопки и тач-цели */
  .btn {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 48px !important;
    padding: 14px 24px !important;
    font-size: 13px !important;
    justify-content: center !important;
  }
  a, button, summary { touch-action: manipulation !important; }

  /* Изображения */
  img { max-width: 100% !important; height: auto !important; }
  .category-img, .holder-avatar, .team-avatar { border-radius: 8px !important; }

  /* Отключаем скролл-анимации появления */
  .reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }
}

/* ================= МАЛЫЕ ЭКРАНЫ (<=480) ================= */
@media (max-width: 480px) {
  .section { padding: 32px 14px !important; }
  .rr-mobile-hero__nodes { grid-template-columns: 1fr !important; }
  .stats-grid { grid-template-columns: 1fr !important; }
  .scroll-container > * { flex: 0 0 86% !important; }
  .process-card, .principle-card, .eco-card,
  .category-card, .holder-card, .team-card { padding: 16px !important; }
}

/* ================= ПОДДОМЕНЫ: универсальные правила ================= */
@media (max-width: 768px) {
  .holder-grid, .drp-grid, .registry-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  .holder-hero__name { font-size: clamp(24px, 7vw, 34px) !important; }
  .holder-ach, .holder-specs, .holder-timeline { padding: 20px !important; }
  .holder-team__grid { grid-template-columns: 1fr !important; }

  .pth-container { padding: 0 16px !important; }
  .pc-hero__layout { flex-direction: column !important; gap: 24px !important; }
  .pc-why-grid, .pc-why-grid--3 { grid-template-columns: 1fr !important; }
  .pc-pipeline { gap: 16px !important; }
  .pc-pipeline__item { padding: 18px !important; }
  .pc-ba-grid { grid-template-columns: 1fr !important; gap: 20px !important; }
  .pc-metrics { grid-template-columns: repeat(2, 1fr) !important; }
  .pc-ach__row { flex-direction: column !important; gap: 4px !important; }
  .pc-hero__photo img { max-width: 260px !important; }

  .news-grid, .articles-grid { grid-template-columns: 1fr !important; }
  article, .article-body { font-size: 16px !important; line-height: 1.7 !important; }

  input, textarea, select {
    font-size: 16px !important;
    min-height: 48px !important;
  }
  .btn-group { flex-direction: column-reverse !important; gap: 10px !important; }

  table { display: block !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; }

  .modal-overlay { padding: 12px !important; }
  .modal { padding: 24px 18px !important; max-height: 88vh !important; }
}

/* ================= REDUCED MOTION (глобально) ================= */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}
/* PKG-MOBILE-V3 */
/* ============================================================
   PKG-MOBILE-V3 — отступ за хедер + херо на всех страницах
   ============================================================ */
@media (max-width: 768px) {

  /* --- Отступ, чтобы верх херо/контента не прятался за хедером --- */
  .rr-mobile-hero {
    padding-top: 120px !important;
  }

  /* Якорная прокрутка: секции не заезжают под фиксированный хедер */
  section[id], .pc-section[id], #pc-why, #pc-dev, #pc-achievement {
    scroll-margin-top: 90px;
  }

  /* --- ГЛАВНАЯ: тяжёлый херо-граф уже скрыт (display:none) --- */

  /* --- ПАСПОРТ (дрп): убираем декор херо, заголовок оставляем --- */
  .holder-hero__bg,
  .holder-hero__canvas,
  .holder-hero__glow,
  .holder-hero__grid,
  .holder-hero__vignette,
  .holder-hero__sweep,
  .holder-sweep {
    display: none !important;
  }
  .holder-hero {
    min-height: auto !important;
    padding: 110px 16px 40px !important;
  }
  .holder-hero__name { font-size: clamp(26px, 7vw, 34px) !important; }
  .holder-hero__photo img { max-width: 220px !important; }

  /* --- ПАНТЕОН: убираем декор (кольца/фон), контент оставляем --- */
  .pc-hero {
    padding: 110px 0 40px !important;
    min-height: auto !important;
  }
  .pc-hero__frame,
  .pc-hero__line,
  .pc-devcard__svg {
    display: none !important;
  }
  .pc-hero__photo img {
    max-width: 200px !important;
    border: 1px solid rgba(212,175,55,0.25) !important;
  }
  .pc-hero__layout { flex-direction: column !important; gap: 24px !important; }
  .pc-hero__dev { width: 100% !important; }

  /* --- ХАБ / РЕГИСТР: верхний отступ под хедер --- */
  .form-header { padding-top: 20px !important; }
  .container { padding-top: 90px !important; }

  /* Универсально: первый контентный блок не залезает под хедер */
  main > section:first-of-type {
    scroll-margin-top: 90px;
  }
}

/* PKG-MOBILE-V4 */
/* ============================================================
   PKG-MOBILE-V4 — читаемость панелей DRP + херо хаба
   ============================================================ */
@media (max-width: 768px) {

  /* ---------- ЧИТАЕМОСТЬ ПАНЕЛЕЙ ПАСПОРТА ---------- */
  /* Убираем принудительный посимвольный перенос */
  .holder-ach, .holder-specs, .holder-timeline, .holder-team,
  .holder-ach *, .holder-specs *, .holder-specs__item,
  .holder-ach__fields, .holder-ach__fields * {
    word-break: normal !important;
    overflow-wrap: break-word !important;
    hyphens: manual !important;
    letter-spacing: normal !important;
  }

  /* Панели и поля — в одну колонку на всю ширину */
  .holder-ach__fields,
  .holder-specs,
  .holder-specs__grid,
  .holder-ach__fields dl {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    width: 100% !important;
  }

  .holder-ach__row {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 4px !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  .holder-ach__row dt,
  .holder-ach__row dd,
  .holder-ach dt,
  .holder-ach dd,
  .holder-specs dt,
  .holder-specs dd,
  .holder-specs__item {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
  }

  /* Значения метрик не должны ломаться по буквам */
  .holder-ach__row dd,
  .holder-specs dd,
  .holder-specs__value,
  .holder-ach__value {
    font-size: 15px !important;
    line-height: 1.5 !important;
  }

  /* ---------- ХЕРО ХАБА: упрощение на мобильных ---------- */
  .holder-hero, .drp-hero, .registry-hero, .hub-hero, .rr-hero, .hero {
    min-height: auto !important;
    padding: 100px 16px 32px !important;
  }
  .holder-hero__canvas, .holder-hero__grid, .holder-hero__glow,
  .holder-hero__vignette, .holder-sweep, .holder-hero__sweep,
  .drp-hero__canvas, .drp-hero__grid, .hub-hero__canvas {
    display: none !important;
  }
  .holder-hero__name { font-size: clamp(26px, 7vw, 34px) !important; line-height: 1.15 !important; }
  .holder-hero__photo img { max-width: 220px !important; }
}

/* PKG-MOBILE-V5 */
/* ============================================================
   PKG-MOBILE-V5 — полное скрытие херо хаба на мобильных
   Херо хаба (.drp-hero) убирается целиком на <=768px,
   как и херо главной страницы.
   ============================================================ */
@media (max-width: 768px) {
  /* Тяжёлый херо хаба убирается полностью */
  .drp-hero { display: none !important; }

  /* Декоративные элементы херо хаба (страховка, если .drp-hero
     переопределён с более высокой специфичностью) */
  .drp-hero__scanline, .drp-hero__frame, .drp-hero__glow,
  .drp-hero__canvas, .drp-hero__vignette, .drp-hero__layout {
    display: none !important;
  }
}

/* PKG-MOBILE-V6 */
/* ============================================================
   PKG-MOBILE-V6 — паспорт DRP: отступ от хедера, читаемые
   спецификации, единые фото 3:4 с заполнением
   ============================================================ */
@media (max-width: 768px) {

  /* ---------- 1. ПЕРВЫЙ ЭКРАН: отступ от хедера ---------- */
  html { scroll-padding-top: 96px; }

  main > section:first-of-type,
  main > div:first-of-type,
  .holder-hero,
  .drp-hero,
  .pc-hero,
  .drp-register {
    margin-top: 0 !important;
    padding-top: 104px !important;
  }

  /* Декоративная бегущая строка, уходящая под хедер */
  .holder-sweep { display: none !important; }

  /* ---------- 2. СПЕЦИФИКАЦИИ: одна колонка, читаемый текст ---------- */
  [class*="spec"],
  [class*="tile"],
  [class*="metric"],
  [class*="param"],
  [class*="visual"] {
    grid-template-columns: 1fr !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
  }

  [class*="spec"] > *,
  [class*="tile"] > *,
  [class*="metric"] > *,
  [class*="param"] > * {
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  [class*="spec"] *,
  [class*="tile"] *,
  [class*="metric"] * {
    word-break: normal !important;
    overflow-wrap: break-word !important;
    hyphens: manual !important;
  }

  [class*="spec"] strong,
  [class*="spec"] b,
  [class*="tile"] strong,
  [class*="tile"] b,
  [class*="spec"] [class*="value"],
  [class*="tile"] [class*="value"] {
    font-size: clamp(22px, 6.5vw, 30px) !important;
    line-height: 1.25 !important;
    letter-spacing: 0.01em !important;
  }

  [class*="spec"] span,
  [class*="tile"] span,
  [class*="spec"] [class*="label"],
  [class*="tile"] [class*="label"] {
    font-size: 12px !important;
    line-height: 1.45 !important;
    letter-spacing: 0.08em !important;
  }

  /* ---------- 3. ФОТО: единый кадр 3:4 с заполнением ---------- */
  [class*="__photo"],
  [class*="__media"],
  [class*="frame"] {
    aspect-ratio: 3 / 4 !important;
    overflow: hidden !important;
    width: 100% !important;
    max-width: 420px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    background: #0d0d0d !important;
  }

  [class*="__photo"] img,
  [class*="__media"] img,
  [class*="frame"] img,
  .holder-hero img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: 50% 32% !important;
    display: block !important;
  }
}

/* PKG-MOBILE-V7 */
/* ============================================================
   PKG-MOBILE-V7 — QR-код и границы текста паспорта DRP
   ============================================================ */
@media (max-width: 768px) {

  /* ---------- Глобальная защита от горизонтального скролла ---------- */
  html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }
  body * {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* ---------- QR-код: компактный размер ---------- */
  [class*="qr"],
  [class*="barcode"],
  [class*="drp-qr"],
  [class*="passport-qr"],
  [class*="qr-code"] {
    width: auto !important;
    max-width: 160px !important;
    max-height: 160px !important;
    margin: 16px auto !important;
    display: block !important;
  }
  [class*="qr"] svg,
  [class*="qr"] img,
  [class*="barcode"] svg,
  [class*="barcode"] img,
  svg[class*="qr"],
  img[src*="qr"] {
    width: 100% !important;
    height: auto !important;
    max-width: 160px !important;
    max-height: 160px !important;
    display: block !important;
  }

  /* ---------- UID и длинные строки: перенос ---------- */
  [class*="uid"],
  [class*="drp-id"],
  [class*="passport-id"],
  [class*="__id"] {
    overflow-wrap: anywhere !important;
    word-break: normal !important;
    white-space: normal !important;
    font-size: clamp(14px, 4vw, 18px) !important;
    line-height: 1.4 !important;
  }

  /* ---------- Все SVG и IMG внутри паспорта ---------- */
  .holder-hero svg,
  .holder-ach svg,
  .holder-specs svg,
  .holder-timeline svg,
  .holder-team svg,
  .drp-passport svg,
  .holder-hero img,
  .holder-ach img,
  .holder-specs img,
  .holder-timeline img,
  .holder-team img {
    max-width: 100% !important;
    height: auto !important;
  }

  /* ---------- Контейнеры паспорта: не выходят за экран ---------- */
  .holder-hero,
  .holder-ach,
  .holder-specs,
  .holder-timeline,
  .holder-team,
  .drp-passport,
  .drp-passport__section,
  .pc-section {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* ---------- Таблицы спецификаций ---------- */
  table {
    display: block !important;
    width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  table td, table th {
    word-break: normal !important;
    overflow-wrap: break-word !important;
    max-width: 100% !important;
  }

  /* ---------- Кнопки и ссылки внутри паспорта ---------- */
  .btn, a.btn, button {
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: normal !important;
    word-break: normal !important;
  }

  /* ---------- Заголовки секций паспорта ---------- */
  .holder-ach h2, .holder-ach h3,
  .holder-specs h2, .holder-specs h3,
  .holder-timeline h2, .holder-timeline h3,
  .holder-team h2, .holder-team h3,
  .drp-passport h2, .drp-passport h3 {
    word-break: normal !important;
    overflow-wrap: break-word !important;
    max-width: 100% !important;
    font-size: clamp(18px, 5vw, 24px) !important;
    line-height: 1.3 !important;
  }
}