/* Hollywood — shared mobile responsive layer.
   Targets inline-style patterns exported by Claude Design; safe to include
   on any of the exhibit pages. Mural (index.html) has its own bespoke
   layout tuning; this stylesheet handles the reading / grid pages. */

@media (max-width: 768px) {
  html, body { -webkit-text-size-adjust: 100%; overflow-x: hidden; }

  /* Reduce heavy paddings */
  [style*="padding:96px"] { padding: 32px !important; }
  [style*="padding:56px"] { padding: 22px !important; }
  [style*="padding:52px"] { padding: 22px !important; }
  [style*="padding:44px"] { padding: 18px !important; }
  [style*="padding:28px"] { padding: 18px !important; }
  [style*="padding:26px"] { padding: 16px !important; }
  [style*="padding:22px"] { padding: 14px !important; }
  [style*="padding:20px"] { padding: 14px !important; }

  /* Column widths → full-width on mobile */
  [style*="max-width:1080px"] { max-width: 100% !important; }
  [style*="max-width:920px"]  { max-width: 100% !important; }
  [style*="max-width:840px"]  { max-width: 100% !important; }
  [style*="max-width:760px"]  { max-width: 100% !important; }
  [style*="max-width:720px"]  { max-width: 100% !important; }
  [style*="max-width:640px"]  { max-width: 100% !important; }

  /* Fixed pixel widths → responsive */
  [style*="width:560px"] { width: 100% !important; max-width: 100% !important; }
  [style*="width:520px"] { width: 100% !important; max-width: 100% !important; }
  [style*="width:480px"] { width: 100% !important; max-width: 100% !important; }
  [style*="width:420px"] { width: 100% !important; max-width: 100% !important; }
  [style*="width:400px"] { width: 100% !important; max-width: 100% !important; }
  [style*="width:360px"] { width: 100% !important; max-width: 100% !important; }
  [style*="width:320px"] { width: 100% !important; max-width: 100% !important; }

  /* Multi-column grids → single column */
  [style*="grid-template-columns:1fr 1fr 1fr"] { grid-template-columns: 1fr !important; }
  [style*="grid-template-columns:1fr 1fr"] { grid-template-columns: 1fr !important; }
  [style*="grid-template-columns:repeat(4"] { grid-template-columns: 1fr !important; }
  [style*="grid-template-columns:repeat(3"] { grid-template-columns: 1fr !important; }
  [style*="grid-template-columns:repeat(2"] { grid-template-columns: 1fr !important; }

  /* Serif hero titles: cap size */
  h1[style*="font-size:clamp"] { font-size: clamp(22px, 6vw, 30px) !important; }

  /* Buttons / CTAs: wrap flex rows */
  [style*="display:flex"][style*="gap:12px"] { flex-wrap: wrap !important; }
  [style*="display:flex"][style*="gap:22px"] { flex-wrap: wrap !important; gap: 12px !important; }
  [style*="display:flex"][style*="gap:56px"] { gap: 24px !important; }

  /* Safe area padding for anchored bottom bars */
  [style*="bottom:38px"] { padding-bottom: env(safe-area-inset-bottom) !important; }
  [style*="bottom:44px"] { padding-bottom: env(safe-area-inset-bottom) !important; }
}

@media (max-width: 480px) {
  [style*="padding:44px"] { padding: 14px !important; }
  [style*="padding:22px"] { padding: 12px !important; }
  h1[style*="font-size:clamp"] { font-size: clamp(20px, 6vw, 26px) !important; }
}