/* Responsive overrides for the portfolio.
   Pages are styled inline (Claude Design export), so these rules match inline
   style fragments and override them with !important on smaller screens.
   Selectors use the browser's serialized form ("prop: value", 0 -> 0px),
   because the runtime re-applies inline styles through React. */

img { max-width: 100%; }

/* ---------- Tablet ---------- */
@media (max-width: 1024px) {
  [style*="grid-template-columns: repeat(4, 1fr)"] { grid-template-columns: repeat(2, 1fr) !important; }
  [style*="grid-template-columns: 320px 1fr"],
  [style*="grid-template-columns: 360px 1fr"],
  [style*="grid-template-columns: 380px 1fr"] { gap: 40px !important; }
  [style*="columns: 3"] { columns: 2 !important; }
}

/* ---------- Phone ---------- */
@media (max-width: 760px) {
  /* Side gutters */
  [style*="padding: 0px 32px"] { padding-left: 20px !important; padding-right: 20px !important; }
  [style*="padding: 52px 32px 0px"],
  [style*="padding: 56px 32px 0px"] { padding: 36px 20px 0 !important; }
  [style*="padding: 48px 32px 110px"] { padding: 36px 20px 72px !important; }
  [style*="padding: 110px 32px 120px"] { padding: 72px 20px 80px !important; }
  [style*="padding: 110px 0px"] { padding: 72px 0 !important; }

  /* Navigation: logo links home, so the "Home" text link is dropped on phones */
  nav[style*="padding: 28px 32px"] { padding: 18px 20px !important; gap: 12px; }
  nav > a:first-child { flex: none; }
  nav > div[style*="gap: 36px"] { gap: 16px !important; }
  nav > div[style*="gap: 36px"] > a:first-child { display: none !important; }
  nav a { white-space: nowrap; font-size: 13.5px !important; }
  nav a[style*="padding: 10px 20px"] { padding: 8px 15px !important; }

  /* Big section spacing */
  [style*="margin: 130px auto 0px"] { margin-top: 80px !important; }
  [style*="margin: 120px auto 0px"] { margin-top: 72px !important; }
  [style*="margin: 130px 0px 0px"] { margin-top: 80px !important; }
  [style*="margin: 110px auto 0px"],
  [style*="margin: 110px 0px 0px"] { margin-top: 72px !important; }
  [style*="margin: 88px auto 0px"] { margin-top: 48px !important; }

  /* Headlines */
  h1[style*="clamp(48px"] { font-size: 40px !important; }
  h1[style*="clamp(44px"] { font-size: 38px !important; }

  /* Every grid becomes one column ... */
  [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
  [style*="grid-column: span"] { grid-column: auto !important; }
  /* ... except the project facts strip, which reads better as 2 x 2 */
  [style*="grid-template-columns: repeat(4, 1fr)"][style*="gap: 1px"] { grid-template-columns: repeat(2, 1fr) !important; }
  [style*="grid-template-columns: repeat(4, 1fr)"][style*="gap: 1px"] > div { padding: 18px 16px !important; }

  /* Rows with an icon column: keep the icon, stack the rest beside it */
  [style*="grid-template-columns: 64px 1fr 220px"] { grid-template-columns: 48px 1fr !important; gap: 10px 16px !important; }
  [style*="grid-template-columns: 64px 1fr 220px"] > :nth-child(3) { grid-column: 2; text-align: left !important; }
  [style*="grid-template-columns: 64px 1fr 1fr"] { grid-template-columns: 40px 1fr !important; gap: 14px 18px !important; padding: 28px 22px !important; }
  [style*="grid-template-columns: 64px 1fr 1fr"] > :nth-child(3) { grid-column: 2; }
  [style*="grid-template-columns: 42px 110px 1fr"] { grid-template-columns: 42px 1fr !important; gap: 6px 16px !important; }
  [style*="grid-template-columns: 42px 110px 1fr"] > :nth-child(3) { grid-column: 2; }

  /* Large grid gaps */
  [style*="display: grid"][style*="gap: 64px"],
  [style*="gap: 72px"],
  [style*="gap: 80px"] { gap: 28px !important; }

  /* Section headers laid out as "title ... caption" rows */
  [style*="justify-content: space-between"][style*="gap: 48px"] {
    flex-direction: column !important; align-items: flex-start !important; gap: 14px !important;
  }

  /* Card padding */
  [style*="padding: 56px 52px"],
  [style*="padding: 56px 56px 58px"],
  [style*="padding: 72px 48px"] { padding: 32px 22px !important; }
  [style*="padding: 44px 48px"],
  [style*="padding: 40px 34px"],
  [style*="padding: 36px 32px"] { padding: 26px 22px !important; }

  /* Side-by-side media rows (Work cards, solution rows) stack, text first */
  [style*="min-height: 520px"],
  [style*="min-height: 560px"] { min-height: 0 !important; }
  [style*="order: 1"], [style*="order: 2"] { order: 0 !important; }
  div:has(> [style*="position: absolute; inset: 0px"]):not([style*=" height:"]) { min-height: 260px; }

  /* Fixed-height image boxes keep their proportions instead */
  [style*=" height: 480px"], [style*=" height: 520px"], [style*=" height: 560px"],
  [style*=" height: 600px"], [style*=" height: 620px"], [style*=" height: 640px"] {
    height: auto !important; aspect-ratio: 4 / 3;
  }
  [style*=" height: 248px"] { height: auto !important; aspect-ratio: 16 / 10; }

  /* Blog masonry */
  [style*="columns: 3"] { columns: 1 !important; }

  /* Sticky side columns would overlap once stacked */
  [style*="position: sticky"] { position: relative !important; top: auto !important; }

  /* Home "My expertise": no hover on touch, so show each description */
  [data-skill-index] { gap: 10px !important; padding: 34px 4px 22px !important; }
  [data-skill-index] h3 { font-size: 38px !important; white-space: normal !important; transform: none !important; }
  [data-skill-index] p { opacity: 1 !important; transform: none !important; }
  [data-skill-index] > div { min-height: 0 !important; }
  [data-skill-index] > div > span { display: none; }

  /* Hero image stack */
  [style*=" height: 72vh"] { height: auto !important; min-height: 0 !important; aspect-ratio: 4 / 3; }
}

/* ---------- Touch screens of any size: no hover, so reveal hover-only content ---------- */
@media (hover: none) {
  [data-skill-index] p { opacity: 1 !important; transform: none !important; }
  [data-skill-index] > div > span { display: none; }
}