/* Мобильные поправки ко всем принятым шаблонам. Настольные стили не меняются. */
.mobile-selection { display: none; }
@media (max-width: 599px) {
  body .hero.hero h1 {
    font-size: clamp(24px, 7.5vw, 31px);
    overflow-wrap: normal;
    hyphens: none;
  }
  body .katalog-detail h1 {
    font-size: clamp(22px, 6.8vw, 28px);
    hyphens: none;
  }
  body h2, body .physics__intro h2, body .report h2,
  body .audiences__card h2, body .servis-prose h2 {
    font-size: clamp(22px, 6.8vw, 28px);
  }

  /* Изображение занимает собственную строку после контактов, независимо от текста. */
  body .hero.hero:has(> .hero__art) { display: flex; flex-direction: column; }
  body .hero.hero:has(> .hero__art) .hero__inner { display: contents; }
  body .hero.hero:has(> .hero__art) .hero__copy,
  body .hero.hero:has(> .hero__art) .service-breadcrumbs,
  body .hero.hero:has(> .hero__art) .servis-breadcrumbs,
  body .hero.hero:has(> .hero__art) .hero__proofs {
    width: calc(100% - 48px);
    max-width: none;
    margin-inline: auto;
    min-width: 0;
  }
  body .hero.hero:has(> .hero__art) :is(.service-breadcrumbs, .servis-breadcrumbs) {
    order: 0;
    padding-top: 32px;
    margin-bottom: 0;
  }
  body .hero.hero:has(> .hero__art) .hero__copy { order: 1; padding-top: 32px; }
  body .hero.hero:has(> .hero__art) .hero__art {
    order: 2;
    position: relative;
    inset: auto;
    z-index: auto;
    width: 100%;
    height: clamp(240px, 78vw, 320px);
    margin-top: 32px;
    opacity: 1;
  }
  body .hero.hero:has(> .hero__art) .hero__art img { width: 100%; height: 100%; object-fit: cover; }
  body .hero.hero:has(> .hero__art) .hero__proofs { order: 3; margin-block: 24px 32px; }
  body .hero.hero .hero__links { gap: 16px; margin-bottom: 0; }
  body .hero.hero .hero__phone { padding-left: 0; justify-self: start; }

  /* Поля и строки сеток могут сжиматься до ширины телефона. */
  .hero__copy, .hero__links, .prices__card, .katalog-product__body,
  .calculator > *, .process__steps li, .resheniya-metrics dt { min-width: 0; }
  .text-link, .button { max-width: 100%; }
  .text-link { gap: 12px; }
  .button { gap: 12px; }
  .prices__heading { flex-wrap: wrap; }
  .prices__amount { white-space: normal; }
  .prices__amount strong { font-size: clamp(28px, 9vw, 36px); }
  .resheniya-metrics > div { flex-wrap: wrap; gap: 4px 16px; }
  .resheniya-card .button { padding-inline: 16px; }
  .service-breadcrumbs, .servis-breadcrumbs { align-items: center; gap: 4px 12px; }
  .service-breadcrumbs > *, .servis-breadcrumbs > * { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }

  /* Зоны касания у навигации, телефонов и ссылок в тексте. */
  a { min-height: 44px; }
  a:not([class]), .header__phone, .hero__phone, .footer__phone,
  .servis-phone, .doverie-object__surface { display: inline-block; align-content: center; }
  .text-link { min-height: 44px; }
  body .header__button { min-height: 44px; }
  .header__inner { grid-template-columns: 44px minmax(0, 1fr) 44px; }
  .header__actions { min-width: 0; gap: 0; }
  .header__button { font-size: clamp(13px, 3.8vw, 16px); line-height: 1.35; }
  .header__phone { font-size: clamp(12px, 3.5vw, 14px); }
  .header__nav.is-open { height: calc(100dvh - 120px); }
  .footer__nav { row-gap: 8px; }
  .request__consent, .servis-consent { min-height: 44px; }
  .request__consent input, .servis-consent input { margin-block: 13px; }

  /* Таблицы статей сохраняют все колонки на экране без скрытого продолжения. */
  .blog-table table { min-width: 0; table-layout: fixed; font-size: 14px; }
  .blog-table th, .blog-table td { padding: 12px 8px; overflow-wrap: anywhere; }
  .blog-table a { max-width: 100%; }
  .mobile-selection:not([hidden]) { display: block; font-size: 14px; line-height: 1.6; color: var(--ink); overflow-wrap: anywhere; }

  /* Ссылка для клавиатуры показывается в потоке и не закрывает читаемый текст. */
  .skip-link { position: absolute; top: 0; left: 12px; }
  .skip-link:focus { position: relative; display: block; transform: none; margin: 12px 24px; left: auto; }
}

@media (max-width: 399px) {
  .process__steps li { padding-left: 0; }
  .process__marker { position: static; flex-direction: row; width: auto; justify-content: start; margin-bottom: 16px; }
  .process__steps li:not(:last-child)::after { display: none; }
  .katalog-product__body { padding: 24px 20px; }
  .topot-page .service-systems .prices__amount strong,
  .service-systems .prices__amount strong,
  .org-systems__card .prices__amount strong { font-size: 32px; }
}