/* Scholyn separate mobile layout. Desktop remains controlled by existing CSS. */

@media (max-width: 640px) {
  html { font-size: 14px; }
  body { overflow-x: hidden; }
  .container, .uni-shell { width: min(100% - 24px, 1180px) !important; }

  .header { position: sticky; top: 0; }
  .nav-container { min-height: 54px !important; gap: 8px !important; padding: 6px 0 !important; }
  .logo-mark { width: 34px !important; height: 34px !important; border-radius: 9px !important; }
  .logo-info h2 { font-size: 15px !important; }
  .logo-info span { font-size: 9px !important; max-width: 150px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .desktop-nav, .desktop-btn { display: none !important; }

  .hero { padding: 18px 0 20px !important; }
  .hero-wrapper { display: block !important; }
  .hero-content { max-width: 100% !important; }
  .hero-badge { margin-bottom: 10px !important; padding: 6px 10px !important; font-size: 9px !important; }
  .hero-content h1 { max-width: 100% !important; margin-bottom: 10px !important; font-size: 30px !important; line-height: 1.05 !important; letter-spacing: -0.045em !important; }
  .hero-content p { margin-bottom: 14px !important; font-size: 12.5px !important; line-height: 1.55 !important; }
  .hero-search { min-height: 48px !important; margin-bottom: 12px !important; padding: 5px 5px 5px 12px !important; border-radius: 16px !important; box-shadow: 0 8px 22px rgba(15,23,42,.08) !important; }
  .hero-search input { height: 38px !important; font-size: 12.5px !important; padding: 0 8px !important; }
  .hero-search button { height: 38px !important; min-width: 72px !important; padding: 0 10px !important; border-radius: 12px !important; font-size: 12px !important; }
  .hero-actions { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 8px !important; margin-bottom: 12px !important; }
  .btn-primary, .btn-outline { min-height: 42px !important; height: 42px !important; padding: 0 12px !important; border-radius: 14px !important; font-size: 12px !important; }
  .trusted-users { width: 100% !important; padding: 10px 12px !important; border-radius: 14px !important; gap: 8px !important; }
  .trusted-users i { font-size: 22px !important; }
  .trusted-text strong { font-size: 11px !important; }
  .trusted-text span { font-size: 10px !important; line-height: 1.35 !important; }
  /* Keep the desktop information available on small screens; only reflow it. */
  .hero-panel { display: block !important; margin-top: 16px !important; padding: 14px !important; border-radius: 20px !important; }
  .hero-panel .stats-grid { grid-template-columns: 1fr 1fr !important; gap: 9px !important; }
  .hero-panel .stat-card { min-height: 0 !important; padding: 12px !important; border-radius: 14px !important; }
  .hero-panel .panel-footer { padding: 12px !important; border-radius: 14px !important; }

  .quick-actions { padding: 18px 0 22px !important; }
  .section-title { margin-bottom: 12px !important; gap: 8px !important; }
  .section-title span { padding: 5px 9px !important; font-size: 9px !important; margin-bottom: 5px !important; }
  .section-title h2 { font-size: 21px !important; line-height: 1.15 !important; }
  .section-title p { font-size: 12px !important; line-height: 1.45 !important; }
  .quick-grid { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
  .quick-card { display: flex !important; min-height: 150px !important; padding: 14px !important; border-radius: 16px !important; }
  .quick-icon { width: 36px !important; height: 36px !important; margin-bottom: 9px !important; font-size: 16px !important; }
  .quick-card h3 { font-size: 13px !important; margin-bottom: 5px !important; line-height: 1.2 !important; }
  .quick-card p { font-size: 10.5px !important; line-height: 1.35 !important; margin-bottom: 10px !important; display: block !important; -webkit-line-clamp: unset !important; overflow: visible !important; }
  .quick-card a { min-height: 34px !important; height: 34px !important; font-size: 11px !important; padding: 0 8px !important; }
  .quick-card:nth-child(5), .quick-card:nth-child(6) { display: flex !important; }

  .cta-section { padding: 18px 0 !important; }
  .cta-card { padding: 18px !important; border-radius: 20px !important; gap: 14px !important; }
  .cta-card h2 { font-size: 21px !important; line-height: 1.15 !important; }
  .cta-card p { font-size: 12px !important; line-height: 1.5 !important; }
  .cta-buttons { display: grid !important; grid-template-columns: 1fr 1fr !important; width: 100%; gap: 8px !important; }
  .footer { padding: 26px 0 18px !important; }
  .footer-grid { grid-template-columns: 1fr 1fr !important; gap: 18px !important; }
  .footer-grid > div:first-child { grid-column: 1 / -1; }
  .footer-grid h4 { font-size: 12px !important; margin-bottom: 8px !important; }
  .footer-grid p, .footer-grid a { font-size: 10.5px !important; line-height: 1.45 !important; margin-bottom: 6px !important; }

  .breadcrumb-section { display: block !important; padding: 8px 0 !important; }
  .breadcrumb-section .container, .breadcrumb { overflow-x: auto; white-space: nowrap; }
  .career-hero { padding: 18px 0 16px !important; }
  .career-hero-content { display: block !important; }
  .career-hero-main { text-align: left !important; }
  .career-hero h1 { font-size: 27px !important; line-height: 1.08 !important; margin-bottom: 8px !important; }
  .career-hero p { font-size: 12px !important; line-height: 1.5 !important; margin-bottom: 12px !important; }
  .career-search { min-height: 46px !important; padding: 5px 5px 5px 12px !important; border-radius: 14px !important; }
  .career-search input { font-size: 12px !important; }
  .career-search button { height: 36px !important; min-width: 68px !important; padding: 0 10px !important; font-size: 11px !important; }
  .popular-searches { margin-top: 10px !important; gap: 6px !important; overflow-x: auto; flex-wrap: nowrap !important; padding-bottom: 2px; justify-content: flex-start !important; }
  .popular-searches span, .popular-searches a { white-space: nowrap; font-size: 10px !important; padding: 6px 9px !important; }
  .career-hero-card { display: block !important; margin-top: 14px !important; padding: 14px !important; border-radius: 18px !important; }
  .career-categories, .featured-careers, .exam-guides { padding: 18px 0 22px !important; }
  .category-grid, .career-grid, .guide-grid, .exam-grid { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
  .category-card, .career-card, .guide-card, .exam-card { min-height: 150px !important; padding: 13px !important; border-radius: 15px !important; }
  .category-icon, .guide-icon { width: 34px !important; height: 34px !important; margin-bottom: 8px !important; }
  .category-card h3, .career-card h3, .guide-card h3, .exam-card h3 { font-size: 13px !important; line-height: 1.25 !important; margin-bottom: 6px !important; }
  .category-card p, .career-card p, .guide-card p, .exam-card p { font-size: 10.5px !important; line-height: 1.35 !important; display: block !important; -webkit-line-clamp: unset !important; overflow: visible !important; }
  .career-meta { display: flex !important; gap: 6px !important; margin-bottom: 12px !important; }
  .career-meta span { display: block !important; -webkit-line-clamp: unset !important; overflow: visible !important; }
  .category-badge, .career-tag { font-size: 9px !important; padding: 4px 7px !important; }

  .faq-hero { padding: 18px 0 18px !important; }
  .faq-hero h1 { font-size: 27px !important; line-height: 1.08 !important; }
  .faq-hero p { font-size: 12px !important; line-height: 1.5 !important; }
  .faq-search-card { padding: 14px !important; border-radius: 18px !important; }
  .faq-layout { gap: 14px !important; }
  .faq-card { padding: 13px !important; border-radius: 15px !important; }
  .faq-card summary { font-size: 12.5px !important; line-height: 1.35 !important; }
  .faq-answer p { font-size: 11px !important; line-height: 1.45 !important; }

  .uni-nav { min-height: 54px !important; display: flex !important; flex-wrap: wrap !important; gap: 6px !important; padding: 6px 0 8px !important; }
  .uni-logo { min-width: 0 !important; }
  .uni-logo img { width: 34px !important; height: 34px !important; }
  .uni-logo strong { font-size: 14px !important; }
  .uni-logo small { display: block !important; max-width: 230px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .uni-links { display: flex !important; flex: 1 0 100%; justify-content: flex-start !important; gap: 4px !important; overflow-x: auto; padding: 2px 0 !important; scrollbar-width: thin; }
  .uni-links a { padding: 7px 9px !important; font-size: 10px !important; }
  .uni-hero { padding: 18px 0 16px !important; }
  .uni-hero-grid { display: block !important; }
  .uni-hero h1 { font-size: 27px !important; line-height: 1.08 !important; margin: 10px 0 8px !important; }
  .uni-hero p { font-size: 12px !important; line-height: 1.5 !important; margin-bottom: 12px !important; }
  .uni-search-panel { padding: 14px !important; border-radius: 15px !important; }
  .uni-search-box, .uni-filter-row, .uni-card-actions { grid-template-columns: 1fr !important; gap: 8px !important; }
  .uni-stats-band { display: block !important; padding: 12px 0 !important; }
  .uni-stat-grid { grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
  .uni-stat-grid article { padding: 12px !important; }
  .uni-directory-section { padding: 18px 0 24px !important; }
  .university-grid { grid-template-columns: 1fr !important; gap: 10px !important; }
  .university-card { min-height: 0 !important; padding: 14px !important; border-radius: 15px !important; }
  .university-card h3 { font-size: 13px !important; margin: 8px 0 6px !important; }
  .uni-card-description { font-size: 11px !important; line-height: 1.45 !important; display: block !important; -webkit-line-clamp: unset !important; overflow: visible !important; }
  .uni-program-tags span, .uni-card-meta span { font-size: 10px !important; }

  .role-shell { display: block !important; }
  .role-sidebar { position: relative !important; width: 100% !important; min-height: 0 !important; padding: 10px 12px !important; border-right: 0 !important; border-bottom: 1px solid #dbe5f3 !important; }
  .role-nav { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; gap: 6px !important; }
  .role-nav a, .role-logout { padding: 8px !important; font-size: 10px !important; border-radius: 12px !important; }
  .role-main { margin: 0 !important; }
  .role-topbar { padding: 12px !important; gap: 10px !important; }
  .role-topbar h1 { font-size: 20px !important; }
  .role-topbar p { font-size: 11px !important; }
  .role-content { padding: 12px !important; }
  .role-hero, .role-grid, .resource-grid { grid-template-columns: 1fr !important; gap: 10px !important; }
  .role-card, .role-panel, .metric, .resource-card { padding: 14px !important; border-radius: 16px !important; }
}

@media (max-width: 380px) {
  .hero-content h1, .career-hero h1, .uni-hero h1, .faq-hero h1 { font-size: 25px !important; }
  .quick-grid, .category-grid, .career-grid, .guide-grid, .exam-grid { grid-template-columns: 1fr !important; }
  .hero-actions, .cta-buttons { grid-template-columns: 1fr !important; }
  .hero-panel .stats-grid, .uni-stat-grid { grid-template-columns: 1fr !important; }
}