/* ═══════════════════════════════════════════════════════════════
   adaptive.css — мобільна адаптація seo-a.com.ua
   Підключити в head.php: <link rel="stylesheet" href="/adaptive.css">
═══════════════════════════════════════════════════════════════ */

/* ── Мобільне меню ── */
/* display керується main.css через .mm-chk:checked ~ .mmenu */
.mmenu {
  position: fixed !important;
  top: 62px;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  background: var(--bk, #09090b);
  border-top: 1px solid var(--bor, #1e1e22);
  flex-direction: column;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 8px 0;
}

/* Fallback для старих браузерів: mmenu як прямий сусід body */
body:has(#mm:checked) .mmenu {
  display: flex !important;
}
body:has(#mm:checked) {
  overflow: hidden;
}

/* Стиль пунктів меню — компактний щоб все влазило без скролу */
.mlink {
  padding: 9px 20px;
  font-size: .88rem;
  font-weight: 600;
  border-bottom: 1px solid var(--bor, #1e1e22);
}
.mlink:last-child { border-bottom: none; }
.msub a {
  padding: 7px 20px 7px 32px;
  font-size: .82rem;
}
.mdet summary { padding: 9px 20px; }
.mdet[open] summary { color: var(--ac); }
.mlink-lang {
  padding: 10px 20px;
  border-top: 1px solid var(--bor, #1e1e22);
  margin-top: auto;
}

/* Hamburger → хрестик при відкритому меню */
.mm-chk:checked ~ .con .burg span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.mm-chk:checked ~ .con .burg span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
.mm-chk:checked ~ .con .burg span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Блокуємо скрол коли меню відкрите */
@media (max-width: 1060px) {
  .mm-chk:checked ~ * {
    /* Safari не підтримує :has, тому скрол не блокуємо через CSS */
  }
}



/* ── 1. ГЛОБАЛЬНИЙ ЗАХИСТ ВІД ГОРИЗОНТАЛЬНОГО СКРОЛУ ── */
html, body {
  overflow-x: hidden;
  max-width: 100%;
}
*, *::before, *::after {
  max-width: 100%;
}
/* Елементи які часто виходять за край */
img, svg, video, canvas, iframe {
  max-width: 100%;
}

@media (max-width: 1060px) {
  nav { display: none !important; }
}

/* ── 4. BREAKPOINT 900px ── */
@media (max-width: 900px) {

  /* Контейнер */
  .con { padding: 0 16px !important; }

  /* Сітки → 2 колонки */
  .grid-3,
  .grid-4,
  .rgrid,
  .team-grid,
  .values-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 14px !important;
  }

  /* Сервісна сторінка */
  .svc-layout {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }
  .svc-sidebar {
    position: static !important;
    top: auto !important;
  }

  /* Кроки процесу — 2 колонки */
  .psteps {
    grid-template-columns: 1fr 1fr !important;
    gap: 16px !important;
  }
  .psteps::before { display: none !important; }

  /* Статистика */
  .sgrid {
    grid-template-columns: 1fr 1fr !important;
  }
  .si {
    border-right: none !important;
    border-bottom: 1px solid var(--bor) !important;
    padding: 12px 0 !important;
  }
  .si:last-child { border-bottom: none !important; }

  /* Footer */
  .fgr {
    grid-template-columns: 1fr 1fr !important;
    gap: 24px !important;
  }

  /* Hero */
  .svc-hero { padding: 96px 0 48px !important; }

  /* Прибираємо два-колонки де не потрібно */
  .exl,
  .about-layout,
  .contacts-layout {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }
}

/* ── 5. BREAKPOINT 640px — одна колонка ── */
@media (max-width: 640px) {

  /* Всі сітки → 1 колонка */
  .grid-2,
  .grid-3,
  .grid-4,
  .rgrid,
  .pgrid,
  .team-grid,
  .values-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  /* Кроки процесу → 1 колонка */
  .psteps {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  /* Footer → 1 колонка */
  .fgr {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
  .fbot {
    flex-direction: column !important;
    text-align: center !important;
    gap: 10px !important;
  }

  /* Типографіка */
  h1, .hero h1, section h1 { font-size: 22px !important; line-height: 1.25 !important; }
  .hero h1, section h1 { font-size: clamp(1.2rem, 5.5vw, 1.8rem) !important; }
  h2 { font-size: clamp(1.3rem, 6vw, 1.8rem) !important; }

  /* Секції */
  .sec, .sec-alt { padding: 48px 0 !important; }
  .hero { padding: 84px 0 40px !important; min-height: auto !important; }
  .svc-hero { padding: 88px 0 40px !important; }

  /* Хедер */
  .hcta { font-size: .68rem !important; padding: 7px 9px !important; }
  .logo { font-size: 1.15rem !important; }
  .lbox { width: 26px !important; height: 26px !important; }
  .hph span { display: none !important; }

  /* Картки */
  .card-body { padding: 16px !important; }
  .card-img, .card-img-svg { height: 160px !important; }
  .card-num { font-size: 1.8rem !important; }

  /* CTA форма */
  .cta-row { flex-direction: column !important; }
  .cta-row .fbtn { width: 100% !important; }
  .cta-row .fi { flex: none !important; }
  .fbox, .cta-form, .svc-sidebar { max-width: 100% !important; }

  /* Відступи в елементах */
  .ec, .val-card, .tm-card, .pi { padding: 16px !important; }
  .sn { font-size: 1.5rem !important; }
  .crow { font-size: .73rem !important; }

  /* Таблиці */
  table { display: block !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; }

  /* Логотипи marquee */
  .li { padding: 0 22px !important; }
  .lt-txt { font-size: .85rem !important; }

  /* Trust badges */
  .csp { font-size: .72rem !important; flex-wrap: wrap !important; text-align: center !important; }

  /* Значок */
  .badge { font-size: .68rem !important; padding: 4px 10px !important; }
}

/* ── 6. BREAKPOINT 420px — дуже малі телефони ── */
@media (max-width: 420px) {
  .hr { gap: 4px !important; }
  .lsw { display: none !important; }
  .hcta { padding: 7px 8px !important; font-size: .62rem !important; }
  .badge { font-size: .65rem !important; }

  /* Ще менші відступи */
  .con { padding: 0 12px !important; }

  /* Кнопки в формі */
  .fbtn { font-size: .85rem !important; padding: 12px !important; }
}

/* ── 7. ВІДГУКИ — горизонтальний слайдер на мобільному ── */
@media (max-width: 900px) {
  /* Перетворюємо rgrid на горизонтальний scroll-snap */
  .rgrid {
    display: flex !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    gap: 14px !important;
    padding-bottom: 12px !important;
    /* Ховаємо скролбар але зберігаємо функціонал */
    scrollbar-width: none !important;
  }
  .rgrid::-webkit-scrollbar { display: none !important; }
  .rc {
    min-width: 80vw !important;
    max-width: 80vw !important;
    scroll-snap-align: start !important;
    flex-shrink: 0 !important;
  }
}

/* ── 8. КЕЙСИ — не виходять за екран ── */
@media (max-width: 640px) {
  .cases-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ── 9. POPUP ФОРМА — мобільна адаптація ── */
@media (max-width: 600px) {
  .audit-popup-body {
    padding: 28px 20px !important;
    margin: 16px !important;
    border-radius: 12px !important;
    max-width: calc(100vw - 32px) !important;
  }
}

/* ── 10. НІШЕВІ СТОРІНКИ — специфічні фікси ── */
@media (max-width: 900px) {
  /* Hero infobox на about/service */
  .hero-infobox {
    grid-template-columns: 1fr 1fr !important;
    gap: 14px !important;
  }

  /* Про нас — founder layout */
  .founder-layout {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }

  /* Методологія */
  .method-grid {
    grid-template-columns: 1fr 1fr !important;
  }
  .method-item {
    border-right: none !important;
    border-bottom: 1px solid var(--bor) !important;
  }
  .method-item:last-child { border-bottom: none !important; }

  /* Trust cards */
  .trust-grid,
  .cases-trust-inner {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  /* Expertise grid */
  .exp-grid,
  .expertise-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
  }

  /* Values */
  .val-grid { grid-template-columns: 1fr 1fr !important; }

  /* Process cards */
  .process-grid { grid-template-columns: 1fr 1fr !important; gap: 12px !important; }

  /* Team vals */
  .team-vals { grid-template-columns: 1fr 1fr !important; gap: 12px !important; }

  /* Hero stats */
  .hero-stats { grid-template-columns: 1fr 1fr !important; }
  .hero-stat:nth-child(2) { border-right: none !important; }
  .hero-stat:nth-child(3) { border-top: 1px solid var(--bor) !important; }
  .hero-stat:nth-child(4) { border-top: 1px solid var(--bor) !important; border-right: none !important; }

  /* Sidebar */
  .about-stats { grid-template-columns: 1fr 1fr !important; }
}

@media (max-width: 640px) {
  .exp-grid,
  .expertise-grid,
  .val-grid,
  .process-grid,
  .team-vals,
  .related-cases {
    grid-template-columns: 1fr !important;
  }
  .method-grid {
    grid-template-columns: 1fr !important;
  }
  .hero-infobox {
    grid-template-columns: 1fr !important;
  }

  /* Author card */
  .author-card {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
  }
  .author-card-footer { justify-content: center !important; }
  .author-all-posts { margin-left: 0 !important; }

  /* Case layout */
  .case-layout {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }
  .case-sidebar { position: static !important; }

  /* Post layout blog */
  .post-layout {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  .post-toc { display: none !important; }
  .toc-mobile { display: block !important; }

  /* Case hero KPI */
  .case-hero-kpi { gap: 16px !important; flex-wrap: wrap !important; }
  .case-kpi-n { font-size: 1.6rem !important; }

  /* Ask author block */
  .post-ask-author,
  .post-cta-inline {
    flex-direction: column !important;
    gap: 14px !important;
  }

  /* Related grid blog */
  .related-grid { grid-template-columns: 1fr !important; }

  /* Blog index */
  .cases-grid { grid-template-columns: 1fr !important; }

  /* Breadcrumb */
  .bc { font-size: 11px !important; }
}


/* ── Мобільний хедер: розташування і стилі ── */
@media (max-width: 1060px) {

  /* .hr — flex з order для перестановки елементів */
  .hr {
    flex: 1;
    gap: 6px;
    align-items: center;
    justify-content: flex-end;
  }

  /* Порядок елементів на мобільному: CTA → HPH → BURG */
  .lsw   { order: 0; }
  .hcta  { order: 1; }   /* CTA — перший після lsw */
  .hph   { order: 2; }   /* Телефон — після CTA */
  .burg  { display: flex !important; order: 3; margin-left: auto !important; } /* Burg — максимально вправо */

  /* Телефон — червоний, тільки іконка */
  .hph {
    color: #ff3b3b !important;
    background: rgba(255,59,59,.1) !important;
    border: 1px solid rgba(255,59,59,.4) !important;
    border-radius: 8px !important;
    padding: 6px 10px !important;
    display: flex !important;
    align-items: center !important;
    text-decoration: none !important;
  }
  .hph span {
    display: none !important;
  }
  .hph:hover {
    background: rgba(255,59,59,.2) !important;
    border-color: rgba(255,59,59,.7) !important;
  }
}