/* ==========================================================================
   KIRANAI STUDIO - MOBILE OPTIMIZATIONS STYLESHEET
   Scoped strictly to mobile viewports (<= 767px and <= 480px)
   Never modifies desktop/tablet layout (>= 768px is read-only)
   Omits locked mobile menu selectors per standing governance rules
   ========================================================================== */

/* ==========================================================
   1. EXHAUSTIVE ROOT-CAUSE FIX & iOS SAFARI SAFETY NET (Scoped <= 767px)
   Addresses all 8 offending elements & viewport overflow on <= 390px viewports
   ========================================================== */
@media (max-width: 767px) {
  /* STEP 4 & STEP 5: iOS Safari Root Safety Net (html + body + inner wrappers)
     NOTE: overflow-x: clip prevents scroll chaining/drag without breaking sticky positioning.
     Fallback to hidden on BOTH html and body for older browsers. */
  html, body {
    overflow-x: clip !important;
    max-width: 100% !important;
    width: 100% !important;
    position: relative !important;
    height: auto !important;
    min-height: 100% !important;
  }
  @supports not (overflow-x: clip) {
    html, body {
      overflow-x: hidden !important;
    }
  }

  /* Inner structure wrappers must also clip to stop iOS Safari touch drag */
  #page,
  .site,
  .site-content,
  main,
  #content,
  .header-wrap,
  .footer-container,
  .site-header,
  .site-footer {
    overflow-x: clip !important;
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  @supports not (overflow-x: clip) {
    #page,
    .site,
    .site-content,
    main,
    #content,
    .header-wrap,
    .footer-container,
    .site-header,
    .site-footer {
      overflow-x: hidden !important;
    }
  }

  /* ========================================================
     STEP 3: ROOT CAUSE OVERRIDES AT THE SOURCE
     ======================================================== */

  /* Root Cause 1 & 3 & 7: Neutralize EVERY 100vw explicit width across all elements & modals
     (body::before, #hero-banner-video, .video-modal, #kiranai-lead-modal, #kiranai-video-lightbox) */
  body::before,
  .video-modal,
  #hero-banner-video,
  .hero-media-wrapper video,
  .video-player-container video,
  .video-player-container iframe,
  #kiranai-lead-modal,
  #kiranai-video-lightbox,
  [style*="width: 100vw"],
  [style*="width:100vw"],
  [style*="width: 100vw !important"] {
    width: 100% !important;
    max-width: 100% !important;
    right: 0 !important;
    left: 0 !important;
    box-sizing: border-box !important;
  }

  /* Root Cause 4 & 5: Neutralize negative margins causing left/right overflow
     (.process-carousel-wrapper margin: 0 -20px, .portfolio-grid/.team-grid margin: -16px) */
  .process-carousel-wrapper,
  .portfolio-grid,
  .team-grid,
  .updates-grid,
  section,
  .section,
  .container,
  .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Root Cause 2 & fixed background divs: Decorative Glow Orbs & wide template background divs (>390px) */
  .glow-primary,
  .glow-secondary,
  .glow-tertiary {
    width: 260px !important;
    height: 260px !important;
    max-width: 80vw !important;
    right: 0 !important;
    left: auto !important;
    overflow: hidden !important;
    pointer-events: none !important;
  }
  .glow-secondary {
    left: 0 !important;
    right: auto !important;
  }

  [style*="width: 800px"],
  [style*="width:800px"],
  [style*="width: 900px"],
  [style*="width:900px"],
  [style*="width: 1200px"],
  [style*="width:1200px"] {
    width: 100% !important;
    max-width: 100% !important;
    left: 0 !important;
    right: 0 !important;
    transform: none !important;
    overflow: hidden !important;
  }

  /* Root Cause 6: Neutralize calc(100vw - ...) off-screen panels */
  .jarvis-panel,
  .kira-chat-panel,
  .kira-chatbot-container {
    width: calc(100% - 20px) !important;
    max-width: calc(100% - 20px) !important;
    right: 10px !important;
    left: 10px !important;
    margin: 0 auto !important;
  }

  /* Horizontal carousels scroll strictly INSIDE their own container only */
  .academy-section,
  .courses-container,
  .course-grid,
  .module-grid,
  .process-grid-new,
  .portfolio-grid {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-snap-type: x mandatory !important;
    display: flex !important;
    flex-direction: row !important;
    gap: 15px !important;
    padding: 15px 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .course-item,
  .course-card,
  .module-card,
  .process-card {
    scroll-snap-align: start !important;
    flex-shrink: 0 !important;
    min-width: 280px !important;
    max-width: 85vw !important;
  }

  /* General box-sizing protection */
  *:not(.courses-container):not(.course-grid):not(.module-grid):not(.process-grid-new):not(.portfolio-grid):not(.course-item):not(.course-card):not(.module-card):not(.process-card) {
    max-width: 100vw !important;
    box-sizing: border-box !important;
  }

  /* Common media and table overflow protection */
  img, video, iframe, table {
    max-width: 100% !important;
    height: auto !important;
  }

  /* Gated Lead Modal - strictly isolated fixed popup */
  #kiranai-lead-modal {
    display: none !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 2147483647 !important;
    box-sizing: border-box !important;
    justify-content: center !important;
    align-items: center !important;
  }
  #kiranai-lead-modal[style*="display: flex"],
  #kiranai-lead-modal[style*="display:flex"] {
    display: flex !important;
  }

  /* Section spacing - consistent 65px vertical padding between sections on mobile */
  section,
  .section,
  #hero,
  .how-it-works-section,
  .portfolio-section,
  .team-section,
  .seo-updates-section {
    padding-top: 65px !important;
    padding-bottom: 65px !important;
  }
  #hero {
    padding-top: 40px !important;
  }

  /* Hero typography & CTA buttons */
  .hero-title {
    font-size: 30px !important;
    line-height: 1.2 !important;
  }
  .cta-button,
  .btn {
    width: 100% !important;
    max-width: 320px !important;
    min-height: 48px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
  }

  /* Cards & Grids stacked or clean horizontal scroll container */
  .portfolio-grid {
    display: flex !important;
    flex-direction: row !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    gap: 20px !important;
    padding: 10px 0 !important;
  }
  .portfolio-grid .portfolio-item {
    scroll-snap-align: start !important;
    flex: 0 0 280px !important;
    width: 280px !important;
    max-width: 85vw !important;
  }
  /* ==========================================================================
     FIX 2: HORIZONTAL SWIPE CAROUSELS FOR TEAM & UPDATES (Scoped <= 768px)
     ========================================================================== */
  html body .team-section .team-grid,
  html body .seo-updates-section .updates-grid,
  body .team-grid,
  body .updates-grid,
  body .featured-films-grid,
  .team-grid,
  .updates-grid,
  .featured-films-grid {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    gap: 16px !important;
    padding: 0 20px 20px !important;
    margin: 20px 0 0 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
  }

  html body .team-section .team-grid::-webkit-scrollbar,
  html body .seo-updates-section .updates-grid::-webkit-scrollbar,
  .team-grid::-webkit-scrollbar,
  .updates-grid::-webkit-scrollbar,
  .featured-films-grid::-webkit-scrollbar {
    display: none !important;
  }

  html body .team-section .team-grid .team-card,
  html body .seo-updates-section .updates-grid .update-card,
  body .team-card,
  body .update-card,
  body .featured-films-grid .portfolio-item,
  .team-card,
  .update-card,
  .featured-films-grid .portfolio-item {
    flex: 0 0 280px !important;
    width: 280px !important;
    max-width: 280px !important;
    min-width: 280px !important;
    scroll-snap-align: center !important;
    margin: 0 !important;
    padding: 20px !important;
    box-sizing: border-box !important;
  }

  /* Team avatars circular style at smaller size (~140px) */
  html body .team-section .team-grid .director-avatar-wrapper,
  body .team-card .director-avatar-wrapper,
  .team-card .director-avatar-wrapper {
    width: 140px !important;
    height: 140px !important;
    margin: 0 auto 16px auto !important;
    border-radius: 50% !important;
    overflow: hidden !important;
    flex-shrink: 0 !important;
  }
  html body .team-section .team-grid .director-avatar-wrapper img,
  body .team-card .director-avatar-wrapper img,
  .team-card .director-avatar-wrapper img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  /* Update card images */
  html body .seo-updates-section .updates-grid .update-thumbnail,
  body .update-card .update-thumbnail {
    width: 100% !important;
    height: auto !important;
    max-height: 150px !important;
    overflow: hidden !important;
    flex-shrink: 0 !important;
  }
  html body .seo-updates-section .updates-grid .update-thumbnail img,
  body .update-card .update-thumbnail img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  /* Card text typography & line clamping */
  html body .team-section .team-grid .team-card h3,
  body .team-card h3,
  .team-card h3,
  html body .seo-updates-section .updates-grid .update-card h3,
  body .update-card h3,
  .update-card h3 {
    font-size: 18px !important;
    line-height: 1.3 !important;
    margin: 8px 0 10px 0 !important;
  }

  html body .team-section .team-grid .team-card p,
  body .team-card p,
  .team-card p,
  html body .seo-updates-section .updates-grid .update-card .update-excerpt,
  body .update-card .update-excerpt,
  .update-card .update-excerpt {
    font-size: 16px; !important;
    line-height: 1.5 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 4 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    margin: 0 0 12px 0 !important;
  }

  /* Subtle swipe hint below carousels */
  html body .team-section .container::after,
  html body .seo-updates-section .container::after {
    content: "← SWIPE →";
    display: block !important;
    text-align: center !important;
    color: #D4AF37 !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 16px; !important;
    font-weight: 600 !important;
    letter-spacing: 2px !important;
    margin: 10px auto 0 !important;
    opacity: 0.85 !important;
  }

  /* Google Maps iframe inside footer */
  .footer-links-col div:has(iframe),
  .footer-links-col iframe {
    width: 100% !important;
    height: 250px !important;
    border-radius: 8px !important;
    display: block !important;
  }

  /* ===== FIX WHITE SPACE AT BOTTOM ===== */
  html, body, #page, .site, .site-content, main, #content, .footer-container, footer, .site-footer {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }
  footer, .site-footer {
    padding-top: 40px !important;
  }
  body::after {
    display: none !important;
  }
}

