/* =======================================================================
   Mobile overrides for BeaverMind.
   Inline styles come from React/Babel, so media queries target data-* hooks
   and use !important to override the element's style="" property.
   Breakpoints:
     - ≤ 920px  : tablet — collapse 4/3-col grids, reveal hamburger
     - ≤ 760px  : mobile — full 1-col stack, tightened spacing + typography
     - ≤ 400px  : very small phones — tighter page gutters
   ======================================================================= */

/* ---------- Tablet (≤ 920px) ---------------------------------------- */
@media (max-width: 920px) {
  [data-bm-stack="proof"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 24px !important;
  }
  [data-bm-stack="cols-3"] {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  [data-bm-stack="footer"] {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  [data-bm-nav="desktop-links"] { display: none !important; }
  [data-bm-nav="hamburger"]     { display: inline-flex !important; }

  /* Audit page hero trio — when the 3-up grid collapses to 1 col, the
     vertical hairlines between cells stop separating anything. Flip them
     to bottom hairlines so cells still feel "joined" but stacked. */
  [data-bm-trio] [data-bm-trio-cell] {
    border-right: none !important;
    border-bottom: 1px solid var(--bm-hairline) !important;
  }
  [data-bm-trio] [data-bm-trio-cell]:last-child {
    border-bottom: none !important;
  }

  /* Audit hero stat band: nowrap is desktop-only. Below 920 we let it wrap
     naturally so it doesn't blow horizontal on narrow laptops. */
  [data-bm-hero-stat] p {
    white-space: normal !important;
  }
}

/* ---------- Mobile (≤ 760px) ---------------------------------------- */
@media (max-width: 760px) {
  /* --- Layout: collapse grids ------------------------------------- */
  [data-bm-stack="cols-2"],
  [data-bm-stack="cols-3"],
  [data-bm-stack="proof"],
  [data-bm-stack="hero-call"],
  [data-bm-stack="demo"],
  [data-bm-stack="founder"],
  [data-bm-stack="guarantee"],
  [data-bm-stack="fit"] {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  /* --- Section padding -------------------------------------------- */
  [data-bm-section] {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  [data-bm-section="hero"] {
    padding-top: 36px !important;
    padding-bottom: 48px !important;
  }
  [data-bm-section="mid"]  { padding-top: 48px !important; padding-bottom: 48px !important; }
  [data-bm-section="cta"]  { padding-top: 48px !important; padding-bottom: 72px !important; }

  /* --- Typography ------------------------------------------------- */

  /* Hero title — balanced line-wrap, professional weight */
  [data-bm-hero-title] {
    font-size: 40px !important;
    line-height: 1.06 !important;
    letter-spacing: -0.025em !important;
    margin-top: 20px !important;
    max-width: 100% !important;
    text-wrap: balance;
  }

  /* All h2/h3 section headings → slightly smaller + balanced wrap */
  main h2 {
    font-size: 30px !important;
    line-height: 1.1 !important;
    letter-spacing: -0.02em !important;
    text-wrap: balance;
  }
  main h3 {
    text-wrap: balance;
  }

  /* Hero body paragraph */
  [data-bm-section="hero"] > div > p {
    font-size: 17px !important;
    line-height: 1.5 !important;
    margin-top: 20px !important;
    text-wrap: pretty;
  }

  /* Every paragraph in mid sections → readable + prevent orphans */
  [data-bm-section="mid"] p,
  [data-bm-section="cta"] p {
    text-wrap: pretty;
  }

  /* Eyebrow: keep on one line if possible.
     IMPORTANT: exclude [data-bm-footer-bottom] because its first child is
     the copyright line, not an eyebrow — this selector was clipping the
     "RD Consulting Ltd · HK Co. No. 3129374" text on mobile. */
  [data-bm-section="hero"] > div > div:first-child:not([data-bm-footer-bottom] *),
  [data-bm-section="mid"]  > div:not([data-bm-footer-bottom]) > div:first-child,
  [data-bm-section="cta"]  > div > div:first-child {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Footer bottom row: copyright must wrap freely — can span multiple lines.
     Stack copyright on top, legal links below on phones. */
  [data-bm-footer-bottom] {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
  }
  [data-bm-footer-bottom] > div {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: unset !important;
    line-height: 1.55 !important;
  }

  /* --- Hero CTAs -------------------------------------------------- */
  /* Double the breathing room between the subhead body paragraph and the
     CTA group so it feels openly spaced on mobile (40px → 80px). */
  [data-bm-hero-ctas] {
    margin-top: 80px !important;
    gap: 10px !important;
  }

  /* Push the voice-agent live-call panel further below the fold on mobile —
     so it only appears as the user starts scrolling, not at initial paint. */
  [data-bm-hero-livecall] {
    margin-top: 120px !important;
  }

  /* --- Navigation ------------------------------------------------- */
  [data-bm-nav="root"] {
    padding: 12px 20px !important;
  }

  /* --- Cards ------------------------------------------------------ */

  /* BuildCard, CaseCard, FitCard, AgentIconCard: tighter padding */
  [data-bm-stack="cols-2"] > article,
  [data-bm-stack="cols-2"] > a,
  [data-bm-stack="cols-2"] > div {
    padding: 24px !important;
  }

  /* Case study cards on mobile — consistent spacing between body and the
     "Read the case study" link. Desktop uses flex:1 on the body + min-height
     on the article so all cards in a grid row align; on mobile (1 col)
     that forces variable empty space above the CTA depending on body length.
     Strip both so the link always sits a fixed gap below the body text. */
  [data-bm-case-card] {
    min-height: auto !important;
    gap: 16px !important;
  }
  [data-bm-case-card] > div:nth-of-type(3) {
    flex: none !important;
  }

  /* Featured "What we build" card */
  [data-bm-featured-card] {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
    padding: 24px !important;
  }
  [data-bm-featured-usecases] {
    padding: 18px !important;
  }

  /* Team card: photo uses aspect-ratio, content inside gets tighter padding */
  [data-bm-team-image] ~ div {
    padding: 22px 20px 20px !important;
  }

  /* Hero live-call panel */
  [data-bm-hero-panel] {
    padding: 18px !important;
  }
  /* Keep transcript at a fixed height on mobile too so the progressive
     loop doesn't push the rest of the page as lines appear/disappear. */
  [data-bm-hero-transcript] {
    height: 320px !important;
    padding-right: 0 !important;
  }
  [data-bm-hero-avatar-col] {
    border-right: none !important;
    border-bottom: 1px solid var(--bm-hairline) !important;
    padding-bottom: 20px !important;
  }

  /* Voice demo panel */
  [data-bm-demo-panel] {
    padding: 32px 20px !important;
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  /* --- Calendar embed -------------------------------------------- */
  [data-bm-calendar] {
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  [data-bm-calendar] iframe {
    margin-top: 0 !important;
  }

  /* --- Buttons --------------------------------------------------- */
  [data-bm-cta-row] {
    width: 100% !important;
  }
  [data-bm-cta-row] > button,
  [data-bm-cta-row] > a {
    flex: 1 1 100% !important;
    justify-content: center !important;
    min-height: 48px !important;
  }

  /* --- Footer ---------------------------------------------------- */
  [data-bm-footer-bottom] {
    justify-content: flex-start !important;
    gap: 16px !important;
  }

  /* --- Misc ------------------------------------------------------ */
  [data-bm-tags] {
    gap: 8px !important;
  }

  /* --- Audit page: hero stat band ---------------------------------- */
  /* Desktop forces nowrap so the MIT-report line sits on a single line.
     On phones we drop the nowrap so it flows across multiple lines. */
  [data-bm-hero-stat] p {
    white-space: normal !important;
    font-size: 14px !important;
    line-height: 1.55 !important;
  }

  /* --- Audit page: CallReviewMockup ------------------------------- */
  /* Tighten outer card padding/gap on phones */
  [data-bm-mockup] {
    padding: 22px !important;
    gap: 22px !important;
  }
  /* Header stacks the score badge under the title (otherwise the title
     squeezes too narrow on a 375px viewport) */
  [data-bm-mockup-header] {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 16px !important;
  }
  /* Lead snapshot: collapse the 140 / 1fr key-value grid into a stacked
     label-over-value pattern so long values never wrap awkwardly */
  [data-bm-mockup-lead] > div {
    grid-template-columns: 1fr !important;
    gap: 2px !important;
  }
  /* Adherence bars: shrink label/value columns so the bar itself gets
     more room on a 375px screen */
  [data-bm-adherence] {
    grid-template-columns: 72px 1fr 40px !important;
    gap: 12px !important;
  }

  /* --- Audit page: Section 3 vertical pricing block ---------------- */
  /* Keep the rhythm tight on phones — 64px desktop margin reads as a
     hole on a small screen. */
  [data-bm-pricing] {
    margin-top: 40px !important;
    gap: 14px !important;
  }

  /* --- Audit page: Section 9 receipt block ------------------------- */
  /* Tighten padding so the monospace amounts don't crowd narrow widths */
  [data-bm-receipt] {
    padding: 22px 20px !important;
  }
}

/* ---------- Very small (≤ 400px) phones ------------------------------ */
@media (max-width: 400px) {
  [data-bm-section] {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  [data-bm-nav="root"] {
    padding: 10px 16px !important;
  }
  [data-bm-hero-title] {
    font-size: 34px !important;
  }
  main h2 {
    font-size: 26px !important;
  }
}