/*
 * FILE: assets/css/responsive.css
 * PURPOSE: Breakpoint overrides. Mobile-first base lives in the other layers;
 *          here we introduce multi-column grids and the desktop navigation.
 * ----------------------------------------------------------------------------
 * Breakpoints: 640 (sm), 768 (md), 1024 (lg).
 */

/* ============================== >= 640px (sm) ============================== */
@media (min-width: 40rem) {
  .field-row { grid-template-columns: 1fr 1fr; }
  .grid-services { grid-template-columns: repeat(2, 1fr); }
  .values-grid { grid-template-columns: repeat(2, 1fr); }
  .program-grid { grid-template-columns: repeat(2, 1fr); }
  .link-grid { grid-template-columns: repeat(2, 1fr); }
  .resource-grid { grid-template-columns: repeat(2, 1fr); }
  .grid-2 { grid-template-columns: repeat(2, 1fr); }
  .credentials { grid-template-columns: repeat(2, 1fr); }
  .btn-block-sm { width: auto; }
  .service-row { grid-template-columns: auto 1fr; }
  .service-details { grid-template-columns: repeat(2, 1fr); }
  .footer-legal-inner { flex-direction: row; justify-content: space-between; }
}

/* ============================== >= 768px (md) ============================== */
@media (min-width: 48rem) {
  .trust-sep { display: inline-block; }
  .hero-grid { grid-template-columns: 1fr 1fr; }
  .founder-grid { grid-template-columns: 1fr 1fr; }
  .founder-media-wrap { order: 2; }
  .founder-copy { order: 1; }
  .about-grid { grid-template-columns: 1fr 1fr; }
  .grid-steps { grid-template-columns: repeat(3, 1fr); }
  .grid-testimonials { grid-template-columns: repeat(3, 1fr); }
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .blog-grid { grid-template-columns: repeat(3, 1fr); }
  .faq-preview { grid-template-columns: 0.8fr 1.2fr; align-items: start; }
  .split-2 { grid-template-columns: 1fr 1fr; }
  .contact-grid { grid-template-columns: 2fr 3fr; }
  .footer-grid { grid-template-columns: 2fr 1fr 1.3fr 1fr; }

  /* Desktop navigation on, hamburger off */
  .primary-nav { display: block; }
  .header-ctas { display: flex; }
  .nav-toggle { display: none; }
  .mobile-drawer { display: none; }
}

/* ============================== >= 1024px (lg) ============================== */
@media (min-width: 64rem) {
  .grid-services { grid-template-columns: repeat(4, 1fr); }
  .values-grid { grid-template-columns: repeat(4, 1fr); }
}