/* =========================================================================
   YMX Mobile Fix — minimal responsive overrides for the migrated React app.

   The original public/styles/ymx-responsive.css is scoped under `.lp-page-inner`
   (the Live Preview wrapper from the static site) and doesn't match anything
   in the React structure. This file adds the minimum overrides we need so the
   production pages reflow correctly on phones and tablets.

   Approach: target inline-style patterns React emits (grid-template-columns,
   padding values, etc.) and override with !important. Desktop layouts
   (>=1024px) are untouched. Two breakpoints: ≤1023px (tablet+phone) and
   ≤767px (phone only).
   ========================================================================= */

/* Prevent accidental horizontal scroll, but use `overflow: clip` instead of
   `overflow: hidden`. `hidden` creates a new scrolling context on html/body
   that silently breaks `position: sticky` for every descendant (including
   the sticky header) in Chrome/Safari. `clip` clips overflow without
   establishing that context, so sticky keeps working. */
html, body {
  overflow-x: clip;
  max-width: 100vw;
}

/* ─────────────────────────────────────────────
   Tablet + Phone (<= 1023px)
───────────────────────────────────────────── */
@media (max-width: 1023px) {

  /* ──────────── HEADER ────────────
     Allow header items to wrap onto multiple rows, push the nav to its
     own row below the logo + lang toggle, and grow nav links into proper
     touch targets (12.5px font + 2px padding was unusable on phones). */
  header {
    height: auto !important;
    min-height: 56px !important;
    padding: 10px 16px !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  /* Left container (logo + nav) — allow internal wrapping */
  header > div:first-child {
    gap: 12px !important;
    flex: 1 1 100% !important;
    flex-wrap: wrap !important;
  }
  /* Nav itself takes its own row inside the left container */
  header > div:first-child nav {
    gap: 18px !important;
    flex-wrap: wrap !important;
    width: 100% !important;
  }
  /* Each link is a big-enough tap target — Apple HIG ≥ 44pt
     equivalent. font-size up, vertical padding for touch area. */
  header nav a {
    font-size: 14.5px !important;
    white-space: nowrap !important;
    padding: 8px 0 !important;
    min-height: 32px !important;
    display: inline-flex !important;
    align-items: center !important;
  }
  header img[alt="YMX"] {
    height: 18px !important;
  }

  /* ──────────── ALL GRIDS COLLAPSE TO 1 COLUMN ────────────
     Match on grid-template-columns attribute directly — catches every
     grid layout regardless of how React serializes display:grid. */
  [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  /* Same for camelCase fallback (older React versions / hydration edge) */
  [style*="gridTemplateColumns"] {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  /* ──────────── SECTION PADDING ────────────
     Cover all the common section paddings written inline. */
  section,
  main section {
    padding-left: 20px !important;
    padding-right: 20px !important;
    padding-top: 56px !important;
    padding-bottom: 56px !important;
  }

  /* ──────────── TYPOGRAPHY ──────────── */
  h1 {
    font-size: clamp(28px, 7.5vw, 44px) !important;
    line-height: 1.15 !important;
    letter-spacing: -0.8px !important;
    word-break: keep-all !important;
  }
  h2 {
    font-size: clamp(22px, 5.5vw, 32px) !important;
    line-height: 1.25 !important;
    letter-spacing: -0.5px !important;
    word-break: keep-all !important;
  }
  h3 {
    font-size: clamp(17px, 4.5vw, 22px) !important;
    line-height: 1.3 !important;
    word-break: keep-all !important;
  }
  p {
    word-break: keep-all !important;
  }

  /* Hero h1 with very large desktop sizes (52-72px) explicitly */
  h1[style*="font-size: 72"],
  h1[style*="font-size: 64"],
  h1[style*="font-size: 56"],
  h1[style*="font-size: 52"] {
    font-size: clamp(28px, 7.5vw, 44px) !important;
  }
  h2[style*="font-size: 56"],
  h2[style*="font-size: 52"],
  h2[style*="font-size: 44"],
  h2[style*="font-size: 40"] {
    font-size: clamp(22px, 5.5vw, 32px) !important;
  }

  /* Force nowrap-marked paragraphs (About + Resources + Contact hero
     lede) to wrap normally on mobile — nowrap would overflow viewport. */
  [style*="nowrap"] {
    white-space: normal !important;
  }
  p[style*="max-width: none"],
  p[style*="maxWidth: none"] {
    max-width: 100% !important;
  }

  /* Mono-font eyebrow / step labels: never wrap mid-letter */
  [style*="font-family"][style*="mono"] {
    word-break: keep-all !important;
  }

  /* ──────────── IMAGES + VIDEO ────────────
     Only cap container-filling images (those with width:100% inline) and
     leave logos / icons that set their own height alone. Without this
     scoping, `height: auto !important` would blow up every logo (YMX nav,
     footer logo, client wall, product logos) to its natural pixel size. */
  img[style*="width: 100%"],
  video[style*="width: 100%"] {
    max-width: 100% !important;
  }
  /* Positioned images (slider, lightbox) keep their own sizing */
  img[style*="position: absolute"] {
    max-width: none !important;
  }

  /* ──────────── BUTTONS ──────────── */
  button {
    max-width: 100% !important;
  }

  /* ──────────── STICKY OFF ON MOBILE ────────────
     Solutions page anchor strip + similar — sticky doesn't work well at
     phone widths and tends to overflow horizontally. */
  section[style*="position: sticky"] {
    position: static !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* ──────────── FORMS (Contact + Career) ──────────── */
  form,
  .ymx-contact-form-card {
    padding: 24px !important;
  }
  form [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }
  input, textarea, select {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* ──────────── MODALS (YouTube + Slider lightbox) ──────────── */
  div[role="dialog"] {
    padding: 12px !important;
  }

  /* ──────────── FOOTER ──────────── */
  footer {
    padding: 48px 20px 24px !important;
  }
  /* Footer top group: 4-col grid → 2-col on tablet */
  footer > div:first-child {
    grid-template-columns: 1fr 1fr !important;
    gap: 28px !important;
  }
  /* Footer bottom row: rights + privacy/terms/cookies */
  footer > div:last-child {
    flex-direction: column !important;
    gap: 12px !important;
    align-items: flex-start !important;
  }
  footer > div:last-child > div {
    flex-wrap: wrap !important;
    gap: 14px !important;
  }

  /* ──────────── BACK TO TOP ──────────── */
  .ymx-back-to-top {
    right: 14px !important;
    bottom: 14px !important;
  }
}

/* ─────────────────────────────────────────────
   Phone only (<= 767px)
───────────────────────────────────────────── */
@media (max-width: 767px) {

  section,
  main section {
    padding-left: 16px !important;
    padding-right: 16px !important;
    padding-top: 48px !important;
    padding-bottom: 48px !important;
  }

  /* Footer fully stacks on phone */
  footer > div:first-child {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  /* Header nav drops to next line so logo isn't squished */
  header {
    padding: 10px 14px !important;
  }
  header > div:first-child nav {
    overflow-x: auto !important;
    gap: 14px !important;
    padding-bottom: 4px !important;
    -webkit-overflow-scrolling: touch !important;
  }
  header > div:first-child nav::-webkit-scrollbar { display: none; }
  /* Slightly smaller link font on very small phones (still tappable) */
  header nav a {
    font-size: 13.5px !important;
    padding: 8px 2px !important;
  }

  /* Notice hero — slightly smaller */
  section[style*="min-height: 280"],
  section[style*="minHeight: 280"] {
    min-height: 200px !important;
  }

  /* Tighter typography on tiny phones */
  h1 {
    font-size: clamp(26px, 8vw, 38px) !important;
  }
  h2 {
    font-size: clamp(20px, 6vw, 28px) !important;
  }
}