/* =============================================================================
   mobile-upgrade-v2.css  ·  ?v=v2-1
   Мобильная эргономика для всего сайта: шире экран, собраннее карточки,
   и — приоритет — читабельный результат /diagnostic/.
   Грузится ПОСЛЕ design-upgrade-v2.css (и после v1). 18 страниц (RU+HE).
   Всё в @media (max-width:560px / 380px) → desktop и tablet НЕ затрагиваются.
   Без !important. Direction-neutral (padding-inline) → RTL-safe.

   Блоки 7-8 (каскад карточек + tap-фидбек): чисто мобильное дополнение,
   не пересекается с desktop-blur-reveal из cinematic-v1.css (там свой
   @media (hover:hover) and (pointer:fine) гейт). Уважает prefers-reduced-motion.

   Bottom-bar: safe-spacing НЕ добавляем — main.css уже даёт body{padding-bottom:62px}
   на ≤899px; добавлять ещё = пустой «хвост». Специально не трогаем.
   ============================================================================= */

@media (max-width:560px){

  /* 1. ШИРЕ ЭКРАН: боковые поля контейнера 20→15px, card-padding 20→16px. */
  :root{
    --gutter:15px;
    --card-padding:16px;
  }

  /* 2. КАРТОЧКИ ШИРЕ: срезаем только боковые поля (вертикаль не трогаем) —
        минимально инвазивно и одинаково безопасно для RU и RTL. */
  .svc-card, .choose-card, .flag-card, .diag-card,
  .info-row, .why-vectus, .quick-calc, .doctor, .entry-intro{
    padding-inline:16px;
  }

  /* 3. DIAGNOSTIC RESULT — самая важная зона. Шире, крупный текст спокойнее,
        фото пользователя больше НЕ float → текст на всю ширину (не «узкая
        газетная колонка»). */
  .report{ padding:18px 16px; }
  .rep-summary{ font-size:19px; line-height:1.32; }
  .rep-primary{ padding:16px; }
  .rep-primary b{ font-size:19px; line-height:1.18; }
  .report .rep-thumb{ float:none; width:72px; height:72px; margin:0 0 12px; }

  /* 4. AI-модуль и демо-скан — собраннее по горизонтали. */
  .diag-card.aiscan{ padding:18px 16px; }
  .facemap{ padding:14px; }

  /* 5. SHARE-CARD (WhatsApp после результата): собраннее + заголовок не гигантский. */
  .ai-share-card{ padding:20px 16px 16px; }
  .ai-share-card h3{ font-size:28px; line-height:1.08; }
  .ai-share-text{ font-size:16px; }

  /* 6. Флагман/фичи главной — шире и увереннее. */
  .feat-card{ padding:20px 18px; }

  /* 7. КАСКАДНОЕ ПОЯВЛЕНИЕ КАРТОЧЕК — только мобильный (на десктопе уже есть
        свой blur-reveal в cinematic-v1.css, не дублируем и не смешиваем).
        Дёшево по GPU: только opacity+translateY, без blur/scale.
        Родитель уже получает .in от wireReveal() в ui.js — JS не трогаем. */
  .chip-grid > *, .dir-grid > *, .feat-grid > *,
  .cmp-grid > *, .rules-grid > *,
  .choose-grid > *, .flag-duo > *, .entry-grid > *, .svc-grid > *,
  .works-grid > *,
  .bx-compare > *, .bx-zones > *, .bx-prices > *{
    opacity:0; transform:translateY(12px);
    transition:opacity .5s ease, transform .5s ease;
  }
  .chip-grid.in > *, .dir-grid.in > *, .feat-grid.in > *,
  .cmp-grid.in > *, .rules-grid.in > *,
  .choose-grid.in > *, .flag-duo.in > *, .entry-grid.in > *, .svc-grid.in > *,
  .works-grid.in > *,
  .bx-compare.in > *, .bx-zones.in > *, .bx-prices.in > *{
    opacity:1; transform:none;
  }
  /* шаг ~90ms, максимум 6 шагов — дальше все элементы получают ту же задержку */
  .chip-grid > *:nth-child(1), .dir-grid > *:nth-child(1), .feat-grid > *:nth-child(1),
  .cmp-grid > *:nth-child(1), .rules-grid > *:nth-child(1),
  .choose-grid > *:nth-child(1), .flag-duo > *:nth-child(1), .entry-grid > *:nth-child(1), .svc-grid > *:nth-child(1),
  .works-grid > *:nth-child(1),
  .bx-compare > *:nth-child(1), .bx-zones > *:nth-child(1), .bx-prices > *:nth-child(1){ transition-delay:0ms; }
  .chip-grid > *:nth-child(2), .dir-grid > *:nth-child(2), .feat-grid > *:nth-child(2),
  .cmp-grid > *:nth-child(2), .rules-grid > *:nth-child(2),
  .choose-grid > *:nth-child(2), .flag-duo > *:nth-child(2), .entry-grid > *:nth-child(2), .svc-grid > *:nth-child(2),
  .works-grid > *:nth-child(2),
  .bx-compare > *:nth-child(2), .bx-zones > *:nth-child(2), .bx-prices > *:nth-child(2){ transition-delay:90ms; }
  .chip-grid > *:nth-child(3), .dir-grid > *:nth-child(3), .feat-grid > *:nth-child(3),
  .cmp-grid > *:nth-child(3), .rules-grid > *:nth-child(3),
  .choose-grid > *:nth-child(3), .flag-duo > *:nth-child(3), .entry-grid > *:nth-child(3), .svc-grid > *:nth-child(3),
  .works-grid > *:nth-child(3),
  .bx-compare > *:nth-child(3), .bx-zones > *:nth-child(3), .bx-prices > *:nth-child(3){ transition-delay:180ms; }
  .chip-grid > *:nth-child(4), .dir-grid > *:nth-child(4), .feat-grid > *:nth-child(4),
  .cmp-grid > *:nth-child(4), .rules-grid > *:nth-child(4),
  .choose-grid > *:nth-child(4), .flag-duo > *:nth-child(4), .entry-grid > *:nth-child(4), .svc-grid > *:nth-child(4),
  .works-grid > *:nth-child(4),
  .bx-compare > *:nth-child(4), .bx-zones > *:nth-child(4), .bx-prices > *:nth-child(4){ transition-delay:270ms; }
  .chip-grid > *:nth-child(5), .dir-grid > *:nth-child(5), .feat-grid > *:nth-child(5),
  .cmp-grid > *:nth-child(5), .rules-grid > *:nth-child(5),
  .choose-grid > *:nth-child(5), .flag-duo > *:nth-child(5), .entry-grid > *:nth-child(5), .svc-grid > *:nth-child(5),
  .works-grid > *:nth-child(5),
  .bx-compare > *:nth-child(5), .bx-zones > *:nth-child(5), .bx-prices > *:nth-child(5){ transition-delay:360ms; }
  .chip-grid > *:nth-child(n+6), .dir-grid > *:nth-child(n+6), .feat-grid > *:nth-child(n+6),
  .cmp-grid > *:nth-child(n+6), .rules-grid > *:nth-child(n+6),
  .choose-grid > *:nth-child(n+6), .flag-duo > *:nth-child(n+6), .entry-grid > *:nth-child(n+6), .svc-grid > *:nth-child(n+6),
  .works-grid > *:nth-child(n+6),
  .bx-compare > *:nth-child(n+6), .bx-zones > *:nth-child(n+6), .bx-prices > *:nth-child(n+6){ transition-delay:450ms; }

  /* 8. ТАКТИЛЬНЫЙ ОТКЛИК НА ТАП — на десктопе есть hover-подъём
        (design-upgrade-v2.css/cinematic-v1.css), на тач его нет вообще.
        Лёгкое сжатие вместо hover, только на мобильном. */
  .btn:active, .svc-card:active, .choose-card:active, .dir-card:active,
  .feat-card:active, .flag-card:active, .rule-card:active, .why-item:active,
  .info-row:active, .bx-direction__card:active, .bx-compare__card:active,
  .bx-zones__btn:active, .bx-quiz__opt:active, .work-tile:active{
    transform:scale(.97);
    transition:transform .12s ease;
  }
}

/* Узкие телефоны (≤380px): ещё чуть подобрать поля, без прилипания к краю. */
@media (max-width:380px){
  :root{ --gutter:14px; }
}

/* Уважаем prefers-reduced-motion: каскад и тактильный отклик выключаем,
   контент остаётся полностью видимым и статичным. */
@media (max-width:560px) and (prefers-reduced-motion:reduce){
  .chip-grid > *, .dir-grid > *, .feat-grid > *,
  .cmp-grid > *, .rules-grid > *,
  .choose-grid > *, .flag-duo > *, .entry-grid > *, .svc-grid > *,
  .works-grid > *,
  .bx-compare > *, .bx-zones > *, .bx-prices > *{
    opacity:1; transform:none; transition:none;
  }
  .btn:active, .svc-card:active, .choose-card:active, .dir-card:active,
  .feat-card:active, .flag-card:active, .rule-card:active, .why-item:active,
  .info-row:active, .bx-direction__card:active, .bx-compare__card:active,
  .bx-zones__btn:active, .bx-quiz__opt:active, .work-tile:active{
    transform:none; transition:none;
  }
}