/* BlueMoso responsive stylesheet
   Targets: iPhone 14/15/16/17 (~390-430px), Galaxy S (~360-412px), iPad (~820px), desktop (1025+)
   Breakpoints: mobile ≤640, tablet 641-1024, desktop ≥1025 */

/* ========== GLOBAL ========== */
body { overflow-x: clip; }
img, svg { max-width: 100%; height: auto; }

/* ========== TABLET (≤1024px) ========== */
@media (max-width: 1024px) {
  /* Nav — hide desktop links, show hamburger */
  .bm-nav-links-desktop { display: none !important; }
  .bm-nav-hamburger { display: flex !important; }
  .bm-nav-inner { padding: 14px 20px !important; }

  /* Generic section padding */
  .bm-section { padding-left: 24px !important; padding-right: 24px !important; }

  /* Hero */
  .bm-hero-grid { grid-template-columns: 1fr !important; gap: 40px !important; }
  .bm-hero-title { font-size: 64px !important; }

  /* Matching */
  .bm-matching-grid { grid-template-columns: 1fr !important; gap: 32px !important; }
  .bm-matching-steps { grid-template-columns: 1fr !important; }

  /* Services tabs */
  .bm-services-grid { grid-template-columns: 1fr !important; }

  /* HowItWorks — stack 3 step columns into 1, no side padding/borders */
  .bm-h-cols { grid-template-columns: 1fr !important; row-gap: 44px !important; }
  .bm-h-cols > div { padding-left: 0 !important; padding-right: 0 !important; border-left: none !important; }

  /* HumanInLoop — stack panel grid */
  .bm-hil-grid { grid-template-columns: 1fr !important; gap: 32px !important; }

  /* TimeBackCalculator — stack copy + calc */
  .bm-tbc-inner { grid-template-columns: 1fr !important; gap: 40px !important; }

  /* Packages match (placement-only) tier — stack two halves */
  .bm-packages-match { grid-template-columns: 1fr !important; }
  .bm-packages-match > div { border-right: none !important; border-bottom: 1px solid var(--line-soft) !important; padding: 32px 28px !important; }
  .bm-packages-match > div:last-child { border-bottom: none !important; }

  /* ProofBand — stack label + logos, 2-col stats */
  .bm-proof-inner { grid-template-columns: 1fr !important; gap: 16px !important; }
  .bm-proof-stats { grid-template-columns: 1fr 1fr !important; row-gap: 28px !important; padding: 40px 24px 0 !important; }
  .bm-proof-stats > div { padding: 0 16px !important; border-left: none !important; }
  .bm-proof-stats > div:nth-child(odd) { padding-left: 0 !important; }
  .bm-proof-stats > div:nth-child(even) { border-left: 1px solid var(--line) !important; }

  /* CaseStudies body — stack columns on tablet too */
  .bm-cs-body { grid-template-columns: 1fr !important; gap: 28px !important; }

  /* Generic h2 / display title size cap on tablet */
  .bm-section h2,
  #testimonials h2,
  #matching h2 { font-size: 44px !important; line-height: 1.05 !important; }

  /* HowItWorks step titles */
  .bm-h-cols h3 { font-size: 30px !important; }

  /* Packages */
  .bm-packages-grid { grid-template-columns: 1fr !important; }
  .bm-packages-spec { grid-template-columns: 1fr !important; }
  .bm-packages-flex { grid-template-columns: 1fr !important; gap: 28px !important; padding: 32px 28px !important; }

  /* Problem / Fit / Story / CTA */
  .bm-problem-grid { grid-template-columns: 1fr !important; gap: 24px !important; }
  .bm-pain-grid { grid-template-columns: 1fr !important; }
  .bm-fit-grid { grid-template-columns: 1fr !important; gap: 32px !important; }
  .bm-story-grid { grid-template-columns: 1fr !important; gap: 40px !important; }
  .bm-cta-grid { grid-template-columns: 1fr !important; gap: 40px !important; padding: 48px !important; }

  /* Tighter section padding for non-hero sections.
     Most sections use var(--section-y) which the :root override in
     index.html already tightens responsively; this catch-all covers
     sections with hard-coded inline padding (Hero, Pain, TimeBack)
     so they shrink in lockstep at tablet width. */
  section.bm-section[style] { padding-top: 56px !important; padding-bottom: 56px !important; }

  /* FAQ */
  .bm-faq-grid { grid-template-columns: 1fr !important; gap: 24px !important; }

  /* Footer (legacy grid name, kept in case any other component uses it) */
  .bm-footer-grid { grid-template-columns: 1fr 1fr !important; gap: 32px !important; }
  /* Footer links band: 5 cols → 2 cols on tablet */
  .bm-footer-links-grid { grid-template-columns: 1fr 1fr !important; gap: 32px !important; }

  /* Playbook nav */
  .playbook-nav > div { padding: 12px 20px !important; gap: 12px !important; }

  /* Playbook phase cards */
  .bm-pb-mindset-grid { grid-template-columns: 1fr !important; }
  .bm-pb-matrix-row { grid-template-columns: 1fr !important; }
  .bm-pb-calc-grid { grid-template-columns: 1fr !important; gap: 20px !important; }
  .bm-pb-stat-row { grid-template-columns: 1fr 1fr !important; row-gap: 24px !important; }
  .bm-pb-stat-row > div[style*="width: 1px"] { display: none !important; }
  .bm-pb-summary { grid-template-columns: 1fr 1fr !important; row-gap: 20px !important; }
  .bm-pb-blueprint-5 { grid-template-columns: 1fr 1fr !important; row-gap: 16px !important; }
  .bm-pb-rules { grid-template-columns: 1fr 1fr !important; row-gap: 14px !important; }
  .bm-pb-bigstats { grid-template-columns: 1fr !important; gap: 28px !important; }
  .bm-pb-email-grid { grid-template-columns: 1fr !important; gap: 28px !important; }
  .bm-pb-prep-grid { grid-template-columns: 1fr !important; }
  .bm-pb-task-row { grid-template-columns: 1fr !important; row-gap: 10px !important; }
  .bm-pb-task-row input[type="text"] { grid-column: 1 / -1 !important; }
  .bm-pb-task-header { display: none !important; }
  .bm-pb-action-row { grid-template-columns: 40px 1fr !important; }
  .bm-pb-action-row > div:last-child { grid-column: 1 / -1 !important; text-align: left !important; }
}

