/* ============================================================
   NAIS DUBAI – Mobile & Responsive Stylesheet v5
   Full rewrite — April 2026
   Breakpoints:
     1199px  tablet/mobile trigger (nav rail → top bar)
     1024px  tablet landscape
      900px  tablet portrait
      768px  large phone / small tablet
      600px  phone landscape
      480px  phone portrait
      375px  small phone
      320px  tiny phone
   ============================================================ */


/* ═══════════════════════════════════════════════════════════
   1. GLOBAL BASE — all ≤ 1199px
═══════════════════════════════════════════════════════════ */
@media (max-width: 1199px) {

  /* Body: remove desktop rail padding, add top bar offset */
  body {
    padding-right: 0 !important;
    padding-top: 58px !important;
    padding-bottom: 68px !important;
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }

  /* Hide desktop topbar completely */
  .topbar,
  #main-topbar {
    display: none !important;
    height: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
  }

  /* Container full-width */
  .container {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    box-sizing: border-box !important;
  }

  /* Anchor offset for fixed nav */
  [id] { scroll-margin-top: 68px !important; }

  /* Fix floating elements near nav rail */
  .back-to-top  { right: 20px !important; bottom: 80px !important; }
  .whatsapp-float { right: 20px !important; bottom: 80px !important; }
  .apply-float  { display: none !important; }
}

/* Prevent horizontal overflow globally */
@media (max-width: 1199px) {
  html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }
  * { max-width: 100%; }
  img { max-width: 100%; height: auto; }
  .hero-title-accent,
  .page-hero-accent,
  .section-cta-strip h3 {
    word-break: break-word !important;
  }
}