/* ==========================================================
   2. HORIZONTAL SCROLL FOR ACADEMY COURSES (Scoped <= 767px)
   ========================================================== */
@media (max-width: 767px) {
  .academy-section,
  .courses-container,
  .course-grid,
  .module-grid {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-snap-type: x mandatory !important;
    display: flex !important;
    flex-direction: row !important;
    gap: 15px !important;
    padding: 15px !important;
  }

  .course-item,
  .course-card,
  .module-card {
    scroll-snap-align: start !important;
    flex-shrink: 0 !important;
    min-width: 280px !important;
    margin-right: 15px !important;
  }
}

/* ==========================================================
   3. GENERAL MOBILE OPTIMIZATION (Scoped <= 480px)
   ========================================================== */
@media (max-width: 480px) {
  body {
    font-size: 16px; !important;
  }

  .container,
  .content {
    padding: 10px !important;
    margin: 0 !important;
  }

  iframe,
  .video-container {
    max-width: 100% !important;
    height: auto !important;
  }
}

/* ==========================================================================
   4. COMPACT MOBILE MENU SIZING (FIX 1)
   ========================================================================== */
@media (max-width:1250px) {
  /* Menu panel: max-height 65vh, overflow-y: auto, NOT full screen */
  html body .mobile-menu-panel,
  body .mobile-menu-panel,
  .mobile-menu-panel {
    height: auto !important;
    max-height: 65vh !important;
    width: 85% !important;
    max-width: 360px !important;
    overflow-y: auto !important;
    background: rgba(10, 10, 14, 0.94) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.8), 2px 0 20px rgba(212, 175, 55, 0.15) !important;
  }

  /* Header row inside menu */
  html body .mobile-menu-panel .mobile-menu-header,
  body .mobile-menu-panel .mobile-menu-header {
    padding: 14px 16px !important;
  }
  html body .mobile-menu-panel .mobile-menu-header img {
    max-height: 40px !important;
    width: auto !important;
  }

  /* Menu links: font-size 14px, padding 10px 16px, letter-spacing normal */
  html body .mobile-menu-panel .mobile-nav-list,
  body .mobile-nav-list {
    padding: 0 16px !important;
    margin: 8px 0 0 0 !important;
    gap: 6px !important;
  }
  html body .mobile-menu-panel .mobile-nav-list a,
  body .mobile-nav-list a,
  .mobile-nav-list a {
    font-size: 16px; !important;
    padding: 10px 16px !important;
    letter-spacing: normal !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
  }

  /* Social icon row in menu: icons 22px, single row */
  html body .mobile-menu-panel .mobile-social-links,
  body .mobile-social-links {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 14px !important;
    padding: 14px 16px !important;
    margin: 12px 16px 0 16px !important;
  }
  html body .mobile-menu-panel .mobile-social-links a,
  body .mobile-social-links a {
    width: 36px !important;
    height: 36px !important;
    flex-shrink: 0 !important;
  }
  html body .mobile-menu-panel .mobile-social-links svg,
  body .mobile-social-links svg {
    width: 22px !important;
    height: 22px !important;
  }

  /* GET A QUOTE button in menu: normal button size */
  html body .mobile-menu-panel .mobile-cta,
  html body .mobile-menu-panel .get-quote-btn,
  body .mobile-menu-panel .get-quote-btn {
    padding: 10px 20px !important;
    font-size: 16px; !important;
    margin: 12px 16px 16px 16px !important;
    width: calc(100% - 32px) !important;
    box-sizing: border-box !important;
    display: inline-flex !important;
    justify-content: center !important;
    align-items: center !important;
  }
  html body .mobile-menu-panel .get-quote-btn .quote-btn-text {
    font-size: 16px; !important;
    letter-spacing: 1px !important;
  }
}

