/* Responsive layer for the Claude Design canvases.
 *
 * The canvases are ARTBOARDS: fixed 1200px containers, fixed pixel type, and
 * zero media queries. They are an exact visual specification at desktop width
 * and say nothing about smaller screens — which is the right division of
 * labour, but it means the export is not a website yet.
 *
 * Rather than rewriting each page's markup (which would fork the site from the
 * design and make the next re-export a merge), this sheet overrides the
 * handful of layout primitives the canvases actually use. Above 900px it does
 * nothing at all, so the desktop rendering stays pixel-identical to the canvas.
 *
 * `!important` throughout, unavoidably: the canvases carry inline styles, and
 * an inline style beats any stylesheet selector without it. It is scoped to
 * media queries and to attribute selectors matching the exact inline values,
 * so it overrides only what it names.
 *
 * If the design gains its own breakpoints later, delete this file.
 */

/* ── Fluid display type ─────────────────────────────────────────────────────
   Six large sizes in the canvases. Left fixed, a 60px headline on a 375px
   screen breaks mid-word and pushes the page sideways. Each keeps its canvas
   value as the clamp maximum, so nothing changes on desktop. */
@media (max-width: 900px) {
  [style*="font-size:60px"] { font-size: clamp(30px, 7.6vw, 60px) !important; }
  [style*="font-size:44px"] { font-size: clamp(28px, 6.6vw, 44px) !important; }
  [style*="font-size:42px"] { font-size: clamp(27px, 6.3vw, 42px) !important; }
  [style*="font-size:40px"] { font-size: clamp(26px, 6.0vw, 40px) !important; }
  [style*="font-size:36px"] { font-size: clamp(24px, 5.4vw, 36px) !important; }
  [style*="font-size:32px"] { font-size: clamp(22px, 4.8vw, 32px) !important; }
}

/* ── Column collapse ────────────────────────────────────────────────────────
   Every multi-column grid in the canvases becomes a single column. Matching
   the exact inline values rather than a blanket `display:grid` rule, so small
   decorative grids (a dot row, an icon pair) keep their layout. */
@media (max-width: 900px) {
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns:1.02fr .98fr"],
  [style*="grid-template-columns:.95fr 1.05fr"],
  [style*="grid-template-columns:.8fr 1.2fr"],
  [style*="grid-template-columns:minmax(0,1.5fr) minmax(0,1.2fr) minmax(0,1.2fr)"],
  [style*="grid-template-columns:repeat(3,1fr)"],
  [style*="grid-template-columns:repeat(4,1fr)"] {
    grid-template-columns: 1fr !important;
  }
  /* Six-column strips (logo rows, locale chips) halve rather than stack —
     one item per row would run for pages. */
  [style*="grid-template-columns:repeat(6,1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (min-width: 901px) and (max-width: 1100px) {
  [style*="grid-template-columns:repeat(4,1fr)"] { grid-template-columns: repeat(2, 1fr) !important; }
  [style*="grid-template-columns:repeat(6,1fr)"] { grid-template-columns: repeat(3, 1fr) !important; }
}

/* ── Section rhythm ─────────────────────────────────────────────────────────
   88px of top padding is right on a 1200px canvas and enormous on a phone,
   where it pushes the headline below the fold for no benefit. */
@media (max-width: 900px) {
  [style*="padding:88px 32px 0"] { padding: 44px 20px 0 !important; }
  [style*="padding:76px 32px 0"] { padding: 36px 20px 0 !important; }
  [style*="padding:72px 32px 0"] { padding: 36px 20px 0 !important; }
  [style*="padding:0 32px"]      { padding: 0 20px !important; }
}

/* ── Overflow guards ────────────────────────────────────────────────────────
   The hero carries a product mockup at a fixed width, and several sections
   contain code blocks and tables. Any of them can push the page sideways,
   which is the single most common mobile failure and the one Google's
   mobile-friendly check reports first. */
@media (max-width: 900px) {
  /* Grid and flex children default to min-width:auto, which means they refuse
     to shrink below their content's minimum width. A long headline therefore
     pushes its own column wider than the viewport rather than wrapping. This
     one line is the fix for most "why is my page scrolling sideways" bugs. */
  [style*="display:grid"] > *,
  [style*="display:flex"] > * { min-width: 0; }

  pre, table { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  img, svg { max-width: 100%; height: auto; }

  /* Deliberately NOT overflow-x:hidden on body. That hides the symptom and
     silently clips content off the right edge -- which is what happened here:
     the overflow check passed while half the headline was invisible. */
}

/* ── Headline wrapping ──────────────────────────────────────────────────────
   The hero headline is broken into fixed lines with <br> for the desktop
   composition. On a phone those forced lines are wider than the screen, so
   the breaks are dropped and the text wraps to fit. */
@media (max-width: 700px) {
  h1 br { display: none; }
  h1 { overflow-wrap: break-word; }
}

/* The eyebrow pill carries white-space:nowrap so it stays on one line in the
   canvas. On a phone that makes it wider than the viewport. */
@media (max-width: 700px) {
  [style*="border-radius:999px"][style*="nowrap"] {
    white-space: normal !important;
    border-radius: 14px !important;
  }
}

/* ── Touch targets ──────────────────────────────────────────────────────────
   WCAG 2.2 target size, and what Google measures. Applied only to real
   controls: a min-height on every inline link would wreck body copy. */
@media (max-width: 900px) {
  a[style*="border-radius:999px"],
  a[style*="background:#5B4BFF"],
  a[style*="background:linear-gradient"],
  button {
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
  }
}

/* Motion. The canvases include gradient and transform flourishes; anyone who
   has asked their OS to reduce motion should not get them. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}