/* PhuketPrime — mobile UI polish */

:root{
  --pp-safe-bottom: env(safe-area-inset-bottom, 0px);
  --pp-safe-top: env(safe-area-inset-top, 0px);
}

/* Главное: контент НЕ должен прятаться под нижним stickyBar */
@media (max-width: 900px){
  /* Hotfix: hide missing hero papercut layers on mobile */
  img[src^="/assets/hero/papercut/"]{ display:none !important; }

  body{
    padding-bottom: calc(92px + var(--pp-safe-bottom));
  }

  /* iOS: чтобы шапка не прилипала “под вырез” */
  .header{
    padding-top: var(--pp-safe-top);
  }

  /* Убираем ощущение “криво и тесно” */
  .container{ padding: 0 14px; }

  .hero{ padding: 18px 0 18px; }
  .hero__wrap{ border-radius: 22px; }
  .hero__content{ padding: 18px 16px 14px; }

  h1{
    font-size: clamp(26px, 8vw, 34px);
    line-height: 1.06;
  }
  .kicker{ font-size: 12px; }
  .hero__sub{ font-size: 15px; }

  /* Кнопки: в столбик, 100% ширина (чтобы ничего не уезжало вправо) */
  .hero__actions{
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .hero__actions .btn,
  .hero__actions .btn--ghost{
    width: 100%;
  }

  /* Статы: не 3 в ряд на мобилке */
  .hero__stats{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 16px;
  }
  .stat{ padding: 10px; border-radius: 16px; }
  .stat b{ font-size: 16px; }

  /* Медиа чуть ниже, чтобы карточка не “душила” */
  .hero__media{ height: 220px; }

  /* Sticky bar: учитываем safe-area снизу */
  .stickyBar{
    left: 12px;
    right: 12px;
    bottom: calc(10px + var(--pp-safe-bottom));
    padding: 10px;
    border-radius: 18px;
  }
  .stickyBar__item{
    padding: 12px 8px;
    font-size: 14px;
  }

  /* Меню */
  .header__inner{ padding: 10px 14px; }
  .mobileMenu__inner{ padding: 12px 14px; }
  /* Override inline 3-col grid on mobile (inline style must be overridden) */
  .grid[style*="grid-template-columns"]{
    grid-template-columns: 1fr !important;
  }

  /* Cards: a bit more breathing room on mobile */
  .grid{
    gap: 14px;
  }
}

/* Очень узкие экраны */
@media (max-width: 420px){
  .hero__stats{ grid-template-columns: 1fr; }
}