/* ============================================================
   Responsive layer for a desktop-first, inline-styled build.
   Inline styles outrank stylesheets, so these overrides use
   !important and match the inline-style patterns via attribute
   selectors. Breakpoints: tablet <=1024px, mobile <=767px.
   Large desktop (5K): the components' max-width caps already keep
   content centred and readable, so no scaling is needed there.
   ============================================================ */

html,
body {
  overflow-x: hidden !important;
}
img,
svg,
video {
  max-width: 100%;
  height: auto;
}

/* ------------------ TABLET & DOWN (<=1024px) ------------------ */
@media (max-width: 1024px) {
  /* 4-up card rows -> 2-up. minmax(0,…) lets tracks shrink below their
     content's min-content, so wide inner mockups can't force overflow. */
  [style*="repeat(4,1fr)"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  /* keep 3-up and 2-up rows at their count but make the tracks shrinkable,
     so a long word/placeholder can't push a card past the edge */
  [style*="repeat(3,1fr)"] {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
  [style*="columns:1fr 1fr"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  /* decorative floating receipts (data-drift + negative-parallax polaroids)
     are positioned for wide screens — large negative left/right/top offsets
     meant to peek in from generous desktop margins. Shrinking + muting them
     instead of hiding was tried on both tablet and mobile; didn't read well
     on an actual device either width, so both breakpoints just hide them.
     The MAIN hero visual (positive data-parallax) stays full-size — it's the
     whole point of the hero — but drops out of absolute positioning so it
     flows in place instead of overlapping the copy beside it. */
  [data-drift],
  [data-parallax^="-"] {
    display: none !important;
  }
  [data-parallax]:not([data-parallax^="-"]) {
    position: static !important;
    width: 100% !important;
    max-width: 360px !important;
    margin: 0 auto !important;
    /* app.js keeps driving a scroll-based translate3d() on this element for
       the desktop parallax effect. Once flowed into normal document flow
       here, that transform no longer nudges a decorative absolutely-positioned
       layer — it visibly drifts this element away from its layout box as the
       page scrolls, overlapping whatever comes after it (e.g. a caption right
       below it). Layout doesn't reflow around a transform, only paint moves,
       so the effect is a growing visual overlap the further you scroll. */
    transform: none !important;
  }
  [style*="position:relative;height:480px"],
  [style*="position:relative;height:640px"] {
    height: auto !important;
    margin-top: 32px;
  }
  /* the App hero caption tracked the image's old absolute box — flow it too.
     App/Hero.astro's actual offset is right:150px (not 90px) — the original
     selector never matched, so the caption stayed position:absolute on
     tablet/mobile, still offset relative to the now-flowed single-column
     visual instead of sitting under it. */
  [style*="right:90px;width:300px;bottom:-24px"],
  [style*="right:150px;width:300px;bottom:-24px"] {
    position: static !important;
    width: 100% !important;
    margin: 16px auto 0 !important;
  }
  /* hero splits + asymmetric wide grids stack to one column */
  [style*="columns:600px 1fr"],
  [style*="columns:560px 1fr"],
  [style*="columns:460px 1fr"],
  [style*="columns:420px 1fr"],
  [style*="columns:1fr 460px"],
  [style*="columns:1fr 420px"],
  [style*="columns:1fr 380px"],
  [style*="columns:1fr 340px"],
  [style*="columns:1.2fr 1fr"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  /* side gutters on the widest containers */
  [style*="max-width:1200px"],
  [style*="max-width:1120px"],
  [style*="max-width:1000px"],
  /* audience-toggle sections (pricing's B2B/B2C switch) get their `display`
     flipped via el.style.display = '' on click, which forces the browser to
     re-serialize the WHOLE style attribute (adding a space after every
     colon) — silently breaking the exact-substring selectors above the
     instant a section is toggled visible. Matched on the colon-free
     "max-width" substring instead, which survives that re-serialization. */
  [data-aud][style*="max-width"] {
    box-sizing: border-box !important;
    padding-left: 32px !important;
    padding-right: 32px !important;
  }
  /* right rails should not stick once stacked (header stays sticky: top:0) */
  [style*="position:sticky;top:96px"] {
    position: static !important;
  }
  /* card pairs holding a wide dashboard/code mockup: stack so each mockup
     gets full width instead of forcing its narrow column off-screen */
  .tk-split-lg {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* ------------------ MOBILE (<=767px) ------------------ */
@media (max-width: 767px) {
  /* collapse the remaining multi-column grids to one shrinkable column */
  [style*="repeat(2,1fr)"],
  [style*="repeat(3,1fr)"],
  [style*="repeat(4,1fr)"],
  [style*="columns:1fr 1fr"],
  [style*="columns:1fr 1fr 1fr"],
  [style*="columns:1fr 190px"],
  [style*="columns:2fr 1fr 1fr 1fr"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  /* hero split grids (text column + visual column, e.g. Home/App hero) carry
     a wide desktop-only gap (72px) meant to separate two side-by-side
     columns. Once collapsed to one stacked column on mobile, that same gap
     reads as a large dead zone between the copy and the visual below it. */
  [style*="columns:600px 1fr"],
  [style*="columns:560px 1fr"] {
    gap: 28px !important;
  }
  /* ...and the extra margin-top the tablet rule adds on top of that gap
     (for the visual's own container) should shrink to match on mobile. */
  [style*="position:relative;height:480px"],
  [style*="position:relative;height:640px"] {
    margin-top: 4px !important;
  }

  /* App ProofBand: a 4-item flex row (two stat blocks, a QR line, a
     ratings-pill stack) with justify-content:space-between. Once it wraps
     on a narrow viewport, space-between spreads each wrapped row's few
     items apart with large leftover horizontal gaps instead of just
     stacking — reads as excess empty space. Stack it as one column. */
  [style*="justify-content:space-between;gap:32px;flex-wrap:wrap"] {
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 24px !important;
  }

  /* side gutters on every wide container (incl. the legal <article> page shell,
     which is 760px like everything else in this list). Excludes h1/h2/h3:
     several hero headings use the same max-width values just to cap their
     own line-wrap width (e.g. careers/Hero.astro's h1 "max-width:760px"),
     with no relation to page-shell gutters — matching them here added a
     stray 20px padding-left on top of the page's own gutter, indenting the
     heading relative to the eyebrow/paragraph around it. */
  [style*="max-width:1200px"]:not(h1):not(h2):not(h3),
  [style*="max-width:1120px"]:not(h1):not(h2):not(h3),
  [style*="max-width:1000px"]:not(h1):not(h2):not(h3),
  [style*="max-width:820px"]:not(h1):not(h2):not(h3),
  [style*="max-width:760px"]:not(h1):not(h2):not(h3),
  [style*="max-width:640px"]:not(h1):not(h2):not(h3),
  /* see the ≤1024px block above for why this one's matched differently */
  [data-aud][style*="max-width"] {
    box-sizing: border-box !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  /* scale display type down */
  h1[style] {
    font-size: clamp(30px, 8.5vw, 40px) !important;
    line-height: 1.12 !important;
  }
  h2[style] {
    font-size: clamp(24px, 6.4vw, 30px) !important;
    line-height: 1.22 !important;
  }

  /* trim oversized section vertical padding */
  [style*="padding:88px 0"],
  [style*="padding:92px 0"],
  [style*="padding:100px 0"],
  [style*="padding:110px 0"],
  [style*="padding:112px 0"],
  [style*="padding:120px 0"],
  [style*="padding:130px 0"],
  [style*="padding:136px 0"],
  [style*="padding:140px 0"] {
    padding-top: 56px !important;
    padding-bottom: 56px !important;
  }
  [style*="padding:120px 0 128px"] {
    padding-top: 36px !important;
    padding-bottom: 48px !important;
  }

  /* Home hero dashboard card: built for a 440px desktop canvas — shrink its
     fixed-width chart/rows so it fits a phone width (the ≤1024px rule above
     already frees it from absolute positioning and caps it at 360px).
     Matched by [data-parallax] (not a [style*="…"] substring) because this
     element's inline style gets rewritten by the JS intro-reveal animation
     (hex colors become rgb(), spacing changes) the moment it plays, which
     would silently break a style-substring match after first paint.
     Needs the extra [data-intro] attribute selector to out-specificity the
     ≤1024px rule's [data-parallax]:not([data-parallax^="-"]) (both are two
     attribute-selectors deep, so this wins the tie by coming later). */
  [data-parallax="0.05"][data-intro] {
    max-width: 300px !important;
    padding: 20px !important;
  }
  svg[width="380"][height="120"] {
    width: 100% !important;
    height: auto !important;
  }
  [style*="grid-template-columns:96px 1fr 44px"] {
    grid-template-columns: 64px 1fr 34px !important;
    gap: 8px !important;
    font-size: 12px !important;
  }
  [style*="display:flex;gap:36px;margin-bottom:22px"] {
    gap: 16px !important;
  }

  /* oversized card padding */
  [style*="padding:52px 56px"] {
    padding: 30px 22px !important;
  }
  [style*="padding:88px 80px"] {
    padding: 40px 24px !important;
  }
  [style*="padding:44px"] {
    padding: 28px !important;
  }
  [style*="padding:36px"] {
    padding: 24px !important;
  }
  /* the App "This week" day-rings: 7 fixed rings overflow a phone-width card */
  [style*="width:42px;height:42px;border-radius:999px"] {
    width: 36px !important;
    height: 36px !important;
    border-width: 3px !important;
  }

  /* wide inner mockups keep their proportions and scroll sideways inside the
     card, rather than clipping mid-number or forcing the card off-screen */
  [style*="box-shadow:0 12px 32px rgba(20,48,46,.06)"] {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
  }
  [style*="grid-template-columns:116px 1fr"] {
    width: 384px !important;
  }
  [style*="font-family:ui-monospace"] {
    overflow-x: auto !important;
  }
  /* centred badge/pill rows wrap instead of overflowing */
  [style*="justify-content:center;gap:12px;margin-bottom:52px"] {
    flex-wrap: wrap !important;
  }

  /* tables/timelines that shouldn't fully collapse — retune the fixed columns */
  [style*="110px 24px 1fr"],
  [style*="120px 24px 1fr"] {
    grid-template-columns: 58px 18px 1fr !important;
    gap: 12px !important;
  }
  [style*="44px 1fr 150px 110px"] {
    grid-template-columns: 30px 1fr 74px 60px !important;
    font-size: 12px !important;
  }
  [style*="columns:2.2fr 1fr 1fr 1fr"] {
    grid-template-columns: 1.55fr 1fr 1fr 1fr !important;
    font-size: 12.5px !important;
  }

  /* Use-case flip cards: the back face's extra note line (e.g. "Distribution
     reality"'s "12 of 14 losses are one chain in Vojvodina.") wraps to two
     lines at some mobile widths, pushing the content past the fixed 268px
     card height. Since this element also has border-radius, the
     corner-smoothing script clip-paths it to exactly that measured box —
     unlike plain CSS overflow, a clip-path enforces the boundary regardless
     of the element's own overflow setting, so the extra line was clipped
     rather than just spilling out. Give the flip card more headroom.
     Matched on the colon-free "268px" substring, not "height:268px" —
     the flip JS sets .style.transform on this same element on click, which
     forces the browser to re-serialize the whole style attribute (adding a
     space after every colon: "height: 268px"), silently breaking a
     colon-containing substring match the instant a card is flipped. */
  [style*="268px"] {
    height: 320px !important;
  }
}