/* ═══════════════════════════════════════════════════
   ALSALAM UNIVERSITY — responsive.css
   Complete mobile-first responsive overrides
   Breakpoints: 1200 | 1024 | 900 | 768 | 640 | 480 | 360
   ═══════════════════════════════════════════════════ */

/* ─── GLOBAL CONTAINER ─── */
.container { padding: 0 20px; }

/* ─────────────────────────────────────────────────
   1200px — Large tablets / small laptops
───────────────────────────────────────────────── */
@media (max-width: 1200px) {
  .hero h1 { font-size: 2.8rem; }
  .section-title { font-size: 2rem; }
  .mega-inner { gap: 0; }
  .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr; gap: 22px; }
  .president-grid { gap: 40px; }
  .faculties-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ─────────────────────────────────────────────────
   1024px — Tablets
───────────────────────────────────────────────── */
@media (max-width: 1024px) {

  /* HERO */
  .hero { min-height: auto; }
  .hero-inner {
    grid-template-columns: 1fr;
    padding: 100px 0 60px;
    gap: 0;
  }
  .hero-content { text-align: center; max-width: 680px; margin: 0 auto; }
  .hero-btns { justify-content: center; }
  .hero-stats { justify-content: center; }
  .hero-visual { display: none; }

  /* STRIP */
  .strip-grid { grid-template-columns: repeat(2, 1fr); }
  .strip-item { border-inline-end: none; border-bottom: 1px solid var(--border); }
  .strip-item:nth-child(even) { border-inline-start: 1px solid var(--border); }
  .strip-item:nth-last-child(-n+2) { border-bottom: none; }

  /* ABOUT */
  .about-grid { grid-template-columns: 1fr; gap: 40px; }
  .about-imgs { max-width: 520px; margin: 0 auto; }
  .about-img-sub { display: none; }
  .about-badge { bottom: -14px; left: 14px; }
  .about-features { grid-template-columns: repeat(2, 1fr); }

  /* CAMPUSES */
  .faculties-grid { grid-template-columns: repeat(2, 1fr); }
  .campus-info { flex-direction: column; gap: 16px; align-items: flex-start; }

  /* VMV */
  .vmv-grid { grid-template-columns: repeat(2, 1fr); }
  .vmv-grid .vmv-card:last-child { grid-column: span 2; max-width: 420px; margin: 0 auto; }

  /* NEWS */
  .news-grid { grid-template-columns: repeat(2, 1fr); }

  /* PRESIDENT */
  .president-grid { grid-template-columns: 1fr; gap: 36px; }
  .president-card { max-width: 300px; margin: 0 auto; }

  /* STAFF */
  .staff-grid { grid-template-columns: repeat(3, 1fr); }

  /* FAQ */
  .faq-grid { grid-template-columns: 1fr; }

  /* CONTACT */
  .contact-master-grid { grid-template-columns: 1fr; }
  .contact-sidebar { flex-direction: row; flex-wrap: wrap; gap: 16px; }
  .contact-info-box { flex: 1 1 280px; }
  .contact-map-box { flex: 1 1 280px; }

  /* FOOTER */
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .footer-bottom { flex-direction: column; gap: 8px; text-align: center; }

  /* GALLERY */
  .ugallery-grid { grid-template-columns: repeat(3, 1fr); }

  /* FACULTY PAGES */
  .fac-content-grid { grid-template-columns: 1fr; }
  .fac-sidebar { position: static; flex-direction: row; flex-wrap: wrap; gap: 14px; }
  .sidebar-info-card, .sidebar-apply-card, .sidebar-contact-card { flex: 1 1 240px; }
  .other-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ─────────────────────────────────────────────────
   900px — Mid-range tablets
───────────────────────────────────────────────── */
@media (max-width: 900px) {
  .hero h1 { font-size: 2.3rem; }
  .hero-stats { gap: 20px; }
  .hero-stat .num .counter { font-size: 1.6rem; }
  .campuses-tabs { gap: 6px; }
  .camp-tab { padding: 8px 14px; font-size: .8rem; }
  .staff-grid { grid-template-columns: repeat(2, 1fr); }
  .other-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ─────────────────────────────────────────────────
   768px — Mobile landscape / small tablets
───────────────────────────────────────────────── */
@media (max-width: 768px) {

  /* SPACING */
  .section { padding: 60px 0 !important; }
  .section-header { margin-bottom: 40px; }
  .section-title { font-size: 1.7rem; }

  /* TOP BAR */
  .top-bar { padding: 6px 0; }
  .top-bar-left { display: none; }
  .top-bar-inner { justify-content: space-between; }

  /* NAV */
  .nav-inner { height: 64px; }
  .nav-logo img { height: 44px; }
  .nav-logo-text .brand-ar { font-size: .82rem; }
  .nav-logo-text .brand-en { display: none; }

  /* HERO */
  .hero-inner { padding: 90px 0 50px; }
  .hero h1 { font-size: 2rem; line-height: 1.2; }
  .hero-sub { font-size: .9rem; }
  .hero-badge { font-size: .7rem; padding: 6px 14px; }
  .hero-btns { flex-direction: column; align-items: center; gap: 10px; }
  .btn-primary, .btn-outline-hero { width: 100%; max-width: 280px; justify-content: center; padding: 13px 24px; }
  .hero-stats { flex-wrap: wrap; gap: 16px; padding-top: 24px; margin-top: 28px; }
  .hero-stat { min-width: 80px; }
  .hero-stat .num { font-size: 1.5rem; }
  .hero-stat .label { font-size: .72rem; }

  /* LOADER */
  .loader-logo { width: 80px; height: 80px; }
  .loader-title { font-size: 1.2rem; }

  /* STRIP */
  .strip-grid { grid-template-columns: 1fr 1fr; }
  .strip-item { padding: 16px; }
  .strip-icon { width: 44px; height: 44px; font-size: 1.2rem; }
  .strip-item h3 { font-size: .82rem; }
  .strip-item p { font-size: .72rem; }

  /* ABOUT */
  .about-features { grid-template-columns: 1fr 1fr; gap: 10px; }
  .about-feature { padding: 10px; }
  .about-feature-icon { width: 34px; height: 34px; font-size: .9rem; }
  .about-feature h4 { font-size: .8rem; }
  .about-feature p { font-size: .72rem; }
  .about-content h2 { font-size: 1.6rem; }
  .about-badge .big { font-size: 1.6rem; }

  /* VMV */
  .vmv-grid { grid-template-columns: 1fr; }
  .vmv-grid .vmv-card:last-child { grid-column: span 1; max-width: 100%; }
  .vmv-card { padding: 28px 20px; }
  .vmv-icon { width: 56px; height: 56px; font-size: 1.5rem; border-radius: 14px; }

  /* CAMPUSES */
  .campuses-tabs { flex-direction: row; overflow-x: auto; justify-content: flex-start; padding-bottom: 8px; -webkit-overflow-scrolling: touch; gap: 8px; }
  .campuses-tabs::-webkit-scrollbar { height: 3px; }
  .camp-tab { white-space: nowrap; flex-shrink: 0; font-size: .78rem; padding: 8px 14px; }
  .faculties-grid { grid-template-columns: 1fr; }
  .campus-info { padding: 24px 20px; border-radius: 14px; }
  .campus-info-text h3 { font-size: 1.1rem; }
  .campus-info-meta { gap: 16px; }
  .campus-meta-item .num { font-size: 1.3rem; }

  /* PRESIDENT */
  .president-message-text { font-size: .85rem; line-height: 1.9; }
  .president-message-wrap .quote-icon { font-size: 2.2rem; }
  .president-sig { padding: 14px; gap: 10px; }

  /* STAFF */
  .staff-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .staff-avatar-wrap { height: 160px; }
  .staff-avatar-wrap svg { width: 90px; height: 90px; }
  .staff-body { padding: 14px; }
  .staff-name { font-size: .85rem; }
  .staff-title { font-size: .7rem; }
  .staff-spec { font-size: .7rem; }

  /* CV MODAL */
  .cv-box { border-radius: 16px; }
  .cv-header { padding: 20px; gap: 14px; }
  .cv-header-avatar { width: 70px; height: 70px; }
  .cv-header-avatar svg { width: 54px; height: 54px; }
  .cv-header-text h2 { font-size: 1rem; }
  .cv-body { padding: 16px; }
  .cv-section h4 { font-size: .72rem; }

  /* NEWS */
  .news-grid { grid-template-columns: 1fr; }
  .news-img { height: 180px; }
  .news-body { padding: 16px; }
  .news-body h3 { font-size: .9rem; }

  /* ADMISSIONS */
  .admission-banner { padding: 40px 20px; border-radius: 14px; }
  .admission-banner h2 { font-size: 1.5rem; }
  .admission-banner p { font-size: .85rem; }
  .admission-banner .btn-primary,
  .admission-banner .btn-outline-hero { width: 100%; max-width: 260px; }

  /* FAQ */
  .faq-grid { grid-template-columns: 1fr; gap: 10px; }
  .faq-q { padding: 16px; font-size: .84rem; }
  .faq-q-icon { width: 30px; height: 30px; font-size: .85rem; }
  .faq-a { font-size: .82rem; }

  /* CONTACT */
  .contact-section-new { padding: 60px 0; }
  .contact-master-grid { grid-template-columns: 1fr; gap: 24px; }
  .contact-form-new { padding: 22px 16px; border-radius: 14px; }
  .contact-form-new h3 { font-size: 1.3rem; }
  .form-row-2 { grid-template-columns: 1fr; gap: 0; }
  .contact-sidebar { flex-direction: column; }
  .contact-info-box { padding: 22px; }
  .contact-info-box h3 { font-size: 1rem; }
  .ci-item { padding: 10px 0; }
  .ci-icon { width: 36px; height: 36px; }
  .contact-map-box iframe { height: 200px; }

  /* FOOTER */
  .footer { padding: 50px 0 0; }
  .footer-grid { grid-template-columns: 1fr; gap: 24px; }
  .footer-brand img { height: 50px; }
  .footer-col h4 { margin-bottom: 10px; }
  .footer-bottom { flex-direction: column; gap: 6px; padding: 16px 0; text-align: center; font-size: .74rem; }

  /* GALLERY */
  .ugallery-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }

  /* LIGHTBOX */
  .lb-nav { width: 36px; height: 36px; font-size: 1rem; }
  .lb-prev { left: 8px; }
  .lb-next { right: 8px; }

  /* FACULTY PAGES */
  .fac-hero { padding: 90px 0 44px; min-height: auto; }
  .fac-hero-title { font-size: 1.5rem; }
  .fac-hero-title-en { font-size: .85rem; }
  .fac-breadcrumb { font-size: .7rem; flex-wrap: wrap; }
  .fac-content-grid { grid-template-columns: 1fr; }
  .fac-sidebar { flex-direction: column; }
  .fac-img-gallery { grid-template-columns: 1fr; }
  .fac-img-gallery img { height: 160px; }
  .fac-section-card { padding: 20px; }
  .other-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .other-card { padding: 14px 10px; }
  .other-card > div { font-size: 1.2rem; }
  .other-card strong { font-size: .74rem; }
  .other-card span { font-size: .65rem; }
}

/* ─────────────────────────────────────────────────
   640px — Mobile portrait
───────────────────────────────────────────────── */
@media (max-width: 640px) {

  .container { padding: 0 16px; }

  /* HERO */
  .hero h1 { font-size: 1.8rem; }
  .hero-stats { gap: 12px; }
  .hero-stat { min-width: 70px; }

  /* STRIP — single column */
  .strip-grid { grid-template-columns: 1fr; }
  .strip-item { border-inline-end: none; border-bottom: 1px solid var(--border); }
  .strip-item:last-child { border-bottom: none; }

  /* ABOUT */
  .about-features { grid-template-columns: 1fr; }
  .about-img-main img { height: 240px; }

  /* STAFF */
  .staff-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .staff-avatar-wrap { height: 140px; }
  .staff-avatar-wrap svg { width: 76px; height: 76px; }
  .staff-body { padding: 12px; }
  .staff-name { font-size: .78rem; }
  .staff-cv-btn { font-size: .7rem; padding: 7px; }

  /* NEWS */
  .news-img { height: 160px; }

  /* CAMPUS TABS */
  .campuses-tabs { padding-bottom: 6px; }
  .camp-tab { font-size: .74rem; padding: 7px 12px; border-radius: 8px; }

  /* FOOTER */
  .footer-social { gap: 8px; }
  .social-btn { width: 34px; height: 34px; font-size: .8rem; }

  /* LIGHTBOX */
  .lb-nav { display: none; }
  .lb-img { max-width: 94vw; }

  /* GALLERY */
  .ugallery-grid { grid-template-columns: repeat(2, 1fr); gap: 6px; }

  /* BUTTONS */
  .btn-primary, .btn-outline-hero { font-size: .88rem; padding: 12px 22px; }

  /* SECTIONS */
  .section-title { font-size: 1.5rem; }
  .section-badge { font-size: .7rem; padding: 5px 14px; }
  .section-line .ln-navy { width: 28px; }
  .section-line .ln-gold { width: 14px; }

  /* FAQ */
  .faq-q { padding: 14px; }
  .faq-q-text span { font-size: .82rem; }

  /* FEATURES STRIP */
  .features-strip { padding: 32px 0; }
}

/* ─────────────────────────────────────────────────
   480px — Small phones
───────────────────────────────────────────────── */
@media (max-width: 480px) {

  /* LOADER */
  .loader-title { font-size: 1rem; }
  .loader-sub { font-size: .65rem; letter-spacing: 2px; }
  .loader-bar { width: 160px; }

  /* NAV */
  .nav-inner { height: 60px; }
  .nav-logo img { height: 38px; }
  .nav-logo-text .brand-ar { font-size: .78rem; }

  /* TOP BAR */
  .top-bar-right { gap: 10px; font-size: .74rem; }

  /* HERO */
  .hero-inner { padding: 80px 0 44px; }
  .hero h1 { font-size: 1.55rem; }
  .hero-badge { font-size: .65rem; padding: 5px 12px; }
  .hero-sub { font-size: .84rem; }
  .hero-stat .num .counter { font-size: 1.3rem; }

  /* STAFF */
  .staff-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .staff-avatar-wrap { height: 120px; }
  .staff-avatar-wrap svg { width: 64px; height: 64px; }

  /* CV MODAL */
  .cv-box { margin: 8px; }
  .cv-header { padding: 16px; flex-direction: column; text-align: center; }
  .cv-close { top: 10px; left: 10px; }
  .cv-header-avatar { margin: 0 auto; }

  /* CAMPUS INFO */
  .campus-info { padding: 18px 14px; }
  .campus-info-text h3 { font-size: 1rem; }

  /* CONTACT */
  .contact-form-new { padding: 18px 14px; }
  .btn-wa { padding: 13px 10px; font-size: .85rem; }
  .ci-socials { gap: 8px; }
  .ci-social { width: 36px; height: 36px; }

  /* PRESIDENT */
  .president-message-text { font-size: .8rem; }
  .president-sig { flex-direction: column; text-align: center; }
  .president-sig-avatar { margin: 0 auto; }

  /* GALLERY */
  .ugallery-grid { grid-template-columns: repeat(2, 1fr); }

  /* OTHER FACULTIES */
  .other-grid { grid-template-columns: repeat(2, 1fr); }

  /* FAQ */
  .faq-q { padding: 12px 14px; }
  .faq-q-text { gap: 8px; }
  .faq-q-icon { width: 28px; height: 28px; font-size: .8rem; flex-shrink: 0; }

  /* DRAWER */
  .drawer-header { padding: 16px; }
  .drawer-body { padding: 12px; }
  .drawer-link { padding: 11px 12px; font-size: .84rem; }
  .drawer-campus-toggle { padding: 10px 12px; }
  .drawer-campus-toggle-text strong { font-size: .78rem; }
  .drawer-campus-toggle-text span { font-size: .64rem; }
  .drawer-campus-links a { font-size: .76rem; padding: 9px 12px; }
  .drawer-cta { padding: 12px; font-size: .85rem; }
  .drawer-footer { padding: 12px; }
}

/* ─────────────────────────────────────────────────
   360px — Very small phones (Galaxy S5, iPhone SE)
───────────────────────────────────────────────── */
@media (max-width: 360px) {

  .container { padding: 0 12px; }

  .hero h1 { font-size: 1.38rem; }
  .hero-btns .btn-primary,
  .hero-btns .btn-outline-hero { font-size: .82rem; padding: 11px 18px; }
  .hero-stats { gap: 10px; }
  .hero-stat .num .counter { font-size: 1.2rem; }
  .hero-stat .label { font-size: .65rem; }

  .section-title { font-size: 1.35rem; }

  .staff-grid { grid-template-columns: 1fr 1fr; gap: 6px; }
  .staff-avatar-wrap { height: 110px; }
  .staff-avatar-wrap svg { width: 56px; height: 56px; }
  .staff-name { font-size: .72rem; }
  .staff-cv-btn { display: none; } /* shown on tap via card click */

  .nav-logo-text { display: none; }
  .nav-logo img { height: 42px; }

  .top-bar-right a { font-size: .68rem; }

  .camp-tab { font-size: .7rem; padding: 6px 10px; }

  .other-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }

  .footer-grid { grid-template-columns: 1fr; }
}

