/* =====================================================================
   ARAKELOV — МОБИЛЬНАЯ АДАПТАЦИЯ, АГЕНТ №1 (Каркас / глобальное)
   -----------------------------------------------------------------
   Этот файл НЕ трогает style.css и грузится ПОСЛЕ него — все правила
   ниже переопределяют десктопные стили ТОЛЬКО внутри @media (max-width).
   Зона ответственности: .container, .section, .section-header,
   .navbar/.nav-*, .hamburger, .hero*, .cta-button, .footer*,
   #back-to-top, .cookie-notice, .breadcrumbs, .toast.
   Брейкпоинты по спецификации: 768px, 560px, 400px (сетки — 1024px).
   ===================================================================== */

/* Балансируем переносы заголовков — без «висячих» строк из одной буквы
   (напр. h1 «Политика конфиденциальности» на /privacy). Улучшает и десктоп. */
.section-title,
.hero-title {
  text-wrap: balance;
}

/* =========================== 1. КОНТЕЙНЕР / СЕКЦИИ =========================== */
@media (max-width: 768px) {
  .container {
    padding: 0 16px;
  }

  .section {
    padding: 64px 0;
  }

  .section.section-sm {
    padding: 44px 0;
  }

  .section-header {
    margin-bottom: 36px;
  }

  /* заголовки секций не должны распирать узкий экран длинными словами */
  .section-title,
  .section-subtitle {
    overflow-wrap: break-word;
    word-break: break-word;
  }
}

@media (max-width: 480px) {
  .section {
    padding: 48px 0;
  }
}

@media (max-width: 400px) {
  .container {
    padding: 0 14px;
  }
}

/* =========================== 2. НАВБАР =========================== */
@media (max-width: 768px) {
  .navbar {
    padding: 14px 0;
  }

  .navbar.scrolled {
    padding: 10px 0;
  }

  .nav-container {
    padding: 0 16px;
    gap: 12px;
  }

  .nav-logo {
    gap: 10px;
    min-width: 0; /* даёт flex-детям сжиматься вместо наезда друг на друга */
  }

  .nav-logo .logo {
    height: 40px;
    flex-shrink: 0;
  }

  .nav-logo .logo-text {
    font-size: 1.1rem;
    letter-spacing: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .nav-extra {
    gap: 10px;
  }

  /* Меню на всю ширину экрана — панель полностью перекрывает логотип,
     чтобы он не «резался» пополам краем панели. Крупные пункты, тач ≥44px */
  .nav-menu {
    padding: calc(var(--header-height) + 8px) 32px 40px;
    gap: 6px;
    width: 100vw;
  }

  .nav-link {
    width: 100%;
    min-height: 44px;
    display: flex;
    align-items: center;
    font-size: 1rem;
    letter-spacing: .3px;
  }
}

@media (max-width: 400px) {
  .nav-container {
    padding: 0 14px;
  }

  .nav-logo .logo {
    height: 36px;
  }

  .nav-logo .logo-text {
    font-size: 1rem;
    max-width: 46vw;
  }

  .nav-menu {
    width: 100vw;
    padding: calc(var(--header-height) + 8px) 24px 40px;
  }
}

/* Гамбургер — увеличенный тач-таргет 44x44 без утяжеления рисунка */
@media (max-width: 768px) {
  .hamburger {
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    gap: 5px;
  }

  .hamburger .bar {
    width: 26px;
  }
}

/* =========================== 3. HERO =========================== */
@media (max-width: 768px) {
  .hero {
    min-height: auto;
    padding: calc(var(--header-height) + 24px) 0 56px;
  }

  .hero-content {
    padding: 0 16px;
  }

  .hero-title,
  .hero-subtitle {
    overflow-wrap: break-word;
    word-break: break-word;
  }
}

@media (max-width: 560px) {
  .hero {
    min-height: 85vh;
    padding: calc(var(--header-height) + 20px) 0 48px;
  }

  .hero-buttons {
    flex-direction: column;
    width: 100%;
    gap: 14px;
  }

  .hero-buttons .cta-button {
    width: 100%;
  }
}

@media (max-width: 400px) {
  .hero-title {
    font-size: clamp(1.9rem, 8vw, 2.4rem);
  }

  .hero-eyebrow {
    letter-spacing: 2px;
  }
}

/* =========================== 4. КНОПКИ (тач-таргет) =========================== */
@media (max-width: 768px) {
  .cta-button {
    min-height: 44px;
  }
}

/* =========================== 5. ФУТЕР =========================== */
@media (max-width: 768px) {
  .footer {
    padding-top: 56px;
  }

  .footer-content {
    gap: 32px;
    padding-bottom: 40px;
  }

  .footer-brand {
    text-align: center;
  }

  .footer-brand .logo-row {
    justify-content: center;
  }

  .footer-brand p {
    margin-left: auto;
    margin-right: auto;
  }

  .footer-social {
    justify-content: center;
  }

  .footer-bottom {
    flex-direction: column;
    justify-content: center;
    text-align: center;
    padding: 20px 0;
  }
}

@media (max-width: 480px) {
  .footer-column {
    text-align: center;
  }

  .footer-column h4 {
    margin-bottom: 16px;
  }

  .footer-links {
    align-items: center;
  }

  .footer-links li {
    justify-content: center;
    text-align: left;
  }
}

/* =========================== 6. КНОПКА "НАВЕРХ" =========================== */
/* Приподнята, чтобы не перекрывать слим-плашку cookie у нижнего края */
@media (max-width: 768px) {
  #back-to-top {
    right: 16px;
    bottom: 96px;
    width: 46px;
    height: 46px;
    font-size: 1rem;
  }
}

