/* public/assets/responsive.css */
/* =========================================================
   Responsive — mobile / tablet / native app polish
   ВАЖНО:
   - не меняем базовый UI-kit, а только адаптацию
   - не конфликтуем с layout.css / ui.css
   - усиливаем мобильную и Capacitor-версию
   - сохраняем светлую палитру и единый стиль сайта
   ========================================================= */

/* =========================================================
   GLOBAL RESPONSIVE HELPERS
   ========================================================= */

/* старые страницы: чтобы случайные элементы не раздували вьюпорт */
@media (max-width: 1024px){
  img,
  video,
  iframe,
  canvas,
  table{
    max-width: 100%;
  }

  .content,
  .page-content,
  .page-wrap,
  .card,
  .ui-card{
    min-width: 0;
  }
}

/* старые формы */
@media (max-width: 992px){
  form.form{
    gap: 10px;
  }

  form.form .row,
  form.form .form-row{
    gap: 10px;
  }
}

/* =========================================================
   TABLET & MOBILE PAGE POLISH
   ========================================================= */

@media (max-width: 768px){
  .page-title{
    margin-top: 10px;
  }

  .section-title{
    margin-top: 16px;
  }

  .content{
    padding: 10px;
  }

  .card,
  .ui-card{
    border-radius: 16px;
  }

  .card-body{
    padding: 12px;
  }
}

@media (max-width: 600px){
  /* ui-page */
  .ui-page{
    padding: 14px 10px;
  }

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

  /* общий контент старых страниц */
  .content{
    padding: 8px;
  }

  /* старые формы */
  form.form label{
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 0.95rem;
  }

  form.form .actions,
  form.form .form-actions{
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
  }

  form.form .actions .btn,
  form.form .form-actions .btn{
    width: 100%;
    justify-content: center;
  }

  /* общие сетки */
  .ads-grid,
  .cards-grid,
  .items-grid{
    display: grid;
    grid-template-columns: 1fr !important;
    gap: 12px;
  }

  /* таблицы-обёртки старых страниц */
  .table-wrap,
  .responsive-table,
  .content table{
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* =========================================================
   LANDSCAPE PHONES / SMALL TABLETS
   ========================================================= */

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

  .ui-page{
    padding-top: 12px;
    padding-bottom: 12px;
  }
}

/* =========================================================
   MOBILE NAV / BOTTOM SAFE SPACE
   ========================================================= */

@media (max-width: 1024px){
  html,
  body{
    overflow-x: clip;
    max-width: 100%;
  }

  /* запас под fixed bottom-nav — только у обёртки, не у main (футер идёт сразу после контента) */
  body.has-bottom-nav .page-content,
  body.has-bottom-nav .page-wrap,
  body.has-bottom-nav .content,
  body.has-bottom-nav .ui-page{
    padding-bottom: calc(var(--bottom-nav-h, 64px) + 14px);
  }

  body.has-bottom-nav .app-main,
  body.has-bottom-nav main.app-main{
    padding-bottom: 0;
  }
}

@media (max-width: 600px){
  body.has-bottom-nav .container:last-child,
  body.has-bottom-nav .ui-page:last-child{
    padding-bottom: calc(var(--bottom-nav-h, 64px) + 18px);
  }

  body.has-bottom-nav .app-main,
  body.has-bottom-nav main.app-main,
  body.has-bottom-nav main.app-main.container{
    padding-bottom: 0;
  }
}

/* =========================================================
   ORG UI — категории, списки, витрина (узкие экраны)
   ========================================================= */

@media (max-width: 768px){
  .org-ui,
  .org-ui .ui-shell,
  .org-ui .ui-card,
  .org-ui .ui-card__body{
    min-width: 0;
    max-width: 100%;
  }

  .org-ui .ui-input,
  .org-ui .ui-select,
  .org-ui .orgs-select,
  .org-ui .ui-btn{
    max-width: 100%;
  }

  .org-ui img,
  .org-ui video,
  .org-ui iframe{
    max-width: 100%;
    height: auto;
  }
}

@media (max-width: 420px){
  .org-ui .ui-btn--block,
  .org-ui .ui-btn.ui-btn--block{
    width: 100%;
  }
}

/* =========================================================
   MODALS / DRAWERS ON MOBILE
   ========================================================= */

@media (max-width: 768px){
  .message-modal .modal-content,
  .modal-content{
    width: min(100%, calc(100vw - 20px));
    max-width: calc(100vw - 20px);
    border-radius: 16px;
  }

  .mobile-menu{
    width: min(88vw, 360px);
  }
}

/* =========================================================
   LIGHT COLOR-SCHEME PRIORITY
   ========================================================= */

/* По умолчанию сайт остаётся светлым даже если система в dark */
:root{
  color-scheme: light;
}

@media (prefers-color-scheme: dark){
  html.allow-dark:root{
    --bg: #0b1220;
    --surface: #0f172a;
    --text: #f8fafc;
    --muted: #94a3b8;
    --border: rgba(148,163,184,.22);
    --link: #7dd3fc;
  }
}

/* Но для обычного сайта без allow-dark — принудительно светлая схема */
html:not(.allow-dark){
  color-scheme: light;
}

/* =========================================================
   NATIVE / CAPACITOR
   ========================================================= */

.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);
}

/* базовое поведение native */
.is-native body{
  overscroll-behavior-y: contain;
  overscroll-behavior-x: none;
}

