/* ============================================================
   Mobile-only overrides for the guide pages.
   Loaded via <link media="screen and (max-width: 600px)"> so it
   never affects desktop. Keep this file focused on fixing
   mobile sizing problems only.
   ============================================================ */

@media screen and (max-width: 600px) {
  /* Use a true mobile reading layout instead of shrinking the
     desktop/PDF canvas. Scaling made the guide technically fit,
     but the content became too small to read on phones. */
  .guide-page {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto 14px !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    aspect-ratio: auto !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    container-type: normal;
  }

  .guide-page + .guide-page {
    margin-top: 0 !important;
  }

  /* Let each page reflow naturally on phones. */
  .guide-page .guide-page-canvas {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    transform-origin: top left !important;
    transform: none !important;
  }

  .guide-page .guide-page-inner {
    box-sizing: border-box !important;
    width: 100% !important;
    min-height: 600px !important;
    max-height: none !important;
    overflow: visible !important;
    padding: 34px 22px 46px !important;
  }

  .guide-page:first-child .guide-page-inner {
    min-height: calc(100svh - 58px) !important;
  }

  .guide-page h1 {
    font-size: clamp(2.7rem, 14vw, 4rem) !important;
    line-height: 0.95 !important;
    overflow-wrap: anywhere;
  }

  .guide-page h2 {
    font-size: clamp(1.75rem, 7vw, 2.25rem) !important;
    line-height: 1.05 !important;
    overflow-wrap: anywhere;
  }

  .guide-page h3 {
    font-size: 1.125rem !important;
    line-height: 1.15 !important;
  }

  .guide-page p,
  .guide-page li {
    line-height: 1.55 !important;
  }

  .guide-page .guide-section-card,
  .guide-page .guide-affirmation-card {
    border-radius: 12px !important;
    padding: 14px 15px !important;
  }

  .guide-page .grid-cols-2 {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .guide-page .guide-page-number {
    right: 22px !important;
    bottom: 18px !important;
  }

  /* Make sure the outer page wrapper doesn't add side gutters that would
     create horizontal scroll. */
  main {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Belt-and-braces: prevent any stray element from triggering horizontal
     scroll on small screens. */
  html, body {
    overflow-x: hidden !important;
  }
}