/* ═══════════════════════════════════════════════════════════════
   MOBILE.CSS — Адаптивные стили ДОМКОМ
   Все правила: только max-width (десктоп не затрагивается)
   Порядок подключения: после site.css, до шаблонных стилей
═══════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════
   TOUCH DEVICES — убрать hover-трансформы
════════════════════════════════════════ */
@media (hover: none) {
  .card:hover,
  .card-hover:hover {
    transform: none !important;
    box-shadow: var(--shadow-sm) !important;
  }
  .btn:hover { transform: none !important; }
  .benefit-card:hover { transform: none !important; box-shadow: none !important; }
  .compass-tile:hover { transform: none !important; box-shadow: none !important; }
  .quick-link:hover { transform: none !important; }
}

/* ════════════════════════════════════════
   768px — основной мобильный брейкпоинт
════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ── Shell: горизонтальный паддинг ── */
  .shell {
    padding-left: var(--space-3);
    padding-right: var(--space-3);
  }

  /* ── Tabs: горизонтальный скролл вместо переноса ── */
  .tabs {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 6px;
    padding-bottom: 4px;
    /* Позволяем скролл за пределы паддинга контейнера */
    margin-left: calc(var(--space-3) * -1);
    margin-right: calc(var(--space-3) * -1);
    padding-left: var(--space-3);
    padding-right: var(--space-3);
  }
  .tabs::-webkit-scrollbar { display: none; }

  .tab {
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    width: auto !important; /* отменяем 520px full-width из site.css */
    font-size: 0.85rem;
    min-height: 38px;
    padding: 6px 12px;
  }

  /* ── Chip в .tabs — не растягивать ── */
  .tabs .chip {
    width: auto !important;
    flex-shrink: 0 !important;
  }

  /* ── Forum sidebar: уже скрыт на 860px, убеждаемся ── */
  .forum-sidebar {
    display: none !important;
  }
  .forum-layout {
    grid-template-columns: 1fr;
  }

  /* ── Toast: выше bottom-tabs ── */
  .toast-container {
    bottom: calc(72px + env(safe-area-inset-bottom, 0px));
    left: var(--space-3);
    right: var(--space-3);
    transform: none;
    max-width: 100%;
  }

  /* ── Hero: меньше паддинг ── */
  .hero {
    padding: var(--space-3) var(--space-4);
  }

  /* ── Card hover: убрать на touch ── */
  .card:hover {
    transform: none;
  }

  /* ── Post/reply compose: убрать боковые паддинги ── */
  .post-compose,
  .reply-compose {
    padding: var(--space-3);
  }

  /* ── MC card ── */
  .mc-card-contacts {
    flex-direction: column;
    gap: var(--space-1);
  }

  /* ── Empty state ── */
  .empty-state {
    padding: var(--space-5) var(--space-3);
  }
  .empty-icon { font-size: 2.2rem; }

  /* ── Notifications: убрать transition-задержку ── */
  .reveal-on-scroll {
    animation-delay: 0ms !important;
  }
}

