/* ==========================================================================
   eInvoice.pk — responsive rules
   Breakpoints checked: 320, 375, 390, 414, 768, 1024, 1366, 1920
   ========================================================================== */

/* Large desktop */
@media (min-width: 1600px) {
  :root { --container: 1280px; }
}

/* Hide the phone text in the header before the nav gets crowded */
@media (max-width: 1440px) {
  .header-phone span { display: none; }
  .header-phone { width: 40px; height: 40px; justify-content: center; border: 1px solid var(--line); border-radius: var(--r-sm); background: #fff; }
}

@media (max-width: 1200px) {
  .service-grid { grid-template-columns: repeat(3, 1fr); }
  .price-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: repeat(3, 1fr); }
  .footer-brand { grid-column: 1 / -1; }
}

/* ---------- Mobile navigation (tablet and below) ---------- */
@media (max-width: 1140px) {
  /* backdrop-filter would make the header the containing block for the fixed menu */
  .site-header.is-scrolled,
  .site-header.menu-open { -webkit-backdrop-filter: none; backdrop-filter: none; background: #fff; }
  .nav-toggle { display: inline-flex; }
  .header-cta { display: none; }

  .primary-nav {
    position: fixed; left: 0; right: 0;
    top: calc(var(--header-h) + env(safe-area-inset-top, 0px));
    bottom: 0;
    margin: 0; padding: 12px var(--gutter) calc(24px + env(safe-area-inset-bottom, 0px));
    background: #fff; border-top: 1px solid var(--line);
    overflow-y: auto; overscroll-behavior: contain;
    visibility: hidden; opacity: 0; transform: translateY(-8px);
    transition: opacity .22s, transform .22s, visibility 0s .22s;
  }
  .primary-nav.is-open {
    visibility: visible; opacity: 1; transform: none;
    transition: opacity .22s, transform .22s, visibility 0s;
  }
  .nav-list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav-link { padding: 15px 4px; font-size: 1.1rem; border-radius: 0; border-bottom: 1px solid var(--line); }
  .nav-link:hover { background: transparent; }
  .nav-mobile-actions { display: grid; gap: 10px; margin-top: 22px; }
  .nav-phone-mobile {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px;
    font-weight: 600; color: var(--ink); text-decoration: none;
  }
  .nav-phone-mobile .icon { width: 18px; height: 18px; color: var(--blue); }
  body.nav-open { overflow: hidden; }
}

/* ---------- Tablet ---------- */
@media (max-width: 1024px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero h1 { max-width: 16ch; }
  .hero-visual { max-width: 520px; margin-top: 12px; }
  .chip-cloud { left: -8px; }
  .chip-report { right: -8px; }

  .trust .container { flex-direction: column; align-items: flex-start; gap: 14px; }
  .trust-title { max-width: none; }
  .trust-list { width: 100%; grid-template-columns: repeat(3, 1fr); }

  .story-track { grid-template-columns: repeat(3, 1fr); row-gap: 36px; }
  .story-track::before, .story-track::after { display: none; }

  .value-grid { grid-template-columns: repeat(2, 1fr); }
  .product-layout { grid-template-columns: 1fr; }
  .industry-grid { grid-template-columns: repeat(3, 1fr); }
  .how-grid { grid-template-columns: repeat(3, 1fr); }
  .feature-grid { grid-template-columns: repeat(2, 1fr); }

  .why-grid, .about-grid, .faq-grid { grid-template-columns: 1fr; }
  .why-intro, .faq-grid .section-head { position: static; }

  .cta-band { grid-template-columns: 1fr; }
  .cta-actions { justify-content: flex-start; }
  .contact-grid { grid-template-columns: 1fr; }
}

/* ---------- Large phones / small tablets ---------- */
@media (max-width: 768px) {
  :root { --header-h: 64px; }
  body { font-size: 1rem; }

  .header-wa { display: none; }
  .service-grid { grid-template-columns: repeat(2, 1fr); }
  .product-list { grid-template-columns: 1fr; }
  .industry-grid { grid-template-columns: repeat(2, 1fr); }
  .how-grid { grid-template-columns: repeat(2, 1fr); }
  .how-step:last-child { grid-column: 1 / -1; }
  .why-list { grid-template-columns: 1fr; gap: 22px; }
  .form-row { grid-template-columns: 1fr; gap: 0; }
  .footer-grid { grid-template-columns: repeat(2, 1fr); }

  /* Vertical invoice story on phones */
  .story-track { grid-template-columns: 1fr; row-gap: 0; }
  .story-step { display: grid; grid-template-columns: 48px 1fr; column-gap: 16px; padding-bottom: 26px; }
  .story-step::before {
    content: ""; position: absolute; left: 23px; top: 48px; bottom: 0; width: 2px; background: var(--line);
  }
  .story-step:last-child::before { display: none; }
  .story-step .step-no { grid-row: span 3; margin: 0; }
  .story-step .icon { display: none; }
  .story-step h3 { margin-top: 12px; }

  /* Floating WhatsApp: icon only */
  .wa-float { padding: 0; background: transparent; box-shadow: none; }
  .wa-float-label { display: none; }
  .wa-float-icon { width: 56px; height: 56px; box-shadow: 0 8px 24px rgba(11, 27, 58, .25); }
}

/* ---------- Phones ---------- */
@media (max-width: 560px) {
  .hero-actions .btn { flex: 1 1 100%; }
  .hero-chip { display: none; }
  .invoice-sheet { padding: 20px 18px 16px; font-size: .85rem; }
  .inv-qr { width: 70px; height: 70px; }
  .inv-parties { grid-template-columns: 1fr; gap: 6px; }

  .trust-list { grid-template-columns: 1fr 1fr; }
  .trust-list li:last-child { grid-column: 1 / -1; }
  .value-grid, .service-grid, .price-grid, .how-grid { grid-template-columns: 1fr; }
  .how-step:last-child { grid-column: auto; }
  .feature-grid { grid-template-columns: 1fr; }
  .feature { padding-right: 0; }
  .about-stats .stat { padding: 20px; }
  .stat dd { font-size: 2.4rem; }
  .cta-actions .btn { flex: 1 1 100%; }
  .contact-buttons .btn { flex: 1 1 100%; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px 20px; }
  .footer-bottom { flex-direction: column; }
  .modal-actions .btn { flex: 1 1 100%; }
}

/* ---------- Very small phones (320px) ---------- */
@media (max-width: 360px) {
  .brand-word { font-size: 1.15rem; }
  .brand img { width: 30px; height: 30px; }
  .trust-list { grid-template-columns: 1fr; }
  .industry-grid { grid-template-columns: 1fr; }
  .industry { min-height: 0; flex-direction: row; align-items: center; }
  .footer-grid { grid-template-columns: 1fr; }
  .inv-foot { flex-direction: column; align-items: stretch; }
  .inv-totals { max-width: none; }
  .btn { white-space: normal; text-align: center; }
}