/* Mobile layout hardening for rom4.ru.
   Loaded after page styles so it acts as the final responsive safety layer. */

html,
body {
  max-width: 100%;
  overflow-x: clip;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

img,
picture,
video,
canvas,
svg {
  max-width: 100%;
}

@media (max-width: 767px) {
  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  body,
  .paper-stage,
  .sheet,
  main,
  section,
  header,
  footer {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .paper-stage {
    margin-inline: 0 !important;
    padding-inline: 0 !important;
  }

  .sheet {
    margin-inline: 0 !important;
    overflow: hidden;
  }

  .topbar {
    min-width: 0;
    grid-template-columns: minmax(0, auto) minmax(0, 1fr) auto !important;
    align-items: stretch;
  }

  .brand,
  .brand-note,
  .theme-toggle {
    min-width: 0;
  }

  .brand {
    white-space: nowrap;
  }

  .brand-note {
    overflow-wrap: anywhere;
  }

  .section-grid,
  .hero,
  .section-intro,
  .band-body,
  .mode-body,
  .proof-graphic {
    grid-template-columns: minmax(0, 1fr) !important;
    min-width: 0;
  }

  .hero-copy,
  .section-intro,
  .section-lead,
  .mode-body,
  .proof-graphic,
  .band-body {
    min-width: 0;
    max-width: 100%;
  }

  .hero-copy {
    padding: clamp(30px, 8vw, 48px) clamp(20px, 7vw, 32px) !important;
  }

  .hero-copy h1,
  .hero-copy h1 span {
    max-width: 100%;
    white-space: normal !important;
  }

  .hero-copy h1 {
    margin: 0;
    font-size: clamp(3rem, 13.8vw, 5rem) !important;
    line-height: .88 !important;
    letter-spacing: -.055em;
    text-wrap: balance;
  }

  .lead {
    max-width: 34ch !important;
    margin-top: clamp(34px, 9vw, 56px) !important;
    font-size: clamp(1.15rem, 5.2vw, 1.55rem) !important;
    line-height: 1.38 !important;
    overflow-wrap: break-word;
  }

  .hero-actions {
    width: 100%;
    margin-top: clamp(36px, 10vw, 58px) !important;
  }

  .button,
  .button-primary {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    justify-content: center;
    padding-inline: 18px !important;
    white-space: normal;
    text-align: center;
  }

  .system-visual {
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
  }

  .coordinate {
    left: clamp(18px, 5vw, 28px) !important;
  }

  .section-intro,
  .band-body {
    padding-left: clamp(20px, 7vw, 32px) !important;
    padding-right: clamp(20px, 7vw, 32px) !important;
  }

  h2,
  h3,
  p,
  li,
  figcaption {
    max-width: 100%;
    overflow-wrap: break-word;
  }

  h2 {
    font-size: clamp(2.25rem, 10vw, 4rem) !important;
    line-height: .95 !important;
    text-wrap: balance;
  }

  .mode-track {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100%;
    min-width: 0;
  }

  .mode,
  .mode-core,
  .proof-item,
  .proof-product,
  .proof-napkin {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }

  .proof-graphic {
    justify-items: center;
  }

  .proof-arrow {
    transform: rotate(90deg);
  }

  .phone {
    max-width: min(100%, 210px) !important;
  }

  table {
    max-width: 100%;
  }

  pre,
  code {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
  }
}

@media (max-width: 430px) {
  .topbar {
    grid-template-columns: auto minmax(0, 1fr) auto !important;
  }

  .brand {
    font-size: clamp(1.3rem, 7vw, 1.8rem) !important;
  }

  .brand-note {
    font-size: clamp(.62rem, 2.7vw, .78rem) !important;
    line-height: 1.35;
  }

  .hero-copy h1 {
    font-size: clamp(2.85rem, 14vw, 4.2rem) !important;
  }

  .lead {
    font-size: clamp(1.08rem, 5.1vw, 1.35rem) !important;
  }
}

@media (max-width: 359px) {
  .brand-note {
    display: none;
  }

  .topbar {
    grid-template-columns: minmax(0, 1fr) auto !important;
  }

  .hero-copy {
    padding-inline: 18px !important;
  }

  .hero-copy h1 {
    font-size: clamp(2.6rem, 14vw, 3.45rem) !important;
  }

  .section-intro,
  .band-body {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }
}