/* ============================================================
   42 STUDIO — Shared mobile responsive layer
   Loaded site-wide. Targets <= 760px.
   Designed to work with existing pages without HTML changes:
   the matching mobile.js auto-injects a hamburger into `.nav`.
   ============================================================ */

@media (max-width: 760px) {
  html, body { overflow-x: hidden; max-width: 100vw; }
  body { -webkit-text-size-adjust: 100%; }

  /* Container */
  .container { padding: 14px !important; }

  /* ---------- NAV ----------
     Старый burger / slide-in UI удалён — заменён bottom tab-bar
     (см. auth.js → ensureMobileTabBar). */

  /* ---------- HOME SLIDER ---------- */
  .slider {
    aspect-ratio: 5/3 !important;
    border-radius: 14px !important;
  }
  .slide { padding: 22px 18px !important; }
  .slide::after {
    background: linear-gradient(180deg, rgba(10,10,15,0.4) 0%, rgba(10,10,15,0.85) 60%, rgba(10,10,15,0.95) 100%) !important;
  }
  .slide-content h2 { font-size: 1.1rem !important; }
  .slide-content p { font-size: 12px !important; line-height: 1.4 !important; }
  .slide-btn { padding: 8px 16px !important; font-size: 11px !important; }
  .dots { bottom: 8px !important; }

  /* ---------- CATEGORY HERO ---------- */
  .cat-hero {
    padding: 22px 18px !important;
    min-height: 240px !important;
    border-radius: 16px !important;
  }
  .cat-hero h1 { font-size: 1.4rem !important; }
  .cat-hero p { font-size: 13px !important; line-height: 1.5 !important; }
  .cat-hero-stats { gap: 12px !important; }
  .cat-hero-stat strong { font-size: 14px !important; }

  /* ---------- GRIDS ---------- */
  .grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
  .card { border-radius: 12px !important; }
  .card-body { padding: 10px !important; }
  .card-title { font-size: 11px !important; line-height: 1.3 !important; }
  .card-desc { display: none !important; }
  .card-tags { display: none !important; }
  .card-footer { margin-top: 6px !important; padding-top: 6px !important; }
  .card-cta { font-size: 11px !important; }
  .card-views { font-size: 9px !important; }

  /* Feature strip / world sections */
  .feature-strip { grid-template-columns: 1fr !important; gap: 10px !important; }
  .feature { padding: 14px !important; }

  /* Cat strip / pills row */
  .cat-strip {
    overflow-x: auto;
    flex-wrap: nowrap !important;
    margin: 0 -14px 16px !important;
    padding: 0 14px !important;
    -webkit-overflow-scrolling: touch;
  }
  .cat-pill {
    flex-shrink: 0;
    font-size: 12px !important;
    padding: 6px 12px !important;
  }

  /* Toolbar (search + count) */
  .toolbar { gap: 8px !important; }
  .search { width: 100% !important; padding: 9px 12px !important; font-size: 13px !important; }

  /* ---------- BREADCRUMB ---------- */
  .breadcrumb { font-size: 11px !important; }

  /* ---------- MODALS ---------- */
  .modal, .modal-content, .auth-modal, .modal-card, .member-modal {
    max-width: calc(100vw - 24px) !important;
    width: calc(100vw - 24px) !important;
    margin: 12px auto !important;
    max-height: calc(100vh - 24px) !important;
    overflow-y: auto !important;
    padding: 18px !important;
    border-radius: 16px !important;
  }

  /* ---------- BUTTONS / FORMS ---------- */
  button, input[type=submit], input[type=button], .btn, .button {
    min-height: 40px;
  }
  input[type=text], input[type=email], input[type=password], input[type=number],
  input[type=url], input[type=search], textarea, select {
    font-size: 16px !important;  /* prevent iOS zoom-on-focus */
    width: 100%;
    box-sizing: border-box;
  }

  /* ---------- WORLD / REPUBLIC ---------- */
  .section, .world-section, .republic-section {
    padding: 14px !important;
    border-radius: 14px !important;
    margin-bottom: 14px !important;
  }
  .section h2 { font-size: 12px !important; }
  .world-tabs, .showcase-tabs, .tabs {
    overflow-x: auto;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch;
  }
  .world-tab, .showcase-tab, .tab { flex-shrink: 0; font-size: 12px !important; padding: 8px 12px !important; }

  /* Polls / posts cards */
  .poll-card, .wall-post, .concept-card, .showcase-card, .showcase-post,
  .tip-card, .bounty-card, .party-card, .profile-card {
    padding: 12px !important;
    border-radius: 12px !important;
  }

  /* Citizens leaderboard */
  .citizens-list, .citizens { font-size: 13px !important; }

  /* Chat widget — id-based selectors override inline styles */
  #chatWidget, .chat-widget {
    bottom: 12px !important;
    right: 12px !important;
    left: 12px !important;
    width: auto !important;
    max-width: none !important;
    max-height: 60vh !important;
  }
  #chatMessages { max-height: 35vh !important; }
  .chat-widget.open { height: 60vh !important; }
  .chat-toggle { width: 48px !important; height: 48px !important; }

  /* ---------- ACCOUNT / WALLET ---------- */
  .account-grid, .wallet-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  .wallet-card, .profile-card {
    padding: 18px !important;
    border-radius: 14px !important;
  }

  /* ---------- ACHIEVEMENTS / POO BIN ---------- */
  .achievements-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
  .poo-bin { max-width: 220px !important; }

  /* ---------- REFER PAGE ---------- */
  .refer-stats, .refer-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .refer-link-input { font-size: 13px !important; }

  /* ---------- CART / CHECKOUT ---------- */
  .cart-grid, .cart-summary-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  .cart-item {
    flex-wrap: wrap !important;
    gap: 10px !important;
    padding: 12px !important;
  }
  .cart-item-img { width: 70px !important; height: 70px !important; }
  .cart-item-actions { width: 100% !important; justify-content: space-between !important; }

  /* ---------- BOARD (Miro-style) ---------- */
  .board-toolbar {
    flex-wrap: wrap !important;
    gap: 6px !important;
    padding: 8px !important;
  }
  .board-tool { font-size: 12px !important; padding: 6px 10px !important; }

  /* ---------- BUILDER / 3D VIEWER ---------- */
  .builder-sidebar { width: 100% !important; }
  .builder-canvas { aspect-ratio: 4/3 !important; }

  /* ---------- FOOTER ---------- */
  footer { padding: 24px 0 !important; font-size: 11px !important; }

  /* ---------- TABLES ---------- */
  table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* ---------- HIDE-ON-MOBILE helpers ---------- */
  .hide-mobile, .desktop-only { display: none !important; }
  .show-mobile, .mobile-only { display: block !important; }
}

