/* Mobile layer for bkpt-labs-website.
   Every rule is scoped to (max-width: 720px) so desktop rendering is untouched.
   Pages are inline-styled, so rules use !important plus [style*=...] matching.
   NOTE: the DC runtime re-serializes style attributes ("prop: value" with a
   space), so selectors match BOTH the raw authored form and the normalized
   form. If an inline style value changes in the HTML, update the matching
   selector here with it. */

@media (max-width: 720px) {

  /* Full-width shell; sections provide their own gutters below */
  header, main { width: 100% !important; }

  /* Nav: wrap into rows instead of overflowing off-screen */
  header[data-screen-label="Nav"] { padding: 10px 14px !important; justify-content: center !important; }
  header[data-screen-label="Nav"] nav { flex-wrap: wrap !important; justify-content: center !important; gap: 6px 16px !important; }

  /* Section gutters */
  main section { padding-left: 18px !important; padding-right: 18px !important; }
  main footer { padding: 32px 18px 20px !important; }

  /* Smaller logo lockup in page headers */
  main img[alt="BKPT Labs"][style*="height:72px"],
  main img[alt="BKPT Labs"][style*="height: 72px"] { height: 44px !important; }

  /* Meta bars (logo + DS number) and the footer bottom bar wrap */
  main [style*="justify-content:space-between"],
  main [style*="justify-content: space-between"] { flex-wrap: wrap !important; row-gap: 6px !important; }

  /* Figure captions may wrap instead of truncating */
  main figcaption { white-space: normal !important; }

  /* Every layout grid collapses to a single column... */
  main [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }

  /* ...except the small label/value rows (e.g. "104px minmax(0,1fr)" or
     "140px 1fr"), which stay two columns with a uniform label width.
     Neither pattern appears in any of the big layout grids. */
  main [style*="px minmax"],
  main [style*="px 1fr"] { grid-template-columns: 108px minmax(0, 1fr) !important; }

  /* The footer link grid needs no exception: with the single Products column
     left, the blanket single-column rule above stacks brand over links. */

  /* Large column gaps of collapsed grids become moderate vertical gaps */
  main [style*="gap:80px"], main [style*="gap: 80px"],
  main [style*="gap:72px"], main [style*="gap: 72px"],
  main [style*="gap:64px"], main [style*="gap: 64px"],
  main [style*="gap:56px"], main [style*="gap: 56px"],
  main [style*="gap:48px"], main [style*="gap: 48px"] { gap: 28px !important; }

  /* Three-up feature cells (collapsed above): separators below, not beside */
  main [style*="border-right:1px solid var(--color-divider)"],
  main [style*="border-right: 1px solid var(--color-divider)"] {
    border-right: none !important;
    border-bottom: 1px solid var(--color-divider);
  }
  main [style*="padding:52px"],
  main [style*="padding: 52px"] { padding: 24px 0 !important; }

  /* Display headings step down (matched by their inline desktop size) */
  main [style*="font-size:58px"], main [style*="font-size: 58px"],
  main [style*="font-size:54px"], main [style*="font-size: 54px"] { font-size: 31px !important; }
  main [style*="font-size:44px"], main [style*="font-size: 44px"],
  main [style*="font-size:40px"], main [style*="font-size: 40px"] { font-size: 27px !important; }
  main [style*="font-size:34px"], main [style*="font-size: 34px"],
  main [style*="font-size:30px"], main [style*="font-size: 30px"] { font-size: 24px !important; }
  main [style*="font-size:28px"], main [style*="font-size: 28px"] { font-size: 22px !important; }

  /* CTA button rows wrap; email + button rows stack */
  main div[style*="display:flex;gap:12px"],
  main div[style*="display: flex; gap: 12px"] { flex-wrap: wrap !important; }
  main div[style*="display:flex;gap:10px"],
  main div[style*="display: flex; gap: 10px"] { flex-direction: column !important; align-items: stretch !important; }
  /* the beta signup submits are <button>, the rest of these rows are links */
  main div[style*="display:flex;gap:10px"] > a,
  main div[style*="display: flex; gap: 10px"] > a,
  main div[style*="display:flex;gap:10px"] > button,
  main div[style*="display: flex; gap: 10px"] > button { justify-content: center !important; }

  /* Tall fixed-height media crops shrink */
  main [style*="height:460px"], main [style*="height: 460px"] { height: 240px !important; }
  main [style*="height:340px"], main [style*="height: 340px"] { height: 220px !important; }
  main pre[style*="height:340px"], main pre[style*="height: 340px"] { height: auto !important; max-height: 300px; }

  /* Hero pillar strip: chips wrap into rows, connector lines disappear */
  [data-pillars] > div { flex-wrap: wrap !important; gap: 8px !important; }
  [data-pillars] .p-conn { display: none !important; }

  /* Execution replay shot (viewalyzer.html) is a very wide two-pane capture.
     Shown whole on a phone it is a 100px strip, so crop to the flame graph
     end of it at a height where the frames are still readable. */
  #s-replay figure .lighten { height: 200px !important; overflow: hidden !important; }
  #s-replay figure img { height: 100% !important; object-fit: cover !important; object-position: left top !important; }

  /* Fingerprint compare shot (viewalyzer.html) is a wide two-pane capture;
     crop to the metric list end so the rows stay readable on a phone. */
  #s-fingerprint figure .lighten { height: 220px !important; overflow: hidden !important; }
  #s-fingerprint figure img { height: 100% !important; object-fit: cover !important; object-position: right top !important; }

  /* Feature comparison table (viewalyzer.html): keep it readable while it
     scrolls sideways inside its own frame, and keep the sticky feature
     column narrow enough to leave room for a value column. */
  .cmp-t { min-width: 760px !important; }
  .cmp-t .f { min-width: 148px !important; }
  .cmp-t th, .cmp-t td { padding: 9px 11px !important; }
  .cmp-t tr.band td { padding: 7px 11px !important; }
  .cmp-legend { gap: 7px 16px !important; }

  /* Zoom overlays (created at runtime with raw style text) */
  body > div[style*="z-index:60"] { padding: 14px !important; }

  /* Belt and suspenders against stray horizontal scroll */
  html, body { overflow-x: hidden !important; }
}