/* ==========================================================================
   OMNIFLONEX AI — RESPONSIVE LAYOUT SYSTEM
   Mobile, Tablet, and Desktop Ergonomics
   ========================================================================== */

/* Large Desktops (> 1200px) */
@media (min-width: 1200px) {
  .hero-section {
    min-height: 88vh;
  }
}

/* Tablets & Small Desktops (<= 1024px) */
@media (max-width: 1024px) {
  .hero-grid {
    grid-template-columns: 1fr;
    gap: 3rem;
  }

  .hero-visual-container {
    height: 420px;
  }

  .project-editorial-card.split-layout,
  .project-editorial-card.split-layout.reversed {
    grid-template-columns: 1fr;
  }

  .project-editorial-card.split-layout.reversed .project-media-wrapper {
    order: 0;
  }

  .project-editorial-card.split-layout.reversed .project-info-wrapper {
    order: 1;
  }

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

/* Tablets (<= 768px) */
@media (max-width: 768px) {
  .nav-links, .nav-actions .btn {
    display: none;
  }

  .mobile-toggle {
    display: flex;
  }

  .nav-capsule {
    padding: 0.5rem 0.85rem 0.5rem 1.15rem;
  }

  .hero-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .hero-actions .btn {
    width: 100%;
  }

  .hero-visual-container {
    height: 340px;
  }

  .hero-meta-strip {
    gap: 1.25rem;
  }

  .disciplines-grid, .showreel-grid, .process-grid, .flagship-story-steps {
    grid-template-columns: 1fr;
  }

  .before-after-viewport {
    aspect-ratio: 16 / 9;
    height: auto;
  }

  .ba-label {
    font-size: 0.68rem;
    padding: 0.3rem 0.7rem;
    bottom: 0.75rem;
  }

  .ba-label.label-before { left: 0.75rem; }
  .ba-label.label-after { right: 0.75rem; }

  .site-footer {
    padding-top: 2.5rem;
    padding-bottom: 1.75rem;
  }

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

  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* Mobile Devices (<= 480px) */
@media (max-width: 480px) {
  .announcement-bar {
    font-size: 0.7rem;
    padding: 0.4rem 0.75rem;
  }

  .section-padding {
    padding-top: 3.5rem;
    padding-bottom: 3.5rem;
  }

  .project-info-wrapper {
    padding: 1.5rem;
  }

  .project-capabilities-list {
    gap: 0.35rem;
  }

  .capability-pill {
    font-size: 0.72rem;
    padding: 0.25rem 0.65rem;
  }
}

/* Mobile Drawer Overlay */
.mobile-nav-drawer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  z-index: 999;
  display: flex;
  flex-direction: column;
  padding: 5rem 2rem 2rem;
  opacity: 0;
  visibility: hidden;
  transition: all var(--transition-normal);
}

.mobile-nav-drawer.active {
  opacity: 1;
  visibility: visible;
}

.mobile-nav-links {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  margin-bottom: 2.5rem;
}

.mobile-nav-link {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.mobile-nav-link:hover, .mobile-nav-link.active {
  color: var(--emerald);
}

.mobile-close-btn {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--border-light);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
}

/* Master Showroom 2026 Exhibition Responsive Breakpoints */
@media (max-width: 1024px) {
  .hero-stats-proof-strip {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }

  .hero-proof-item:nth-child(2) {
    border-right: none;
    padding-right: 0;
  }

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

  .exhibit-card.featured-large,
  .exhibit-card.asymmetric-large,
  .exhibit-card.balanced-medium {
    grid-column: span 1;
  }

  .cinematic-motion-container {
    grid-template-columns: 1fr;
  }

  .featured-motion-media {
    height: 320px;
  }

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

@media (max-width: 768px) {
  .hero-stats-proof-strip {
    grid-template-columns: 1fr;
    padding: 1.25rem 1.5rem;
    gap: 1.25rem;
  }

  .hero-proof-item {
    border-right: none;
    padding-right: 0;
    border-bottom: 1px solid var(--border-subtle);
    padding-bottom: 1rem;
  }

  .hero-proof-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
  }

  .hero-glass-badge {
    display: none;
  }

  .exhibition-disciplines-grid {
    grid-template-columns: 1fr;
  }

  .exhibit-card.featured-large .exhibit-media-wrap,
  .exhibit-card.asymmetric-large .exhibit-media-wrap,
  .exhibit-card.balanced-medium .exhibit-media-wrap {
    aspect-ratio: 16 / 9;
    height: auto;
  }

  .curated-work-grid {
    grid-template-columns: 1fr;
  }

  .cinematic-motion-container {
    grid-template-columns: 1fr;
  }

  .featured-motion-media {
    height: 230px;
  }

  .cinematic-play-btn-large {
    width: 56px;
    height: 56px;
  }

  .cinematic-play-btn-large svg {
    width: 22px;
    height: 22px;
  }

  .supporting-motion-card {
    flex-direction: column;
    align-items: flex-start;
  }

  .supporting-motion-thumb {
    width: 100%;
    height: 160px;
  }

  .process-5-timeline {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .studio-capabilities-grid {
    grid-template-columns: 1fr;
  }

  .final-cta-luxury-panel {
    padding: 3rem 1.5rem;
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE HORIZONTAL-SCROLL FIX
   ---------------------------------------------------------------------------
   BUG: `.mesh-orb-3` (710px chaudi decorative blur orb) apne container se
        bahar nikal jaati thi, jisse portfolio ke SAARE pages 375px screen pe
        750px chaude ho jaate the — poora page side mein scroll hota tha.
   FIX: Decorative orbs ko clamp kiya aur page-level overflow band kiya.
   ═══════════════════════════════════════════════════════════════════════════ */

html, body {
  overflow-x: hidden;
  max-width: 100%;
}

/* Decorative background elements kabhi layout na todein */
.mesh-orb,
.glow-orb,
.lux-aurora,
.lux-orb {
  pointer-events: none;
  max-width: 100vw;
}

@media (max-width: 900px) {
  .mesh-orb,
  .glow-orb {
    max-width: 90vw !important;
    max-height: 90vw !important;
  }
  .mesh-orb-3 {
    right: auto !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 80vw !important;
    height: 80vw !important;
  }
}

/* Marquee tracks apne container ke andar hi rahein */
.announcement-track,
.cs-marquee-track {
  will-change: transform;
}
.top-announcement-bar,
.cs-marquee,
.marquee-wrap {
  overflow: hidden !important;
  max-width: 100vw !important;
}

/* ── TOUCH TAP-TARGET FIX (audit) ──────────────────────────────────────────
   Footer/legal/CTA links were only ~16px tall. WCAG 2.5.8 ka minimum 24px hai
   aur Google 48px recommend karta hai. Neeche sirf PADDING badhaya gaya hai,
   font-size / colour / layout waisa hi hai — sirf ungli ka area bada hua.   */
@media (pointer:coarse), (max-width:1024px){
  .omni-foot-col a,
  .omni-foot-legal a,
  .footer-link,
  .curated-editorial-cta,
  .case-study-card-cta,
  nav.links li a{
    display:inline-block;
    padding-top:9px;padding-bottom:9px;
    min-height:24px;
    line-height:1.45;
  }
  .close-modal-btn,
  .modal-8k-close,
  .pw-toggle-btn,
  .nav-auth-btn-unified{
    min-width:40px;min-height:40px;
    display:inline-flex;align-items:center;justify-content:center;
  }
}