/* Slightly tighter at very small phones */
@media (max-width: 380px) {
  .grid { grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
  .card-title { font-size: 10px !important; }
  .slide-content h2 { font-size: 1rem !important; }
  .cat-hero h1 { font-size: 1.2rem !important; }
}

/* Product page (store/<slug>) на мобиле: первый экран = фото → цена/кнопка,
   помещается в высоту телефона (как на сайте, но без длинного скролла до
   покупки). Колонки .product-left/.product-right → display:contents, чтобы
   их дети стали прямыми flex-элементами .product-layout и можно было
   переупорядочить вперемешку: фото(1) → блок покупки(2) → галерея(3) →
   описание(4) → остальные сайдбар-карточки(5). Высота hero капится под
   экран, чтобы фото+название+кнопка влезали без скролла. Заголовок (h1)
   и так выше .product-layout — порядок «название → фото → цена», как на
   десктопе. Одно правило — все store-страницы. */
@media (max-width: 768px) {
  .product-layout {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    margin-top: 14px !important;
  }
  .product-layout .product-left,
  .product-layout .product-right { display: contents !important; }

  .product-layout .hero {
    order: 1 !important;
    width: 100% !important;
    height: clamp(180px, 40dvh, 360px) !important;
    aspect-ratio: auto !important;
    object-fit: cover !important;
  }
  .product-layout #combinedCard {
    order: 2 !important;
    position: static !important;
    margin: 0 !important;
  }
  .product-layout .gallery  { order: 3 !important; margin: 4px 0 0 !important; }
  .product-layout .desc     { order: 4 !important; }
  .product-layout .product-right .sidebar-card {
    order: 5 !important;
    position: static !important;
    margin-bottom: 10px !important;
  }
}