/* ==========================================================================
   MAHA MEDIA CC — Responsive Stylesheet
   Mobile-first overrides layered on top of style.css
   ========================================================================== */

/* -------------------- Tablet: simplify motion, keep depth -------------------- */
@media (max-width: 1024px) {
  .hero-inner { grid-template-columns: 1fr; text-align: left; }
  .hero-stage { height: 380px; margin-top: var(--space-lg); }
  .hero-actions { justify-content: flex-start; }

  .intro-grid,
  .story-section,
  .contact-grid { grid-template-columns: 1fr; }
  .story-visual { max-width: 420px; }

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

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

/* -------------------- Mobile -------------------- */
@media (max-width: 720px) {
  :root { --edge-pad: 1.25rem; --space-2xl: 5.5rem; --space-xl: 3.5rem; }

  /* Navigation */
  .nav-menu {
    position: fixed;
    top: 68px; left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: rgba(255,255,255,0.97);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--glass-border);
    transform: translateY(-12px);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), visibility var(--dur-fast);
  }
  .nav-menu.is-open {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
  }
  .nav-menu a {
    padding: 1.1rem var(--edge-pad);
    border-bottom: 1px solid var(--glass-border);
    font-size: 1.05rem;
  }
  .nav-menu a::after { display: none; }
  .nav-toggle { display: flex; }
  .nav-links .btn-primary { display: none; }
  .nav-toggle { margin-left: var(--space-sm); }

  /* No cursor-dependent functionality on mobile */
  .cursor-dot, .cursor-ring { display: none; }

  /* Hero */
  .hero { min-height: auto; padding-block: calc(var(--nav-h) + 2rem) var(--space-xl); }
  .hero-title { font-size: clamp(2.1rem, 9vw, 2.8rem); }
  .hero-actions .btn { width: 100%; }
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-stage { height: 300px; }
  .card-timeline, .card-render { width: 70%; }

  /* Intro */
  .intro-body p:first-child { font-size: 1.08rem; }

  /* Work grid — full width single column, large tap targets */
  .work-grid { grid-template-columns: 1fr; }
  .work-card { aspect-ratio: 4/5; }
  .work-desc { opacity: 1; max-height: 100px; margin-top: 0.3rem; }
  .work-filters { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; }

  /* Services */
  .services-grid { grid-template-columns: 1fr; }
  .services-grid .service-card:nth-child(1),
  .services-grid .service-card:nth-child(7) { grid-column: span 1; }

  /* Home page highlights */
  .service-highlight-grid { grid-template-columns: repeat(2, 1fr); }
  .service-highlight-card--wide { grid-column: span 2; flex-direction: column; text-align: left; }

  /* Story */
  .story-visual { aspect-ratio: 1/1; }

  /* CTA */
  .cta-panel { padding: var(--space-xl) var(--space-sm); }
  .cta-actions { flex-direction: column; align-items: stretch; }

  /* Contact form */
  .form-grid { grid-template-columns: 1fr; }
  .form-submit-row { flex-direction: column; align-items: stretch; }

  /* Footer */
  .footer-cta { flex-direction: column; text-align: center; padding: var(--space-md); }
  .footer-cta h2 { max-width: none; }
  .footer-grid { grid-template-columns: 1fr; gap: var(--space-md); }

  /* Sticky mobile enquiry button */
  .sticky-enquire {
    display: flex;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: 90;
    padding: 0.85rem var(--edge-pad);
    padding-bottom: calc(0.85rem + env(safe-area-inset-bottom));
    background: rgba(255,255,255,0.92);
    backdrop-filter: blur(14px);
    border-top: 1px solid var(--glass-border);
  }
  .sticky-enquire .btn { width: 100%; }
  body { padding-bottom: 74px; }

  .stat-row { gap: var(--space-md); }
}

/* -------------------- Small phones -------------------- */
@media (max-width: 380px) {
  .hero-title { font-size: 1.9rem; }
  .section-heading { font-size: 1.7rem; }
}

/* -------------------- No horizontal overflow guard -------------------- */
html, body { max-width: 100%; overflow-x: hidden; }