/* шапка */
.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 overlays */
.is-native .modal-overlay,
.is-native .message-modal,
.is-native .mobile-menu{
  padding-top: var(--safe-area-top);
  padding-bottom: var(--safe-area-bottom);
}

/* прячем кнопку установки PWA в приложении */
.is-native .install-pwa-btn{
  display: none !important;
}

/* iOS zoom fix / WebView fix */
.is-native input,
.is-native textarea,
.is-native select{
  font-size: 16px !important;
}

/* убираем странные фокус-трансформы */
.is-native .search-input:focus,
.is-native .ui-input:focus,
.is-native input:focus,
.is-native textarea:focus,
.is-native select:focus{
  transform: none !important;
}

/* интерактивные зоны в native — чуть удобнее нажатие */
@media (max-width: 1024px){
  .is-native .btn,
  .is-native .ui-btn,
  .is-native .header-icon-btn,
  .is-native .burger,
  .is-native .open-chat-btn{
    min-height: 44px;
  }
}

/* =========================================================
   IOS SPECIFICS
   ========================================================= */

.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);
}

/* в нативной iOS-обёртке не включаем системный dark-ui */
.platform-ios.is-native{
  color-scheme: light;
}

/* =========================================================
   NATIVE MODAL / SHEET COMFORT
   ========================================================= */

@media (max-width: 768px){
  .is-native .mobile-menu{
    width: min(90vw, 380px);
  }

  .is-native .message-modal .modal-content,
  .is-native .modal-content{
    width: min(100%, calc(100vw - 16px));
    max-width: calc(100vw - 16px);
    border-radius: 18px;
  }
}

/* =========================================================
   NATIVE KEYBOARD / VIEWPORT SAFETY
   ========================================================= */

/* формы не должны упираться в bottom-nav при открытой клавиатуре */
.is-native .app-main,
.is-native main,
.is-native .ui-page,
.is-native .page-wrap,
.is-native .content{
  scroll-padding-bottom: calc(var(--bottom-nav-h, 64px) + var(--safe-area-bottom) + 20px);
}

/* =========================================================
   SMALL MOBILE POLISH
   ========================================================= */

@media (max-width: 480px){
  .ui-page{
    padding: 12px 10px;
  }

  .page-title{
    margin: 8px 0 12px;
  }

  .section-title{
    margin: 14px 0 8px;
  }

  .card,
  .ui-card{
    border-radius: 14px;
  }

  .card-body{
    padding: 12px;
  }

  .btn,
  .ui-btn{
    min-height: 38px;
  }
}

/* =========================================================
   REDUCE MOTION FOR MOBILE APP FEEL
   ========================================================= */

@media (prefers-reduced-motion: reduce){
  .is-native *,
  .mobile-menu,
  .bottom-nav,
  .search-bar,
  .modal-content{
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

/* =========================================================
   Embed / chromeless — Custom Tabs, WebView, app return pages
   ========================================================= */

.is-embed .site-header,
.is-embed .site-footer,
.is-embed .bottom-nav,
.is-embed .mobile-bottom-nav,
.is-embed #mobileOverlay,
.is-embed #mobileMenu{
  display: none !important;
}

.is-embed body{
  overscroll-behavior-y: contain;
}

.is-embed .app-main,
.is-embed main{
  padding-top: max(8px, env(safe-area-inset-top));
  padding-bottom: max(12px, env(safe-area-inset-bottom));
  min-height: auto;
}

.is-embed .user-ui.profile-page{
  padding-top: 8px;
  padding-bottom: max(16px, env(safe-area-inset-bottom));
}

.is-embed .profile-topbar--compact{
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
}

.is-embed .profile-topbar__left .ui-btn{
  width: 100%;
  justify-content: center;
}

.is-embed .profile-topbar__trail{
  justify-content: center;
  text-align: center;
}

/* =========================================================
   Native WebView / Capacitor — нижняя панель сайта
   ========================================================= */

html.is-native .bottom-nav{
  display: flex !important;
  padding-bottom: calc(var(--safe-area-bottom, env(safe-area-inset-bottom, 0px)) + 10px);
}

html.is-native .app-shell{
  min-height: 100dvh;
}

html.is-native .app-footer,
html.is-native .site-footer{
  margin-top: 8px;
}

html.is-native .events-single_view{
  padding-bottom: calc(var(--bottom-nav-h, 78px) + 12px + env(safe-area-inset-bottom, 0px)) !important;
}

html.is-native .user-ui.profile-page{
  padding-bottom: calc(var(--bottom-nav-h, 78px) + max(16px, env(safe-area-inset-bottom, 0px)));
}

/* Capacitor — нижняя панель сайта (как в WebView ?source=app) */
html.is-capacitor .bottom-nav{
  display: flex !important;
  padding-bottom: calc(var(--safe-area-bottom, env(safe-area-inset-bottom, 0px)) + 10px);
}

html.is-capacitor .app-shell{
  min-height: 100dvh;
}

html.is-capacitor .app-footer,
html.is-capacitor .site-footer{
  margin-top: 8px;
}

html.is-capacitor .events-single_view{
  padding-bottom: calc(var(--bottom-nav-h, 78px) + 12px + env(safe-area-inset-bottom, 0px)) !important;
}

html.is-capacitor .user-ui.profile-page{
  padding-bottom: calc(var(--bottom-nav-h, 78px) + max(16px, env(safe-area-inset-bottom, 0px)));
}