/* ============================================================
   mobile.css  —  Global mobile-responsive overrides
   Covers: navbar, hero, about, universities, why-us, faq,
           contact/form, university-page, footer, modal
   Breakpoints: 1024 · 768 · 480 · 360
   ============================================================ */

/* ══════════════════════════════════════════════════════════
   GLOBAL SPACING RESET  (reduces big section gaps on mobile)
══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Section-level containers — kill excessive top/bottom padding */
  .about-section         { padding-top: 56px !important; padding-bottom: 48px !important; }
  .whyus-section         { padding-top: 56px !important; padding-bottom: 56px !important; }
  .faq-section           { padding-top: 56px !important; padding-bottom: 56px !important; }
  .contact-section       { padding-top: 56px !important; padding-bottom: 64px !important; }
  .universities-section  { padding-top: 64px !important; padding-bottom: 64px !important; }
  .upage-section         { padding-top: 48px !important; padding-bottom: 56px !important; }
  .upage-hero            { padding-top: 100px !important; padding-bottom: 60px !important; }
}

@media (max-width: 480px) {
  .about-section         { padding-top: 40px !important; padding-bottom: 36px !important; }
  .whyus-section         { padding-top: 40px !important; padding-bottom: 44px !important; }
  .faq-section           { padding-top: 40px !important; padding-bottom: 44px !important; }
  .contact-section       { padding-top: 40px !important; padding-bottom: 52px !important; }
  .universities-section  { padding-top: 48px !important; padding-bottom: 48px !important; }
  .upage-section         { padding-top: 36px !important; padding-bottom: 40px !important; }
  .upage-hero            { padding-top: 88px !important; padding-bottom: 44px !important; }
}

/* ══════════════════════════════════════════════════════════
   MOBILE MENU — full-screen slide-down
══════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .mobile-menu {
    display         : flex;
    flex-direction  : column;
    gap             : 4px;
    position        : fixed;
    top             : 60px;
    left            : 0; right: 0;
    background      : rgba(5,5,14,0.98);
    backdrop-filter : blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom   : 1px solid rgba(255,255,255,0.08);
    padding         : 20px 20px 28px;
    z-index         : 999;
    transform       : translateY(-110%);
    opacity         : 0;
    pointer-events  : none;
    transition      : transform 0.32s cubic-bezier(0.16,1,0.3,1),
                      opacity   0.28s ease;
  }
  .mobile-menu.open {
    transform     : translateY(0);
    opacity       : 1;
    pointer-events: all;
  }
  .mobile-menu a {
    font-family   : 'Inter', sans-serif;
    font-size     : 1rem;
    font-weight   : 500;
    color         : rgba(255,255,255,0.75);
    text-decoration: none;
    padding       : 12px 8px;
    border-bottom : 1px solid rgba(255,255,255,0.05);
    transition    : color 0.2s ease;
  }
  .mobile-menu a:last-child { border-bottom: none; }
  .mobile-menu a:hover { color: var(--white); background: var(--white-05); }

.mobile-dropdown-parent {
  display       : block;
  color         : rgba(255, 255, 255, 0.4) !important;
  font-weight   : 600;
  font-size     : 0.75rem !important;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding       : 22px 28px 8px !important;
  pointer-events: none;
  font-family   : 'Inter', sans-serif;
}
.mobile-dropdown-child {
  padding-left  : 44px !important;
  font-size     : 0.9rem !important;
  padding-top   : 9px !important;
  padding-bottom: 9px !important;
  color         : rgba(255, 255, 255, 0.6) !important;
}
.mobile-dropdown-child:hover { color: #ffffff !important; }

.mobile-menu .nav-cta {
    margin-top    : 12px;
    text-align    : center;
    border-bottom : none;
    padding       : 12px 20px;
    font-weight   : 700;
    background    : linear-gradient(135deg,#7c3aed,#5b21b6);
    border-radius : 10px;
    color         : #fff !important;
  }
}

/* ══════════════════════════════════════════════════════════
   ABOUT  SECTION
══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .about-content   { padding: 0 24px; }
  .about-statement { font-size: clamp(1.5rem, 6vw, 2.4rem) !important; }
  .about-avatars   { transform: scale(0.9); }
}
@media (max-width: 480px) {
  .about-content     { padding: 0 16px; }
  .about-statement   { font-size: clamp(1.25rem, 7vw, 1.9rem) !important; line-height: 1.35 !important; }
  .about-cta-wrap    { margin-top: 28px; }
}

/* ══════════════════════════════════════════════════════════
   WHY  CHOOSE  US  SECTION
══════════════════════════════════════════════════════════ */
@media (max-width: 860px) {
  .whyus-title    { font-size: clamp(2rem, 6vw, 3rem); }
  .whyus-card     { flex-direction: column; }
  .whyus-divider  { width: 100%; height: 1px; }
}
@media (max-width: 640px) {
  .whyus-container { padding: 0 20px; }
  .whyus-title     { font-size: clamp(1.7rem, 7vw, 2.4rem); }
  .whyus-subtitle  { font-size: 0.88rem; }
  .col-title       { font-size: 0.9rem; }
  .col-item        { font-size: 0.84rem; gap: 10px; }
}
@media (max-width: 400px) {
  .whyus-container { padding: 0 14px; }
  .col-list        { gap: 12px; }
}

