/* ============================================================
   LionTech MIA — Mobile responsive layer
   Applies ONLY at small widths. Desktop layouts are untouched.
   Works for both the React pages (inline styles, matched via
   [style*="…"]) and the static HTML pages (matched via classes).
   ============================================================ */

@media (max-width: 860px) {
  html, body { overflow-x: hidden; }

  /* 1) Stack every multi-column grid --------------------------- */
  /* React pages (inline styles) */
  [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
  /* Static pages (class-based) */
  .hero-grid, .work-inner, .partnership-inner, .longterm-inner,
  .platforms-head, .contact-inner, .footer-inner, .principles,
  form.contact-form, .sol-row {
    grid-template-columns: 1fr !important;
  }
  .platforms-grid { grid-template-columns: repeat(2, 1fr) !important; }

  /* 2) Tame oversized column gaps ------------------------------ */
  [style*="gap: 80px"], [style*="gap: 96px"], [style*="gap: 100px"] { gap: 36px !important; }
  .work-inner, .partnership-inner, .longterm-inner, .platforms-head,
  .contact-inner, .hero-grid, .sol-row { gap: 32px !important; }

  /* 3) Shrink display headlines so they never overflow --------- */
  h1 { font-size: clamp(34px, 9vw, 56px) !important; letter-spacing: -1px !important; line-height: 1.04 !important; }
  h2 { font-size: clamp(26px, 6.4vw, 40px) !important; letter-spacing: -0.5px !important; }
  h1.hero-h { font-size: clamp(34px, 9vw, 56px) !important; }
  .section-h2 { font-size: clamp(26px, 6.4vw, 38px) !important; }

  /* 4) Reduce generous side padding ---------------------------- */
  section { padding-left: 22px !important; padding-right: 22px !important; }
  /* inner content blocks that carry their own 64px side padding */
  [style*="padding"][style*="64px"] { padding-left: 22px !important; padding-right: 22px !important; }
  .hero-content, .work, .partnership, .longterm, .platforms,
  .area, .contact { padding-left: 22px !important; padding-right: 22px !important; }
  .solutions { padding-left: 22px !important; padding-right: 22px !important; }

  /* 5) Let fixed-aspect heros grow with their stacked content -- */
  section[style*="aspect-ratio"] { aspect-ratio: auto !important; min-height: auto !important; }

  /* 6) Navigation: tighten so it fits, wrap if needed ---------- */
  nav.top, nav[style] {
    padding-left: 18px !important; padding-right: 18px !important;
    flex-wrap: wrap !important; row-gap: 10px !important;
  }
  nav.top .links, .links { gap: 12px !important; }

  /* 7) Footer bottom strip: stack the two lines ---------------- */
  .footer-bottom { flex-direction: column !important; gap: 10px !important; text-align: center !important; }

  /* 8) Hero on React home: don't bottom-pin a tall stack ------- */
  .hero-content { padding-top: 120px !important; padding-bottom: 64px !important; }

  /* 9) NAV — stop the absolute nav from overlapping the hero ----
     Put it back into flow at the top, give it a solid backdrop,
     and let it wrap. Applies to every React page nav. */
  .site-nav {
    position: relative !important;
    top: auto !important; left: auto !important; right: auto !important;
    padding: 16px 22px !important;
    flex-wrap: wrap !important;
    row-gap: 12px !important;
    column-gap: 16px !important;
    background: rgba(17,17,17,0.92) !important;
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(240,240,240,0.12) !important;
  }
  .site-nav img { height: 30px !important; }
  /* the middle links cluster wraps to its own full-width row */
  .site-nav > div { gap: 14px !important; flex-wrap: wrap !important; }

  /* 10) HERO BODY — trim the big top padding now the nav is in flow */
  .hero-body { padding: 30px 22px 44px !important; }

  /* 11) HOME HERO — make the photo a legible cover with a scrim --
     (image is contain on desktop; on mobile it would letterbox tiny) */
  .home-hero { aspect-ratio: auto !important; min-height: auto !important; }
  .home-hero > img { object-fit: cover !important; }
  .home-hero::before {
    content: ''; position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(180deg, rgba(17,17,17,0.6) 0%, rgba(17,17,17,0.72) 45%, rgba(17,17,17,0.88) 100%);
    pointer-events: none;
  }
  .home-hero .hero-body { align-items: stretch !important; }
  /* lift the dimmed sub-copy to full legibility on the scrim */
  .home-hero .hero-body p { color: rgba(240,240,240,0.82) !important; }

  /* 12) SERVICE ROWS — image always on top, copy below, every row -
     (rows alternate flip on desktop; without this the image lands
      above on odd rows and below on even rows when stacked) */
  .sr-article { gap: 28px !important; }
  .sr-image { order: 0 !important; }
  .sr-copy  { order: 1 !important; }
}

@media (max-width: 480px) {
  h1, h1.hero-h { font-size: clamp(30px, 8.5vw, 44px) !important; }
  .platforms-grid { grid-template-columns: 1fr 1fr !important; }
  section { padding-left: 18px !important; padding-right: 18px !important; }
}