/* ========== MOBILE (≤640px) ========== */
@media (max-width: 640px) {
  /* Section padding tighter */
  .bm-section { padding-left: 16px !important; padding-right: 16px !important; }

  /* Hero */
  .bm-hero-title { font-size: 44px !important; line-height: 1.05 !important; }
  .bm-hero-sub { font-size: 16px !important; }

  /* Hero CTAs → stack on mobile, full-width */
  .bm-hero-ctas { flex-direction: column !important; align-items: stretch !important; gap: 12px !important; }
  .bm-hero-ctas > a { justify-content: center !important; width: 100% !important; text-align: center !important; }

  /* Hero floating cards — reposition to stay inside viewport */
  .bm-hero-grid [style*="float1"] { left: 8px !important; top: -14px !important; }
  .bm-hero-grid [style*="float2"] { right: 8px !important; bottom: -14px !important; }

  /* Calculator card — keep the inner cardWrap inside the section padding so the
     card never extends past the viewport edge (the inline padding:28 in
     Calculator.jsx + ICP TimeBackCalculator.jsx is shrunk in their own
     <style> blocks; this rule covers the wrapper itself). */
  .bm-hero-grid > div { min-width: 0 !important; }
  .bm-hero-grid > div > .bm-calc-card,
  .hero-calc-wrap > .bm-calc-card { box-sizing: border-box !important; max-width: 100% !important; }

  /* Generic serif display titles */
  .bm-serif-xl { font-size: 44px !important; }
  .bm-serif-lg { font-size: 34px !important; }
  .bm-serif-md { font-size: 26px !important; }

  /* Testimonials → single column on phone */
  .bm-testimonials-grid { grid-template-columns: 1fr !important; }
  .bm-test-featured { grid-template-columns: 1fr !important; }
  .bm-tm-row-top { grid-template-columns: 1fr !important; gap: 20px !important; margin-bottom: 20px !important; }
  .bm-tm-row-bottom { max-width: none !important; grid-template-columns: 1fr !important; gap: 20px !important; }
  .bm-tm-row-top > .bm-tm-card:nth-child(3) { grid-column: auto !important; }
  .bm-tm-card { padding: 24px 22px 22px !important; }
  .bm-tm-h2 { font-size: 38px !important; line-height: 1.08 !important; }

  /* ProofBand → single-column stats on phone */
  .bm-proof-stats { grid-template-columns: 1fr !important; row-gap: 22px !important; padding: 32px 20px 0 !important; }
  .bm-proof-stats > div,
  .bm-proof-stats > div:nth-child(even) { padding: 0 !important; border-left: none !important; border-top: 1px solid var(--line) !important; padding-top: 20px !important; }
  .bm-proof-stats > div:first-child { border-top: none !important; padding-top: 0 !important; }

  /* HowItWorks step titles smaller on phone */
  .bm-h-cols h3 { font-size: 26px !important; }
  .bm-h-cols p { font-size: 16px !important; }

  /* Generic h2 on phone */
  .bm-section h2,
  #testimonials h2,
  #matching h2 { font-size: 36px !important; line-height: 1.06 !important; letter-spacing: -0.025em !important; }

  /* Case Studies → stack tabs above panel, then single col body */
  .bm-cs-layout { grid-template-columns: 1fr !important; }
  .bm-cs-tabs { flex-direction: row !important; overflow-x: auto !important; border-right: none !important; border-bottom: 1px solid var(--line) !important; }
  .bm-cs-tabs > button { border-bottom: none !important; border-right: 1px solid var(--line) !important; min-width: 220px !important; border-left: none !important; border-top: 3px solid transparent !important; }
  .bm-cs-tabs > button[aria-selected="true"] { border-top: 3px solid var(--blue) !important; border-left: none !important; }
  .bm-cs-panel-head { flex-direction: column !important; }
  .bm-cs-body { grid-template-columns: 1fr !important; gap: 28px !important; }

  /* CTA padding */
  .bm-cta-grid { padding: 36px 24px !important; gap: 32px !important; }

  /* Problem col padding tighter */
  .bm-problem-grid > div { padding: 24px !important; }

  /* Packages flex card */
  .bm-packages-flex { padding: 28px 22px !important; }

  /* Section padding */
  section.bm-section[style] { padding-top: 44px !important; padding-bottom: 44px !important; }

  /* Footer → single column */
  .bm-footer-grid { grid-template-columns: 1fr !important; gap: 28px !important; }
  .bm-footer-links-grid { grid-template-columns: 1fr !important; gap: 28px !important; }

  /* Playbook hero */
  .bm-pb-hero { padding: 60px 16px 56px !important; }
  .bm-pb-hero-title { font-size: 52px !important; line-height: 1.15 !important; margin-bottom: 32px !important; }
  .bm-pb-hero-sub { font-size: 17px !important; }
  .bm-pb-hero-trust { flex-direction: column !important; gap: 10px !important; }

  /* Playbook section padding */
  .bm-pb-section { padding: 48px 16px !important; }

  /* Phase headers */
  .bm-pb-phase-title { font-size: 36px !important; }
  .bm-pb-phase-sub { font-size: 15px !important; }

  /* Stat rows → 1 column */
  .bm-pb-stat-row { grid-template-columns: 1fr !important; }
  .bm-pb-summary { grid-template-columns: 1fr !important; }
  .bm-pb-blueprint-5 { grid-template-columns: 1fr !important; }
  .bm-pb-rules { grid-template-columns: 1fr !important; }

  /* Card padding tighter */
  .pdf-card { padding: 20px !important; }

  /* Playbook nav — hide reset label, just Phase names with numbers */
  .bm-pb-nav-phase-label { display: none !important; }
  .bm-pb-nav-reset { display: none !important; }
  .playbook-nav > div { padding: 10px 14px !important; }

  /* Matching step cards */
  .bm-matching-step { padding: 20px !important; }

  /* Services tab list goes horizontal scroll */
  .bm-services-tabs { overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; }
  .bm-services-tabs > * { flex-shrink: 0 !important; }

  /* Big stats ink block */
  .bm-pb-bigstats { gap: 24px !important; }

  /* Phase buttons footer stack on phone — primary action on top, back button below */
  .bm-pb-footer-row { flex-direction: column-reverse !important; align-items: stretch !important; gap: 12px !important; }
  .bm-pb-footer-row > * { width: 100% !important; }
  /* Inner helper-text + primary button group: stack vertically, helper text above */
  .bm-pb-footer-row > div { flex-direction: column !important; align-items: stretch !important; gap: 10px !important; }
  .bm-pb-footer-row > div > * { width: 100% !important; text-align: center !important; }
  .bm-pb-footer-hint { font-size: 14px !important; padding: 0 8px !important; }

  /* Task table row segmented controls full width */
  .bm-pb-task-row .bm-pb-task-segmented { flex-wrap: wrap !important; }
}

