/* Shared responsive rules. Page layout is mostly inline styles, so overrides
   here use !important. Side padding on headers, sections and footers comes
   from --gutter (inline styles use var(--gutter, 64px)). */

:root { --gutter: 64px; }

/* Long URLs and email addresses shouldn't force sideways scrolling. */
.contact-chip a { overflow-wrap: anywhere; }

/* Tablet and below */
@media (max-width: 900px) {
  :root { --gutter: 40px; }

  /* Header: keep the name and nav labels on one line; wrap the nav if needed. */
  header { flex-wrap: wrap; gap: 12px 24px; }
  header > :first-child, header nav a { white-space: nowrap; }
  header nav { flex-wrap: wrap; gap: 8px 24px !important; font-size: 13px !important; }

  /* Home hero: photo above the text instead of stranded on its own row. */
  .hero-row { flex-direction: column-reverse !important; align-items: flex-start !important; gap: 28px !important; }
  .hero-text { flex-basis: auto !important; width: 100%; }
  .hero-photo { margin-left: 0 !important; }
  .hero-photo img { width: 170px !important; height: 170px !important; }

  /* 4-up and 3-up card grids drop to two columns. */
  div[style*="repeat(4,"], div[style*="repeat(3,"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }

  /* Experience skills/education split stacks. */
  div[style*="gap: 48px"][style*="repeat(2,"] { grid-template-columns: 1fr !important; gap: 32px !important; }
}

/* Phone */
@media (max-width: 640px) {
  :root { --gutter: 20px; }

  /* Header: name on top, nav links wrap underneath. */
  header { flex-direction: column !important; align-items: flex-start !important; gap: 14px !important; padding-top: 18px !important; padding-bottom: 16px !important; }
  header nav { gap: 8px 20px !important; }
  header nav a[style*="border-radius: 999px"] { padding: 7px 14px !important; }

  /* Footer: stack copyright and links. */
  footer { flex-direction: column !important; align-items: flex-start !important; gap: 14px !important; }
  footer > div { flex-wrap: wrap; gap: 10px 22px !important; }

  /* Page titles and section spacing. */
  h1 { font-size: 30px !important; line-height: 1.2 !important; }
  section[style*="padding: 72px"], section[style*="padding: 96px"] { padding-top: 40px !important; }
  section.hero { padding-top: 48px !important; padding-bottom: 56px !important; }

  /* Home hero: photo first, smaller, left-aligned; buttons wrap. */
  .hero h1 { font-size: 34px !important; }
  .hero-photo img { width: 140px !important; height: 140px !important; }
  .hero-actions { flex-wrap: wrap; }

  /* All grids go single column. */
  div[style*="grid-template-columns"] { grid-template-columns: 1fr !important; }

  /* Speaking rows: event details above the talk list. */
  .talk-row { flex-direction: column !important; gap: 10px !important; }
  .talk-event-col { width: auto !important; }

  /* Civic "Past" header and similar rows can wrap instead of squeezing. */
  section div[style*="justify-content: space-between"] { flex-wrap: wrap; gap: 12px; }

  /* Comfortable tap targets for buttons and the form. */
  button, .toggle-btn { min-height: 44px; }
  .field-input { font-size: 16px; } /* prevents iOS zoom-on-focus */
}