/* Единая мобильная вёрстка хабов Решения / Комплексные / Отдельные —
   как на лендингах квартиры и коттеджа. */

@media (max-width: 768px) {
  html:has(.sol-page),
  html:has(.kr-page),
  html:has(.os-page),
  html:has(.kr-hero-full),
  html:has(.os-hero-full),
  body:has(.sol-page),
  body:has(.kr-page),
  body:has(.os-page),
  body:has(.kr-hero-full),
  body:has(.os-hero-full) {
    overflow-x: clip;
  }

  .uni-main:has(.sol-page) .uni-wrap,
  .uni-main:has(.kr-page) .uni-wrap,
  .uni-main:has(.os-page) .uni-wrap,
  .uni-main:has(.kr-hero-full) .uni-wrap,
  .uni-main:has(.os-hero-full) .uni-wrap,
  .sol-page,
  .kr-page,
  .os-page {
    width: 100%;
    max-width: 100%;
  }

  .uni-main:has(.sol-page) .uni-wrap,
  .uni-main:has(.kr-page) .uni-wrap,
  .uni-main:has(.os-page) .uni-wrap,
  .uni-main:has(.kr-hero-full) .uni-wrap,
  .uni-main:has(.os-hero-full) .uni-wrap {
    padding-left: 16px !important;
    padding-right: 16px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .sol-page,
  .kr-page,
  .os-page {
    gap: 24px;
  }

  .kr-hero-full,
  .os-hero-full {
    left: auto !important;
    right: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 24px 16px 32px !important;
    border-bottom-left-radius: 24px;
    border-bottom-right-radius: 24px;
  }

  .kr-hero-in,
  .os-hero-in {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
  }

  .kr-hero-title,
  .os-hero-title,
  .sol-h1 {
    font-size: 32px !important;
    line-height: 38px !important;
    max-width: none;
  }

  .kr-hero-lead,
  .os-hero-lead,
  .sol-lead {
    margin-bottom: 20px;
    font-size: 16px !important;
    line-height: 22px !important;
    max-width: none;
  }

  .kr-hero-actions,
  .os-hero-actions,
  .sol-hero__cta {
    display: grid !important;
    grid-template-columns: 1fr;
    width: 100%;
    gap: 10px;
  }

  .kr-hero-actions .btn,
  .os-hero-actions .btn,
  .sol-hero__cta .btn,
  .kr-btn,
  .os-btn,
  .sol-btn {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 48px;
    padding: 14px 16px !important;
    font-size: 15px !important;
    border-radius: 16px !important;
    white-space: normal;
  }

  .sol-hero,
  .sol-kit,
  .kr-eco,
  .os-path {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  .sol-mosaic {
    position: relative !important;
    min-height: 0 !important;
    height: auto !important;
    order: -1;
  }

  .sol-mosaic__frame {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    height: auto !important;
    clip-path: none !important;
    border-radius: 24px !important;
  }

  .sol-mosaic__main {
    aspect-ratio: 16 / 10;
  }

  .sol-mosaic__side {
    display: none;
  }

  .sol-mosaic__badge {
    position: relative !important;
    left: auto;
    bottom: auto;
    max-width: 100%;
    margin-top: 12px;
  }

  .sol-mosaic__glow {
    display: none;
  }

  .sol-kit,
  .kr-eco,
  .os-path {
    padding: 18px !important;
    border-radius: 24px;
    overflow: hidden;
  }

  .sol-kit__stage,
  .kr-eco__stage,
  .os-path__stage {
    min-height: 0 !important;
    max-width: 100%;
    overflow: hidden;
  }

  .sol-kit__svg,
  .kr-eco__svg,
  .os-path__svg {
    width: 100% !important;
    height: auto !important;
    max-height: 280px;
  }

  .kr-h2,
  .os-h2,
  .sol-steps-title,
  .sol2-title {
    font-size: 22px !important;
    line-height: 28px !important;
  }

  .kr-grid,
  .kr-adv-grid,
  .os-grid,
  .os-why-grid,
  .sol2-grid--big,
  .sol2-grid--small,
  .sol-steps-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .kr-card,
  .os-card,
  .sol2-card,
  .sol-step,
  .kr-adv,
  .kr-cta,
  .os-cta,
  .sol-cta {
    border-radius: 24px;
    min-width: 0;
  }

  .os-card {
    min-height: 220px;
  }

  .kr-body,
  .sol2-body {
    padding: 18px;
  }

  .kr-cta,
  .os-cta,
  .sol-cta {
    flex-direction: column;
    align-items: stretch;
    padding: 20px;
    gap: 16px;
  }

  .kr-cta h3,
  .os-cta h3,
  .sol-cta h3 {
    font-size: 20px !important;
    line-height: 24px !important;
  }

  .kr-plank {
    display: none;
  }
}