/* Mobile layer — media queries can't live in inline styles. */

@media (max-width: 900px) {
  :root { --space-8: 20px; --space-6: 16px; }

  h1 { font-size: 34px !important; line-height: 1.07; }
  h2 { font-size: 26px !important; }
  h3 { font-size: 20px !important; }
  p[style*="font-size:18px"] { font-size: 16px !important; }

  /* asymmetric two/three-column layouts stack */
  [style*="grid-template-columns:minmax"],
  [style*="grid-template-columns: minmax"] { grid-template-columns: minmax(0,1fr) !important; }
  [style*="grid-template-columns"][style*="fr "]:not([style*="repeat("]) { grid-template-columns: minmax(0,1fr) !important; }
  [style*="calc(var(--space-8) * 1.6)"] { gap: 24px !important; }

  /* even grids (cards, thumbnails, stat panels) go two-up */
  [style*="grid-template-columns:repeat("],
  [style*="grid-template-columns: repeat("] { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }

  /* vertical cell dividers become horizontal */
  [style*="border-right:1px solid var(--color-divider)"] {
    border-right: none !important;
    border-bottom: 1px solid var(--color-divider) !important;
  }
  .blueprint > *:last-of-type[style*="border-right"] { border-bottom: none !important; }

  /* oversized inner padding */
  [style*="calc(var(--space-8) * 1.2)"],
  [style*="calc(var(--space-8) * 1.1)"],
  [style*="calc(var(--space-8) * 2)"] { padding: 20px !important; }

  /* navigation: brand row + horizontally scrollable link strip */
  .nav { flex-wrap: wrap; gap: 6px !important; padding: 8px 0 !important; }
  .nav .btn { min-height: 34px; padding: 5px 10px !important; font-size: 12px !important; }
  .nav > div:last-child {
    width: 100%;
    overflow-x: auto;
    justify-content: flex-start !important;
    gap: 15px !important;
    scrollbar-width: none;
    padding-bottom: 2px;
  }
  .nav > div:last-child::-webkit-scrollbar { display: none; }
  .nav > div:last-child > * { flex: 0 0 auto; }
  .nav img { height: 32px !important; }

  /* spec tables scroll instead of overflowing the page */
  .table { display: block; overflow-x: auto; white-space: nowrap; font-size: 13px; }

  /* side-by-side flex rows wrap */
  [style*="display:flex"][style*="justify-content:space-between"] { flex-wrap: wrap; }

  img { max-width: 100%; }
  .btn { min-height: 44px; display: inline-flex; align-items: center; }
  html, body { overflow-x: hidden; }
}

@media (max-width: 560px) {
  h1 { font-size: 29px !important; }
  h2 { font-size: 23px !important; }

  /* cards and copy blocks go single file … */
  [style*="grid-template-columns:repeat("],
  [style*="grid-template-columns: repeat("] { grid-template-columns: minmax(0,1fr) !important; }

  /* … but image rows and stat panels stay two-up */
  .blueprint[style*="repeat("],
  [style*="grid-template-columns:repeat("]:has(> figure),
  [style*="grid-template-columns:repeat("]:has(> img),
  [style*="grid-template-columns:repeat("]:has(> a > img) {
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
  }
}