/* ==========================================================================
   SparkHire Consultants — responsive.css
   Progressive enhancement for larger viewports (mobile-first).
   Breakpoints: 40rem (640) · 48rem (768) · 64rem (1024) · 72rem (1152)
   ========================================================================== */

/* ---------- ≥ 640px ---------- */
@media (min-width: 40rem) {
  .topbar__hide-sm { display: inline-flex !important; }
  .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .radio-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .quick-search { grid-template-columns: 1.4fr 1fr auto; }
  .industry-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .job-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .commit-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); }
  .diff-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .course-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .article-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero-float--b { display: flex; }
  .footer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .industry-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .course-detail__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- ≥ 768px ---------- */
@media (min-width: 48rem) {
  .topbar__note { display: inline; }
  .split-cta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .section-head--split { grid-template-columns: 1.2fr 1fr; gap: var(--space-8); }
  .section-head--split p { margin-top: 0; }
  .strip__inner { grid-template-columns: auto 1fr; align-items: center; gap: var(--space-8); }
  .page-hero__grid { grid-template-columns: 1.5fr 1fr; }
  .article-card--feature { grid-column: 1 / -1; display: grid; grid-template-columns: 1.2fr 1fr; }
  .article-card--feature .media { aspect-ratio: auto; height: 100%; min-height: 20rem; }
  .article-card--feature .article-card__body { padding: var(--space-8); justify-content: center; }
  .story-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .board-search-row { display: grid; grid-template-columns: 1fr auto; gap: var(--space-3); }
}

/* ---------- ≥ 1024px ---------- */
@media (min-width: 64rem) {
  .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .split { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-10); }
  .split--wide-left { grid-template-columns: 1.15fr 1fr; }
  .split--wide-right { grid-template-columns: 1fr 1.15fr; }
  .hero__grid { grid-template-columns: 1.05fr 1fr; }
  .hero-float--a { left: -2rem; bottom: 2.5rem; }
  .hero-float--b { right: -1.5rem; top: 2.5rem; }
  .industry-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .job-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .commit-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .course-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .article-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .team-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer-grid { grid-template-columns: 1.6fr repeat(4, minmax(0, 1fr)); gap: var(--space-7); }
  .footer-brand { grid-column: auto; }
  .sticky-col { position: sticky; top: calc(var(--header-h) + 2rem); }
  .why-layout { display: grid; grid-template-columns: 0.9fr 1.3fr; gap: var(--space-10); align-items: start; }

  .board { grid-template-columns: 17.5rem minmax(0, 1fr); gap: var(--space-8); align-items: start; }
  .board .filters { position: sticky; top: calc(var(--header-h) + 1.5rem); max-height: calc(100vh - var(--header-h) - 3rem); overflow-y: auto; }
  .filters-toggle { display: none !important; }
  .filters-body:not(.is-open) { display: block; }
  .board .job-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .job-layout { grid-template-columns: minmax(0, 1fr) 21rem; gap: var(--space-10); align-items: start; }
  .article-layout { grid-template-columns: minmax(0, 1fr) 18rem; gap: var(--space-10); align-items: start; }
  .service-panel { grid-template-columns: 1.25fr 1fr; gap: var(--space-10); align-items: start; }
  .industries-layout { display: grid; grid-template-columns: 15rem minmax(0, 1fr); gap: var(--space-10); align-items: start; }
  .toc { display: block; position: sticky; top: calc(var(--header-h) + 2rem); }
  .industry-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cta-band { grid-template-columns: 1fr 1.05fr; align-items: center; gap: var(--space-10); }
  .timeline--horizontal { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-5); }
  .timeline--horizontal .timeline__step { padding: 4rem 0 0 0; }
  .timeline--horizontal .timeline__step::after { left: 3.25rem; right: -0.75rem; top: calc(1.375rem - 0.75px); bottom: auto; width: auto; height: 1.5px; background: linear-gradient(to right, var(--teal-600), var(--slate-200)); }
  .on-dark .timeline--horizontal .timeline__step::after { background: linear-gradient(to right, var(--teal-300), rgb(255 255 255 / 0.1)); }
  .timeline--horizontal .timeline__step:last-child::after { display: none; }
  .contact-layout { display: grid; grid-template-columns: 1.3fr 1fr; gap: var(--space-10); align-items: start; }
}

/* ---------- Desktop navigation ≥ 1152px ---------- */
@media (min-width: 72rem) {
  .nav-toggle { display: none; }
  .primary-nav,
  .primary-nav:not(.is-open) {
    display: block;
    position: static;
    inset: auto;
    padding: 0;
    border: 0;
    overflow: visible;
    background: none;
  }
  .nav-list { flex-direction: row; align-items: center; gap: var(--space-1); }
  .nav-list > li { position: relative; border: 0; }
  .nav-link, .nav-trigger {
    width: auto;
    padding: 0.5rem 0.6rem;
    white-space: nowrap;
    font-size: 0.9375rem;
    border-radius: var(--radius-pill);
  }
  .nav-link:hover, .nav-trigger:hover { background: var(--slate-100); color: var(--navy-900); }
  .nav-link[aria-current="page"], .nav-trigger.is-current { color: var(--teal-700); background: var(--teal-50); }
  .nav-trigger .icon { width: 1rem; height: 1rem; }
  .dropdown {
    position: absolute;
    left: 50%;
    top: calc(100% + 0.75rem);
    transform: translateX(-50%);
    width: 40rem;
    grid-template-columns: 1fr 1fr;
    padding: var(--space-3);
    background: var(--white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
  }
  .dropdown::before { content: ""; position: absolute; left: 0; right: 0; top: -0.75rem; height: 0.75rem; }
  .dropdown__footer { border-top: 1px solid var(--slate-100); padding-top: var(--space-2); margin-top: var(--space-1); }
  .nav-actions { display: none; }
  .header-cta { display: flex; gap: var(--space-2); align-items: center; }
  body.nav-open { overflow: auto; }
}

/* Between 72rem and 80rem the 8-item nav needs the room: keep only the main CTA. */
@media (min-width: 72rem) and (max-width: 79.99rem) {
  .header-cta .btn--outline { display: none; }
}

@media (min-width: 80rem) {
  .nav-link, .nav-trigger { padding-inline: 0.875rem; }
}