/* Bisquare R&D site — responsive overrides for phones and small tablets.
   The pages are authored with inline styles (design prototype export), so the
   rules below use !important to win over them. Every layout rule is scoped
   inside a media query, so laptop/desktop rendering is untouched. */

/* ---------- Navigation: brand + CTA on row 1, page links on row 2 ---------- */
@media (max-width: 720px) {
  .nav {
    flex-wrap: wrap !important;
    row-gap: 5px !important;            /* applied on both sides of the ::after break -> 10px between rows */
    column-gap: 18px !important;
    padding: 10px 16px 10px !important;
  }
  .nav > :first-child { order: 0; margin-right: auto; min-width: 0; }          /* brand */
  .nav > :first-child img { height: 28px !important; width: 28px !important; }
  .nav > :first-child span { font-size: 19px !important; white-space: nowrap; }
  .nav > .btn { order: 0; padding: 8px 12px !important; font-size: 12px !important; white-space: nowrap; }
  .nav::after { content: ""; flex-basis: 100%; order: 1; height: 0; }            /* forced line break */
  .nav > a:not(:first-child):not(.btn) { order: 2; font-size: 14px; padding: 6px 0; white-space: nowrap; }

  /* Buttons: comfortable thumb targets (design system default is 32px tall) */
  .btn { padding: 10px 16px !important; font-size: 15px !important; }   /* .nav > .btn above is more specific and keeps its compact size */

  /* Form controls: 16px stops iOS Safari from auto-zooming on focus; taller radio rows */
  .input { font-size: 16px !important; }
  label.radio { min-height: 36px; }
}
@media (max-width: 350px) {
  .nav > .btn { display: none !important; }   /* very narrow phones: "Contact us" link still reaches the same page */
}

/* ---------- Hero art: cap the 1:1 figure when the hero is single-column (landscape phones, tablet portrait) ----------
   Also swaps copy that says "on the right" for "below" once the two-column sections stack (default first, override after). */
.bsq-when-narrow { display: none; }
@media (max-width: 800px) {
  .bsq-hero-art { max-width: 400px !important; margin-left: auto !important; margin-right: auto !important; }
  .bsq-when-wide { display: none; }
  .bsq-when-narrow { display: inline; }
}

/* ---------- R&D record / spec-sheet rows: 3 (or 4) columns -> 2 columns + full-width remark ---------- */
@media (max-width: 640px) {
  .bsq-spec-card > header > span,
  .bsq-spec-card > p { padding-left: 16px !important; padding-right: 16px !important; }
  .bsq-spec-row {
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 2px 16px !important;
    padding: 12px 16px !important;
  }
  .bsq-spec-row.bsq-spec-row--idx { grid-template-columns: auto minmax(0, 1fr) auto !important; }
  .bsq-spec-row > :last-child { grid-column: 1 / -1 !important; }   /* the remark line */

  /* Bordered cards whose body is re-padded to 16px: keep header/footer aligned with it */
  .bsq-card-tight > header,
  .bsq-card-tight > p { padding-left: 16px !important; padding-right: 16px !important; }

  /* Live-stream card: chart on top, readouts below (2 tiles + uptime full width so it never wraps) */
  .bsq-stream-grid { grid-template-columns: minmax(0, 1fr) !important; padding: 16px !important; }
  .bsq-stream-grid > div { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .bsq-stream-grid > div > :last-child { grid-column: 1 / -1; }

  /* Key/value grids: slimmer label column. The Contact card one sits inside a bordered box (16px inset);
     the Journey timeline rows are edge-aligned with the section and keep zero side padding. */
  .bsq-kv-grid { grid-template-columns: 72px minmax(0, 1fr) !important; padding-left: 16px !important; padding-right: 16px !important; }
  .bsq-kv-grid--timeline { grid-template-columns: 64px minmax(0, 1fr) !important; gap: 16px !important; padding-left: 0 !important; padding-right: 0 !important; }

  /* Diagram labels are sized in SVG user units and shrink with the figure; bump them so they stay legible */
  .bsq-diagram text { font-size: 15px !important; }
  .bsq-diagram--mesh text { font-size: 17px !important; }
  .bsq-legend-a, .bsq-legend-b { font-size: 20px !important; }
  .bsq-legend-b { transform: translateX(90px); }
}

/* ---------- Hero caption: the mark follows the pointer; on touch devices there is no pointer ---------- */
.bsq-hint-touch { display: none; }
@media (hover: none) and (pointer: coarse) {
  .bsq-hint-mouse { display: none; }
  .bsq-hint-touch { display: inline; }
}