/* ==========================================================================
   RISHI OIL — RESPONSIVE RULES
   Mobile-first overrides layered on top of the desktop-default component CSS.
   Breakpoints: >=1024 desktop (default), <=1024 tablet, <=640 phone.
   ========================================================================== */

/* ---------------------------------------------------------------------- */
/* Tablet: <= 1024px                                                       */
/* ---------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .hero-inner {
    grid-template-columns: 1fr;
    padding-block: var(--space-8) var(--space-7);
  }
  .hero-media { max-width: 520px; }

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

  .product-block {
    grid-template-columns: 1fr;
  }
  .product-media {
    position: static;
    max-width: 420px;
  }

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

  .form-row { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------- */
/* Phone / mobile nav: <= 860px                                            */
/* ---------------------------------------------------------------------- */
@media (max-width: 860px) {
  .nav-toggle { display: flex; }

  .nav {
    position: fixed;
    inset: 0 0 0 auto;
    top: 0;
    height: 100vh;
    width: min(320px, 82vw);
    background: var(--color-navy-900);
    flex-direction: column;
    align-items: flex-start;
    padding: calc(var(--space-8)) var(--space-6) var(--space-6);
    transform: translateX(100%);
    transition: transform var(--dur-med) var(--ease-out);
    box-shadow: var(--shadow-lg);
  }
  .nav.is-open { transform: translateX(0); }

  .nav-links {
    flex-direction: column;
    gap: var(--space-5);
    width: 100%;
  }
  .nav-links a { display: block; font-size: 1.05rem; }

  .nav .btn { margin-top: var(--space-6); width: 100%; }

  .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}

/* ---------------------------------------------------------------------- */
/* Small phone: <= 640px                                                   */
/* ---------------------------------------------------------------------- */
@media (max-width: 640px) {
  .section { padding-block: var(--space-7); }

  .hero-actions .btn,
  .cta-band .btn { width: 100%; }
  .hero-actions { flex-direction: column; }

  .stats { grid-template-columns: 1fr 1fr; gap: var(--space-5); }
  .stat { padding-left: var(--space-3); }

  .cta-band { flex-direction: column; align-items: flex-start; text-align: left; }
  .cta-band .btn { width: auto; }

  .footer-grid { grid-template-columns: 1fr; gap: var(--space-6); }
  .footer-bottom { flex-direction: column; align-items: flex-start; }

  .product-cta .btn { width: 100%; }

  .brand-word { font-size: 1.1rem; }
  .brand img { height: 34px; }
}