/* Mobile Screen Component - Dedicated adjustments for devices like Realme P3 5G & modern smartphones */
@media (max-width: 480px) {
  /* Give containers horizontal room without overriding their top/bottom spacing (prevents sticking to header) */
  .dashboard-container, .page-container, .container, .hero .dashboard-container {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  
  /* Cards need internal padding so content has space to breathe, avoiding the 'congested' look */
  .card, .test-card, .subject-card, .dev-project-card, .competency-card, .olq-factor-card, .gto-task-card, .profile-card, .about-card, .about-feature, .timeline-step {
    padding: 16px !important;
    margin-bottom: 16px !important;
    border-radius: 10px !important;
  }
  
  /* Adjust grid layouts that might be too squished */
  .subject-grid, .seo-grid, .tests-grid, .dev-projects-grid, .competency-grid, .olq-factors-grid, .gto-tasks-grid, .skills-matrix-grid, .about-grid, .timeline {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  
  /* Make sure hero section has proper breathing room */
  .hero, .about-hero {
    padding-top: 40px !important;
    padding-bottom: 20px !important;
  }
  .hero h1, .about-hero h1 {
    font-size: 24px !important;
    margin-bottom: 12px !important;
    line-height: 1.3 !important;
  }
  .hero p, .about-hero p {
    font-size: 14px !important;
    padding: 0 10px !important;
    line-height: 1.5 !important;
  }

  /* Improve typography scaling for small screens */
  h2.section-title, h2 {
    font-size: 20px !important;
    margin-bottom: 16px !important;
  }
  h3 {
    font-size: 18px !important;
    margin-bottom: 8px !important;
  }
  p {
    font-size: 14px !important;
    line-height: 1.5 !important;
  }
  
  /* Ensure images in cards don't blow up */
  .profile-avatar {
    width: 90px !important;
    height: 90px !important;
  }
  

  
  /* Fix the footer copyright text size */
  .footer-bottom p {
    font-size: 12px !important;
  }
  
  /* Prevent double spacing in grids */
  .subject-grid > *, .seo-grid > *, .tests-grid > *, .dev-projects-grid > *, .competency-grid > *, .olq-factors-grid > *, .gto-tasks-grid > *, .skills-matrix-grid > *, .about-grid > *, .timeline > * {
    margin-bottom: 0 !important;
  }
}