/* Mobile responsive overrides for the QWATER site.
   The pages are hand-built with fixed desktop-only inline styles (1600px
   min-width, multi-column grids). These rules use structural selectors
   (not inline-style-string matching, which breaks once the framework
   re-serializes style attributes) plus !important to win over them. */

@media (max-width: 768px) {

  /* The single top-level wrapper (parent of <header>) forces 1600px min-width */
  div:has(> header) {
    min-width: 0 !important;
    width: 100% !important;
  }

  /* Header: logo + nav columns stack instead of sitting in 3 fixed columns */
  header {
    display: flex !important;
    flex-direction: column !important;
    gap: 18px !important;
    padding: 20px 18px 0 18px !important;
  }

  /* Logo is a fixed 100px-tall raster image (~452px wide) that overflows
     a mobile viewport and gets clipped by the page wrapper's
     overflow-x:hidden, cutting off the end of "QWATER". Shrink it to fit,
     and reduce the compensating negative margin (see inline style)
     proportionally so it still lines up with the heading below it. */
  header img {
    height: 64px !important;
    margin-left: -5px !important;
  }

  header > div {
    border-left: none !important;
    padding-left: 0 !important;
    border-top: 1px solid #e2e2e2 !important;
    padding-top: 14px !important;
  }

  /* Page title + spec columns bar (the div right after <header>) */
  header + div {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    padding: 18px 18px 24px 18px !important;
  }

  header + div div[style*="display: grid"] {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    padding-left: 0 !important;
    white-space: normal !important;
  }

  h1 {
    font-size: 26px !important;
  }

  /* Main content column: tighter side padding for small screens */
  main {
    padding: 0 18px !important;
    gap: 36px !important;
  }

  /* Decorative measurement ruler on the right edge: desktop-only flourish */
  [aria-hidden="true"] {
    display: none !important;
  }

  /* Content sections: image, then text, stacked (matches source DOM order).
     Plain block layout (not flex) so width:100% is never ambiguous across browsers. */
  section[data-screen-label] {
    display: block !important;
  }

  section[data-screen-label] > * {
    display: block !important;
    float: none !important;
    position: static !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Must stay position:relative — it's the containing block for the
     absolutely-positioned (inset:0) cover image/video inside it. The
     generic "section > *" rule above forces position:static, which lets
     that image escape its box and blow up to the wrong size; this rule
     needs higher selector specificity to win back over it. */
  section[data-screen-label] > [data-ruler-box] {
    position: relative !important;
    width: 100% !important;
    margin-bottom: 14px !important;
  }

  [data-ruler-mid] {
    position: static !important;
    align-self: auto !important;
    width: 100% !important;
  }

  /* first child = heading block, second child = KR/EN text block */
  [data-ruler-mid] > div:first-child {
    display: block !important;
    position: static !important;
    width: 100% !important;
    padding-bottom: 0 !important;
    margin-bottom: 12px !important;
  }

  [data-ruler-mid] > div:last-child {
    display: block !important;
    position: static !important;
    width: 100% !important;
    padding-top: 0 !important;
  }

  h2 {
    font-size: 24px !important;
    line-height: 1.3 !important;
  }

  footer {
    margin: 50px 18px 0 18px !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 6px !important;
  }

  /* These infographic thumbnails are 1:1 like the box image above them
     (inline width:50% is a desktop-only half-width layout) — go full
     width on mobile so both squares in the section match. */
  #s2-square-slot,
  #s3-square-slot {
    width: 100% !important;
  }

  /* Price card is a single [data-ruler-mid] child, so it matches both
     the :first-child and :last-child rules above (which force
     display:block for the usual heading/text pair) — win it back with
     an ID selector so the card keeps its flex column layout. */
  #s43-price-card {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    height: auto !important;
  }
}