/*
 * responsive.css
 * ─────────────────────────────────────────────────────────
 * Media queries for tablet and mobile breakpoints.
 * Always loaded last so it can override other styles.
 *
 * Breakpoints:
 *   768px — tablet / mobile nav switches to hamburger
 *   480px — small phones
 * ─────────────────────────────────────────────────────────
 */

/* ── Tablet & Mobile (≤ 768px) ───────────────────────── */
@media (max-width: 768px) {

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

  .hamburger {
    display: flex;
  }

  /* Before/After — stack vertically */
  .ba-wrap {
    grid-template-columns: 1fr;
  }

  /* Form — stack two-column rows */
  .form-row {
    grid-template-columns: 1fr;
  }

  /* Footer — two columns */
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 28px;
  }

  /* Process — hide arrow connectors */
  .step:not(:last-child)::after {
    display: none;
  }

  /* Lightbox — tighter arrow placement */
  #lb-prev { left: 8px; }
  #lb-next { right: 8px; }
}

/* ── Small phones (≤ 480px) ──────────────────────────── */
@media (max-width: 480px) {

  /* Footer — single column */
  .footer-grid {
    grid-template-columns: 1fr;
  }

  /* Gallery — two-column grid */
  .gallery-grid {
    grid-template-columns: 1fr 1fr;
  }
}