/* Shabel Marketing — mobile refinements.
   Everything here is screen-only and gated behind a max-width query, so the
   desktop layout is byte-for-byte untouched. Inline styles win over normal
   rules, so the few structural overrides carry !important on purpose. */

@media screen and (max-width: 700px) {
  html, body { max-width: 100%; }
  body { overflow-x: hidden; -webkit-text-size-adjust: 100%; }

  /* Nothing may push the page sideways */
  img, video, canvas, svg, image-slot, table, pre, iframe { max-width: 100%; }

  /* Grids whose smallest track is wider than a phone must fall to one column */
  [style*="minmax(340px"], [style*="minmax(360px"], [style*="minmax(380px"],
  [style*="minmax(400px"], [style*="minmax(420px"], [style*="minmax(460px"],
  [style*="minmax(480px"], [style*="minmax(500px"], [style*="minmax(560px"],
  [style*="minmax(600px"], [style*="minmax(620px"],
  [style*="grid-template-columns: minmax(0, 3fr)"],
  [style*="grid-template-columns: minmax(0, 2fr)"],
  [style*="grid-template-columns: 1.1fr"], [style*="grid-template-columns: 1.2fr"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  /* Rate-card tables: labels wrap, figures stay whole, rows get denser */
  .table { font-size: 13.5px; width: 100%; }
  .table td, .table th { padding: 10px 6px; }
  .table td:first-child { padding-right: 10px; white-space: normal; overflow-wrap: anywhere; }

  /* iOS zooms any field under 16px */
  .input, input, textarea, select { font-size: 16px !important; }

  /* Touch ergonomics: no grey flash, no 300ms delay, real hit targets */
  a, button, [role="button"], summary, label { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
  .btn { min-height: 46px; }
  .sm-burger, .seg-opt, .radio { min-height: 44px; }

  /* Floating controls sit clear of the safe area and of each other */
  [data-currency-widget] {
    left: 12px !important;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* Horizontal card rails: momentum, and a card that shows its neighbour */
  [data-hscroll] { -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
  [data-hscroll-item] { width: min(84vw, 420px) !important; }
  [data-hscroll-prev], [data-hscroll-next] { width: 44px !important; height: 44px !important; }

  /* Long headings must not spill on narrow screens */
  h1, h2, h3 { overflow-wrap: break-word; }

  /* Work/service page headers: let the nav own a full row under the logo,
     and give the CTA its own row so it never shares cramped space with a link */
  nav[aria-label="Work sections"] { flex: 1 1 100%; }
  nav[aria-label="Work sections"] .btn { flex: 1 1 100%; margin-top: 6px; }
}

@media screen and (max-width: 430px) {
  .table { font-size: 12.5px; }
  .table td, .table th { padding: 9px 4px; }
  .btn { padding-left: 18px; padding-right: 18px; }
}

/* Touch devices: drop hover-only flourishes so nothing sticks after a tap */
@media (hover: none) {
  .btn:hover { transform: none; }
  .sm-glow::before { opacity: 0 !important; }
  [data-magnetic] { transform: none !important; }
}