/* public/assets/responsive.css */
/* =========================================================
   Responsive (single) — единый адаптив + dark tokens
   ВАЖНО:
   - НЕ трогаем .btn/.card/.container и базовые теги глобально
   - дизайн компонентов живёт в ui.css
   - layout шапки/поиска/меню — в layout.css
   ========================================================= */

/* ---------- Tablet & below ---------- */
@media (max-width: 992px) {
  /* старые страницы: чтобы формы не "разъезжались" */
  form.form {
    gap: 10px;
  }
}

/* ---------- Mobile ---------- */
@media (max-width: 600px) {
  /* страницы, где используется ui-page */
  .ui-page{
    padding: 14px 10px;
  }

  .ui-page-head{
    align-items: flex-start;
    flex-direction: column;
  }

  /* если где-то есть общий .content — делаем мягче */
  .content{
    padding: 8px;
  }

  /* формы старого типа (если встречаются) */
  form.form label{
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 0.95rem;
  }

  /* сетки объявлений/карточек в одну колонку (если класс общий) */
  .ads-grid{
    display: grid;
    grid-template-columns: 1fr !important;
    gap: 12px;
  }
}

/* ---------- Extra: landscape phones/tablets ---------- */
@media (max-width: 1024px) and (orientation: landscape){
  /* чтобы шапка/поиск не съедали экран по высоте */
  .search-bar{ padding-top: 8px; padding-bottom: 8px; }
}

/* ---------- Dark mode (tokens only) ---------- */
@media (prefers-color-scheme: dark){
  html.allow-dark:root{
    --bg: #0b1220;
    --surface: #0f172a;
    --text: #f8fafc;
    --muted: #94a3b8;
    --border: rgba(148,163,184,.22);

    /* ссылка через токен, чтобы не трогать глобальный селектор a{} */
    --link: #7dd3fc;
  }
}

/* ===== Native (Capacitor) tweaks ===== */

.is-native .site-header {
  padding-top: env(safe-area-inset-top);
}

.is-native body {
  overscroll-behavior: none;
}

/* если где-то есть кнопка установки PWA */
.is-native .install-pwa-btn {
  display: none !important;
}

/* iOS zoom fix (не мешает Android) */
.is-native input,
.is-native textarea,
.is-native select {
  font-size: 16px !important;
}

/* если у тебя были анимации/трансформ на инпутах при фокусе */
.is-native .search-input:focus {
  transform: none !important;
}

/* ===== Native (Capacitor) safe-areas + tweaks ===== */

.is-native {
  --safe-area-top: env(safe-area-inset-top, 0px);
  --safe-area-right: env(safe-area-inset-right, 0px);
  --safe-area-bottom: env(safe-area-inset-bottom, 0px);
  --safe-area-left: env(safe-area-inset-left, 0px);
}

.is-native .site-header {
  padding-top: var(--safe-area-top);
  padding-left: var(--safe-area-left);
  padding-right: var(--safe-area-right);
}

.is-native .bottom-nav {
  padding-bottom: calc(var(--safe-area-bottom) + 10px);
}

/* Фикс для fullscreen/overlay модалок (если класс совпадает) */
.is-native .modal-overlay {
  padding-top: var(--safe-area-top);
  padding-bottom: var(--safe-area-bottom);
}

/* pull-to-refresh / overscroll */
.is-native body {
  overscroll-behavior-y: contain;
}

/* если где-то есть кнопка установки PWA */
.is-native .install-pwa-btn {
  display: none !important;
}

/* iOS zoom fix (не мешает Android) */
.is-native input,
.is-native textarea,
.is-native select {
  font-size: 16px !important;
}

.is-native .search-input:focus {
  transform: none !important;
}

/* iOS tweaks for safe-area */
.platform-ios.is-native .site-header {
  padding-top: max(var(--safe-area-top), 8px);
}

.platform-ios.is-native .bottom-nav {
  padding-bottom: calc(var(--safe-area-bottom) + 20px);
}

.platform-ios.is-native {
  color-scheme: light dark;
}