/* ============================================================
   Leaf — mobile adaptations.

   The pages are design-composer exports: every desktop style lives in an
   inline style attribute on the element. Those are left untouched, so the
   desktop rendering is byte-for-byte what the designer exported. Everything
   here is scoped to a narrow viewport, and each rule carries !important
   purely to outrank the inline style it is overriding — not as a shortcut.

   The m-* classes are attached at build time by build.mjs, which derives
   them from the inline styles themselves (see classesFor there).
   ============================================================ */

@media (max-width: 900px) {
  /* The page wrapper pins itself to a desktop width; release it. */
  .m-page { min-width: 0 !important; }

  /* Every multi-column grid collapses to a single column. */
  .m-grid, .m-grid1 { grid-template-columns: 1fr !important; }

  /* Column gaps sized for side-by-side content are too airy once stacked. */
  .m-gap { gap: 24px !important; }

  /* Decorative leaf artwork is absolutely positioned off the right edge at a
     fixed width — it would sit on top of the copy. It carries no meaning. */
  .m-art { display: none !important; }

  /* nowrap keeps long labels from wrapping, which forces sideways scroll. */
  .m-nowrap { white-space: normal !important; }

  /* Peer rows stack rather than squeeze. Applied narrowly — see build.mjs:
     enabling wrap on an icon+text row would push the text below the icon. */
  .m-row { flex-wrap: wrap !important; }

  /* Text columns in a flex row: force each onto its own line, since flex: 1
     would otherwise let them shrink to a few words wide. */
  .m-col { min-width: 100% !important; }

  /* Gutters: 32px of each edge is a lot of a 375px screen. */
  .m-wrap {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  /* Section rhythm tightens; horizontal padding is left to .m-wrap. */
  .m-sect {
    padding-top: 56px !important;
    padding-bottom: 56px !important;
  }

  /* Display type scaled down by tier. */
  .m-t1 { font-size: 34px !important; line-height: 42px !important; }
  .m-t2 { font-size: 27px !important; line-height: 35px !important; }
  .m-t3 { font-size: 21px !important; line-height: 29px !important; }

  /* Header: fixed 68px row of logo + nav + CTA is allowed to wrap instead. */
  .m-bar {
    height: auto !important;
    flex-wrap: wrap !important;
    gap: 10px 16px !important;
    padding-top: 12px !important;
    padding-bottom: 12px !important;
  }
  .m-nav {
    flex-wrap: wrap !important;
    gap: 8px 18px !important;
  }

  /* The stem-and-veins illustration is drawn at fixed pixel coordinates, so
     it cannot reflow. Keep it at full size and let its card scroll it. */
  .m-diagram { min-width: 780px !important; }
  div:has(> .m-diagram) { overflow-x: auto !important; }

  img, svg { max-width: 100%; }
  body { overflow-wrap: break-word; }
}

/* Tablet: one column is too sparse for a card grid at this width, so the
   reflowable grids sit two-up. Must follow the block above to win the cascade;
   .m-grid1 is deliberately excluded and stays single-column. */
@media (min-width: 601px) and (max-width: 900px) {
  .m-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

@media (max-width: 560px) {
  .m-wrap {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  .m-sect {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }
  .m-t1 { font-size: 28px !important; line-height: 36px !important; }
  .m-t2 { font-size: 23px !important; line-height: 31px !important; }
}