/* ============================================================================
   DS SIGHT — Mobile responsiveness layer
   ----------------------------------------------------------------------------
   The pages are built with fixed desktop widths, multi-column grids and large
   display type set via INLINE styles. Inline styles beat normal CSS, so every
   rule here is scoped to small screens and marked !important to override them.
   Desktop (> 768px) is left completely untouched.

   Loaded on every page via <link rel="stylesheet" href="responsive.css">.
   ========================================================================== */

/* ---- Tablets & phones -------------------------------------------------- */
@media (max-width: 768px) {

  /* Never allow sideways scrolling / warping. */
  html, body {
    overflow-x: hidden !important;
    max-width: 100% !important;
  }

  /* Cap ANY element that carries a pixel width to the viewport. This only
     ever constrains — small fixed widths (icons, chips) are unaffected.
     EXCLUDES the horizontal marquee, which is intentionally wider than the
     screen (width:max-content) so it can scroll — capping it breaks it. */
  [style*="width:"]:not([style*="max-content"]):not([style*="ds-marquee"]) {
    max-width: 100% !important;
  }

  /* Hard pixel widths -> fluid. */
  [style*="width: 500px"], [style*="width:500px"],
  [style*="width: 480px"], [style*="width:480px"] {
    width: 100% !important;
  }

  /* Hero monogram sets BOTH width:557px and height:582px. When we cap its
     width above, force the height to scale with it so it doesn't squash. */
  img[style*="width: 557px"] {
    height: auto !important;
  }

  /* Collapse every multi-column grid to a single stacked column. */
  [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }

  /* Scale down oversized display headings so they fit a phone. */
  [style*="font-size: 82px"], [style*="font-size: 72px"],
  [style*="font-size: 64px"], [style*="font-size: 60px"],
  [style*="font-size: 56px"], [style*="font-size: 52px"] {
    font-size: 34px !important;
    line-height: 1.15 !important;
  }
  [style*="font-size: 48px"], [style*="font-size: 46px"],
  [style*="font-size: 44px"], [style*="font-size: 40px"],
  [style*="font-size: 36px"] {
    font-size: 26px !important;
    line-height: 1.2 !important;
  }

  /* Tame large section padding that wastes space / pushes content off-screen. */
  [style*="padding: 80px"] { padding: 40px 20px !important; }
  [style*="padding: 64px"] { padding: 34px 18px !important; }
  [style*="padding: 60px"] { padding: 32px 18px !important; }
  [style*="padding: 56px"] { padding: 30px 18px !important; }
  [style*="padding: 48px"] { padding: 28px 16px !important; }
  [style*="padding: 40px"] { padding: 24px 16px !important; }

  /* Images and video never exceed their box. NOTE: we only cap WIDTH — many
     logos set an explicit height (e.g. height:32px; width:auto), and forcing
     height:auto would balloon them to their natural pixel size. */
  img, video, svg, canvas {
    max-width: 100% !important;
  }
}

/* ---- Narrow phones (extra tightening) --------------------------------- */
@media (max-width: 480px) {

  /* Slightly smaller headings on small phones. */
  [style*="font-size: 82px"], [style*="font-size: 72px"],
  [style*="font-size: 64px"], [style*="font-size: 60px"],
  [style*="font-size: 56px"], [style*="font-size: 52px"] {
    font-size: 28px !important;
  }

  /* Let flex rows that hold cards/columns wrap instead of squeezing — but
     NOT the scrolling marquee track, which must stay a single row. */
  [style*="display: flex"][style*="gap"]:not([style*="max-content"]):not([style*="ds-marquee"]) {
    flex-wrap: wrap !important;
  }
}