/* Canopi mobile overrides — applies on top of inline React styles via !important.
   Breakpoints: 900px (tablet), 600px (phone). */

/* ============ Phone & small tablet (≤900px) ============ */
@media (max-width: 900px) {

  /* Section padding — reduce horizontal */
  section { padding-left: 20px !important; padding-right: 20px !important; }

  /* All multi-column grids → stack */
  [style*="grid-template-columns"],
  [style*="gridTemplateColumns"] {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }

  /* Kill stray vertical borders meant for horizontal layouts */
  [style*="border-right"][style*="solid"] { border-right: none !important; }

  /* Replace with subtle bottom dividers between stacked cells */
  [style*="grid-template-columns"] > div[style*="border-right"],
  [style*="grid-template-columns"] > a[style*="border-right"],
  [style*="grid-template-columns"] > button[style*="border-right"] {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Right-side sticky panels → unstick on mobile */
  [style*="position: sticky"], [style*="position:sticky"] {
    position: static !important;
  }

  /* Headlines — scale down */
  h1 { font-size: 44px !important; line-height: 1.1 !important; letter-spacing: -1.5px !important; }
  h2 { font-size: 32px !important; line-height: 1.15 !important; letter-spacing: -1px !important; }
  h3 { font-size: 22px !important; }

  /* Big serif display numerals (chapter numbers, big metric numbers) */
  .serif[style*="font-size: 96"],
  .serif[style*="fontSize: 96"],
  .serif[style*="font-size: 88"],
  .serif[style*="fontSize: 88"],
  .serif[style*="font-size: 80"],
  .serif[style*="fontSize: 80"],
  .serif[style*="font-size: 72"],
  .serif[style*="fontSize: 72"] {
    font-size: 44px !important;
    letter-spacing: -1.5px !important;
  }

  /* Big paragraph leads */
  p[style*="font-size: 19"], p[style*="fontSize: 19"],
  p[style*="font-size: 20"], p[style*="fontSize: 20"],
  p[style*="font-size: 21"], p[style*="fontSize: 21"],
  p[style*="font-size: 22"], p[style*="fontSize: 22"] {
    font-size: 16px !important;
  }

  /* Section vertical padding */
  section[style*="padding: 100px"], section[style*="padding: 120px"],
  section[style*="padding: 140px"], section[style*="padding: 80px 32px"] {
    padding-top: 64px !important;
    padding-bottom: 64px !important;
  }

  /* Hide right-aligned chapter index strips on mobile (they collapse messy) */
  [data-mobile-hide] { display: none !important; }

  /* Industry comparison ribbon — make scrollable */
  [style*="200px repeat(4, 1fr)"] {
    display: block !important;
    overflow-x: auto !important;
  }
}

/* ============ Phone (≤600px) ============ */
@media (max-width: 600px) {
  section { padding-left: 16px !important; padding-right: 16px !important; }

  h1 { font-size: 34px !important; letter-spacing: -1px !important; }
  h2 { font-size: 26px !important; }

  .serif[style*="font-size: 96"], .serif[style*="fontSize: 96"],
  .serif[style*="font-size: 88"], .serif[style*="fontSize: 88"],
  .serif[style*="font-size: 80"], .serif[style*="fontSize: 80"],
  .serif[style*="font-size: 72"], .serif[style*="fontSize: 72"] {
    font-size: 36px !important;
  }

  /* Reduce big metric numerals */
  [style*="font-size: 64"], [style*="fontSize: 64"] {
    font-size: 36px !important;
  }
  [style*="font-size: 48"], [style*="fontSize: 48"] {
    font-size: 28px !important;
  }

  /* Reduce horizontal padding inside cards */
  [style*="padding: 48"], [style*="padding: 40"] {
    padding: 24px !important;
  }
  [style*="padding: 36"] { padding: 20px !important; }
}

/* ============ Mobile nav ============ */
.nav-mobile-toggle {
  display: none;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 8px;
  width: 40px;
  height: 40px;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
}
.nav-mobile-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: currentColor;
  transition: transform .2s, opacity .2s;
}
.nav-mobile-toggle.is-open span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.nav-mobile-toggle.is-open span:nth-child(2) { opacity: 0; }
.nav-mobile-toggle.is-open span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

.nav-links-mobile {
  display: none;
}

@media (max-width: 900px) {
  .nav-links-desktop { display: none !important; }
  .nav-mobile-toggle { display: flex !important; }
  .nav-links-mobile {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    padding: 24px;
    gap: 20px;
    background: inherit;
    border-bottom: 1px solid rgba(255,255,255,.08);
  }
  .nav-links-mobile.is-open { display: flex; }
  .nav-links-mobile a { font-size: 16px; padding: 8px 0; }
}