/* ========== MOBILE NAV DRAWER ========== */
.bm-nav-hamburger { display: none; }
.bm-mobile-drawer {
  position: fixed; inset: 0;
  background: rgba(11,31,51,0.5);
  backdrop-filter: blur(4px);
  z-index: 200;
  opacity: 0; pointer-events: none;
  transition: opacity .2s ease;
}
.bm-mobile-drawer.open { opacity: 1; pointer-events: auto; }
.bm-mobile-drawer-panel {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: min(340px, 85vw);
  background: #fff;
  padding: 24px;
  display: flex; flex-direction: column;
  gap: 4px;
  transform: translateX(100%);
  transition: transform .25s cubic-bezier(.4,0,.2,1);
  box-shadow: -10px 0 40px rgba(0,0,0,0.12);
}
.bm-mobile-drawer.open .bm-mobile-drawer-panel { transform: translateX(0); }
.bm-mobile-drawer-link {
  padding: 14px 12px;
  font-size: 17px; font-weight: 500;
  color: var(--ink);
  border-radius: 10px;
  transition: background .15s;
  display: flex; align-items: center; justify-content: space-between;
}
.bm-mobile-drawer-link:hover { background: var(--paper-deep); }
.bm-mobile-drawer-close {
  align-self: flex-end;
  width: 36px; height: 36px;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-muted);
  margin-bottom: 8px;
}
.bm-mobile-drawer-cta {
  margin-top: 16px;
  background: var(--ink); color: #fff;
  padding: 14px 20px; border-radius: 999;
  text-align: center;
  font-weight: 500; font-size: 15px;
}