/* =====================================================================
   responsive.css — every breakpoint-specific rule in the project, in one
   place, ordered from widest to narrowest. Rules extracted verbatim from
   style.css/dashboard.css during the CSS merge; extended during the
   responsiveness audit (1920px -> 320px) below the extraction marker.
   ===================================================================== */

/* ===================== 1100px (marketplace job grid) ===================== */
@media (max-width: 1100px){
  .job-grid{grid-template-columns:repeat(2, 1fr);}
  .job-grid.job-grid-compact{grid-template-columns:repeat(2, 1fr);}
  .marketplace-filters{grid-template-columns:repeat(3, 1fr);}
}

/* ===================== 1024px (marketing hero / grids) ===================== */
@media (max-width: 1024px){
  .hero-inner{grid-template-columns:1fr; text-align:center;}
  .hero-copy{display:flex; flex-direction:column; align-items:center;}
  .hero-visual{display:none;}
  .feature-grid{grid-template-columns:repeat(2,1fr);}
  .expert-grid{grid-template-columns:repeat(2,1fr);}
  .resource-grid{grid-template-columns:repeat(2,1fr);}
  .lb-grid, .ent-grid{grid-template-columns:1fr; gap:30px;}
  .steps{grid-template-columns:1fr;}
  .steps-4{grid-template-columns:repeat(2,1fr);}
  .steps-5{grid-template-columns:repeat(3,1fr);}
  .story-grid{grid-template-columns:1fr;}
  .job-card-grid{grid-template-columns:repeat(2,1fr);}
}

/* ===================== 1000px (admin dashboard) ===================== */
@media (max-width: 1000px){
  .admin-stats-grid{grid-template-columns:repeat(2, 1fr);}
  .admin-charts-grid{grid-template-columns:1fr;}
}

/* ===================== 960px (navbar collapse) =====================
   Logged-in users see 3 extra nav-links (Dashboard/Profile/Notifications)
   plus the notif bell -- collapsing into the hamburger earlier than the
   general 760px marketing breakpoint keeps the navbar from feeling
   crowded on tablet/small-laptop widths. */