/* ═══════════════════════════════════════════════════════════
   2. MOBILE NAVIGATION RAIL → TOP BAR
═══════════════════════════════════════════════════════════ */
@media (max-width: 1199px) {

  /* Nav rail becomes fixed horizontal top bar */
  .nav-rail {
    width: 100% !important;
    height: 58px !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    padding: 0 18px !important;
    background: var(--navy-deeper, #0B1230) !important;
    border-left: none !important;
    border-bottom: 3px solid var(--red, #E11B22) !important;
    z-index: 1000 !important;
    cursor: default !important;
    box-shadow: 0 2px 16px rgba(0,0,0,0.35) !important;
  }
  .nav-rail::before { display: none !important; }

  /* Show mobile inner (logo + hamburger) */
  .nav-rail-inner {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    gap: 12px !important;
  }

  /* Logo in top bar */
  .nav-rail-inner .logo-wrap {
    display: flex !important;
    align-items: center !important;
    height: 48px !important;
    flex-shrink: 0 !important;
  }

  /* Hide desktop-only elements */
  #nav-desktop-lines,
  #nav-desktop-label { display: none !important; }

  /* Hamburger button */
  #nav-mobile-toggle {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: none !important;
    border: none !important;
    cursor: pointer !important;
    padding: 8px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    justify-content: center !important;
    border-radius: 6px !important;
    transition: background 0.2s ease !important;
  }
  #nav-mobile-toggle:hover,
  #nav-mobile-toggle:focus {
    background: rgba(255,255,255,0.08) !important;
    outline: none !important;
  }

  /* Hamburger lines styling */
  .nav-rail-lines {
    display: flex !important;
    flex-direction: column !important;
    gap: 5px !important;
    flex-shrink: 0 !important;
  }
  .nav-rail-lines span {
    display: block !important;
    width: 22px !important;
    height: 2px !important;
    background: rgba(255,255,255,0.85) !important;
    border-radius: 2px !important;
    transition: transform 0.3s ease, opacity 0.3s ease, background 0.3s ease !important;
  }
  #nav-mobile-toggle:hover .nav-rail-lines span {
    background: #fff !important;
  }

  /* Animated open state for hamburger */
  html.nav-open #nav-mobile-toggle .nav-rail-lines span:nth-child(1) {
    transform: translateY(7px) rotate(45deg) !important;
  }
  html.nav-open #nav-mobile-toggle .nav-rail-lines span:nth-child(2) {
    opacity: 0 !important;
    transform: scaleX(0) !important;
  }
  html.nav-open #nav-mobile-toggle .nav-rail-lines span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg) !important;
  }

  .nav-rail-label {
    font-family: var(--font-display, 'Montserrat', sans-serif) !important;
    font-size: 0.62rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
    color: rgba(255,255,255,0.65) !important;
    transition: color 0.2s ease !important;
  }
  #nav-mobile-toggle:hover .nav-rail-label {
    color: #fff !important;
  }

  /* Nav overlay — full screen below nav bar */
  .nav-overlay {
    width: 100% !important;
    top: 58px !important;
    height: calc(100vh - 58px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }

  /* Hide left visual panel — just show link panel on mobile */
  .nav-left-panel { display: none !important; }
  .nav-right-panel {
    width: 100% !important;
    background: #0b1230 !important;
    max-height: calc(100vh - 58px) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* Close button position */
  .nav-close {
    right: 18px !important;
    top: 14px !important;
  }

  /* Nav columns → vertical accordion */
  .nav-primary-list {
    flex-direction: column !important;
    gap: 0 !important;
  }
  .nav-primary-item {
    border-right: none !important;
    border-bottom: 1px solid rgba(255,255,255,0.06) !important;
    padding: 0 !important;
  }
  .nav-primary-link {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 15px 0 !important;
    font-size: 1rem !important;
    letter-spacing: 0.06em !important;
    border-bottom: none !important;
    margin-bottom: 0 !important;
    min-height: 48px !important;
  }
  .nav-primary-link::after {
    display: flex !important;
    content: '+' !important;
    font-size: 1.2rem !important;
    color: rgba(255,255,255,0.40) !important;
    transition: transform 0.3s ease !important;
    flex-shrink: 0 !important;
    width: 24px !important;
    height: 24px !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .nav-primary-item.open .nav-primary-link::after {
    transform: rotate(45deg) !important;
    color: var(--red, #E11B22) !important;
  }

  /* Subnavs collapsed by default */
  .nav-subnav {
    max-height: 0 !important;
    overflow: hidden !important;
    transition: max-height 0.36s cubic-bezier(0.4,0,0.2,1) !important;
  }
  .nav-primary-item.open .nav-subnav {
    max-height: 600px !important;
  }
  .nav-subnav-link {
    padding: 9px 0 9px 14px !important;
    font-size: 0.88rem !important;
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
  }

  /* Bottom bar */
  .nav-panel { padding: 28px 24px 0 !important; }
  .nav-panel-bottom {
    padding: 20px 24px 80px !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 16px !important;
  }
  .nav-apply-btn {
    width: 100% !important;
    justify-content: center !important;
    padding: 14px 24px !important;
    font-size: 0.82rem !important;
  }
  .nav-search-input { width: 100% !important; }
  .nav-search-form { width: 100% !important; }
  .nav-bottom-search { width: 100% !important; }
}

/* Very small phone nav tweaks */
@media (max-width: 375px) {
  .nav-rail { padding: 0 12px !important; }
  .nav-rail-inner a img { max-width: 150px !important; height: 36px !important; }
  .nav-rail-label { display: none !important; }
}


/* ═══════════════════════════════════════════════════════════
   3. HERO SECTION (index.html)
═══════════════════════════════════════════════════════════ */
@media (max-width: 1199px) {
  .hero {
    min-height: calc(100svh - 58px) !important;
    max-height: none !important;
  }
}

@media (max-width: 768px) {
  .hero {
    min-height: 100svh !important;
    padding-top: 0 !important;
  }

  .hero-content {
    padding: 52px 20px 20px !important;
    text-align: center !important;
  }

  .hero-badge {
    margin: 0 auto 18px !important;
    font-size: 0.6rem !important;
    padding: 6px 14px !important;
  }

  .hero-title {
    font-size: clamp(1.9rem, 9vw, 3rem) !important;
    line-height: 1.12 !important;
    margin-bottom: 16px !important;
    align-items: center !important;
  }

  .hero-title-divider { margin: 0 auto 18px !important; }

  .hero-subtitle {
    font-size: 0.9rem !important;
    line-height: 1.75 !important;
    margin: 0 auto 28px !important;
    max-width: 480px !important;
  }

  .hero-actions {
    flex-direction: column !important;
    gap: 12px !important;
    align-items: stretch !important;
    max-width: 320px !important;
    margin: 0 auto 20px !important;
  }

  .btn-hero-primary,
  .btn-hero-outline {
    width: 100% !important;
    justify-content: center !important;
    padding: 14px 20px !important;
    font-size: 0.84rem !important;
  }

  .hero-sub-tagline {
    font-size: 0.62rem !important;
    text-align: center !important;
  }

  /* 360 tour button on hero */
  .btn-360-hero {
    max-width: 340px !important;
    margin: 12px auto 0 !important;
  }

  /* Stats bar: wrap into 2×2 grid */
  .hero-stats {
    display: flex !important;
    flex-wrap: wrap !important;
    position: relative !important;
    bottom: auto !important;
    background: rgba(10,14,31,0.92) !important;
    border-top: 1px solid rgba(255,255,255,0.08) !important;
    padding: 0 !important;
    margin-top: 28px !important;
  }

  .stat-item {
    flex: 1 1 50% !important;
    max-width: 50% !important;
    padding: 14px 10px !important;
    text-align: center !important;
    border-right: 1px solid rgba(255,255,255,0.06) !important;
    border-bottom: 1px solid rgba(255,255,255,0.06) !important;
  }
  .stat-item:nth-child(even) { border-right: none !important; }
  .stat-item:nth-child(3),
  .stat-item:nth-child(4) { border-bottom: none !important; }

  .stat-number, .stat-num { font-size: 1.5rem !important; }
  .stat-suffix { font-size: 1.1rem !important; }
  .stat-label { font-size: 0.62rem !important; }

  /* Hero navigation dots */
  .hero-controls {
    bottom: auto !important;
    position: relative !important;
    display: flex !important;
    justify-content: center !important;
    padding: 12px 0 4px !important;
    background: rgba(10,14,31,0.92) !important;
  }
}

@media (max-width: 480px) {
  .hero-stats { display: none !important; }
  .hero-content { padding: 40px 16px 16px !important; }
  .hero-title { font-size: clamp(1.7rem, 8vw, 2.4rem) !important; }
}


/* ═══════════════════════════════════════════════════════════
   4. ANNOUNCEMENT BAR
═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .announcement-band { overflow: hidden; }
  .announcement-inner {
    padding: 8px 16px !important;
    font-size: 0.78rem !important;
    gap: 8px !important;
  }
  .ann-more { display: none !important; }
  .ann-tag { padding: 3px 8px !important; font-size: 0.6rem !important; }
}


/* ═══════════════════════════════════════════════════════════
   5. PAGE HERO (inner pages)
═══════════════════════════════════════════════════════════ */
@media (max-width: 1199px) {
  .page-hero { padding-top: 0 !important; }
}

@media (max-width: 900px) {
  .page-hero {
    height: auto !important;
    min-height: 300px !important;
    padding: 60px 0 52px !important;
  }
  .page-hero-title { font-size: clamp(2rem, 7vw, 3rem) !important; }
  .page-hero-accent { display: none !important; }
}

@media (max-width: 768px) {
  .page-hero {
    padding: 60px 0 44px !important;
    text-align: center !important;
    min-height: 240px !important;
  }
  .page-hero-title {
    font-size: clamp(1.8rem, 8vw, 2.6rem) !important;
    line-height: 1.18 !important;
  }
  .page-hero-subtitle { font-size: 0.9rem !important; max-width: 100% !important; }
  .breadcrumb { justify-content: center !important; }
  .page-hero-accent { display: none !important; }
}

@media (max-width: 480px) {
  .page-hero { padding: 52px 0 36px !important; }
  .page-hero-title { font-size: clamp(1.6rem, 8vw, 2.2rem) !important; }
}


/* ═══════════════════════════════════════════════════════════
   6. SECTION PADDING & TYPOGRAPHY
═══════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  :root { --section-pad: 72px !important; }
}

@media (max-width: 768px) {
  :root { --section-pad: 56px !important; }
  .section-title { font-size: clamp(1.7rem, 5.5vw, 2.4rem) !important; }
  .section-header { flex-direction: column !important; align-items: flex-start !important; gap: 12px !important; }
  .section-header.centered { align-items: center !important; }
  .section-header-right { align-self: flex-start !important; }
  .section-header.centered .section-header-right { align-self: center !important; }
  .section-intro { font-size: 0.92rem !important; }
  .lead-text { font-size: 1rem !important; }
}

@media (max-width: 480px) {
  :root { --section-pad: 44px !important; }
  .section-title { font-size: clamp(1.5rem, 6.5vw, 2rem) !important; }
}

@media (max-width: 375px) {
  .container { padding-left: 14px !important; padding-right: 14px !important; }
  .section-title { font-size: 1.55rem !important; }
}


/* ═══════════════════════════════════════════════════════════
   7. QUICK LINKS BAR
═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .quick-links-bar { display: none !important; }
}


/* ═══════════════════════════════════════════════════════════
   8. WELCOME / INTRO SECTION
═══════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .welcome-grid { grid-template-columns: 1fr 1fr !important; gap: 40px !important; }
}

@media (max-width: 768px) {
  .welcome-grid {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  .welcome-image-col { order: -1; }
  .welcome-image-wrap {
    height: 280px !important;
    border-radius: 14px !important;
  }
  .welcome-image-wrap img { height: 100% !important; object-fit: cover !important; }
  .welcome-image-badge {
    right: 10px !important;
    bottom: 10px !important;
    padding: 12px 16px !important;
  }
  .welcome-quote-box {
    padding: 20px 20px !important;
    font-size: 0.88rem !important;
  }
  .quote-principal-img { width: 44px !important; height: 44px !important; }
  .welcome-pillars { gap: 10px !important; }
  .pillar-card { padding: 14px 16px !important; gap: 14px !important; }
  .welcome-actions { flex-direction: column !important; gap: 14px !important; }
}


/* ═══════════════════════════════════════════════════════════
   9. WHY CHOOSE US
═══════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .why-grid { grid-template-columns: repeat(2,1fr) !important; gap: 20px !important; }
}

@media (max-width: 560px) {
  .why-grid { grid-template-columns: 1fr !important; }
  .why-card { padding: 28px 22px !important; }
}


/* ═══════════════════════════════════════════════════════════
   10. PROGRAMS / ACADEMICS GRID
═══════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .programs-grid { grid-template-columns: repeat(2,1fr) !important; gap: 20px !important; }
}

@media (max-width: 600px) {
  .programs-grid { grid-template-columns: 1fr !important; gap: 16px !important; }
  .program-card { margin: 0 auto !important; max-width: 440px !important; width: 100% !important; }
  .program-card-body { padding: 20px 18px !important; }
  .program-card-image { height: 180px !important; }
}


/* ═══════════════════════════════════════════════════════════
   11. USP PILLARS & KPI CARDS
═══════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .usp-pillars-grid { grid-template-columns: 1fr 1fr !important; gap: 18px !important; }
  .kpi-cards-row { grid-template-columns: repeat(3,1fr) !important; gap: 14px !important; }
}

@media (max-width: 600px) {
  .kpi-cards-row { grid-template-columns: 1fr 1fr !important; gap: 12px !important; }
  .kpi-number { font-size: 2rem !important; }
  .kpi-card { padding: 20px 14px !important; }
}

@media (max-width: 480px) {
  .usp-pillars, .usp-pillars-grid { grid-template-columns: 1fr !important; }
  .kpi-cards-row { grid-template-columns: 1fr 1fr !important; }
}

@media (max-width: 380px) {
  .kpi-cards-row { grid-template-columns: 1fr !important; }
}


/* ═══════════════════════════════════════════════════════════
   12. CARE / VALUES SECTION
═══════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .care-grid { grid-template-columns: repeat(2,1fr) !important; gap: 20px !important; }
}

@media (max-width: 600px) {
  .care-grid { grid-template-columns: 1fr !important; gap: 16px !important; }
  .care-card { padding: 28px 22px !important; }
  .care-letter { font-size: 4rem !important; }
}


/* ═══════════════════════════════════════════════════════════
   13. STATS STRIP
═══════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .stats-grid-full { grid-template-columns: repeat(3,1fr) !important; }
  .stat-full-item { padding: 30px 16px !important; }
}

@media (max-width: 768px) {
  .stats-grid-full { grid-template-columns: repeat(2,1fr) !important; gap: 0 !important; }
  .stat-full-item { padding: 24px 14px !important; border-bottom: 1px solid rgba(255,255,255,0.06) !important; }
  .stat-count { font-size: 2.2rem !important; }
  .stat-icon { font-size: 1.4rem !important; }
}

@media (max-width: 400px) {
  .stats-grid-full { grid-template-columns: 1fr !important; }
}


/* ═══════════════════════════════════════════════════════════
   14. ACADEMICS HIGHLIGHTS BAR
═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .academics-highlights {
    flex-direction: column !important;
    gap: 18px !important;
    padding: 22px 20px !important;
    align-items: flex-start !important;
  }
  .acad-highlight-divider {
    width: 100% !important;
    height: 1px !important;
    margin: 0 !important;
  }
  .acad-highlight-item {
    width: 100% !important;
    text-align: left !important;
  }
}


/* ═══════════════════════════════════════════════════════════
   15. MATH & SCIENCE SECTION
═══════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .math-science-grid {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }
  .math-science-img-col img { height: 300px !important; }
  .math-science-badge { right: 16px !important; bottom: 16px !important; }
}

@media (max-width: 768px) {
  .math-science-features {
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
  }
  .math-science-img-col img { height: 240px !important; border-radius: 14px !important; }
}

@media (max-width: 480px) {
  .math-science-features { grid-template-columns: 1fr !important; }
}


/* ═══════════════════════════════════════════════════════════
   16. STUDENT LIFE / PHOTO GALLERY
═══════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .life-showcase {
    grid-template-columns: 1fr !important;
    height: auto !important;
  }
  .life-feature-main { height: 320px !important; }
  .life-grid-side {
    flex-direction: row !important;
    height: 200px !important;
  }
  .life-card { height: 200px !important; }
}

@media (max-width: 768px) {
  .life-feature-main { height: 260px !important; }
  .life-grid-side { height: 160px !important; }
  .life-card { height: 160px !important; }
  .life-feature-overlay { padding: 20px !important; }
  .life-feature-overlay h3 { font-size: 1.3rem !important; }
}

@media (max-width: 480px) {
  .life-grid-side { flex-direction: column !important; height: auto !important; }
  .life-card { height: 140px !important; }
}


/* ═══════════════════════════════════════════════════════════
   17. TESTIMONIALS
═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .testimonial-card {
    padding: 0 10px !important;
    max-width: 100% !important;
  }
  .testimonial-card blockquote {
    font-size: 1rem !important;
    padding: 0 !important;
  }
  .testimonial-card blockquote::before { display: none !important; }
  .testimonials-slider { gap: 16px !important; }
}

@media (max-width: 480px) {
  .testimonial-card { padding: 0 !important; }
  .testimonial-card blockquote { font-size: 0.95rem !important; }
}


/* ═══════════════════════════════════════════════════════════
   18. RECRUITMENT / OPEN HOUSE SECTION
═══════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .recruit-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 18px !important;
  }
}

@media (max-width: 600px) {
  .recruit-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .recruit-card { padding: 22px 18px !important; }
  .recruit-leader-grid {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
  .recruit-leader-card { max-width: 360px !important; margin: 0 auto !important; }
  .recruit-visual-banner { height: 200px !important; }
  .recruit-banner-overlay h3 { font-size: 1.05rem !important; }
  .recruit-banner-overlay p { display: none !important; }
}


/* ═══════════════════════════════════════════════════════════
   19. LEADERSHIP CARDS (about.html — .leadership-grid-equal)
   Portrait style: auto-height strip + fixed 100x100 portrait frame
   No fixed heights on .leader-card-photo — let flexbox size it naturally
═══════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .leadership-grid-equal {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 24px !important;
  }
}

@media (max-width: 600px) {
  .leadership-grid-equal {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
    max-width: 420px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .leader-card-body         { padding: 20px 20px 24px !important; }
  .leader-card-body h3      { font-size: 1.05rem !important; }
  .leader-quote p           { font-size: 0.84rem !important; }
}

@media (max-width: 375px) {
  .leadership-grid-equal    { max-width: 100% !important; }
}


/* ═══════════════════════════════════════════════════════════
   20. LEADERSHIP GRID (homepage .leadership-grid)
═══════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .leadership-grid { grid-template-columns: 1fr 1fr !important; gap: 20px !important; }
  .leadership-grid .leader-card-photo,
  .leadership-grid .leader-photo { height: 240px !important; }
}

@media (max-width: 600px) {
  .leadership-grid {
    grid-template-columns: 1fr !important;
    max-width: 380px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .leadership-grid .leader-card-photo,
  .leadership-grid .leader-photo { height: 260px !important; }
}


/* ═══════════════════════════════════════════════════════════
   20b. ABOUT PAGE — FEATURED LEADER CARD
═══════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .leader-card--featured {
    grid-template-columns: 280px 1fr !important;
  }
  .leader-card--featured .leader-photo { height: 300px !important; }
}

@media (max-width: 768px) {
  .leader-card--featured {
    grid-template-columns: 1fr !important;
    text-align: center !important;
  }
  .leader-card--featured .leader-photo { height: 260px !important; }
  .leader-card--featured .leader-info { padding: 24px 20px !important; }
  .leader-role-badge { margin: 0 auto 12px !important; }
}


/* ═══════════════════════════════════════════════════════════
   21. CAMPUS 360 TOUR SECTION
═══════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .tour-selector { flex-wrap: wrap !important; gap: 8px !important; justify-content: center !important; }
  .tour-btn { flex: 1 1 calc(33% - 8px) !important; min-width: 100px !important; }
  .tour-frame-wrap { height: 300px !important; }
}

@media (max-width: 600px) {
  .tour-btn { flex: 1 1 calc(50% - 6px) !important; padding: 10px 6px !important; font-size: 0.7rem !important; }
  .tour-frame-wrap { height: 240px !important; border-radius: 10px !important; }
}


/* ═══════════════════════════════════════════════════════════
   22. VIDEO PROMO SECTION
═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .video-promo-content {
    flex-direction: column !important;
    text-align: center !important;
    gap: 32px !important;
    padding: 56px 20px !important;
  }
  .video-promo-text { max-width: 100% !important; }
  .video-play-btn { width: 76px !important; height: 76px !important; font-size: 1.8rem !important; }
}


/* ═══════════════════════════════════════════════════════════
   23. NEWS & EVENTS CARDS
═══════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .news-grid { grid-template-columns: 1fr !important; gap: 20px !important; }
}

@media (max-width: 768px) {
  .news-card { margin: 0 !important; }
  .news-card.featured .news-image,
  .news-card:not(.featured) .news-image { height: 200px !important; }
  .news-body { padding: 18px !important; }
  .news-body h3 { font-size: 1rem !important; }
}

@media (max-width: 375px) {
  .news-card .news-image { height: 170px !important; }
}


/* ═══════════════════════════════════════════════════════════
   24. QUICK ACCESS GRID
═══════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .quick-access-grid { grid-template-columns: repeat(3,1fr) !important; gap: 12px !important; }
}

@media (max-width: 600px) {
  .quick-access-grid { grid-template-columns: repeat(2,1fr) !important; gap: 10px !important; }
  .quick-access-card { padding: 18px 12px !important; }
  .quick-access-icon { width: 42px !important; height: 42px !important; font-size: 1rem !important; }
}

@media (max-width: 380px) {
  .quick-access-grid { grid-template-columns: repeat(2,1fr) !important; }
}


/* ═══════════════════════════════════════════════════════════
   25. CALENDAR SECTION
═══════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .calendar-grid { grid-template-columns: repeat(2,1fr) !important; gap: 14px !important; }
}

@media (max-width: 600px) {
  .calendar-grid { grid-template-columns: 1fr !important; gap: 12px !important; }
  .calendar-card { max-width: 440px !important; margin: 0 auto !important; }
}


/* ═══════════════════════════════════════════════════════════
   26. CONTACT SECTION
═══════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .contact-grid { grid-template-columns: 1fr !important; gap: 40px !important; }
}

@media (max-width: 768px) {
  .contact-form { padding: 26px 18px !important; }
  .form-row { grid-template-columns: 1fr !important; }
  .contact-info-item { gap: 12px !important; }
  .contact-whatsapp-btn { padding: 13px 20px !important; font-size: 0.84rem !important; }
}


/* ═══════════════════════════════════════════════════════════
   27. FOOTER
═══════════════════════════════════════════════════════════ */
@media (max-width: 1200px) {
  .footer-grid { grid-template-columns: 1fr 1fr !important; gap: 36px !important; }
}

@media (max-width: 768px) {
  .footer-grid { grid-template-columns: 1fr !important; gap: 28px !important; }
  .footer-logo-img { height: 48px !important; max-width: 180px !important; }
  .footer-brand { margin-bottom: 8px !important; }
  .footer-bottom .container {
    flex-direction: column !important;
    text-align: center !important;
    gap: 8px !important;
  }
  .footer-bottom-links {
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 6px 14px !important;
  }
  .footer-top { padding: 48px 0 36px !important; }
}


/* ═══════════════════════════════════════════════════════════
   28. ABOUT PAGE — MISSION SECTION
═══════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .mission-grid { grid-template-columns: 1fr !important; gap: 40px !important; }
  .mission-image img { height: 340px !important; }
  .mission-image-badge { left: 14px !important; bottom: -14px !important; }
}

@media (max-width: 768px) {
  .mission-image img { height: 260px !important; }
  .mission-image-badge { padding: 16px !important; }
  .mission-image-badge .big-num { font-size: 2.2rem !important; }
}


/* ═══════════════════════════════════════════════════════════
   29. ADMISSIONS PAGE
═══════════════════════════════════════════════════════════ */
@media (max-width: 1100px) {
  .adm-intro-grid,
  .adm-why-grid { grid-template-columns: 1fr !important; gap: 44px !important; }
  .adm-why-images { height: 280px !important; }
  .apply-form-layout { grid-template-columns: 1fr !important; }
  .apply-form-sidebar { padding: 36px 28px !important; }
  .apply-form-wrap { padding: 36px 28px !important; }
}

@media (max-width: 900px) {
  .adm-process-steps,
  .adm-process-steps--row2 {
    grid-template-columns: 1fr 1fr !important;
    gap: 28px 16px !important;
    max-width: 100% !important;
    margin-top: 0 !important;
  }
  .adm-step-arrow { display: none !important; }
}

@media (max-width: 768px) {
  .adm-process-steps,
  .adm-process-steps--row2 { grid-template-columns: 1fr 1fr !important; gap: 24px 14px !important; max-width: 100% !important; }
  .adm-step { min-width: 0 !important; max-width: 100% !important; }
  .adm-quick-stats { grid-template-columns: repeat(3,1fr) !important; gap: 10px !important; }
  .fees-extras-grid,
  .docs-grid,
  .adm-testi-grid { grid-template-columns: 1fr !important; gap: 16px !important; }
  .adm-img-badge { left: 10px !important; bottom: -10px !important; }
  .adm-why-images { height: 220px !important; }
  .adm-why-img--main { width: 100% !important; height: 200px !important; position: relative !important; }
  .adm-why-img--small { display: none !important; }
  .adm-hero-img-wrap img { height: 280px !important; }
}

@media (max-width: 600px) {
  .adm-process-steps,
  .adm-process-steps--row2 { grid-template-columns: 1fr !important; gap: 22px !important; max-width: 100% !important; }
  .adm-quick-stats { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
  .apply-form-sidebar { padding: 28px 20px !important; }
  .apply-form-wrap { padding: 28px 20px !important; }
}


/* ═══════════════════════════════════════════════════════════
   30. ADMISSIONS CTA (homepage)
═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .admissions-steps {
    flex-direction: column !important;
    align-items: center !important;
    gap: 0 !important;
  }
  .adm-step { text-align: center !important; width: 100% !important; max-width: 280px !important; }
  .adm-step-arrow {
    transform: rotate(90deg) !important;
    margin: 6px auto !important;
    display: block !important;
  }
  .adm-step-num { margin: 0 auto 10px !important; }
  .admissions-cta-buttons { flex-direction: column !important; align-items: center !important; }
  .admissions-cta-buttons .btn { width: 100% !important; max-width: 300px !important; justify-content: center !important; }
}


/* ═══════════════════════════════════════════════════════════
   31. SECTION CTA STRIP
═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .section-cta-strip .container {
    flex-direction: column !important;
    text-align: center !important;
    gap: 20px !important;
  }
  .section-cta-strip .container > div:last-child {
    justify-content: center !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    width: 100% !important;
    align-items: center !important;
  }
}


/* ═══════════════════════════════════════════════════════════
   32. TOUR BANNER
═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .tour-banner-inner {
    flex-direction: column !important;
    text-align: center !important;
    gap: 18px !important;
  }
  .tour-banner-text h3 { font-size: 1.3rem !important; }
  .tour-banner-text p { font-size: 0.86rem !important; }
}


/* ═══════════════════════════════════════════════════════════
   33. UNIVERSITY LOGOS STRIP
═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .uni-logos { gap: 18px 24px !important; }
  .uni-logo-badge { width: 64px !important; height: 64px !important; }
  .uni-logo-badge i { font-size: 1.4rem !important; }
  .uni-logo-item span { font-size: 0.62rem !important; max-width: 72px !important; }
}

@media (max-width: 480px) {
  .uni-logos { gap: 14px 18px !important; }
  .uni-logo-badge { width: 56px !important; height: 56px !important; }
  .uni-logo-badge i { font-size: 1.2rem !important; }
}


/* ═══════════════════════════════════════════════════════════
   34. ACCREDITATIONS
═══════════════════════════════════════════════════════════ */
@media (max-width: 600px) {
  .accreditation-logos { gap: 18px 20px !important; }
  .accred-badge { width: 64px !important; height: 64px !important; }
  .accred-badge i { font-size: 1.1rem !important; }
  .accred-item { max-width: 100px !important; min-width: 80px !important; }
}


/* ═══════════════════════════════════════════════════════════
   35. MAP SECTION
═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .map-wrap { height: 260px !important; }
}


/* ═══════════════════════════════════════════════════════════
   36. ACHIEVEMENT BADGES
═══════════════════════════════════════════════════════════ */
@media (max-width: 600px) {
  .achievement-badges { gap: 10px !important; }
  .achievement-badge { flex: 1 1 calc(50% - 5px) !important; padding: 10px 12px !important; }
}


/* ═══════════════════════════════════════════════════════════
   37. MOBILE STICKY CTA BAR
═══════════════════════════════════════════════════════════ */
@media (max-width: 1199px) {
  .mobile-sticky-cta {
    z-index: 9900 !important;
    box-shadow: 0 -3px 20px rgba(11,18,48,0.28) !important;
  }
}

@media (max-width: 400px) {
  .mob-cta-btn { font-size: 0.52rem !important; }
  .mob-cta-btn i { font-size: 0.95rem !important; }
}


/* ═══════════════════════════════════════════════════════════
   38. FLOATING BUTTONS — prevent overlap with sticky CTA
═══════════════════════════════════════════════════════════ */
@media (max-width: 1199px) {
  .whatsapp-float {
    bottom: 82px !important;
    right: 16px !important;
    width: 48px !important;
    height: 48px !important;
    font-size: 1.3rem !important;
  }
  .back-to-top {
    right: auto !important;
    left: 16px !important;
    bottom: 82px !important;
    width: 40px !important;
    height: 40px !important;
    font-size: 0.9rem !important;
  }
  .apply-float { display: none !important; }
}

@media (max-width: 480px) {
  .whatsapp-float {
    width: 44px !important;
    height: 44px !important;
    font-size: 1.2rem !important;
    bottom: 78px !important;
    right: 14px !important;
  }
  .back-to-top {
    width: 36px !important;
    height: 36px !important;
    bottom: 78px !important;
    left: 14px !important;
  }
}


/* ═══════════════════════════════════════════════════════════
   39. INTRO OVERLAY (site-intro)
═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  #intro-logo-img {
    height: 50px !important;
    max-width: 210px !important;
    padding: 7px 12px !important;
    top: 12px !important;
    left: 12px !important;
  }
  #intro-skip {
    top: 12px !important;
    right: 12px !important;
    font-size: 11px !important;
    padding: 8px 16px !important;
  }
}


/* ═══════════════════════════════════════════════════════════
   40. ACADEMICS PAGE SPECIFIC
═══════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .curriculum-intro-grid { grid-template-columns: 1fr !important; gap: 40px !important; }
  .program-detail-grid { grid-template-columns: 1fr !important; gap: 40px !important; }
  .program-detail-grid.reverse { direction: ltr !important; }
  .ap-grid { grid-template-columns: repeat(2,1fr) !important; gap: 16px !important; }
  .process-steps-full { grid-template-columns: repeat(2,1fr) !important; gap: 20px !important; }
}

@media (max-width: 768px) {
  .ap-grid { grid-template-columns: 1fr !important; }
  .process-steps-full { grid-template-columns: 1fr !important; }
  .apply-form-wrap { padding: 26px 16px !important; }
  .form-3cols { grid-template-columns: 1fr !important; }
  .program-features { grid-template-columns: 1fr !important; }
  .program-detail-image img { height: 260px !important; }
}


/* ═══════════════════════════════════════════════════════════
   41. DSIB SECTION
═══════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .dsib-grid { grid-template-columns: 1fr !important; gap: 28px !important; }
  .dsib-quotes-grid { grid-template-columns: 1fr !important; gap: 12px !important; }
}

@media (max-width: 600px) {
  .dsib-badges-row { gap: 8px !important; }
  .dsib-badge { padding: 10px 12px !important; font-size: 0.78rem !important; }
  .dsib-badge-icon { width: 30px !important; height: 30px !important; }
  .dsib-cta-strip {
    flex-direction: column !important;
    text-align: center !important;
    padding: 22px 18px !important;
    gap: 16px !important;
  }
  .dsib-cta-left { flex-direction: column !important; gap: 8px !important; }
  .dsib-section::before { display: none !important; }
}


/* ═══════════════════════════════════════════════════════════
   42. SCROLL MARGIN — anchors don't hide under fixed nav
═══════════════════════════════════════════════════════════ */
@media (max-width: 1199px) {
  section[id],
  div[id]:not([id^="site-"]):not([id^="nav-"]):not([id^="intro"]):not([id^="video"]) {
    scroll-margin-top: 70px !important;
  }
}


/* ═══════════════════════════════════════════════════════════
   43. VERY SMALL PHONES (≤ 375px)
═══════════════════════════════════════════════════════════ */
@media (max-width: 375px) {
  .container { padding-left: 14px !important; padding-right: 14px !important; }
  :root { --section-pad: 44px !important; }
  .section-title { font-size: 1.5rem !important; }
  .hero-title { font-size: 1.7rem !important; }
  .page-hero-title { font-size: 1.6rem !important; }
  .recruit-card { padding: 16px 14px !important; }
  .btn { padding: 12px 20px !important; font-size: 0.78rem !important; }
  .btn-hero-primary,
  .btn-hero-outline { padding: 12px 16px !important; font-size: 0.80rem !important; }
}


/* ═══════════════════════════════════════════════════════════
   44. CURRICULUM / PARENT FAQ / PBL PAGES
═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .adm-faq-q { padding: 16px 18px !important; }
  .adm-faq-q span { font-size: 0.86rem !important; }
  .adm-faq-item.open .adm-faq-a { padding: 0 18px 16px !important; }
}


/* ═══════════════════════════════════════════════════════════
   45. IMPROVED TAP TARGETS — accessibility
═══════════════════════════════════════════════════════════ */
@media (max-width: 1199px) {
  .nav-subnav-link {
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
  }
  .mob-cta-btn { min-height: 44px !important; }
  .nav-primary-link { min-height: 48px !important; }
  button, .btn, a.btn, [role="button"] {
    -webkit-tap-highlight-color: transparent !important;
  }
  /* Larger tap area for close button */
  .nav-close-inner {
    min-width: 44px !important;
    min-height: 44px !important;
  }
}


/* ═══════════════════════════════════════════════════════════
   46. FORMS ON MOBILE
═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .form-group input,
  .form-group select,
  .form-group textarea {
    font-size: 16px !important; /* prevent iOS auto-zoom */
    padding: 12px 14px !important;
  }
  .form-group select { padding-right: 36px !important; }
  .form-section-title { font-size: 0.7rem !important; }
}


/* ═══════════════════════════════════════════════════════════
   47. GALLERY PAGE
═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .photo-gallery {
    grid-template-columns: repeat(2,1fr) !important;
    grid-template-rows: repeat(3, 150px) !important;
    gap: 6px !important;
    border-radius: 10px !important;
  }
  .photo-gallery-item:first-child {
    grid-column: span 2 !important;
    grid-row: span 1 !important;
  }
}

@media (max-width: 480px) {
  .photo-gallery { grid-template-rows: repeat(3, 120px) !important; }
}


/* ═══════════════════════════════════════════════════════════
   48. LEADER LIGHTBOX — mobile responsive
═══════════════════════════════════════════════════════════ */
@media (max-width: 680px) {
  #leader-lightbox { padding: 16px !important; align-items: flex-end !important; }
  .lb-card {
    flex-direction: column !important;
    max-height: 92vh !important;
    border-radius: 16px 16px 0 0 !important;
    overflow: auto !important;
  }
  .lb-photo {
    flex: 0 0 220px !important;
    width: 100% !important;
  }
  .lb-body {
    padding: 24px 22px 28px !important;
    max-height: none !important;
  }
  .lb-body h2 { font-size: 1.3rem !important; }
  .lb-nav { bottom: 14px !important; right: 22px !important; }
  .lb-zoom-bar { display: none !important; }
}


/* ═══════════════════════════════════════════════════════════
   49. VIDEO LIGHTBOX — mobile responsive
═══════════════════════════════════════════════════════════ */
@media (max-width: 600px) {
  #video-lightbox > div {
    width: 95vw !important;
    max-width: 95vw !important;
  }
  #video-lightbox iframe {
    height: 200px !important;
  }
}