@media (max-width: 400px) {
  #back-to-top {
    right: 12px;
    bottom: 88px;
  }
}

/* =========================== 7. ХЛЕБНЫЕ КРОШКИ / ТОСТ =========================== */
@media (max-width: 768px) {
  .breadcrumbs {
    padding: calc(var(--header-height) + 20px) 0 16px;
    font-size: .82rem;
  }

  .toast {
    bottom: 90px;
    max-width: 92vw;
    padding: 14px 22px;
    font-size: .85rem;
  }
}

/* =========================== 8. COOKIE-ПЛАШКА (ГЛАВНОЕ) =========================== */
/* Компактная слим-плашка у нижнего края экрана.
   Цель: высота НЕ БОЛЕЕ ~22% высоты вьюпорта на мобильных телефонах.
   Расчёт (ориентир, экран ~640-800px высотой):
     паддинг 12px сверху/снизу + кнопка min-height 44px ≈ 68px общей высоты
     68 / 640 ≈ 10.6%   —  68 / 800 ≈ 8.5%   → с запасом укладывается в 22%. */
@media (max-width: 768px) {
  .cookie-notice {
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0;
    max-width: none;
    width: 100%;
    border-radius: 16px 16px 0 0;
    border-left: none;
    border-right: none;
    border-bottom: none;
    padding: 12px 14px;
    gap: 10px;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 -8px 30px rgba(0, 0, 0, .5);
    /* безопасная зона снизу на телефонах с "чёлкой"/жестовой панелью */
    padding-bottom: max(12px, env(safe-area-inset-bottom));
  }

  .cookie-notice p {
    flex: 1 1 auto;
    font-size: .78rem;
    line-height: 1.35;
    text-align: left;
    margin: 0;
    /* максимум 3 строки, дальше — обрезаем, чтобы плашка не разрасталась */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .cookie-notice #cookie-accept {
    flex: 0 0 auto;
    padding: 10px 16px;
    font-size: .72rem;
    min-height: 44px;
    min-width: 44px;
    white-space: nowrap;
  }
}

@media (max-width: 400px) {
  .cookie-notice {
    padding: 10px 12px;
    padding-bottom: max(10px, env(safe-area-inset-bottom));
    gap: 8px;
  }

  .cookie-notice p {
    font-size: .74rem;
    -webkit-line-clamp: 2;
  }

  .cookie-notice #cookie-accept {
    padding: 9px 12px;
    font-size: .68rem;
    min-width: 40px;
  }
}