@media (max-width: 960px){
  .nav-links{position:fixed; top:88px; left:0; right:0; background:var(--navy); flex-direction:column; align-items:flex-start; padding:20px 24px; border-bottom:1px solid rgba(255,255,255,.08); gap:18px; transform:translateY(-20px); opacity:0; visibility:hidden; pointer-events:none; transition:transform .2s ease, opacity .2s ease, visibility 0s linear .2s; z-index:99;}
  .nav-links.open{transform:translateY(0); opacity:1; visibility:visible; pointer-events:auto; transition:transform .2s ease, opacity .2s ease, visibility 0s linear 0s;}
  .hamburger{display:flex;}
  .nav-actions .btn-ghost, .nav-actions .btn-primary, .nav-actions .btn-outline{display:none;}
  .mobile-nav-cta{display:flex; gap:12px; width:100%; padding-top:14px; border-top:1px solid rgba(255,255,255,.08);}
  .mobile-nav-cta .btn{flex:1;}
  .mobile-nav-cta .btn-primary{color:#fff;}
  .mobile-nav-cta .btn-outline{color:#fff; border-color:rgba(255,255,255,.25);}
}

/* ===================== 900px (dashboards / company / trust) ===================== */
@media (max-width: 900px){
  .dash-grid{grid-template-columns:1fr 1fr;}
  .dash-columns{grid-template-columns:1fr;}
  .profile-hub{grid-template-columns:1fr;}
  .profile-side{position:static;}
  .profile-main-section .info-grid{grid-template-columns:1fr;}
  .portfolio-grid{grid-template-columns:1fr;}
  .job-stats-grid{grid-template-columns:repeat(2, 1fr);}
  .applicant-preview{grid-template-columns:1fr;}
  .security-tile-grid{grid-template-columns:1fr 1fr;}
}

/* ===================== 820px (admin sidebar collapse) ===================== */
@media (max-width: 820px){
  .admin-sidebar{position:fixed; left:-260px; top:0; z-index:200; transition:left .2s ease; box-shadow:var(--shadow);}
  .admin-sidebar.open{left:0;}
  .admin-sidebar-toggle{display:inline-flex; align-items:center; justify-content:center;}
  .admin-stats-grid{grid-template-columns:1fr 1fr;}
  .admin-content{padding:18px;}
}

/* ===================== 760px (navbar / marketing / contact) ===================== */
@media (max-width: 760px){
  .hero{padding:44px 0 36px;}
  .hero-copy h1{font-size:2.2rem;}
  .hero-copy .pill{margin-bottom:4px;}
  .hero-sub{margin-left:auto; margin-right:auto;}
  .hero-cta{justify-content:center; margin-bottom:24px;}
  .hero-trust{display:flex; flex-direction:column; align-items:center;}
  .trust-logos{justify-content:center; flex-wrap:wrap; row-gap:6px;}
  .section{padding:56px 0;}
  .section-head{margin-bottom:34px;}
  .cta-banner{padding:50px 0;}
  .stats-grid{justify-content:center;}
  .stat{min-width:45%;}
  .feature-grid{grid-template-columns:1fr;}
  .expert-grid{grid-template-columns:1fr;}
  .blog-grid{grid-template-columns:1fr;}
  .resource-grid{grid-template-columns:1fr;}
  .steps-4{grid-template-columns:1fr;}
  .steps-5{grid-template-columns:1fr;}
  .job-card-grid{grid-template-columns:1fr;}
  .case-stat{min-width:100%;}
  .section-head.split{flex-direction:column; align-items:flex-start;}
  .footer-grid{grid-template-columns:1fr; gap:30px; text-align:center;}
  .footer-brand{display:flex; flex-direction:column; align-items:center;}
  .footer-brand p{max-width:320px;}
  .footer-bottom{flex-direction:column; text-align:center; gap:16px;}
  .footer-copyright{min-width:0;}
  .footer-legal{justify-content:center;}
  .socials{justify-content:center;}
  .bench-score{text-align:left;}
  .newsletter-box{flex-direction:column; align-items:flex-start;}
  .newsletter-form{width:100%;}
  .newsletter-form input{flex:1;}
  .contact-grid{grid-template-columns:1fr;}
  .form-row{grid-template-columns:1fr;}
}

/* ===================== 700px (hiring timeline) ===================== */
@media (max-width: 700px){
  .hiring-timeline{flex-direction:column;}
  .hiring-timeline .stage{border-top:none; border-left:3px solid var(--border); text-align:left; padding:8px 0 8px 14px;}
  .hiring-timeline .stage.done{border-left-color:var(--primary);}
}

/* ===================== 640px (marketplace grid) ===================== */
@media (max-width: 640px){
  .job-grid, .job-grid.job-grid-compact{grid-template-columns:1fr;}
  .marketplace-filters{grid-template-columns:1fr 1fr;}
}

/* ===================== 600px (auth / trust) ===================== */
@media (max-width: 600px){
  .auth-card{padding:26px;}
  .role-options{grid-template-columns:1fr;}
  .security-tile-grid{grid-template-columns:1fr;}
  .doc-preview-grid{grid-template-columns:repeat(auto-fill, minmax(120px, 1fr));}
}

/* ===================== 520px (admin stats) ===================== */
@media (max-width: 520px){
  .admin-stats-grid{grid-template-columns:1fr;}
}

/* =====================================================================
   AUDIT ADDITIONS — small-phone pass (425px / 375px / 320px)
   The rules above already cover every layout breakpoint down to 520px.
   Below that, a handful of grids that only ever step down to 2 columns
   (never to 1) get cramped on small phones — fixed here rather than
   changing their existing 900px/640px behavior above.
   ===================================================================== */
@media (max-width: 480px){
  .dash-grid{grid-template-columns:1fr;}
  .job-stats-grid{grid-template-columns:1fr 1fr;}
  .marketplace-filters{grid-template-columns:1fr;}
  .admin-charts-grid{grid-template-columns:1fr;}
  .lb-row{grid-template-columns:1fr 1fr; row-gap:4px;}
  .form-row{grid-template-columns:1fr;}
}

@media (max-width: 375px){
  .job-stats-grid{grid-template-columns:1fr;}
  .hero-copy h1{font-size:1.9rem;}
  .section-head h2{font-size:1.7rem;}
  .admin-topbar h1{font-size:1.05rem;}
  .lb-row{grid-template-columns:1fr;}
}