/* LearningLab marketing site — reset + responsive helpers.
   The page design is authored as inline styles (matching the source export);
   this file adds only a base reset, focus/selection polish, and the
   breakpoints that collapse the desktop grids on smaller screens.
   Grid containers carry .split / .grid-2 / .grid-3 / .grid-4 / .foot-grid
   hooks; the !important rules below beat their inline grid-template-columns. */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

img { max-width: 100%; }

::selection { background: #f5a623; color: #14284b; }

a, button, input, textarea {
  transition: color 140ms ease, background 140ms ease, border-color 140ms ease, box-shadow 140ms ease, transform 160ms ease;
}

a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 2.5px solid #2563eb;
  outline-offset: 2px;
  border-radius: 6px;
}

/* ---- Responsive collapse ---- */
@media (max-width: 900px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr) !important; }
  .grid-3 { grid-template-columns: repeat(2, 1fr) !important; }
  .split  { grid-template-columns: 1fr !important; }
}

@media (max-width: 760px) {
  .foot-grid { grid-template-columns: 1fr 1fr !important; gap: 30px !important; }
}

@media (max-width: 640px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr !important; }
  .foot-grid { grid-template-columns: 1fr !important; }

  /* Nav: let the links wrap under the brand instead of crowding one row */
  .nav-inner { flex-wrap: wrap; }
  .nav-links { width: 100%; justify-content: flex-start; gap: 14px 16px; }

  /* Fluid-down the display type set inline on hero/section headings */
  h1 { font-size: 33px !important; line-height: 1.12 !important; }
  h2 { font-size: 26px !important; }
}