/* ==========================================================================
   Responsive refinements - layered on top of style.css
   Mobile is the base in style.css; these are progressive enhancements.
   ========================================================================== */

/* Testimonials carousel - mobile-first sizing (base, below 768px) */
.testi-carousel { padding-inline: 40px; }
.testi-arrow { width: 34px; height: 34px; }
.testi-arrow.prev { left: 0; }
.testi-arrow.next { right: 0; }
.testi-arrow svg { width: 16px; height: 16px; }

/* Tablet: 768px+ */
@media (min-width: 768px) {
  .testi-carousel { padding-inline: 54px; max-width: 620px; }
  .testi-arrow { width: 44px; height: 44px; }
  .testi-arrow.prev { left: 0; }
  .testi-arrow.next { right: 0; }
  .testi-arrow svg { width: 20px; height: 20px; }

  .card-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
  .card-grid.cols-3 { grid-template-columns: repeat(2, 1fr); }
  .social-grid { grid-template-columns: repeat(3, 1fr); }
  .testi-grid { grid-template-columns: repeat(2, 1fr); }
  .gallery-grid { grid-template-columns: repeat(3, 1fr); }
  .footer-grid { grid-template-columns: 1.3fr 1fr 1fr; }
  .field-row { grid-template-columns: 1fr 1fr; }
  .footer-bottom {
    flex-direction: row; flex-wrap: nowrap; text-align: left; gap: 1rem;
  }
  .footer-copyright, .footer-legal, .footer-credit { flex: 1 1 0; }
  .footer-copyright { order: 1; text-align: left; }
  .footer-credit { order: 2; text-align: center; }
  .footer-legal { order: 3; text-align: right; }
  .approach-list { grid-template-columns: repeat(2, 1fr); }
}

/* Small desktop: 1024px+ */
@media (min-width: 1024px) {
  .main-nav { display: block; }
  .header-cta { display: inline-flex; }
  .hamburger, .mobile-nav { display: none; }
  .sticky-cta { display: none; }
  .back-to-top { bottom: 28px; right: 28px; }
  .site-footer { padding-bottom: var(--space-lg); }

  .hero-grid { grid-template-columns: 1.1fr 0.9fr; }
  .hero-copy { order: 1; }
  .hero-portrait { order: 2; }
  .two-col { grid-template-columns: 1fr 1fr; }
  .two-col.reverse { direction: rtl; }
  .two-col.reverse > * { direction: ltr; }

  .card-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
  .approach-list { grid-template-columns: repeat(4, 1fr); }
  .timeline { display: none; } /* replaced by horizontal timeline on desktop */
  .timeline-h { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: var(--space-md); border-top: 2px solid var(--border); padding-top: var(--space-md); margin-top: 8px; }
  .timeline-h .th-item { position: relative; padding-top: 1.4rem; }
  .timeline-h .th-item::before { content: ""; position: absolute; left: 0; top: -9px; width: 12px; height: 12px; border-radius: 50%; background: var(--coral); border: 3px solid var(--bg); }

  .testimonial-track { grid-template-columns: repeat(3, 1fr); }
  .social-grid { grid-template-columns: repeat(4, 1fr); }
  .testi-grid { grid-template-columns: repeat(3, 1fr); }

  .testi-carousel { max-width: 700px; padding-inline: 64px; }
  .testi-arrow.prev { left: -8px; }
  .testi-arrow.next { right: -8px; }

  .gallery-grid { grid-template-columns: repeat(4, 1fr); }
}

/* Large desktop: 1440px+ */
@media (min-width: 1440px) {
  :root { --container: min(1280px, 88vw); }
}

/* Ensure timeline-h hidden below desktop (vertical timeline used instead) */
@media (max-width: 1023px) {
  .timeline-h { display: none; }
}