/**
 * Responsive Phase 2 — mobile-app feel: spacing, rhythm, typography, touch.
 * Loaded after responsive-fixes.css. Does not alter Phase 1 overflow rules.
 */

@media all and (max-width: 968px) {
  body {
    line-height: 140%;
  }

  .container {
    padding-left: max(16px, env(safe-area-inset-left, 0px));
    padding-right: max(16px, env(safe-area-inset-right, 0px));
  }

  .service,
  .blog,
  .team,
  .activity,
  .prices,
  .calc,
  .faq,
  .consult,
  .tag,
  .worth,
  #calc {
    scroll-margin-top: 88px;
  }

  .service-item,
  .worth-item,
  .work-item,
  .case-item,
  .blog-item,
  .team-item {
    padding: 32px 20px;
  }

  .service-item__title,
  .case-item__title,
  .blog-item__title,
  .work-item__title {
    line-height: 115%;
  }

  .single-content p,
  .faq-item-content,
  .case-item__desc,
  .blog-item__desc {
    line-height: 150%;
  }

  .btn,
  .calc-final__btn,
  .cast__btn,
  .coin-content__btn,
  .consult-btn,
  .modal__btn,
  .cookie__btn,
  .blog__btn {
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  button.faq-item-title {
    min-height: 48px;
    padding: 18px 48px 18px 20px;
    line-height: 130%;
    text-align: left;
  }

  .faq-item {
    border-bottom-width: 1px;
    padding: 0;
  }

  .faq-item-content {
    padding: 0 20px 4px;
  }

  .faq-item.active .faq-item-content {
    padding: 16px 20px 20px;
  }

  .faq-item-content:before {
    width: calc(100% - 40px);
  }

  .faq-item-title svg {
    right: 18px;
  }

  .header-nav > ul > li > a,
  .header-nav ul a,
  .sub-menu a {
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  .big-menu a {
    line-height: 120%;
    padding: 6px 0;
  }

  .footer {
    row-gap: 28px;
  }

  .footer-menu {
    gap: 28px;
  }

  .prices-nav {
    display: block;
  }

  .prices-nav__item {
    min-height: 48px;
    padding: 10px 14px;
    font-size: 15px;
    line-height: 130%;
  }

  .tariff-item {
    gap: 14px;
  }

  .calc-item {
    padding: 22px 18px;
  }

  .calc-input__item label {
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 120%;
  }

  .calc-final__btn {
    width: 100%;
    max-width: 100%;
  }

  .consult-input {
    padding: 18px 20px;
  }

  .consult-input__input input,
  .consult-input__input select,
  .footer-search input {
    padding: 12px 0;
    line-height: 1.35;
  }

  .hero-title {
    line-height: 105%;
  }

  .hero-menu a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  .bottom-consult {
    padding: 28px 0;
  }

  .bottom-consult__phone a,
  .bottom-consul__social a {
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .breadcrumb {
    line-height: 140%;
    margin-bottom: 8px;
  }
}

@media all and (max-width: 568px) {
  .btn-header a,
  .mob-m button,
  .header__phone {
    min-height: 44px;
  }

  .tag-link {
    min-height: 44px;
    align-items: center;
  }

  .content-consult__title,
  .consult__title {
    line-height: 110%;
  }
}

@media all and (max-width: 430px) {
  .container {
    padding-left: max(16px, env(safe-area-inset-left, 0px));
    padding-right: max(16px, env(safe-area-inset-right, 0px));
  }

  .service-list {
    grid-gap: 16px;
  }

  .list-service {
    padding-top: 36px;
  }

  .list-service__item {
    grid-template-columns: 1fr;
    grid-gap: 6px;
    padding: 14px 0;
  }

  .list-service__item span:last-child {
    opacity: 0.85;
    font-size: 14px;
  }

  .prices-table__td {
    padding-left: 8px;
    padding-right: 8px;
  }

  .modal__wrapper {
    padding: 0 12px;
  }

  .case-item,
  .blog-item {
    padding: 28px 16px;
  }
}

@media (hover: none), (pointer: coarse) {
  .btn:active,
  .calc-final__btn:active,
  .prices-nav__item:active,
  .cookie__btn:active,
  button.faq-item-title:active {
    opacity: 0.92;
  }
}