/* ============================================================
   EMBER & SPICE — Responsive CSS
   Breakpoint-specific overrides and mobile-first adjustments
   ============================================================ */

/* ============================================================
   1. EXTRA LARGE (1400px+) — XL Desktop
   ============================================================ */
@media (min-width: 1400px) {
  .es-hero-title {
    font-size: 5.5rem;
  }

  .es-hero-content {
    padding-top: 100px;
    padding-bottom: 80px;
  }

  .container {
    max-width: 1340px;
  }
}

/* ============================================================
   2. LARGE (1200px–1399px) — Desktop
   ============================================================ */
@media (min-width: 1200px) and (max-width: 1399px) {
  .es-hero-title {
    font-size: 4.5rem;
  }
}

/* ============================================================
   3. MEDIUM-LARGE (992px–1199px) — Laptop
   ============================================================ */
@media (min-width: 992px) and (max-width: 1199px) {
  .es-hero-title {
    font-size: 3.75rem;
  }

  .es-section {
    padding: 64px 0;
  }

  .about-img-main {
    height: 360px;
  }

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

/* ============================================================
   4. TABLET (768px–991px)
   ============================================================ */
@media (min-width: 768px) and (max-width: 991px) {
  :root {
    --es-header-height: 64px;
  }

  .es-hero-title {
    font-size: 3rem;
  }

  .es-hero-subtitle {
    font-size: 1rem;
  }

  .es-section {
    padding: 56px 0;
  }

  .es-section-title {
    font-size: 1.875rem;
  }

  /* Header */
  #mainHeader .header-nav {
    display: none;
  }

  #mainHeader .btn-book-table {
    display: none;
  }

  /* About section */
  .about-img-stack {
    padding-bottom: 50px;
    padding-right: 40px;
    margin-bottom: 2rem;
  }

  .about-img-main {
    height: 340px;
  }

  .about-img-secondary {
    height: 180px;
  }

  .about-badge {
    left: -10px;
    padding: 0.75rem 1rem;
  }

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

  /* Chef cards */
  .chef-card-img-wrap {
    height: 240px;
  }

  /* Special section */
  .special-hero-img {
    margin-top: 2rem;
    height: 280px;
    object-fit: cover;
  }

  /* Promo banner */
  .promo-banner {
    padding: 2rem;
    text-align: center;
  }

  .promo-banner .text-end {
    text-align: center !important;
    margin-top: 1.5rem;
  }

  /* Footer */
  .footer-brand-desc {
    max-width: 100%;
  }

  .footer-hours-item {
    font-size: 0.78rem;
  }
}

/* ============================================================
   5. MOBILE (below 768px)
   ============================================================ */
