/* ==========================================================
   CareerLens AI — responsive.css
   Loads LAST (after style.css and components.css). Focused on
   responsive behaviour, overflow safety and motion/keyboard
   accessibility. Breakpoints match style.css: 960 / 820 / 680.
   ========================================================== */

/* Overflow safety (all sizes) */
html,
body {
  max-width: 100%;
}
body {
  overflow-x: clip;
}
h1,
h2,
h3,
p,
li,
a {
  overflow-wrap: break-word;
}
.container {
  min-width: 0;
}
.card,
.step,
.workflow-step,
.cta-box,
.dash {
  min-width: 0;
}

/* Large desktop */
@media (min-width: 1280px) {
  :root {
    --container: 1200px;
  }
  .section {
    padding: 104px 0;
  }
}

/* Tablet landscape and below */
@media (max-width: 1024px) {
  .card-grid--4 {
    grid-template-columns: repeat(2, 1fr);
  }
  .workflow {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Tablet portrait: mobile menu active (matches main.js, 820px) */
@media (max-width: 820px) {
  .nav-menu {
    max-height: calc(100vh - var(--header-h));
    max-height: calc(100dvh - var(--header-h));
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .nav-links a,
  .nav-actions .btn {
    min-height: 44px;
  }
  .nav-links a[aria-current="page"]::after {
    left: 8px;
    right: auto;
    width: 28px;
    bottom: 6px;
  }
  .page-hero {
    padding: 64px 0 40px;
  }
  .card-grid--2 {
    grid-template-columns: 1fr;
  }
}

/* Mobile */
@media (max-width: 680px) {
  .container {
    width: min(100% - 32px, var(--container));
  }
  .section-head {
    margin-bottom: 36px;
  }
  .lead {
    font-size: 1rem;
  }
  .page-hero {
    padding: 48px 0 32px;
  }
  .page-hero-inner {
    gap: 16px;
  }
  .card,
  .step,
  .workflow-step {
    padding: 22px;
  }
  .card-grid--2,
  .card-grid--4,
  .workflow {
    grid-template-columns: 1fr;
  }
  .cta-box {
    padding: 44px 20px;
    border-radius: 20px;
  }
  .btn-lg {
    width: 100%;
  }
  .workflow-preview {
    flex-direction: column;
    gap: 6px;
    padding: 16px;
  }
  .chip-arrow {
    transform: rotate(90deg);
  }
  .footer-inner {
    flex-direction: column;
    gap: 24px;
  }
  .footer-links {
    gap: 12px 20px;
  }
}

/* Small phones */
@media (max-width: 380px) {
  .brand {
    font-size: 1rem;
  }
  h1 {
    font-size: 2rem;
  }
  .badge {
    font-size: 0.68rem;
    padding: 3px 10px;
  }
}

/* Keyboard accessibility: larger targets for coarse pointers */
@media (pointer: coarse) {
  .btn {
    min-height: 44px;
  }
  .footer-links a {
    display: inline-block;
    padding: 8px 0;
  }
}

/* Reduced motion: no transitions or movement */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .btn:hover,
  .card:hover {
    transform: none;
  }
}

/* High contrast / forced colors: keep focus and states visible */
@media (forced-colors: active) {
  .btn-primary,
  .badge,
  .chip {
    border: 1px solid CanvasText;
  }
  .nav-links a[aria-current="page"]::after {
    background: Highlight;
  }
}