/* ==========================================================================
   Responsive overrides — Damon Eckhoff portfolio
   --------------------------------------------------------------------------
   Breakpoints (max-width overrides, in order):
     - 1200px : small desktop / big tablet
     -  900px : tablet — work grid 3→2, about stacks
     -  640px : phone — single column everywhere
     -  380px : very narrow phones (iPhone SE and smaller)
   Edit the numbers here to tune where the layout changes.
   ========================================================================== */


/* ---------- Small desktops / large tablets ---------- */
@media (max-width: 1200px) {
  :root { --container-max: 960px; }
}


/* ---------- Tablets ----------
   Work grid drops to 2 columns. About + Contact stack to single column.
*/
@media (max-width: 900px) {
  :root { --container-max: 720px; }

  .about__grid    { grid-template-columns: 1fr; }
  .about__photo img { max-width: 360px; }
  .work-grid      { grid-template-columns: repeat(2, 1fr); }
  .contact__grid  { grid-template-columns: 1fr 1fr; }
  .contact__photo img { max-width: 260px; }

  /* Heavy parallax is janky on tablets — disable fixed attachment */
  .parallax { background-attachment: scroll; }
}


/* ---------- Phones ----------
   Single-column, comfortable padding, larger tap targets.
*/
@media (max-width: 640px) {
  :root {
    --space-7: 3.5rem;                /* tighten section padding */
  }

  .container { padding-left: var(--space-3); padding-right: var(--space-3); }

  /* All grids become single-column */
  .work-grid { grid-template-columns: 1fr; }

  /* Hamburger scales down a touch */
  .nav-toggle { top: var(--space-3); left: var(--space-3); width: 44px; height: 44px; }
  .nav-toggle__bar { width: 20px; }

  /* Contact stacks: photo on top (CENTERED), buttons below (full-width
     for easy thumb tapping). */
  .contact__grid { grid-template-columns: 1fr; }
  .contact__photo { margin: 0 auto; }        /* center the figure */
  .contact__photo img { max-width: 220px; margin: 0 auto; }
  .contact__actions { align-items: stretch; width: 100%; }
  .contact__actions .btn { width: 100%; }

  /* Hero title comfortable on phones */
  .hero__inner { padding: 0 var(--space-3); }

  /* Lightbox: shrink chrome so images get more room */
  .lightbox__close, .lightbox__nav { width: 40px; height: 40px; font-size: 1.5rem; }
  .lightbox__nav { top: auto; bottom: var(--space-4); transform: none; }
  .lightbox__nav--prev { left: var(--space-3); }
  .lightbox__nav--next { right: var(--space-3); }
}


/* ---------- Very narrow phones (iPhone SE and smaller) ---------- */
@media (max-width: 380px) {
  .hero__avatar { width: 160px; }
}