/* =========================================================
   GLOBAL RESPONSIVE OVERRIDES
   Loaded LAST on every page. Adds fluid behaviour without
   changing the desktop design.
   Breakpoints:
     - Desktop wide  : 1920px+
     - Laptop        : <= 1366px
     - Tablet        : <= 1024px / <= 768px
     - Mobile        : <= 480px / <= 360px
   ========================================================= */

/* ---------- Universal safety ---------- */
html, body { max-width: 100%; overflow-x: hidden; }
img, video, iframe, svg { max-width: 100%; height: auto; }
* { min-width: 0; }

/* Any raw <table> becomes horizontally scrollable on small screens */
.table-wrap, .table-responsive { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
@media (max-width: 768px) {
  table { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; }
}

/* ---------- Mobile hamburger menu ---------- */
@media (max-width: 1024px) {
  .navbar { flex-wrap: wrap; gap: 12px; min-height: 72px; width: min(1530px, calc(100% - 24px)); }
  .brand img { width: 80px; }
  .menu-toggle { display: inline-block; margin-left: auto; order: 2; }
  .header-actions { order: 3; }
  .nav-links {
    order: 4;
    flex-basis: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height .35s ease;
    background: #fff;
    border-top: 1px solid #eef1f6;
  }
  .nav-links.open { max-height: 720px; padding: 8px 0 12px; }
  .nav-links a {
    padding: 12px 8px;
    border-bottom: 1px solid #f0f2f7;
    font-size: 15px;
    white-space: normal;
  }
  .nav-links a.active::after { display: none; }
  .header-actions .audit-btn,
  .header-actions .login-btn { min-width: 0; padding: 0 16px; height: 42px; min-height: 42px; font-size: 13px; }
}

@media (max-width: 640px) {
  .header-actions .audit-btn span { display: none; }
  .header-actions .audit-btn,
  .header-actions .login-btn { padding: 0 12px; font-size: 12px; }
}

/* ---------- Hero + search panel ---------- */
@media (max-width: 900px) {
  .home-hero { min-height: 0; }
  .hero-inner { padding: 32px 0 24px; }
  .home-hero h1 { font-size: clamp(30px, 6vw, 44px) !important; }
  .hero-copy { font-size: clamp(15px, 2.4vw, 18px) !important; }
  .search-panel {
    grid-template-columns: 1fr;
    border-radius: 20px;
    padding: 14px;
    gap: 12px;
    min-height: 0;
  }
  .type-field { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); padding-top: 12px; }
  .search-panel input,
  .search-panel select { font-size: 16px; }
  .search-panel button { width: 100%; min-height: 48px; }
}

/* ---------- Generic grid collapse ---------- */
@media (max-width: 1024px) {
  .admission-grid,
  .features-grid,
  .service-grid,
  .cards-grid,
  .detail-grid,
  .stats-row,
  .counter-container,
  .why-grid,
  .plan-grid,
  .career-grid,
  .team-grid,
  .founder-container,
  .contact-container,
  .form-row { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 20px; }
}
@media (max-width: 640px) {
  .admission-grid,
  .features-grid,
  .service-grid,
  .cards-grid,
  .detail-grid,
  .stats-row,
  .counter-container,
  .why-grid,
  .plan-grid,
  .career-grid,
  .team-grid,
  .founder-container,
  .contact-container,
  .form-row { grid-template-columns: 1fr !important; }
  .founder-container, .contact-container { display: flex; flex-direction: column; }
}

/* ---------- Forms ---------- */
@media (max-width: 768px) {
  form, .form-box, .contact-form, .planner-card {
    width: 100% !important;
    max-width: 100% !important;
  }
  input, select, textarea, button {
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
    font-size: 16px; /* prevents iOS zoom */
  }
  .form-row { display: flex; flex-direction: column; gap: 12px; }
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .primary-link,
  .hero-actions .secondary-link,
  .audit-btn { width: 100%; min-width: 0; }
}

/* ---------- Sections spacing / typography ---------- */
@media (max-width: 1024px) {
  section { padding-left: 20px; padding-right: 20px; }
  .partners-container,
  .admission-container,
  .contact-container,
  .content-area,
  .counter-container { padding-left: 16px; padding-right: 16px; }
}
@media (max-width: 640px) {
  h1 { font-size: clamp(28px, 7vw, 36px) !important; line-height: 1.15; }
  h2 { font-size: clamp(22px, 5.5vw, 30px) !important; line-height: 1.2; }
  h3 { font-size: clamp(18px, 4.5vw, 22px) !important; }
  p, li { font-size: 15px; line-height: 1.6; }
  .section-title h2 { font-size: 24px !important; }
}

/* ---------- Audience tabs / chips wrap ---------- */
@media (max-width: 768px) {
  .audience-tabs,
  .tabs,
  .filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
  }
  .tab { flex: 1 1 45%; text-align: center; }
}

/* ---------- Testimonial slider ---------- */
@media (max-width: 1024px) {
  .testimonial-track { gap: 16px; }
  .testimonial-card { min-width: 80% !important; }
}
@media (max-width: 640px) {
  .testimonial-card { min-width: 90% !important; }
}

/* ---------- Founder / About ---------- */
@media (max-width: 900px) {
  .founder-image img { width: 100%; height: auto; max-width: 360px; margin: 0 auto; }
  .founder-content { text-align: center; }
  .founder-name-badge { justify-content: center; }
}

/* ---------- Footer ---------- */
@media (max-width: 640px) {
  .footer { padding: 40px 20px 20px; }
  .footer-logo { width: 160px; }
  .social-icons { justify-content: flex-start; flex-wrap: wrap; }
}

/* ---------- Chatbot ---------- */
@media (max-width: 480px) {
  .chat-window { width: calc(100vw - 24px) !important; right: 12px !important; left: 12px !important; max-width: none !important; }
  .chatbot { right: 12px !important; bottom: 12px !important; }
}

/* ---------- Counter section ---------- */
@media (max-width: 640px) {
  .counter-box { padding: 20px !important; }
  .counter { font-size: 32px !important; }
}

/* ---------- Cards ---------- */
@media (max-width: 640px) {
  .admission-card, .feature-card, .service-card, .card {
    padding: 20px !important;
  }
  .card-footer { flex-wrap: wrap; gap: 10px; }
}

/* ---------- Wide desktop (1920+) : cap max width, comfortable spacing ---------- */
@media (min-width: 1920px) {
  .navbar,
  .hero-inner,
  .partners-container,
  .admission-container,
  .contact-container,
  .footer-container { width: min(1600px, calc(100% - 80px)); }
}

/* ---------- Small phones (<=360) ---------- */
@media (max-width: 360px) {
  body { font-size: 14px; }
  .brand img { width: 68px; }
  .menu-toggle { width: 40px; height: 40px; }
  .audit-btn, .login-btn { height: 38px; min-height: 38px; }
}