@media (max-width: 767px) {
  :root {
    --es-header-height: 60px;
  }

  body {
    font-size: 0.95rem;
  }

  /* Sections */
  .es-section {
    padding: 50px 0;
  }

  .es-section-sm {
    padding: 36px 0;
  }

  .es-section-lg {
    padding: 60px 0;
  }

  .es-section-header {
    margin-bottom: 2rem;
  }

  .es-section-title {
    font-size: 1.65rem;
  }

  /* Hero */
  .es-hero {
    min-height: 100svh;
  }

  .es-hero-bg {
    background-attachment: scroll;
  }

  .es-hero-title {
    font-size: 2.25rem;
  }

  .es-hero-subtitle {
    font-size: 0.92rem;
  }

  .es-hero-buttons {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 2rem;
  }

  .es-hero-buttons .btn-cta,
  .es-hero-buttons .btn-cta-outline {
    width: 100%;
    justify-content: center;
    text-align: center;
  }

  .es-hero-stats {
    flex-wrap: wrap;
    gap: 1rem;
  }

  .es-hero-stat-icon {
    width: 36px;
    height: 36px;
    font-size: 0.95rem;
  }

  .es-hero-stat-val {
    font-size: 1.1rem;
  }

  /* Categories */
  .category-card {
    width: 100px;
  }

  .category-card-img-wrap {
    width: 70px;
    height: 70px;
  }

  /* Food cards */
  .food-card-img-wrap {
    height: 180px;
  }

  .food-card-title {
    font-size: 0.95rem;
  }

  /* List view on mobile: stack as grid */
  .food-card-list {
    flex-direction: column;
  }

  .food-card-list .food-card-img-wrap {
    width: 100%;
    height: 180px;
    border-radius: var(--es-radius-lg) var(--es-radius-lg) 0 0;
  }

  /* Special section */
  .special-section {
    text-align: center;
  }

  .special-timer {
    justify-content: center;
  }

  .special-hero-img {
    margin-top: 2rem;
    height: 250px;
    object-fit: cover;
  }

  .special-item-card {
    text-align: left;
  }

  /* Promo banner */
  .promo-banner {
    padding: 2rem 1.5rem;
    text-align: center;
    border-radius: var(--es-radius-lg);
  }

  .promo-banner .text-lg-end {
    text-align: center !important;
    margin-top: 1.5rem;
  }

  .promo-banner .promo-banner-img {
    display: none;
  }

  /* About section */
  .about-img-stack {
    padding-bottom: 0;
    padding-right: 0;
    margin-bottom: 2rem;
  }

  .about-img-main {
    height: 280px;
    width: 100%;
  }

  .about-img-secondary {
    display: none;
  }

  .about-badge {
    display: none;
  }

  /* Stats */
  .es-section .stat-number {
    font-size: 2rem;
  }

  /* Chefs */
  .chef-card-img-wrap {
    height: 220px;
  }

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

  /* Gallery filter tabs - horizontal scroll */
  .gallery-filter-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    justify-content: flex-start;
    padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .gallery-filter-tabs::-webkit-scrollbar {
    display: none;
  }

  .gallery-filter-tab {
    flex-shrink: 0;
  }

  /* Testimonials */
  .testimonial-card {
    padding: 1.5rem;
  }

  /* Reservation CTA */
  .reservation-cta {
    min-height: 360px;
  }

  /* Newsletter */
  .newsletter-form {
    flex-direction: column;
    border-radius: var(--es-radius-md);
    overflow: visible;
    box-shadow: none;
  }

  .newsletter-input {
    border: 1.5px solid var(--es-border);
    border-radius: var(--es-radius-md) !important;
    width: 100%;
  }

  .newsletter-btn {
    border-radius: var(--es-radius-md) !important;
    padding: 0.85rem 1.5rem;
    text-align: center;
  }

  /* Footer */
  .es-footer {
    padding-top: 50px;
  }

  .footer-brand-desc {
    max-width: 100%;
  }

  .footer-bottom {
    text-align: center;
  }

  .footer-bottom-links {
    justify-content: center;
    margin-top: 0.75rem;
  }

  .footer-payment-logos {
    justify-content: center;
  }

  /* Toast container */
  .es-toast-container {
    top: auto;
    bottom: 80px;
    left: 12px;
    right: 12px;
  }

  .es-toast {
    min-width: auto;
    max-width: 100%;
  }

  /* Back to top */
  .back-to-top {
    bottom: 85px;
    right: 16px;
    width: 40px;
    height: 40px;
  }

  /* Why choose us */
  .why-card {
    padding: 1.5rem 1rem;
  }

  .why-card-icon {
    width: 60px;
    height: 60px;
    font-size: 1.5rem;
  }
}

/* ============================================================
   6. SMALL MOBILE (below 576px)
   ============================================================ */
@media (max-width: 575px) {
  .es-hero-title {
    font-size: 1.9rem;
  }

  .es-section-title {
    font-size: 1.45rem;
  }

  .btn-cta {
    padding: 0.75rem 1.75rem;
    font-size: 0.9rem;
  }

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

  .es-tabs {
    gap: 0.3rem;
  }

  .es-tab-btn {
    padding: 0.45rem 1rem;
    font-size: 0.78rem;
  }

  /* Chef - 1 per row */
  .chef-grid .col {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .about-img-main {
    height: 220px;
  }
}

/* ============================================================
   7. PRINT MEDIA
   ============================================================ */
@media print {
  #mainHeader,
  .mobile-bottom-nav,
  .back-to-top,
  .es-toast-container,
  .cart-fab,
  .sticky-cart-bar {
    display: none !important;
  }

  body {
    padding-bottom: 0;
  }

  .es-hero {
    min-height: auto;
    break-inside: avoid;
  }
}

/* ============================================================
   8. HIGH-DPI / RETINA
   ============================================================ */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  /* Retina optimizations handled through src/srcset on images */
}

/* ============================================================
   9. REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .es-hero-bg {
    background-attachment: scroll;
    transform: none;
  }

  html {
    scroll-behavior: auto;
  }
}

/* ============================================================
   10. FOCUS VISIBLE (ACCESSIBILITY)
   ============================================================ */
:focus-visible {
  outline: 3px solid var(--es-primary);
  outline-offset: 3px;
}

button:focus-visible,
a:focus-visible {
  outline: 3px solid var(--es-primary);
  outline-offset: 3px;
  border-radius: 3px;
}