/* =============================================================================
   RESPONSIVE BREAKPOINTS
   Base styles in styles.css are mobile-first. This file layers in
   progressive enhancements for larger viewports only (min-width queries).
============================================================================= */

/* ---- Small tablet and up (>= 640px) --------------------------------------- */
@media (min-width: 640px) {
  .meal-grid, .package-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .faq-list { grid-template-columns: repeat(2, 1fr); gap: var(--space-3) var(--space-6); }

  .hero-actions { flex-direction: row; flex-wrap: wrap; }
  .hero-actions .btn { width: auto; }

  .hero-trust-points { flex-direction: row; align-items: center; gap: var(--space-5); }
  .hero-trust-points li:not(:first-child) {
    padding-left: var(--space-5);
    border-left: 1px solid rgba(255, 255, 255, 0.2);
  }
}

/* ---- Tablet and up (>= 768px) ---------------------------------------------- */
@media (min-width: 768px) {
  .form-row-group { flex-direction: row; }
  .form-row-group .form-row { flex: 1; }
  .form-row-narrow { flex: 0 0 100px; }


  /* Enough room for the sticky mobile bar to be unnecessary next to a
     comfortably reachable header cart icon, but we keep it through tablet
     portrait since touch remains the primary input up to desktop. */
}

/* ---- Desktop and up (>= 1024px) -------------------------------------------- */
@media (min-width: 1024px) {
  .hero-inner { padding: 148px 0 var(--space-8); align-items: center; }
  .hero-copy { max-width: 540px; }

  /* The image composition breaks out of the centered container and bleeds
     to the viewport edge, sitting behind the transparent header. */
  .hero-media {
    position: absolute;
    order: 0;
    inset: 0 0 0 auto;
    width: 52%;
    aspect-ratio: auto;
  }
  .hero-media-fade {
    background:
      linear-gradient(to right, var(--hero-black) 0%, transparent 16%),
      linear-gradient(to top, rgba(11, 11, 10, 0.55) 0%, transparent 35%);
  }

  .meal-grid { grid-template-columns: repeat(3, 1fr); }
  .package-grid { grid-template-columns: repeat(4, 1fr); }

  .process-list { grid-template-columns: repeat(4, 1fr); }

  .footer-inner {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    text-align: left;
  }
  .footer-nav, .footer-contact { justify-content: flex-start; }

  .footer-bottom { flex-direction: row; justify-content: space-between; }

  /* On desktop, pointer/keyboard users can comfortably reach the header
     cart at all times, so the sticky mobile ordering bar is unnecessary. */
  .mobile-order-bar { display: none !important; }
}

/* ---- Large desktop (>= 1280px) --------------------------------------------- */
@media (min-width: 1280px) {
  .meal-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ---- Cart drawer full-screen on very small phones -------------------------- */
@media (max-width: 420px) {
  .cart-drawer { width: 100vw; }
}