/* ============================================================
   Dravenciel — Responsive Stylesheet
   Mobile-first breakpoints
   ============================================================ */

/* ── Tablet (≤1024px) ───────────────────────────────────────── */
@media (max-width: 1024px) {
  .hero-content { padding: var(--sp-16) var(--sp-10) var(--sp-16) var(--sp-8); }
  .recipes-grid { grid-template-columns: repeat(3, 1fr); }
  .categories-grid { grid-template-columns: repeat(4, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--sp-10); }
  .rotd-content { padding: var(--sp-12) var(--sp-10) var(--sp-12) var(--sp-8); }
  .stories-grid { grid-template-columns: 1fr; }
  .story-card--featured { min-height: 380px; }
}

/* ── Landscape tablet / small laptop (≤900px) ───────────────── */
@media (max-width: 900px) {
  .nav-links { display: none; }
  #nav-toggle { display: flex; }

  .hero-grid { grid-template-columns: 1fr; }
  .hero-image-wrap { min-height: 50vw; }
  .hero-content {
    padding: var(--sp-16) var(--sp-8);
    order: 1;
  }
  .hero-image-wrap { order: 2; }
  #hero { min-height: auto; }

  .rotd-grid { grid-template-columns: 1fr; }
  .rotd-image { min-height: 300px; }
  .rotd-content { padding: var(--sp-10) var(--sp-8); }

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

/* ── Mobile (≤640px) ────────────────────────────────────────── */
@media (max-width: 640px) {
  :root { --sp-8: 20px; }
  .container { padding: 0 var(--sp-5); }

  .nav-inner { padding: 0 var(--sp-5); }

  .hero-content { padding: var(--sp-12) var(--sp-5); }
  .hero-actions { flex-direction: column; align-items: flex-start; gap: var(--sp-4); }
  .hero-highlight { max-width: 100%; }

  .recipes-grid { grid-template-columns: repeat(2, 1fr); gap: var(--sp-4); }
  .categories-grid { grid-template-columns: repeat(2, 1fr); }

  .search-row { flex-direction: column; }
  .filters-row { grid-template-columns: 1fr; }
  .filters-row > button { width: 100%; }

  .search-card { padding: var(--sp-6); }

  .tip-slide { flex-direction: column; gap: var(--sp-6); }
  .tip-number { font-size: 3.5rem; }

  .newsletter-card { padding: var(--sp-10) var(--sp-6); }
  .newsletter-form { flex-direction: column; }
  .newsletter-form input, .newsletter-form button { width: 100%; }

  .footer-grid { grid-template-columns: 1fr; gap: var(--sp-8); }
  .footer-bottom { flex-direction: column; gap: var(--sp-3); text-align: center; }

  .guides-grid { grid-template-columns: 1fr; }
  .guide-card { flex-direction: column; padding: 0; }
  .guide-card .img-wrap { width: 100%; height: 200px; }
  .guide-card .card-body { padding: var(--sp-5); }

  .ingredients-grid { grid-template-columns: 1fr; }

  .stories-grid { grid-template-columns: 1fr; }
  .story-card--featured { min-height: 300px; }

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

/* ── Very small mobile (≤400px) ─────────────────────────────── */
@media (max-width: 400px) {
  .recipes-grid { grid-template-columns: 1fr; }
  .categories-grid { grid-template-columns: 1fr; }
}