/* ==========================================================================
   GoldenSunAI — Responsive rules (mobile-first breakpoints)
   ========================================================================== */

/* -- Narrow phones -----------------------------------------------------------
   The GoldenSunAI wordmark is an atomic lockup (see .brand__name) and never
   yields space. Below this width there isn't room for it plus a theme
   picker plus the drawer toggle, so the picker moves into the drawer
   instead of squeezing between the logo and the hamburger.
   ------------------------------------------------------------------------*/
@media (max-width: 559px) {
  .site-header__controls .theme-picker {
    display: none;
  }
}

/* -- Small tablets and up ------------------------------------------------*/
@media (min-width: 640px) {
  .card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .step-row {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* -- Desktop --------------------------------------------------------------*/
@media (min-width: 900px) {
  .nav {
    display: block;
  }

  .nav-toggle {
    display: none;
  }

  .card-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .split {
    grid-template-columns: 1.1fr 0.9fr;
    align-items: start;
  }

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

  .site-footer__inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

/* -- Large desktop ----------------------------------------------------------*/
@media (min-width: 1200px) {
  .card-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* -- Work page grid — its own breakpoints (768/1024/1600), independent of
   the shared .card-grid breakpoints above so index/about/mission/support
   aren't affected: 320–767px one column, 768–1023px two, 1024px+ three,
   1600px+ four. The extra .card-grid.work-grid specificity guarantees
   these win over the generic .card-grid rules regardless of source order
   — including this unconditional one, which holds Work to one column
   through the 640–767px gap the generic 640px breakpoint would otherwise
   claim first. */
.card-grid.work-grid {
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 768px) {
  .card-grid.work-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .card-grid.work-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1600px) {
  .card-grid.work-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}