/* Page content (home, quienes_somos, area_de_clientes, catalog pages, contact) is
   laid out with inline styles carrying fixed multi-column grids and desktop-only
   font sizes. Component stylesheets (navbar/hero/cards/footer/forms/newsletter)
   already have their own breakpoints; these rules patch the inline-styled page
   sections, which inline specificity would otherwise keep unresponsive. */

html, body {
  overflow-x: hidden;
}

@media (max-width: 900px) {
  [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  h1 {
    font-size: clamp(28px, 9vw, 42px) !important;
    line-height: 1.1 !important;
  }

  h2, .h2 {
    font-size: clamp(24px, 7vw, 30px) !important;
    line-height: 1.18 !important;
  }

  h3 {
    font-size: clamp(18px, 5vw, 21px) !important;
  }

  [style*="padding:96px"] {
    padding: 56px 20px 44px !important;
  }

  [style*="padding:0 52px"] {
    padding: 0 20px !important;
  }

  /* Gas family accordion stays 2-up on mobile/tablet — overrides the blanket 1fr rule above */
  .gas-family-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }

  /* Banner media box relies on height:100% stretched from its row partner on desktop;
     once the grid above stacks to 1fr, it's alone in its row with an absolutely-positioned
     img contributing no intrinsic height, so it collapses to 0 without this floor. */
  .gases-banner__media {
    min-height: 280px;
  }

  /* Same collapse risk as .gases-banner__media above: the homepage hero's image
     panel stretches to match the text column on desktop, but once the grid
     stacks to 1fr it's alone in its row with an absolutely-positioned img
     contributing no intrinsic height. */
  .home-hero__media {
    min-height: 340px;
  }
}