/*
 * Mobile layout for the Claude Design pages. The design itself is desktop-only
 * (inline grid/padding styles), so this overrides those inline styles below
 * 820px. Injected into every page by build.py; selectors match the style
 * attribute as the browser serialises it ("prop: value").
 */
@media (max-width: 820px) {
  /* every multi-column grid collapses to one column */
  [style*="grid-template-columns"] { grid-template-columns: minmax(0, 1fr) !important; gap: 28px !important; }
  [style*="grid-template-columns"][style*="gap: 2px"] { gap: 1px !important; }

  /* page gutters */
  [style*="max-width: 1320px"] { padding-left: 20px !important; padding-right: 20px !important; padding-top: 56px !important; padding-bottom: 56px !important; }
  [style*="padding: 64px 64px 64px 0px"], [style*="padding: 64px 0px 64px 64px"] { padding: 36px 0 !important; border-right: 0 !important; }
  /* cells of collapsed grids drop their desktop column gutters */
  [style*="grid-template-columns"] > [data-reveal],
  [style*="grid-template-columns"] > [style*="padding: 22px 0px 22px 24px"] { padding-left: 0 !important; padding-right: 0 !important; border-right: 0 !important; }

  /* header: brand on top, nav scrolls horizontally underneath */
  header > div { height: auto !important; padding: 12px 20px !important; flex-wrap: wrap; gap: 10px !important; }
  header nav { width: 100%; overflow-x: auto; gap: 18px !important; font-size: 14px !important; padding-bottom: 4px; }
  header nav > a:last-child { padding: 9px 14px !important; white-space: nowrap; }

  /* type scale */
  h1 { font-size: 44px !important; }
  h2 { font-size: 34px !important; }

  /* image frames */
  [style*="height: 600px"], [style*="height: 560px"], [style*="height: 540px"],
  [style*="height: 520px"], [style*="height: 480px"], [style*="height: 460px"],
  [style*="height: 400px"], [style*="height: 380px"] { height: 340px !important; }
}