/**
 * assets/css/responsive.css
 * --------------------------
 * Media queries — mobile-first breakpoints.
 * This file ONLY contains overrides; base styles are in layout.css
 *
 * Breakpoints:
 *   sm  – 480px
 *   md  – 768px   (tablet)
 *   lg  – 1024px  (small laptop)
 *   xl  – 1200px  (desktop)
 */

/* ── Tablet (max-width: 1024px) ─────────────────────────── */
@media (max-width: 1024px) {
  .footer__grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-8);
  }
}

/* ── Tablet portrait / large phone (max-width: 768px) ───── */
@media (max-width: 768px) {

  /* Nav */
  .nav { padding-inline: var(--space-6); }
  .nav__links { display: none; }           /* hide desktop links */
  .nav__hamburger { display: flex; }       /* show hamburger */

  /* Sections */
  .section { padding-block: var(--space-16); }

  /* Products */
  .products-grid { grid-template-columns: 1fr; }

  /* Recipes */
  .recipes-grid { grid-template-columns: 1fr; }

  /* Gallery */
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }

  /* Footer */
  .footer__grid { grid-template-columns: 1fr; }
  .footer__bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-4);
  }
  .footer__bottom-links { flex-direction: column; gap: var(--space-3); }
}

/* ── Mobile (max-width: 480px) ──────────────────────────── */
@media (max-width: 480px) {

  /* Smaller section padding */
  .section { padding-block: var(--space-12); }
  .container { padding-inline: var(--space-4); }

  /* Gallery 2-col on small screens */
  .gallery-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-2); }

  /* Button full width on mobile */
  .btn--full-mobile { display: block; text-align: center; }
}