/* Live-site fixes layered on top of the Claude Design export.
   Mainly: make the desktop-only layouts work on tablets and phones. */

html, body { max-width: 100%; overflow-x: clip; }
img { max-width: 100%; }

@media (max-width: 960px) {
  /* Multi-column grids become 2 columns on tablets */
  [style*="grid-template-columns"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  [style*="grid-template-columns: 1.1fr"],
  [style*="grid-template-columns: 1.2fr"],
  [style*="grid-template-columns: 1fr 1.2fr"],
  [style*="grid-template-columns: 0.9fr"],
  [style*="grid-template-columns: 2fr"],
  [style*="grid-template-columns: 1.5fr"],
  [style*="grid-template-columns:1.1fr"],
  [style*="grid-template-columns:1.2fr"],
  [style*="grid-template-columns:2fr"] { grid-template-columns: minmax(0, 1fr) !important; }
  [style*="grid-template-columns"] > * { min-width: 0; }

  /* Tighter side padding and gaps */
  [style*="padding"][style*=" 52px"], [style*="padding"][style*=":52px"] { padding-left: 24px !important; padding-right: 24px !important; }
  [style*="gap: 52px"], [style*="gap:52px"] { gap: 32px !important; }
  [style*="padding: 100px"], [style*="padding:100px"],
  [style*="padding: 84px"], [style*="padding:84px"] { padding-top: 56px !important; padding-bottom: 56px !important; }
}

@media (max-width: 640px) {
  [style*="grid-template-columns"] { grid-template-columns: minmax(0, 1fr) !important; }

  [style*="padding"][style*=" 52px"], [style*="padding"][style*=":52px"],
  [style*="padding"][style*=" 40px"], [style*="padding"][style*=":40px"] { padding-left: 18px !important; padding-right: 18px !important; }
  [style*="gap: 52px"], [style*="gap:52px"] { gap: 28px !important; }

  /* Big headlines scale down */
  [style*="font-size: 72px"], [style*="font-size:72px"],
  [style*="font-size: 64px"], [style*="font-size:64px"],
  [style*="font-size: 60px"], [style*="font-size:60px"],
  [style*="font-size: 56px"], [style*="font-size:56px"] { font-size: 40px !important; }
  [style*="font-size: 48px"], [style*="font-size:48px"],
  [style*="font-size: 44px"], [style*="font-size:44px"],
  [style*="font-size: 40px"], [style*="font-size:40px"] { font-size: 32px !important; }
  [style*="font-size: 36px"], [style*="font-size:36px"],
  [style*="font-size: 32px"], [style*="font-size:32px"] { font-size: 26px !important; }

  /* Fixed-width widgets fit the screen */
  [style*="width: 320px"], [style*="width:320px"],
  [style*="width: 280px"], [style*="width:280px"],
  [style*="width: 360px"], [style*="width:360px"] { width: 100% !important; max-width: 100%; }
  input, textarea, select { max-width: 100%; box-sizing: border-box; width: 100%; }

  /* Rows of chips/badges wrap instead of running off screen */
  [style*="display: flex"]:not([style*="nowrap"]) { flex-wrap: wrap; }

  /* Tables scroll sideways instead of breaking the page */
  table { display: block; overflow-x: auto; max-width: 100%; }

  /* Tall photos get shorter */
  image-slot[style*="height: 440px"], image-slot[style*="height:440px"],
  image-slot[style*="height: 480px"], image-slot[style*="height:480px"],
  image-slot[style*="height: 420px"], image-slot[style*="height:420px"] { height: 260px !important; }
}

/* Header on phones */
@media (max-width: 640px) {
  header > div:first-child { flex-wrap: wrap; row-gap: 8px; }
  header nav { gap: 0 !important; margin-left: -12px; }
  header nav > a, header nav button { padding: 8px 10px !important; }
  /* Dropdowns open inline below the menu instead of floating off-screen */
  header nav [style*="position: absolute"], header nav [style*="position:absolute"] { position: static !important; min-width: 0 !important; width: 100%; max-height: 60vh !important; overflow-y: auto; box-shadow: none !important; margin-top: 4px; }
  header nav > div:has(> [style*="position: absolute"]), header nav > div:has(> [style*="position:absolute"]) { flex-basis: 100%; }
}


/* Motion: content eases in on load/scroll (motion.js). Hidden only until the
   script starts; if it never does, everything shows after 3 seconds. */
html:not(.m-ok) section > *, html:not(.m-ok) footer > * { opacity: 0; animation: m-safe 0s 3s forwards; }
@keyframes m-safe { to { opacity: 1; } }

/* Hover lift on cards, area links and buttons (mouse/trackpad only) */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  section [style*="display: grid"] > a,
  section [style*="display: grid"] > div:not(:has(input, textarea, iframe, image-slot, [style*="display: grid"])) {
    transition: transform .25s cubic-bezier(.2,.7,.2,1), box-shadow .25s ease;
  }
  section [style*="display: grid"] > a:hover,
  section [style*="display: grid"] > div:not(:has(input, textarea, iframe, image-slot, [style*="display: grid"])):has([style*="border: 1px solid"]):hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 30px -12px rgba(17, 24, 39, .22);
  }
  .rv-slide > * { transition: transform .25s cubic-bezier(.2,.7,.2,1), box-shadow .25s ease; }
  .rv-slide > *:hover { transform: translateY(-4px); box-shadow: 0 14px 30px -12px rgba(17, 24, 39, .22); }
  a[style*="text-decoration: none"] > button, a[style*="text-decoration: none"] > * > button, button { transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease; }
  a[style*="text-decoration: none"]:hover > button, a[style*="text-decoration: none"]:hover > * > button { transform: translateY(-2px); box-shadow: 0 8px 18px -8px rgba(30, 64, 175, .45); }
}