/* ============================================================
   JOBNOVA — RESPONSIVE.CSS
   Breakpoints: desktop → laptop → tablet → mobile
   ============================================================ */

/* ──────────────── LAPTOP (max 1200px) ──────────────── */
@media (max-width: 1200px) {
  .hero-inner {
    gap: 32px;
  }
  .about-inner {
    gap: 40px;
  }
  .footer-grid {
    grid-template-columns: 1.2fr repeat(3, 1fr);
    gap: 28px;
  }
}

/* ──────────────── TABLET (max 960px) ──────────────── */
@media (max-width: 960px) {

  /* Hero */
  .hero-inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .hero-left {
    text-align: center;
  }
  .hero-badge {
    margin: 0 auto 24px;
  }
  .hero-desc {
    margin: 0 auto 36px;
  }
  .hero-ctas {
    justify-content: center;
  }
  .hero-stats {
    justify-content: center;
  }
  .hero-right {
    max-width: 520px;
    margin: 0 auto;
    width: 100%;
  }

  /* About */
  .about-inner {
    grid-template-columns: 1fr;
  }
  .about-visual {
    order: -1;
  }

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

  /* Footer */
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }
  .footer-brand {
    grid-column: 1 / -1;
  }
  .footer-desc { max-width: 100%; }

  /* Nav — show hamburger */
  .hamburger { display: flex; }
  .nav-links { display: none; }
  #main-nav .nav-inner {
    justify-content: flex-start;
    padding: 0 clamp(16px, 4vw, 48px);
  }

  /* Header meta smaller */
  .header-meta { display: none; }
}

/* ──────────────── MOBILE (max 640px) ──────────────── */
@media (max-width: 640px) {

  :root {
    --nav-height: 60px;
  }

  /* Header */
  .header-time { font-size: 0.9rem; }
  .logo-text { font-size: 1.15rem; }
  .logo-mark { width: 32px; height: 32px; border-radius: 8px; }

  /* Hero */
  #hero {
    padding: calc(var(--nav-height) + 52px + 40px) 0 60px;
    min-height: auto;
  }
  .hero-headline { font-size: clamp(2rem, 8vw, 2.8rem); }
  .hero-stats { gap: 20px; }
  .stat-num { font-size: 1.25rem; }
  .floating-cards { display: none; }

  /* Search card */
  .search-card { padding: 20px; }

  /* Filters */
  #filters { padding-top: 24px; }
  .filter-row { gap: 6px; }
  .filter-btn { padding: 6px 12px; font-size: 0.78rem; }

  /* Jobs grid */
  #jobs-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  /* About stats */
  .about-visual {
    grid-template-columns: 1fr;
  }
  .about-stat-card.wide { grid-column: 1; }

  /* Resources */
  .resources-grid {
    grid-template-columns: 1fr;
  }

  /* Query form */
  .query-form { padding: 24px 20px; }
  .form-row { grid-template-columns: 1fr; }

  /* Footer */
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .footer-bottom {
    flex-direction: column;
    text-align: center;
    gap: 12px;
  }
  .footer-bottom-links { flex-wrap: wrap; justify-content: center; gap: 14px; }

  /* Back to top */
  #back-to-top { bottom: 16px; right: 16px; width: 38px; height: 38px; }

  /* Section label */
  .section-label { font-size: 0.68rem; }
  .section-title { font-size: clamp(1.6rem, 6vw, 2.2rem); }
}

/* ──────────────── SMALL MOBILE (max 400px) ──────────────── */
@media (max-width: 400px) {
  .hero-ctas { flex-direction: column; }
  .hero-ctas .btn { width: 100%; justify-content: center; }
  .hero-stats { flex-direction: column; gap: 14px; }
  .jobs-header { flex-direction: column; align-items: flex-start; }
  .jobs-sort { width: 100%; }
  .sort-select { flex: 1; }
}

/* ──────────────── NAV LINKS (desktop) ──────────────── */
@media (min-width: 961px) {
  .nav-links {
    display: flex;
    align-items: center;
    gap: 2px;
  }
  .hamburger { display: none; }
  .mobile-menu { display: none !important; }
}

/* ──────────────── PRINT ──────────────── */
@media print {
  #site-header, #main-nav, #filters, #back-to-top, #footer { display: none !important; }
  #jobs { padding-top: 20px; }
  body { background: white; color: black; }
}