/* Shared responsive overrides */

/* --- Планшеты и всё, что уже 900px --- */
@media (max-width: 900px) {
  html:not(.is-scrollable) {
    height: auto;
  }

  html:not(.is-scrollable) body {
    overflow-x: hidden;
    overflow-y: auto;
    min-height: 100dvh;
  }

  /* hero__foot схлопывается в одну колонку - кнопки не должны висеть справа */
  .hero__cta {
    justify-content: flex-start;
  }

  .page-section__head {
    gap: 0.75rem;
  }
}

/* --- Узкие планшеты и крупные телефоны --- */
@media (max-width: 760px) {
  .page-footer {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.25rem;
  }

  .contact__side,
  .meta-list {
    max-width: none;
  }
}

@media (max-width: 640px) {
  .page-header {
    padding:
      max(0.875rem, env(safe-area-inset-top))
      max(1.25rem, env(safe-area-inset-right))
      0.875rem
      max(1.25rem, env(safe-area-inset-left));
  }

  .page-back {
    min-height: 2.75rem;
    padding: 0.35rem 0.5rem 0.35rem 0;
  }

  .page-main {
    padding:
      clamp(1.5rem, 4vw, 2rem)
      clamp(1.125rem, 4vw, 1.5rem)
      max(3rem, env(safe-area-inset-bottom));
  }

  .page-hero {
    margin-bottom: clamp(2rem, 5vw, 3rem);
  }

  .page-hero__title {
    font-size: clamp(1.875rem, 8vw, 2.5rem);
  }

  .page-hero__desc {
    font-size: 1rem;
  }

  .page-section {
    margin-bottom: clamp(2.5rem, 6vw, 4rem);
  }

  .page-section__title {
    font-size: clamp(1.25rem, 5vw, 1.625rem);
  }

  .cta-card {
    margin-top: clamp(2rem, 5vw, 3rem);
    padding: 1.5rem 1.25rem;
    border-radius: 20px;
  }

  .cta-card__desc {
    font-size: 0.9375rem;
  }

  .cta-card__action {
    padding-top: 1.25rem;
  }

  .page-cta--attached {
    width: 100%;
    padding-top: 1.25rem;
  }

  .btn-lead {
    width: 100%;
    max-width: 22rem;
  }

  .btn-lead__inner {
    width: 100%;
    min-height: 3.25rem;
    padding: 0.9375rem 1.5rem;
    font-size: 1rem;
  }

  /* Главная кнопка во всю ширину, вторичная ссылка - по центру под ней */
  .hero__cta {
    width: 100%;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
  }

  .page-footer {
    padding-bottom: max(2.5rem, env(safe-area-inset-bottom));
  }

  .lead-modal {
    padding:
      max(0.75rem, env(safe-area-inset-top))
      max(0.75rem, env(safe-area-inset-right))
      max(0.75rem, env(safe-area-inset-bottom))
      max(0.75rem, env(safe-area-inset-left));
    align-items: flex-end;
  }

  .lead-modal__dialog {
    width: 100%;
    max-height: min(92dvh, 640px);
    border-radius: 20px 20px 16px 16px;
  }

  .lead-modal__close {
    width: 2.75rem;
    height: 2.75rem;
  }

  .lead-form__input,
  .lead-form__textarea {
    font-size: 1rem;
  }
}

/* --- Компактные телефоны --- */
@media (max-width: 480px) {
  .store-btn {
    min-width: 0;
    width: 100%;
    max-width: 20rem;
  }

  .crumbs {
    font-size: 0.75rem;
  }
}

/* --- Самые узкие экраны (320–360) --- */
@media (max-width: 360px) {
  .page-header__tag {
    font-size: 0.625rem;
    padding: 0.3rem 0.55rem;
    letter-spacing: 0.1em;
  }

  .page-footer__nav {
    gap: 0.25rem 1rem;
  }

  .case-stack li,
  .app-card__stack li {
    padding: 0.4rem 0.9rem;
  }
}

/* --- Телефон в альбомной ориентации: экран низкий, воздух лишний --- */
@media (max-height: 520px) and (orientation: landscape) {
  .hero {
    padding-block: 1.75rem 1.5rem;
  }

  .page-hero {
    margin-bottom: 1.75rem;
  }

  .lead-modal {
    align-items: flex-start;
  }

  .lead-modal__dialog {
    max-height: 94dvh;
  }
}

/* --- Большие мониторы: не растягиваем строку до нечитаемой --- */
@media (min-width: 1800px) {
  .shell {
    max-width: 1560px;
  }

  .page-main,
  .page-footer {
    max-width: 1360px;
  }
}

/* --- Сенсорный ввод: цели нажатия не меньше 44px --- */
@media (pointer: coarse) {
  .btn-quiet,
  .page-footer__nav a,
  .page-footer__docs a,
  .contact-btn,
  .page-back {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
  }

  /* Хлебные крошки второстепенны: увеличиваем зону нажатия, но не рвём строку */
  .crumbs a {
    display: inline-flex;
    align-items: center;
    min-height: 2.25rem;
  }

  .lead-form__consent input {
    width: 1.5rem;
    height: 1.5rem;
    flex: 0 0 1.5rem;
  }

  .cookie-banner {
    bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px));
  }

  .cookie-banner__text {
    white-space: normal;
    font-size: 0.75rem;
  }

  .cookie-banner__btn {
    min-height: 2.25rem;
  }

  .bento-card__arrow {
    opacity: 0.88;
    transform: scale(1) translateY(0);
  }
}

@media (hover: none) {
  .bento-card__arrow {
    opacity: 0.88;
    transform: scale(1) translateY(0);
  }

  .value-card:hover,
  .screen-card:hover,
  .store-btn:hover {
    transform: none;
  }
}