/* =========================================================
   responsive.css — breakpoints: 360 / 480 / 768 / 1024 / 1280 / 1440
   Mobile-first overrides layered on top of main.css/components.css
   ========================================================= */

/* ---------- Base (< 480px) ---------- */
.hero { padding-block: var(--space-lg) var(--space-lg); }
.hero-grid { grid-template-columns: 1fr; gap: var(--space-lg); }
.hero-photo { width: 78vw; max-width: 260px; margin-inline: auto; order: 0; }
.grid--2,
.grid--3,
.grid--4 { grid-template-columns: 1fr; }
.two-col { grid-template-columns: 1fr; }
.matrix { grid-template-columns: 1fr; }
.footer-grid { grid-template-columns: 1fr; gap: var(--space-lg); }
.related-work-grid { grid-template-columns: 1fr; }
.dashboard-mock { grid-template-columns: 1fr; }
.pipeline-steps { grid-template-columns: 1fr; }

h1 { font-size: var(--fs-2xl); }
h2 { font-size: var(--fs-xl); }
.error-page .error-code { font-size: 4rem; }

/* ---------- Mobile header + hero (< 768px) ---------- */
/* Note: .nav-cta-link lives inside .nav-links now, so it must stay
   visible on mobile — it is the CTA shown inside the drawer. It is
   only hidden from the header row on desktop by making it a flex
   child of the horizontal nav (see the 768px block below); there is
   no separate header-row instance of it to hide here. */
@media (max-width: 767px) {
  .site-header .container.nav { padding-block: var(--space-xs); }
  .nav-brand .brand-name-full { display: none; }
  .nav-brand .brand-name-short { display: inline; }

  .hero h1 { font-size: clamp(2rem, 9vw, 3rem); line-height: 1.12; }
}

@media (max-width: 479px) {
  .site-header .brand-name small { display: none; }
}

/* ---------- 480px ---------- */
@media (min-width: 480px) {
  h1 { font-size: var(--fs-3xl); }
  .grid--2 { grid-template-columns: repeat(2, 1fr); }
  .hero-photo { max-width: 300px; }
}

/* ---------- 768px ---------- */
@media (min-width: 768px) {
  h1 { font-size: var(--fs-4xl); }
  h2 { font-size: var(--fs-3xl); }
  .hero { padding-block: var(--space-3xl) var(--space-2xl); }

  .two-col { grid-template-columns: repeat(2, 1fr); }
  .matrix { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .related-work-grid { grid-template-columns: repeat(3, 1fr); }
  .dashboard-mock { grid-template-columns: repeat(3, 1fr); }
  .pipeline-steps { grid-template-columns: repeat(5, 1fr); }

  .nav-toggle { display: none; }
  .nav-close { display: none; }
  .nav-cta-link { display: inline-flex; margin-left: auto; }
  .nav-links {
    position: static;
    width: auto;
    height: auto;
    background: transparent;
    border: none;
    flex-direction: row;
    align-items: center;
    padding: 0;
    transform: none;
  }
  .nav-links a { font-size: var(--fs-sm); }
}

/* ---------- 1024px ---------- */
@media (min-width: 1024px) {
  .hero-grid { grid-template-columns: 1.1fr 0.9fr; }
  .hero-photo { width: auto; max-width: none; order: 0; }
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--4 { grid-template-columns: repeat(4, 1fr); }
}

/* ---------- 1280px ---------- */
@media (min-width: 1280px) {
  :root { --container-pad: 2rem; }
}

/* ---------- 1440px ---------- */
@media (min-width: 1440px) {
  .container { max-width: 1280px; }
}

/* ---------- small phones guard (360px) ---------- */
@media (max-width: 359px) {
  :root { --container-pad: 1rem; }
  .btn { padding-inline: 1.1rem; }
}