/* =============================================================================
   mobile-upgrade-v1.css  ·  ?v=mobile-1
   Мобильная эргономика: шире по ширине экрана, собраннее карточки, сильнее CTA.
   Слой поверх main.css / pages.css / design-upgrade-v1.css.
   Подключается ТОЛЬКО на / (index.html) и /diagnostic/, грузится ПОСЛЕДНИМ.
   Всё внутри @media (max-width:560px) → desktop и tablet НЕ затрагиваются.
   Откат = удалить одну строку <link>. JS/логика/цены/WhatsApp не тронуты.

   Причина правок (аудит):
   - --gutter:20px → .container = экран−40px, на 360px остаётся 320px контента;
   - --card-padding:20px + большие паддинги карточек складываются с gutter;
   - .rep-primary имел асимметричный left:26px под снятую в v1 полоску.
   ============================================================================= */

@media (max-width:560px){

  /* 1. КОНТЕЙНЕР ШИРЕ: боковые поля 20→15px.
        Премиальное «дыхание» сохранено (не прилипает к краям), но блоки
        используют ширину экрана заметно увереннее. --card-padding 20→16. */
  :root{
    --gutter:15px;
    --card-padding:16px;
  }

  /* 2. КАРТОЧКИ ДИАГНОСТИКИ — собраннее и шире (меньше внутренний inset). */
  .diag-card{ padding:18px 16px; }
  .diag-card.aiscan{ padding:18px 16px; }
  .facemap{ padding:14px; }
  .report{ padding:18px 16px; }

  /* 3. БЛОК РЕКОМЕНДАЦИИ: убираем асимметричный левый отступ (26px был под
        золотую полоску, снятую в v1) → симметрично, шире, «собраннее». */
  .rep-primary{ padding:16px; }

  /* 4. ФЛАГМАН / ФИЧИ-КАРТЫ (главная): меньше полей → визуально шире и увереннее. */
  .feat-card{ padding:20px 18px; }

  /* 5. SHARE-CARD (WhatsApp CTA): собраннее по горизонтали, сильнее как акцент. */
  .ai-share-card{ padding:20px 16px 16px; }
}

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