/* ════════════════════════════════════════
   640px — малые телефоны
════════════════════════════════════════ */
@media (max-width: 640px) {

  /* ── Shell: ещё меньше паддинг ── */
  .shell {
    padding-left: var(--space-3);
    padding-right: var(--space-3);
  }

  /* ── Hero ── */
  .hero {
    padding: var(--space-3);
    border-radius: var(--radius-sm);
  }
  .hero h1 {
    font-size: clamp(1.4rem, 7vw, 2.2rem) !important;
    max-width: 100% !important;
  }
  .hero p { font-size: 0.93rem; }

  /* ── Section ── */
  .section { margin-top: var(--space-4); }
  .section h2 { font-size: clamp(1.1rem, 5vw, 1.4rem); }

  /* ── Actions ── */
  .actions { flex-direction: column; gap: var(--space-2); }
  .actions .btn:not(.btn-sm) {
    width: 100%;
    justify-content: center;
  }

  /* ── Глобальные гриды grid-2 / grid-3 ── */
  /* Уже коллапсируют на 860px через site.css.
     Добавляем явный 640px для тех кто живёт в hx-boost контексте */
  .grid-2,
  .grid-3 {
    grid-template-columns: 1fr !important;
  }

  /* ── Proof strip → 2 колонки ── */
  .proof-strip {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* ── Form grid → 1 колонка ── */
  .form-grid {
    grid-template-columns: 1fr !important;
  }

  /* ── Таблицы: компактные ячейки ── */
  .table th,
  .table td,
  .compare th,
  .compare td {
    padding: 8px 10px;
    font-size: 0.8rem;
  }
  .table-wrap {
    border-radius: var(--radius-sm);
  }

  /* ── Cards: меньше паддинг ── */
  .card { padding: var(--space-3); }
  .panel { padding: var(--space-3); }
  .card h3 { font-size: 1rem; }

  /* ── Alert: компактный ── */
  .alert {
    font-size: 0.875rem;
    padding: 8px 10px;
  }

  /* ── Badge: компактный ── */
  .badge {
    padding: 4px 9px;
    font-size: 0.78rem;
  }

  /* ── KPI value ── */
  .kpi .value { font-size: 1.35rem; }

  /* ── Metric cards (Finance/Passport — inline styles в шаблонах) ── */
  .metric-row {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.5rem !important;
  }
  .metric-value { font-size: 1.25rem !important; }
  .metric-card { padding: 0.75rem 0.875rem !important; }

  /* ── Quick nav (House Home) ── */
  .quick-nav {
    grid-template-columns: repeat(3, minmax(70px, 1fr)) !important;
    gap: 0.4rem !important;
  }
  .quick-link {
    padding: 0.5rem 0.25rem !important;
    font-size: 0.72rem !important;
    gap: 0.2rem !important;
  }
  .quick-link-icon { font-size: 1.25rem !important; }

  /* ── Map ── */
  .map-search-row { flex-direction: column; }
  .map-container { height: 260px !important; }

  /* ── Bar chart (Finance) ── */
  .bar-chart {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* ── Landing additional ── */
  .benefits-grid,
  .for-mc-benefits {
    grid-template-columns: 1fr !important;
  }

  /* ── Chip полная ширина: отмена для inline-chip в карточках ── */
  /* site.css на 520px делает chip: 100% — это ломает chip-теги внутри карточек */
  .card .chip,
  .panel .chip,
  .home-card .chip,
  .hero .chip {
    width: auto !important;
  }

  /* ── Tabs компактнее ── */
  .tab {
    font-size: 0.82rem;
    padding: 5px 10px;
    min-height: 34px;
  }

  /* ── Hamburger drawer padding ── */
  .hamburger-drawer {
    padding: var(--space-3);
  }

  /* ── Filter chips (горизонтальный скролл) ── */
  .forum-channel-chips,
  .feed-filters,
  .tab-filters {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 4px;
    gap: 6px !important;
  }
  .forum-channel-chips::-webkit-scrollbar,
  .feed-filters::-webkit-scrollbar,
  .tab-filters::-webkit-scrollbar { display: none; }
  .forum-channel-chips .chip,
  .feed-filters .chip,
  .tab-filters .chip {
    flex-shrink: 0 !important;
    width: auto !important;
    white-space: nowrap;
  }

  /* ── Avatar dropdown → правый угол ── */
  .avatar-dropdown__menu {
    right: 0;
    left: auto;
    min-width: 180px;
  }

  /* ── Topbar (compact) ── */
  .topbar {
    gap: var(--space-2);
  }

  /* ── Invite nudge ── */
  .invite-nudge {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
  }
  .invite-nudge .btn { width: 100%; justify-content: center; }

  /* ── Dialog (нативный) → bottom sheet ── */
  dialog {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    position: fixed !important;
    bottom: 0 !important;
    top: auto !important;
    left: 0 !important;
    right: 0 !important;
    border-radius: var(--radius-md) var(--radius-md) 0 0 !important;
    max-height: 90dvh;
    overflow-y: auto;
  }

  /* ── dc-confirm-dialog чуть мягче ── */
  .dc-confirm-dialog {
    width: calc(100vw - 2rem);
    max-width: 100%;
    margin: auto 1rem;
    border-radius: var(--radius-md) !important;
    top: auto !important;
    bottom: 1rem;
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
  }

  /* ── MC card contacts ── */
  .mc-card { padding: var(--space-2) var(--space-3); }
}

/* ════════════════════════════════════════
   520px — исправление агрессивных правил site.css
════════════════════════════════════════ */
@media (max-width: 520px) {
  /* site.css: .chip, .btn, .tab { width: 100% } — слишком агрессивно */
  /* Отменяем для элементов внутри flex-row контейнеров */
  .tabs .tab,
  .tabs .chip {
    width: auto !important;
    flex-shrink: 0 !important;
  }

  /* Chip внутри карточек и фильтров — не 100% */
  .card .chip,
  .panel .chip,
  .home-card .chip,
  .nav .chip,
  .hero-badges .chip,
  .hero-kpi .chip,
  .badge-chip .chip,
  .filter-chip,
  .page-chip {
    width: auto !important;
    flex-shrink: 0 !important;
  }

  /* Кнопки в navbar/inline — не 100% */
  .navbar-right .btn,
  .hamburger-drawer .btn,
  .btn-sm { width: auto !important; }

  /* Но в .actions — полная ширина (корректно) */
  .actions .btn:not(.btn-sm) { width: 100% !important; }

  /* Proof strip → 1 колонка */
  .proof-strip {
    grid-template-columns: 1fr !important;
  }
}

/* ════════════════════════════════════════
   480px — очень маленькие экраны
════════════════════════════════════════ */
@media (max-width: 480px) {

  /* Metric row → 1 колонка */
  .metric-row {
    grid-template-columns: 1fr !important;
  }

  /* Quick nav → 2 колонки */
  .quick-nav {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Hero */
  .hero { padding: var(--space-2) var(--space-3); }

  /* Card */
  .card { padding: var(--space-2) var(--space-3); }

  /* Shell */
  .shell {
    padding-left: var(--space-2);
    padding-right: var(--space-2);
  }

  /* Brand */
  .brand { font-size: 1.4rem !important; }

  /* Topbar */
  .topbar .brand { font-size: 1.4rem; }

  /* Compass → 1 колонка (inline 480px в house_home.html уже есть) */
  .compass {
    grid-template-columns: 1fr !important;
  }
}

/* ════════════════════════════════════════
   360px — экстра-маленькие (уже есть в site.css для tabs)
════════════════════════════════════════ */
@media (max-width: 360px) {
  /* Quick nav → 2 колонки */
  .quick-nav {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Shell минимальный паддинг */
  .shell {
    padding-left: var(--space-2);
    padding-right: var(--space-2);
  }

  /* Card */
  .card { padding: 12px; }
}