/* ============================================================
   responsive.css — All breakpoints in one place
   ============================================================
   Breakpoints:
     Tablet  : max-width 900px
     Mobile  : max-width 600px
   ============================================================ */

/* ── TABLET & MOBILE (≤ 900px) ────────────────────────── */
@media (max-width: 900px) {

  :root {
    --gap: 24px; /* Reduce side padding on smaller screens */
  }

  /* Nav: hide desktop links, show hamburger */
  .nav-links   { display: none; }
  .hamburger   { display: flex; }

  /* Sections: reduce vertical padding */
  #portfolio,
  #services,
  #contact {
    padding-top: 80px;
    padding-bottom: 80px;
  }

  /* Hero */
  #home { padding-bottom: 64px; }
  .hero-scroll { display: none; }

  /* Portfolio: single column */
  .portfolio-grid { grid-template-columns: 1fr; }

  /* Portfolio header: stack vertically */
  .portfolio-header {
    flex-direction: column;
    align-items: flex-start;
  }
  .portfolio-desc { max-width: 100%; }

  /* Services: two columns */
  .services-grid { grid-template-columns: repeat(2, 1fr); }

  /* Contact: stack form below info */
  .contact-grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  /* Form: stack name + email */
  .form-row { grid-template-columns: 1fr; }

  /* Footer: center on small screens */
  footer {
    flex-direction: column;
    align-items: flex-start;
    padding: 32px var(--gap);
  }
}

/* ── MOBILE ONLY (≤ 600px) ────────────────────────────── */
@media (max-width: 600px) {

  /* Services: single column */
  .services-grid { grid-template-columns: 1fr; }

  /* Services CTA: stack */
  .services-cta {
    flex-direction: column;
    align-items: flex-start;
  }

  /* Hero actions: stack buttons */
  .hero-actions {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  /* Lightbox: full-width on small phones */
  .lightbox-inner {
    width: 95vw;
  }
}