/* ==========================================================================
   5. CONTACT US PAGE MOBILE STACKING & RULES (<= 768px / <= 480px)
   ========================================================================== */
@media (max-width: 768px) {
  /* Stack order: form FIRST, contact cards AFTER */
  html body .contact-grid-1200 {
    display: flex !important;
    flex-direction: column !important;
    gap: 40px !important;
    padding: 0 !important;
    margin-top: 15px !important;
  }

  html body .contact-form-col {
    order: 1 !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  html body .contact-details-col {
    order: 2 !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Full-width container with 16-20px padding and zero overflow */
  html body .contact-container-1200 {
    padding: 0 16px !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }

  /* Form inputs minimum 16px font-size to prevent iOS auto-zoom */
  html body .contact-form-card .form-input,
  html body .contact-form-card .form-select,
  html body .contact-form-card .form-textarea,
  html body #kiranai-contact-form input,
  html body #kiranai-contact-form select,
  html body #kiranai-contact-form textarea {
    font-size: 16px !important;
    padding: 14px 16px !important;
    min-height: 48px !important;
    box-sizing: border-box !important;
  }

  /* Tap targets minimum 44px/48px */
  html body .contact-card-item,
  html body .faq-accordion-header,
  html body .btn-gold-gradient {
    min-height: 48px !important;
    box-sizing: border-box !important;
  }

  html body .contact-form-card {
    padding: 24px 18px !important;
  }

  html body .form-grid-2 {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* Floating WhatsApp clearance so it never overlaps submit/FAQ */
  html body .whatsapp-floating-btn,
  html body #floating-wa,
  html body [class*="whatsapp-floating"] {
    bottom: 25px !important;
    right: 18px !important;
    z-index: 998 !important;
  }

  /* Featured Films Mobile Overrides */
  .featured-nav-btn {
    display: none !important;
  }
  .featured-carousel-wrapper {
    padding: 0 !important;
  }
  .featured-films-grid .portfolio-item {
    flex: 0 0 280px !important;
  }
  .back-to-top-btn {
    position: relative;
    bottom: auto;
    right: auto;
    display: block;
    margin: 20px auto 0 auto;
  }
}