/* ─────────────────────────────────────────────────
   TOUCH / HOVER improvements
───────────────────────────────────────────────── */
@media (hover: none) and (pointer: coarse) {
  /* Disable hover transforms on touch — prevent sticky states */
  .faculty-card:hover { transform: none; }
  .news-card:hover { transform: none; }
  .vmv-card:hover { transform: none; }
  .strip-item:hover { background: transparent; }
  .staff-card:hover { transform: none; }
  .about-feature:hover { box-shadow: none; }

  /* Bigger tap targets */
  .nav-toggle { padding: 10px 14px; }
  .drawer-close { width: 40px; height: 40px; }
  .camp-tab { padding: 10px 16px; }
  .faq-q { padding: 18px 16px; }
  .mega-col ul li a { padding: 12px 12px; }
  .drawer-campus-links a { padding: 13px 14px; }
  .lang-btn { padding: 6px 14px; }

  /* Gallery tap feedback */
  .ugallery-item:active { opacity: .85; }
  .ugallery-item:active img { transform: scale(1.03); }
}

/* ─────────────────────────────────────────────────
   LANDSCAPE PHONES
───────────────────────────────────────────────── */
@media (max-width: 768px) and (orientation: landscape) {
  .hero { min-height: auto; }
  .hero-inner { padding: 80px 0 40px; }
  .hero h1 { font-size: 1.7rem; }
  .loader-logo { width: 70px; height: 70px; }
  .loader-title { font-size: 1rem; }
  .hero-stats { margin-top: 20px; padding-top: 20px; }
}

/* ─────────────────────────────────────────────────
   PRINT
───────────────────────────────────────────────── */
@media print {
  .top-bar, .navbar, #backTop, #loader,
  .mobile-drawer, .mega-wrap, .mega-backdrop { display: none !important; }
  body { background: white; color: black; }
  .section { padding: 20px 0; }
  a { color: black; }
  .hero { min-height: auto; background: #1B3A6B; color: white; }
}