/* ==========================================================================
   MADHAV FOOD SERVICE — RESPONSIVE STYLES
   Breakpoints tested: 320 / 375 / 390 / 414 (mobile), 768 / 820 / 1024 (tablet),
   1280 / 1440 / 1920 (desktop)
   ========================================================================== */

/* ----------------------------- 1280px and below ---------------------------- */
@media (max-width: 1280px){
  :root{ --container-width: 1080px; }
}

/* ------------------------------ 1024px (tablet) ----------------------------- */
@media (max-width: 1024px){
  .hero-inner{ grid-template-columns: 1fr; }
  .hero-visual{ order:-1; aspect-ratio: 16/9; }
  .highlight-grid{ grid-template-columns: repeat(3, 1fr); gap:18px; }
  .grid-3{ grid-template-columns: repeat(2, 1fr); }
  .process-grid{ grid-template-columns: repeat(2, 1fr); }
  .about-preview{ grid-template-columns: 1fr; }
  .about-preview .visual{ order:-1; }
  .gallery-grid{ grid-template-columns: repeat(2, 1fr); }
  .contact-preview-grid{ grid-template-columns: 1fr 1fr; }
  .footer-grid{ grid-template-columns: 1fr 1fr; }
  .values-grid, .team-grid{ grid-template-columns: repeat(2, 1fr); }
  .vision-mission-grid{ grid-template-columns: 1fr; }
  .service-block{ grid-template-columns: 1fr; gap: 28px; }
  .service-block.reverse .service-visual{ order:-1; }
  .contact-layout{ grid-template-columns: 1fr; }
}

/* ------------------------------ 820px --------------------------------------- */
@media (max-width: 900px){
  .main-nav{ display:none; }
  .nav-toggle{ display:flex; }

  .main-nav{
    display:flex;
    position:fixed;
    top: var(--header-height);
    left:0; right:0;
    background: var(--color-white);
    flex-direction:column;
    align-items:stretch;
    padding: 12px 20px 24px;
    box-shadow: var(--shadow-strong);
    transform: translateY(-12px);
    opacity:0;
    pointer-events:none;
    transition: transform var(--transition), opacity var(--transition);
    max-height: calc(100vh - var(--header-height));
    overflow-y:auto;
  }
  .main-nav.is-open{ transform: translateY(0); opacity:1; pointer-events:auto; }
  .main-nav a{ padding: 14px 10px; border-radius: 10px; text-align:left; }
  .header-actions .btn-primary{ display:none; }
  .main-nav .nav-cta{ display:block; margin-top: 10px; }

  .final-cta{ flex-direction:column; align-items:flex-start; text-align:left; }
}

/* ------------------------------ 768px (tablet portrait) --------------------- */
@media (max-width: 768px){
  .section{ padding: 64px 0; }
  .highlight-grid{ grid-template-columns: 1fr; }
  .grid-3{ grid-template-columns: 1fr; }
  .grid-2{ grid-template-columns: 1fr; }
  .process-grid{ grid-template-columns: 1fr; }
  .gallery-grid{ grid-template-columns: 1fr 1fr; }
  .form-grid{ grid-template-columns: 1fr; }
  .footer-grid{ grid-template-columns: 1fr 1fr; gap:28px; }
  .values-grid, .team-grid{ grid-template-columns: 1fr; }
  .contact-preview-grid{ grid-template-columns: 1fr; }
  .final-cta{ padding: 40px 28px; }
}

/* ------------------------------ 414px and below (mobile) -------------------- */
@media (max-width: 480px){
  .container{ padding: 0 18px; }
  .hero-inner{ padding: 48px 0 72px; }
  .hero-actions{ flex-direction:column; align-items:stretch; }
  .hero-actions .btn{ width:100%; }
  .hero-badge{ position:static; margin-top: 16px; max-width:none; }
  .gallery-grid{ grid-template-columns: 1fr; }
  .footer-grid{ grid-template-columns: 1fr; gap: 30px; }
  .footer-bottom{ flex-direction:column; align-items:flex-start; }
  .brand-text-sub{ display:none; }
  .final-cta-actions{ flex-direction:column; width:100%; }
  .final-cta-actions .btn{ width:100%; }
  h1{ font-size: 2rem; }
  .whatsapp-fab{ width:52px; height:52px; right:16px; bottom:16px; }
  .back-to-top{ right:16px; bottom: 82px; }
}

/* Ensure no horizontal scroll anywhere */
html, body{ max-width: 100%; overflow-x: hidden; }