/* ============================================================
   FreshersJobs.in - Responsive Stylesheet
   Breakpoints: 1400px | 1200px | 992px | 768px | 576px | 400px
   ============================================================ */

/* ---------- Large Screens (≤ 1400px) ---------- */
@media (max-width: 1400px) {
  .container { max-width: 1200px; }
  .footer-grid { grid-template-columns: 1.8fr 1fr 1fr 1fr; }
}

/* ---------- Laptop (≤ 1200px) ---------- */
@media (max-width: 1200px) {
  .container { max-width: 100%; padding: 0 20px; }
  .hero-title { font-size: 48px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .search-layout { grid-template-columns: 240px 1fr; }
  .job-details-layout { grid-template-columns: 1fr 300px; }
  .contact-grid { grid-template-columns: 1fr 1.2fr; gap: 28px; }
  .mega-menu { min-width: 500px; }
}

/* ---------- Tablet (≤ 992px) ---------- */
@media (max-width: 992px) {
  :root { --nav-height: 64px; }
  .section { padding: 60px 0; }
  .section-sm { padding: 48px 0; }

  /* Navbar */
  .nav-menu, .nav-actions .btn-outline { display: none; }
  .hamburger { display: flex; }
  .nav-actions .btn-primary { padding: 9px 18px; font-size: 13px; }

  /* Hero */
  .hero { padding: 60px 0 48px; }
  .search-row { flex-wrap: wrap; gap: 10px; }
  .search-divider { display: none; }
  .search-field { flex-basis: calc(50% - 6px); }
  .search-btn-wrap { width: 100%; }
  .search-btn-wrap .btn { width: 100%; }
  .hero-stats { gap: 24px; }

  /* Grids */
  .jobs-grid { grid-template-columns: repeat(2, 1fr); }
  .company-grid { grid-template-columns: repeat(3, 1fr); }
  .categories-grid { grid-template-columns: repeat(3, 1fr); }
  .cities-grid { grid-template-columns: repeat(4, 1fr); }
  .testimonials-grid { grid-template-columns: repeat(2, 1fr); }
  .articles-grid { grid-template-columns: repeat(2, 1fr); }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .team-grid { grid-template-columns: repeat(3, 1fr); }

  /* Search Page */
  .search-layout { grid-template-columns: 1fr; }
  .filter-sidebar { position: static; }

  /* Job Details */
  .job-details-layout { grid-template-columns: 1fr; }

  /* Contact */
  .contact-grid { grid-template-columns: 1fr; }

  /* Auth */
  .auth-card { padding: 32px 28px; }

  /* Footer */
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
}

/* ---------- Mobile Landscape / Large Mobile (≤ 768px) ---------- */
@media (max-width: 768px) {
  .section { padding: 48px 0; }
  .section-header { margin-bottom: 36px; }

  /* Hero */
  .hero { padding: 48px 0 40px; }
  .hero-title { font-size: clamp(28px, 7vw, 40px); }
  .hero-subtitle { font-size: 15px; }
  .search-row { flex-direction: column; }
  .search-field { flex-basis: 100%; }
  .hero-stats { gap: 20px; }
  .hero-stat .stat-number { font-size: 24px; }

  /* Grids */
  .jobs-grid { grid-template-columns: 1fr; }
  .company-grid { grid-template-columns: repeat(2, 1fr); }
  .categories-grid { grid-template-columns: repeat(2, 1fr); }
  .cities-grid { grid-template-columns: repeat(3, 1fr); }
  .articles-grid { grid-template-columns: 1fr; }
  .testimonials-grid { grid-template-columns: 1fr; }
  .team-grid { grid-template-columns: repeat(2, 1fr); }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }

  /* Forms */
  .form-row { grid-template-columns: 1fr; }
  .social-auth { flex-direction: column; }

  /* Newsletter */
  .newsletter-form { flex-direction: column; }
  .newsletter-input { width: 100%; }

  /* Footer */
  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; text-align: center; }

  /* Page Hero */
  .page-hero { padding: 48px 0; }
  .page-hero-title { font-size: clamp(24px, 6vw, 36px); }

  /* Job Details */
  .job-details-content { padding: 20px; }
  .job-details-banner { padding: 24px; }

  /* Auth */
  .auth-card { padding: 28px 20px; }

  /* 404 */
  .page-404-icon { font-size: 70px; }

  /* Cookie */
  #cookie-banner { flex-direction: column; text-align: center; }
}

/* ---------- Mobile Portrait (≤ 576px) ---------- */
@media (max-width: 576px) {
  :root { --nav-height: 60px; }
  .container { padding: 0 16px; }
  .section { padding: 40px 0; }

  /* Nav */
  .nav-logo .logo-text { font-size: 17px; }
  .nav-actions #dark-toggle { width: 36px; height: 36px; font-size: 16px; }

  /* Search Box */
  .search-box { padding: 14px; border-radius: var(--radius-lg); }

  /* Grids */
  .company-grid { grid-template-columns: 1fr; }
  .categories-grid { grid-template-columns: repeat(2, 1fr); }
  .cities-grid { grid-template-columns: repeat(2, 1fr); }
  .team-grid { grid-template-columns: 1fr; }
  .stats-grid { grid-template-columns: 1fr 1fr; }

  /* Section Header */
  .section-title { font-size: clamp(20px, 6vw, 28px); }
  .section-desc { font-size: 14px; }

  /* Article */
  .article-image { height: 150px; font-size: 48px; }

  /* Buttons */
  .btn { padding: 11px 22px; font-size: 14px; }
  .btn-lg { padding: 13px 28px; font-size: 15px; }

  /* Auth */
  .auth-card { padding: 24px 16px; }
  .auth-title { font-size: 22px; }
  .popup-card { padding: 28px 20px; }

  /* Pagination */
  .page-btn { width: 36px; height: 36px; font-size: 13px; }

  /* Job Card */
  .job-card { padding: 18px; }

  /* Footer */
  .footer { padding: 48px 0 0; }
  .social-links { justify-content: flex-start; }
}

/* ---------- Extra Small (≤ 400px) ---------- */
@media (max-width: 400px) {
  .hero-stats { flex-direction: column; gap: 12px; }
  .hero-stat .stat-number { font-size: 22px; }
  .categories-grid { grid-template-columns: 1fr 1fr; }
  .cities-grid { grid-template-columns: 1fr 1fr; }
  .section-title { font-size: 20px; }
  .page-hero-title { font-size: 24px; }
  .stats-grid { grid-template-columns: 1fr; }
}

/* ---------- Print ---------- */
@media print {
  .navbar, .footer, #back-to-top, #whatsapp-btn, #cookie-banner, #scroll-progress { display: none !important; }
  body { font-size: 12px; color: #000; }
  .page-hero { background: none; border-bottom: 2px solid #000; }
  .page-hero-title { color: #000; }
}

/* ---------- High Contrast / Accessibility ---------- */
@media (prefers-contrast: high) {
  .job-card, .company-card, .category-card { border-width: 2px; border-color: var(--text-dark); }
  .btn-primary { border: 2px solid var(--primary-dark); }
}

/* ---------- Reduced Motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  .companies-slider { animation: none; }
}