/* ============================================================
   85°C Bakery Cafe — Responsive Stylesheet
   Mobile-first media queries
   ============================================================ */

/* ── 1200px and below ── */
@media (max-width: 1200px) {
  .product-grid { grid-template-columns: repeat(3, 1fr); }
  .tiers-grid { grid-template-columns: repeat(2, 1fr); }
  .steps-grid { grid-template-columns: repeat(2, 1fr); }
  .steps-grid--3 { grid-template-columns: repeat(3, 1fr); }
  .step:nth-child(2)::after { display: none; }
  .step:nth-child(4)::after { display: none; }
}

/* ── 1024px and below ── */
@media (max-width: 1024px) {
  .navbar__menu { display: none; }
  .navbar__social { display: none; }
  .hamburger { display: flex; }
  .navbar .btn--primary { display: none; }

  .footer__grid { grid-template-columns: repeat(2, 1fr); }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .legal-layout { grid-template-columns: 1fr; }
  .legal-nav { display: none; }
}

/* ── 900px and below ── */
@media (max-width: 900px) {
  .two-col { grid-template-columns: 1fr; gap: 36px; }
  .two-col--reverse .two-col__media { order: 0; }
  .two-col--reverse .two-col__content { order: 0; }
  .app-banner { grid-template-columns: 1fr; gap: 36px; }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .tiers-grid { grid-template-columns: repeat(2, 1fr); }
  .why-cards { grid-template-columns: repeat(2, 1fr); }
  .location-cards { grid-template-columns: repeat(2, 1fr); }
}

/* ── 768px and below ── */
@media (max-width: 768px) {
  :root { --nav-height: 64px; }

  body { padding-bottom: 56px; }

  .sticky-mobile-btns { display: flex; }

  .section { padding: 56px 0; }
  .section--lg { padding: 72px 0; }

  .hero-slider {
    height: 520px;
    min-height: 440px;
    max-height: none;
  }
  .slide__content { padding: 0 24px; }
  .slide__inner h1 { font-size: 1.8rem; }
  .slide__inner p { font-size: 0.9rem; }
  .slide__ctas { flex-direction: column; align-items: flex-start; }
  .slider__nav { width: 44px; height: 44px; }
  .slider__nav--prev { left: 12px; }
  .slider__nav--next { right: 12px; }

  .menu-cards { grid-template-columns: repeat(3, 1fr); gap: 12px; }

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

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

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

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

  .footer__grid { grid-template-columns: repeat(2, 1fr); gap: 28px; }

  .footer__bottom { flex-direction: column; text-align: center; }

  .form-grid { grid-template-columns: 1fr; }
  .form-group--full { grid-column: 1; }

  .grid-2 { grid-template-columns: 1fr; }
  .grid-3 { grid-template-columns: 1fr 1fr; }

  .page-hero { height: 240px; }
  .page-hero__content h1 { font-size: 2rem; }

  .why-cards { grid-template-columns: 1fr; }
  .why-card { text-align: left; display: flex; align-items: flex-start; gap: 16px; }
  .why-card__icon { margin: 0; flex-shrink: 0; }

  .steps-grid { grid-template-columns: 1fr 1fr; }
  .steps-grid--3 { grid-template-columns: 1fr 1fr; }
  .step::after { display: none; }

  .location-cards { grid-template-columns: 1fr; }

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

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

  .back-to-top { bottom: 70px; }

  .newsletter-form { flex-direction: column; border-radius: var(--radius-sm); overflow: visible; }
  .newsletter-form input { border-radius: var(--radius-sm); padding: 14px 20px; }
  .newsletter-form button { border-radius: var(--radius-sm); padding: 14px 20px; }

  .search-bar { flex-direction: column; border-radius: var(--radius-sm); }
  .search-bar input { border-radius: var(--radius-sm) var(--radius-sm) 0 0; }
  .search-bar button { border-radius: 0 0 var(--radius-sm) var(--radius-sm); }

  .modal { max-width: 95vw; }

  .app-banner__btns { flex-direction: column; }
  .app-store-btn { width: 100%; justify-content: center; }

  .reviews-rating-badge { flex-direction: column; gap: 12px; }

  .menu-tabs { overflow-x: auto; }
  .menu-tab { white-space: nowrap; padding: 10px 18px; }

  .filter-pills { gap: 6px; }
  .filter-pill { font-size: 0.75rem; padding: 5px 12px; }

  .cookie-banner { flex-direction: column; align-items: flex-start; gap: 12px; }
}

/* ── 480px and below ── */
@media (max-width: 480px) {
  .container { padding: 0 16px; }

  .hero-slider { height: 460px; }
  .slide__inner h1 { font-size: 1.5rem; }
  .slide__ctas .btn { width: 100%; justify-content: center; }

  .menu-cards { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .menu-card__label { font-size: 1rem; padding: 10px; }

  .product-grid { grid-template-columns: 1fr 1fr; gap: 12px; }

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

  .instagram-grid { grid-template-columns: repeat(2, 1fr); gap: 6px; }

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

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

  .steps-grid,
  .steps-grid--3 { grid-template-columns: 1fr; }

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

  .section__header h2 { font-size: 1.5rem; }

  .btn--lg { padding: 13px 24px; font-size: 0.88rem; }
}

/* ── 360px and below ── */
@media (max-width: 360px) {
  .menu-cards { gap: 6px; }
  .menu-card__label { font-size: 0.85rem; padding: 8px 4px; }
  .tiers-grid { grid-template-columns: 1fr; }
}

/* ── Print ── */
@media print {
  .navbar, .footer, .sticky-mobile-btns, .back-to-top, .cookie-banner, .modal-overlay { display: none !important; }
  main { padding-top: 0; }
  body { padding-bottom: 0; }
}