/* ==========================================================================
   AI IMPACT INDIA 2026 — PRODUCTION RESPONSIVE FOUNDATION
   Breakpoints:
   - Large Desktop: 1600px+
   - Desktop: 1200px – 1599px
   - Tablet: 768px – 1199px
   - Mobile: < 768px
   ========================================================================== */

/* ==========================================================================
   1. EXTRA LARGE SCREENS (1600px+)
   ========================================================================== */
@media (min-width: 1600px) {
  :root {
    --container-max: 1440px;
    --section-padding: 8rem;
  }
}

/* ==========================================================================
   2. DESKTOP SCREENS (1200px – 1599px)
   ========================================================================== */
@media (min-width: 1200px) and (max-width: 1599px) {
  :root {
    --container-max: 1320px;
  }
}

/* ==========================================================================
   3. TABLET SCREENS (768px – 1199px)
   ========================================================================== */
@media (max-width: 1199px) {
  /* Grid Adaptations */
  .ai-grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }

  .ai-grid-split {
    grid-template-columns: 1fr;
    gap: var(--space-2xl);
  }

  .footer__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-2xl);
  }

  /* Schedule Slot Card */
  .ai-card-session {
    grid-template-columns: 120px 1fr;
    gap: var(--space-md);
  }
}

/* Tablet & Mobile Nav Transition Point (< 992px) */
@media (max-width: 991px) {
  /* Mobile Drawer Navigation (Slide from Left) */
  .main-nav__menu {
    position: fixed;
    top: 0;
    left: -320px;
    width: 300px;
    max-width: 85vw;
    height: 100vh;
    background: var(--ai-surface);
    border-right: 1px solid var(--ai-border-medium);
    z-index: var(--z-modal);
    overflow-y: auto;
    transition: left var(--transition-smooth);
    box-shadow: 10px 0 40px rgba(0, 0, 0, 0.7);
    display: flex;
    flex-direction: column;
  }

  .main-nav__menu.open {
    left: 0;
  }

  .main-nav__menu-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--ai-border);
    color: #FFFFFF;
    font-size: 1.125rem;
  }

  .main-nav__menu-close {
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem;
    color: var(--ai-text-primary);
  }

  .main-nav__menu-cta {
    display: block;
    padding: 1.25rem 1.5rem;
    border-top: 1px solid var(--ai-border);
    margin-top: auto;
  }

  .main-nav__links {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0.75rem 0;
    flex: 1;
    overflow-y: auto;
  }

  .main-nav__links > li {
    border-bottom: 1px solid var(--ai-border);
    width: 100%;
  }

  .main-nav__links > li > a {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 1rem 1.5rem;
    font-size: 1rem;
    font-weight: 500;
    color: var(--ai-text-primary);
    border-radius: 0;
    min-height: 48px;
    width: 100%;
  }

  .main-nav__links > li > a:hover,
  .main-nav__links > li > a.active {
    background: rgba(255, 255, 255, 0.06);
    color: var(--ai-accent-mint);
  }

  /* Overlay */
  .main-nav__menu-overlay {
    position: fixed;
    inset: 0;
    background: var(--ai-overlay);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: calc(var(--z-modal) - 1);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity var(--transition-base), visibility var(--transition-base);
  }

  .main-nav__menu-overlay.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  /* Show Mobile Toggle & Hide Desktop CTA in Nav */
  .mobile-toggle {
    display: flex;
  }

  .main-nav__cta .btn-primary-custom,
  .main-nav__cta .btn-ai-primary {
    display: none;
  }

  /* 3-Column Grids collapse to 2 columns on tablet */
  .ai-grid-3 {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ==========================================================================
   4. MOBILE SCREENS (< 768px)
   ========================================================================== */
@media (max-width: 767px) {
  :root {
    --container-padding: 1rem;
    --grid-gap: 1rem;
    --section-padding: clamp(3.5rem, 6vw, 4.5rem);
    --section-padding-sm: 2.5rem;
  }

  /* Full Width Column Stacking */
  .ai-grid-2,
  .ai-grid-3,
  .ai-grid-4,
  .ai-grid-split,
  .ai-grid-auto {
    grid-template-columns: 1fr !important;
  }

  /* Real Viewport Gutter Normalization: Prevent Bootstrap negative row margins from exceeding container padding */
  .row.g-5,
  .row.g-4 {
    --bs-gutter-x: 1rem !important;
    margin-left: calc(-0.5 * 1rem) !important;
    margin-right: calc(-0.5 * 1rem) !important;
  }
  .row.g-5 > *,
  .row.g-4 > * {
    padding-left: calc(0.5 * 1rem) !important;
    padding-right: calc(0.5 * 1rem) !important;
  }

  /* Schedule Card on Mobile */
  .ai-card-session {
    grid-template-columns: 1fr;
    gap: var(--space-sm);
  }

  /* Standardized Mobile Footer Composition */
  .footer {
    padding-top: 2rem !important;
    padding-bottom: calc(4rem + 1.5rem) !important;
  }

  .footer__grid {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
    padding-bottom: 1.5rem !important;
  }

  .footer__bottom {
    flex-direction: column !important;
    gap: 0.85rem !important;
    text-align: center !important;
    padding-top: 1rem !important;
  }

  .footer__copyright {
    text-align: center !important;
    line-height: 1.5;
  }

  .footer__bottom-links {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 1rem !important;
  }

  /* Button Stacking on Small Screens with 12px gap */
  .hero__cta-group,
  .subpage-hero__actions,
  .ai-cta-banner__actions,
  .final-cta-actions,
  .stall-inquiry-banner .d-flex,
  .cta-group {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    width: 100% !important;
  }

  .hero__cta-group .btn-ai,
  .hero__cta-group a,
  .subpage-hero__actions .btn-ai,
  .subpage-hero__actions a,
  .final-cta-actions .btn-ai,
  .final-cta-actions a,
  .ai-cta-banner__actions .btn-ai,
  .ai-cta-banner__actions a {
    width: 100% !important;
    margin: 0 !important;
    justify-content: center !important;
  }

  /* Top Bar Adaptation (Clean single-row, no awkward wrapping) */
  .top-bar__container {
    flex-wrap: nowrap;
    overflow: hidden;
  }

  .top-bar__left {
    flex-wrap: nowrap;
    overflow: hidden;
  }

  /* Floating CTA on Mobile — Suppressed as Mobile Sticky CTA handles mobile contact */
  .floating-cta {
    display: none !important;
  }

  /* Universal Mobile Button & CTA Rules */
  .btn-ai,
  .btn-primary-custom,
  .btn-secondary-custom,
  .btn-outline-custom,
  .btn-white,
  .btn-outline-light,
  .btn-ai-outline {
    white-space: normal !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    word-break: break-word;
    padding: 0.75rem 1.25rem !important;
    text-align: center;
  }

  /* Form Submit Buttons & Inlined Min-Width overrides */
  button[type="submit"],
  .btn-lg {
    min-width: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
  }

  /* CTA Groups Wrapping and Stacking with 12px minimum gap */
  .hero__cta-group,
  .subpage-hero__actions,
  .cta-section__actions,
  .ai-cta-banner__actions,
  .final-cta-actions,
  .cta-group,
  .stall-inquiry-banner .d-flex {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
    gap: 12px !important;
  }

  .hero__cta-group > a,
  .hero__cta-group > button,
  .subpage-hero__actions > a,
  .subpage-hero__actions > button,
  .cta-section__actions > a,
  .cta-section__actions > button,
  .ai-cta-banner__actions > a,
  .ai-cta-banner__actions > button,
  .final-cta-actions > a,
  .final-cta-actions > button,
  .cta-group > a,
  .cta-group > button,
  .stall-inquiry-banner .d-flex > a,
  .stall-inquiry-banner .d-flex > button {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
  }

  /* Container & Card Padding adjustments to guarantee zero mobile overflow */
  .reg-form-container {
    padding: 1.5rem 1.15rem !important;
    border-radius: var(--radius-xl) !important;
  }

  .stall-inquiry-banner {
    padding: 2rem 1.15rem !important;
    border-radius: var(--radius-xl) !important;
  }

  .logistics-card-light {
    padding: 1.25rem 1rem !important;
    border-radius: var(--radius-xl) !important;
    margin-bottom: 1.75rem !important;
  }

  .transit-mode-box {
    padding: 1.15rem 1rem !important;
  }

  #hotels .col-lg-4 > div {
    padding: 1.15rem 1rem !important;
  }

  #hotels .mb-5 {
    margin-bottom: 1.5rem !important;
  }

  .audience-deep-card {
    padding: 1.5rem 1.15rem !important;
    border-radius: var(--radius-xl) !important;
  }

  .contact-info-card {
    padding: 1.25rem !important;
    border-radius: var(--radius-lg) !important;
  }

  .about-mission-card,
  .about-pillar-card,
  .expo-zone-detailed__body {
    padding: 1.5rem 1.15rem !important;
  }

  .hero__meta-strip {
    padding: 0.875rem 1rem !important;
    gap: 0.75rem !important;
    flex-direction: column !important;
    align-items: flex-start !important;
  }
}

/* ==========================================================================
   5. SMALL MOBILE (< 480px)
   ========================================================================== */
@media (max-width: 480px) {
  .top-bar {
    display: none; /* Keep screen real estate clean on compact phones */
  }

  .main-nav__container {
    height: 70px;
  }

  .main-nav__logo img {
    height: 36px;
  }
}

/* ==========================================================================
   6. MOBILE TOUCH TARGET ENHANCEMENTS (>= 44px Minimum Practical Hit-Box)
   ========================================================================== */
@media (max-width: 768px) {
  .audience-chip {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 1rem;
  }
  
  .btn-outline-custom,
  .btn-primary-custom,
  .btn-white {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .footer__links a {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 0.25rem 0 !important;
    min-height: 36px;
    line-height: 22px;
  }

  .footer__bottom-links a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 0.5rem;
  }

  .breadcrumb-nav a {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 0.25rem 0.375rem;
  }
}