/* ══════════════════════════════════════════════════════════
   UNIVERSITIES  GRID
══════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .uni-grid { grid-template-columns: 1fr 1fr; gap: 16px; }
}
@media (max-width: 680px) {
  .uni-title         { font-size: clamp(2rem, 8vw, 3.2rem); }
  .uni-tagline       { font-size: 0.875rem; }
  .uni-container     { padding: 0 20px; }
}
@media (max-width: 520px) {
  .uni-grid          { grid-template-columns: 1fr; gap: 14px; }
  .uni-card          { padding: 20px 18px; }
  .uni-title         { font-size: clamp(1.8rem, 9vw, 2.6rem); }
  .uni-cta-wrap      { margin-top: 28px; }
}
@media (max-width: 360px) {
  .uni-container     { padding: 0 14px; }
  .uni-card          { padding: 18px 14px; }
}

/* ══════════════════════════════════════════════════════════
   FAQ  SECTION
══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .faq-container  { padding: 0 24px; }
  .faq-title      { font-size: clamp(2rem, 7vw, 3rem); }
  .faq-question   { padding: 18px 16px; gap: 10px; }
  .faq-num        { font-size: 0.72rem; }
  .faq-question-text { font-size: 0.92rem; }
  .faq-answer-inner  { padding: 0 16px 18px; font-size: 0.875rem; }
}
@media (max-width: 480px) {
  .faq-container  { padding: 0 14px; }
  .faq-title      { font-size: clamp(1.6rem, 8vw, 2.2rem); }
  .faq-subtitle   { font-size: 0.85rem; }
  .faq-question   { padding: 15px 13px; }
  .faq-question-text { font-size: 0.875rem; }
  .faq-cta-wrap   { margin-top: 28px; }
  .faq-cta-btn    { font-size: 0.85rem; padding: 12px 22px; }
}

/* ══════════════════════════════════════════════════════════
   CONTACT / FORM  SECTION
══════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .contact-container { grid-template-columns: 1fr; gap: 36px; padding: 0 24px; }
  .contact-left      { text-align: center; }
  .contact-heading   { font-size: clamp(1.8rem, 6vw, 2.6rem); }
  .contact-subtext   { max-width: 100%; margin: 0 auto 32px; }
  .contact-trust-list { align-items: flex-start; max-width: 360px; margin: 0 auto; }
}
@media (max-width: 600px) {
  .contact-container { padding: 0 16px; gap: 28px; }
  .contact-card      { padding: 26px 18px; border-radius: 16px; }
  .contact-form-grid { grid-template-columns: 1fr; }
  .contact-field-full{ grid-column: 1; }
  .contact-heading   { font-size: clamp(1.6rem, 8vw, 2.2rem); }
  .contact-subtext   { font-size: 0.875rem; margin-bottom: 24px; }
  .contact-trust-item{ font-size: 0.82rem; }
}
@media (max-width: 380px) {
  .contact-card      { padding: 20px 14px; }
  .contact-submit    { font-size: 0.875rem; }
}

/* ══════════════════════════════════════════════════════════
   UNIVERSITY  DETAIL  PAGES
══════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .upage-hero-inner { padding: 0 28px; }
  .upage-uni-name   { font-size: clamp(3.5rem, 12vw, 7rem); }
  .upage-programs-grid    { grid-template-columns: 1fr 1fr; gap: 14px; }
  .upage-highlights-grid  { grid-template-columns: 1fr 1fr; gap: 14px; }
  .upage-cta-strip-inner  { padding: 0 28px; }
}

@media (max-width: 640px) {
  .upage-hero-inner { padding: 0 20px; }
  .upage-uni-name   { font-size: clamp(2.8rem, 14vw, 5rem); letter-spacing: -0.04em; }
  .upage-uni-full   { font-size: 0.88rem; }
  .upage-tagline    { font-size: 0.9rem; }
  .upage-grade-badge{ font-size: 0.68rem; padding: 5px 13px; }
  .upage-hero-actions { flex-direction: column; align-items: stretch; gap: 10px; max-width: 300px; margin: 0 auto; }
  .upage-btn-primary,
  .upage-btn-ghost  { text-align: center; justify-content: center; width: 100%; }
  .upage-back-link  { margin-bottom: 20px; }

  .upage-programs-grid   { grid-template-columns: 1fr; gap: 12px; }
  .upage-highlights-grid { grid-template-columns: 1fr; gap: 12px; }
  .upage-program-card    { padding: 18px 16px; }
  .upage-highlight-card  { padding: 20px 16px; }

  .upage-section-inner { padding: 0 20px; }
  .upage-section-title { font-size: clamp(1.8rem, 7vw, 2.6rem); }

  .upage-cta-strip        { padding: 44px 20px; }
  .upage-cta-strip-title  { font-size: clamp(1.6rem, 7vw, 2.4rem); }
  .upage-cta-strip-sub    { font-size: 0.875rem; }
}

@media (max-width: 480px) {
  .upage-hero-inner   { padding: 0 16px; }
  .upage-section-inner{ padding: 0 16px; }
  .upage-uni-name     { font-size: clamp(2.4rem, 16vw, 4rem); }
  .upage-hero-actions { max-width: 100%; }
  .upage-cta-strip    { padding: 36px 16px; }
}

/* ══════════════════════════════════════════════════════════
   FOOTER
══════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    padding: 48px 28px 36px;
  }
  .footer-brand-col { grid-column: 1 / -1; }
  .footer-brand-desc{ max-width: 100%; }
}
@media (max-width: 560px) {
  .footer-grid {
    grid-template-columns: 1fr;
    padding: 36px 20px 24px;
    gap: 24px;
  }
  .footer-col-title { margin-bottom: 10px; }
  .footer-links     { gap: 8px; }
  .footer-bottom {
    flex-direction: column;
    align-items   : flex-start;
    padding       : 16px 20px;
    gap           : 8px;
  }
  .footer-legal-links { gap: 14px; flex-wrap: wrap; }
}

/* ══════════════════════════════════════════════════════════
   MODAL
══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .modal-card {
    max-width     : 100%;
    width         : calc(100% - 32px);
    margin        : 16px;
    border-radius : 20px;
    max-height    : 90vh;
    overflow-y    : auto;
  }
  .modal-header { padding: 24px 22px 0; gap: 12px; }
  .modal-form   { padding: 0 22px 22px; }
  .form-grid    { grid-template-columns: 1fr; }
  .form-field-full { grid-column: 1; }
}
@media (max-width: 520px) {
  .modal-card       { width: calc(100% - 24px); margin: 12px; border-radius: 16px; }
  .modal-header     { padding: 20px 18px 0; }
  .modal-form       { padding: 0 18px 18px; }
  .modal-title      { font-size: clamp(1.4rem, 6vw, 2rem); }
  .modal-submit     { padding: 12px 20px; font-size: 0.9rem; }
  .modal-divider    { margin: 0 18px 20px; }
}
@media (max-width: 380px) {
  .modal-card   { width: 100%; margin: 0; border-radius: 20px 20px 0 0; position: fixed; bottom: 0; top: auto; max-height: 92vh; }
  .modal-overlay{ align-items: flex-end; }
}

/* ══════════════════════════════════════════════════════════
   NAV — BUTTON  SPACING  ON  SMALLER  SCREENS
══════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
  .nav-inner    { padding: 0 14px; }
  .nav-brand    { font-size: 0.9rem; gap: 6px; }
  .nav-brand-icon { width: 24px; height: 24px; font-size: 0.7rem; }
}

/* ══════════════════════════════════════════════════════════
   FAQ  CTA  STRIP  (index page)
══════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  .faq-cta-strip  { padding: 44px 20px; }
  .faq-strip-title{ font-size: clamp(1.6rem, 7vw, 2.4rem); }
  .faq-strip-sub  { font-size: 0.875rem; }
}

/* ══════════════════════════════════════════════════════════
   PREVENT  HORIZONTAL  SCROLL
══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  html, body { overflow-x: hidden; max-width: 100vw; }
  * { box-sizing: border-box; }
  img, video, iframe { max-width: 100%; }
}