/* ==========================================================================
   MOBILE-1 / MOBILE-2 — мобильная база clubber.ru
   Подключается ПОСЛЕДНЕЙ, действует только на узких экранах.
   Решения Владислава 25.09.2026: шрифты и контент крупнее (~+20 %),
   Главная — вариант B, Афиша — B + шторка фильтров, Места — C + шторка,
   Фото — A + шторка фильтров, Кабинет — A, Админка — A.
   Файл содержит только базу (каркас, типографика, шапка, нижняя панель,
   шторка). Разделы — в mobile_afisha.css / mobile_places.css /
   mobile_photos.css / mobile_cabinet.css / mobile_admin.css.
   ========================================================================== */

/* ---------------------------------------------------------------- планшет */
@media (max-width: 1024px) {
  .wrapper { width: 100%; max-width: 1170px; padding-left: 14px; padding-right: 14px; }
  img { max-width: 100%; height: auto; }
}

/* ------------------------------------------------------------- телефон --- */
@media (max-width: 768px) {

  /* --- 1. Каркас и масштаб -------------------------------------------------
     Крупнее на ~20 %: базовый кегль 17 px вместо 14, межстрочный 1.4,
     заголовки и подписи пересчитаны. Отступы карточек — тоже +20 %. */
  html { -webkit-text-size-adjust: 100%; }
  body {
    font-size: 17px;
    line-height: 1.4;
    padding-bottom: 66px; /* место под нижнюю панель */
    overflow-x: hidden;
  }
  .wrapper { width: 100%; max-width: 100%; padding-left: 12px; padding-right: 12px; }
  .font12 { font-size: 15px !important; }
  .font13 { font-size: 15px !important; }
  .font14 { font-size: 16px !important; }
  .font16 { font-size: 17px !important; }
  .font18 { font-size: 19px !important; }
  .font20 { font-size: 21px !important; }
  h1, .h1 { font-size: 26px !important; line-height: 1.25; }
  h2, .h2 { font-size: 22px !important; line-height: 1.28; }
  h3, .h3 { font-size: 19px !important; line-height: 1.3; }
  p, li, td, th, div, span, a, label { font-size: inherit; }
  small, .small, .darkgray-col, .gray-col { font-size: 15px; }

  /* всё, что было жёстко 1170 px внутри страниц, растягиваем */
  table, .table { max-width: 100%; }
  .table { display: block; }
  img, iframe, video, embed, object { max-width: 100% !important; }
  pre, code { white-space: pre-wrap; word-break: break-word; }

  /* --- 2. Шапка ------------------------------------------------------------ */
  #header { position: sticky; top: 0; z-index: 60; }
  .cb-head-top { display: flex; align-items: center; gap: 10px; flex-wrap: nowrap; min-height: 56px; }
  .cb-head-logo { flex: 0 0 auto; }
  .cb-head-menu-btn { display: inline-flex !important; width: 46px; height: 46px; align-items: center; justify-content: center; }
  .cb-head-right { margin-left: auto; display: flex; align-items: center; gap: 8px; }
  .cb-head-right .social, .cb-head-right .yourcity { display: none; } /* в шторку меню */
  .cb-search-input { min-height: 46px; font-size: 17px; }
  #userPanel .userinfo-name { font-size: 16px; }
  #userPanel .userinfo-photo img { width: 40px; height: 40px; }

  /* верхнее меню — в шторку по бургеру */
  .cb-head-menu-row { display: none; }
  .cb-head-menu-row.cb-open { display: block; }
  #headerMenu { font-size: 19px; }
  #headerMenu > li { display: block; border-bottom: 1px solid rgba(255,255,255,.12); }
  #headerMenu > li > a { display: block; padding: 14px 4px; min-height: 48px; }
  #cabinetBar { overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; }
  #cabinetBar a { display: inline-block; padding: 12px 10px; min-height: 48px; }

  /* --- 3. Тапы и формы ---------------------------------------------------- */
  a, button, input[type=submit], .cb-btn, .button { touch-action: manipulation; }
  input[type=text], input[type=password], input[type=email], input[type=tel],
  input[type=number], input[type=search], select, textarea {
    min-height: 48px; font-size: 17px; width: 100%; box-sizing: border-box;
  }
  input[type=checkbox], input[type=radio] { width: 24px; height: 24px; }

  /* --- 4. Сетки: одна колонка или две по решению владельца --------------- */
  .cb-cols, .cb-row, .row { display: block; }
  .cb-col { width: 100% !important; float: none !important; }

  /* --- 5. Нижняя панель навигации (создаёт mobile.js) --------------------- */
  #cbMobileNav {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
    display: flex; background: #fff; border-top: 1px solid #e6e9ec;
    box-shadow: 0 -2px 10px rgba(0,0,0,.06);
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
  #cbMobileNav a {
    flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
    min-height: 58px; font-size: 12px; color: #555; text-decoration: none; gap: 3px;
  }
  #cbMobileNav a.cb-on { color: #00aeef; }
  #cbMobileNav svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; }

  /* --- 6. Шторка (фильтры, меню) ----------------------------------------- */
  .cb-sheet-backdrop {
    position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 80;
    opacity: 0; pointer-events: none; transition: opacity .2s;
  }
  .cb-sheet-backdrop.cb-open { opacity: 1; pointer-events: auto; }
  .cb-sheet {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 81;
    background: #fff; border-radius: 16px 16px 0 0; max-height: 86vh; overflow-y: auto;
    transform: translateY(102%); transition: transform .22s ease-out;
    padding: 8px 16px calc(16px + env(safe-area-inset-bottom, 0));
  }
  .cb-sheet.cb-open { transform: translateY(0); }
  .cb-sheet-grab { width: 44px; height: 4px; border-radius: 2px; background: #d5d5d5; margin: 6px auto 12px; }
  .cb-sheet-title { font-size: 19px; font-weight: bold; margin: 0 0 10px; }
  .cb-sheet .cb-btn, .cb-sheet button[type=submit] { width: 100%; min-height: 50px; font-size: 17px; }
  .cb-sheet-filter-btn {
    display: inline-flex; align-items: center; gap: 8px; min-height: 46px;
    padding: 0 16px; border: 1px solid #d5d5d5; border-radius: 23px; background: #fff;
    font-size: 16px; color: #000; cursor: pointer;
  }

  /* --- 7. Мелочи, которые ломали вид ------------------------------------- */
  .cb-places-ribbon, .cb-type-ribbon { overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; }
  .cb-places-ribbon-item, .cb-type-ribbon a { display: inline-block; }
  .paginate, .pagination { font-size: 16px; }
  .paginate a, .pagination a { display: inline-block; min-width: 44px; min-height: 44px; line-height: 44px; text-align: center; }
  .overlay { display: none !important; }
}

/* ------------------------------------------------------- узкий телефон --- */
@media (max-width: 420px) {
  body { font-size: 17px; }
  .wrapper { padding-left: 10px; padding-right: 10px; }
  h1, .h1 { font-size: 24px !important; }
  h2, .h2 { font-size: 21px !important; }
}

/* --------------------------------------------------- печать/большие экраны */
@media (min-width: 769px) {
  #cbMobileNav, .cb-sheet, .cb-sheet-backdrop { display: none !important; }
}