/* ═══════════════════════════════════════════════════════════
   50. PHASE4 RESULTS PAGE — charts / tables
═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Ensure chart containers scroll horizontally if needed */
  .chart-container, .chart-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  /* Data tables */
  .data-table-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  table {
    min-width: 480px !important;
  }
}


/* ═══════════════════════════════════════════════════════════
   51. HERO BTN-360 MOBILE FIX
═══════════════════════════════════════════════════════════ */
@media (max-width: 600px) {
  .btn-360-hero {
    flex-direction: column !important;
    text-align: center !important;
    gap: 8px !important;
    padding: 14px !important;
  }
  .btn-360-arrow { display: none !important; }
}

@media (max-width: 480px) {
  .btn-360-hero { display: none !important; }
}


/* ═══════════════════════════════════════════════════════════
   52. ENROLLMENT NOTICE — stack on mobile
═══════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
  .enrollment-notice {
    flex-direction: column !important;
    text-align: center !important;
    gap: 10px !important;
  }
}


/* ═══════════════════════════════════════════════════════════
   53. TESTIMONIAL NAVIGATION CONTROLS
═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  #testimonial-prev,
  #testimonial-next {
    width: 40px !important;
    height: 40px !important;
    font-size: 0.9rem !important;
  }
}


/* ═══════════════════════════════════════════════════════════
   54. HERO SCROLL INDICATOR — hide on small
═══════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
  .hero-scroll-indicator { display: none !important; }
}


/* ═══════════════════════════════════════════════════════════
   55. NAV OVERLAY SCROLL LOCK — body must not scroll under
═══════════════════════════════════════════════════════════ */
html.nav-open body {
  overflow: hidden !important;
  position: fixed !important;
  width: 100% !important;
}
/* But keep nav-overlay scrollable */
html.nav-open .nav-overlay {
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
}


/* ═══════════════════════════════════════════════════════════
   56. FOCUS TRAP HINT — keyboard navigation
═══════════════════════════════════════════════════════════ */
@media (max-width: 1199px) {
  .nav-overlay:focus { outline: none !important; }
}


/* ═══════════════════════════════════════════════════════════
   57. PRINT MEDIA — hide mobile-only UI
═══════════════════════════════════════════════════════════ */
@media print {
  .mobile-sticky-cta,
  .nav-rail,
  .whatsapp-float,
  .back-to-top,
  .apply-float { display: none !important; }
  body { padding: 0 !important; }
}