/* ResQ responsive layout fix — 2026-09-24 */
* { box-sizing: border-box; }
html, body, #root { width: 100%; min-width: 0; }
body { overflow-x: hidden; }
img, svg, video, canvas { max-width: 100%; }

@media (max-width: 767px) {
  html, body, #root { max-width: 100%; overflow-x: hidden; }
  main, main > div, section { min-width: 0; max-width: 100%; }

  /* Fix the old mobile override that turned every desktop grid containing
     grid-cols-3/4 into two columns. Responsive grids are one column on phones. */
  main .grid[class~="sm:grid-cols-2"],
  main .grid[class~="md:grid-cols-2"],
  main .grid[class~="lg:grid-cols-3"],
  main .grid[class~="lg:grid-cols-4"],
  main .grid[class~="lg:grid-cols-5"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  /* Standalone two-column content grids also become one column.
     Action-button grids stay two columns. */
  main .grid[class~="grid-cols-2"] { grid-template-columns: minmax(0, 1fr) !important; }
  main .grid[class~="grid-cols-2"]:has(> button:first-child) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  main [class~="rounded-3xl"],
  main [class~="rounded-2xl"],
  main [class~="rounded-xl"] { min-width: 0; max-width: 100%; }

  /* Product cards: full width, compact image area and readable content. */
  main [class~="rounded-3xl"][class~="overflow-hidden"][class~="bg-white"] {
    width: 100%; min-width: 0;
  }
  main [class~="rounded-3xl"][class~="overflow-hidden"][class~="bg-white"] [class~="h-64"] {
    height: 210px !important;
  }
  main [class~="rounded-3xl"][class~="overflow-hidden"][class~="bg-white"] [class~="p-6"] {
    padding: 1rem !important;
  }

  /* Feature / information cards. */
  main [class~="rounded-3xl"][class~="p-7"] { padding: 1.1rem !important; }
  main [class~="rounded-3xl"][class~="p-7"] [class~="w-12"][class~="h-12"] {
    width: 2.75rem !important;
    height: 2.75rem !important;
    margin-bottom: .85rem !important;
  }

  /* More compact vertical rhythm on phones. */
  main section[class~="py-24"] { padding-top: 3rem !important; padding-bottom: 3rem !important; }
  main section[class~="py-20"] { padding-top: 3rem !important; padding-bottom: 3rem !important; }
  main section[class~="py-16"] { padding-top: 2.5rem !important; padding-bottom: 2.5rem !important; }

  /* Long product names/specifications must wrap instead of widening the page. */
  main h1, main h2, main h3, main h4, main p, main a, main button, main span {
    max-width: 100%; overflow-wrap: break-word;
  }

  main input, main select, main textarea { max-width: 100%; min-width: 0; font-size: 16px; }
  main button { max-width: 100%; min-height: 42px; }
  main .grid[class~="grid-cols-2"] > button {
    min-width: 0; white-space: normal; line-height: 1.2;
  }

  /* Keep quote/search/form modals inside the viewport. */
  .fixed.inset-0 { padding: .75rem !important; }
  .fixed.inset-0 > div,
  .fixed.inset-0 .max-w-3xl,
  .fixed.inset-0 .max-w-2xl,
  .fixed.inset-0 .max-w-xl {
    width: 100% !important;
    max-width: 100% !important;
    max-height: calc(100vh - 1.5rem) !important;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  html, body, #root { max-width: 100%; overflow-x: hidden; }

  /* Tablet: two comfortable columns instead of cramped 3/4/5 column layouts. */
  main .grid[class~="md:grid-cols-3"],
  main .grid[class~="md:grid-cols-5"],
  main .grid[class~="lg:grid-cols-3"],
  main .grid[class~="lg:grid-cols-4"],
  main .grid[class~="lg:grid-cols-5"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  main [class~="rounded-3xl"][class~="overflow-hidden"][class~="bg-white"] [class~="h-64"] {
    height: 230px !important;
  }
}

@media (min-width: 1024px) {
  html, body, #root { overflow-x: hidden; }
}