/* ==========================================================================
   Cross-cutting responsive rules
   Breakpoints: 480 (large phone), 768 (tablet), 1024 (laptop), 1280 (desktop)
   ========================================================================== */

/* ---- Base: 320px+ safety net against horizontal overflow ---- */
html,
body {
  overflow-x: hidden;
}

.app-header {
  padding: 0 var(--space-3);
}

.app-header__search {
  display: none;
}

.container {
  padding: 0 var(--space-1);
}

/* ---- 480px+ ---- */
@media (min-width: 480px) {
  .grid--stats {
    grid-template-columns: repeat(2, 1fr);
  }

  .quick-actions {
    grid-template-columns: repeat(2, 1fr);
  }

}

/* ---- 640px+ : search box appears in header ---- */
@media (min-width: 640px) {
  .app-header__search {
    display: block;
  }

  .app-header {
    padding: 0 var(--space-4);
  }
}

/* ---- 768px+ : tablet ---- */
@media (min-width: 768px) {
  .grid--stats {
    grid-template-columns: repeat(3, 1fr);
  }

  .health-goal-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .page-header__title {
    font-size: var(--font-size-2xl);
  }

  .kitchen-visual {
    grid-template-columns: minmax(0, 1.15fr) minmax(240px, 0.85fr);
  }
}

/* ---- 1024px+ : laptop, sidebar layout kicks in (see layout.css) ---- */
@media (min-width: 1024px) {
  .grid--stats {
    grid-template-columns: repeat(4, 1fr);
  }

  .recipe-detail__actions {
    position: sticky;
    bottom: var(--space-4);
  }
}

/* ---- 1280px+ : large desktop ---- */
@media (min-width: 1280px) {
  .app-main {
    padding-left: var(--space-10);
    padding-right: var(--space-10);
  }
}

/* ---- Narrow phones: tighten spacing further ---- */
@media (max-width: 374px) {
  .app-main {
    padding-left: var(--space-3);
    padding-right: var(--space-3);
  }

  .page-header__title {
    font-size: var(--font-size-lg);
  }

  .quick-actions {
    grid-template-columns: 1fr 1fr;
  }
}