/* Mobile web layout v4: shorter journeys, horizontal card rails, fixed image boxes. */
@media (max-width: 640px) {
  html, body { max-width: 100%; overflow-x: hidden; }
  .site-nav { height: 56px !important; min-height: 56px !important; padding: 0 12px !important; gap: 8px !important; }
  .site-nav .logo-img, body.nav-cover .site-nav .logo-img { width: 118px !important; max-height: 38px !important; }
  .site-nav .nav-cta { padding: 8px 10px !important; font-size: 12px !important; }
  .site-menu-toggle { padding: 7px 9px !important; font-size: 12px !important; }
  .journey-section, .feature, .home-offerings { overflow: hidden; }
  .journey-wrap, .container { width: calc(100% - 32px) !important; }
  .journey-section { padding: 32px 0; }
  .journey-title { font-size: 27px !important; line-height: 1.35 !important; }
  .journey-lead { font-size: 15px !important; line-height: 1.7 !important; }

  /* The four homepage paths are a swipeable reading sequence. */
  .home-offerings { padding: 42px 0 48px !important; }
  .home-section-head { margin-bottom: 22px !important; }
  .home-section-head h2 { font-size: 28px !important; line-height: 1.3 !important; }
  .home-section-head p { font-size: 14px !important; line-height: 1.65 !important; }
  .home-offering-grid, #courses .course-grid, .who-news-grid, .final-cta .cta-paths {
    display: flex !important; grid-template-columns: none !important; width: calc(100vw - 16px) !important;
    margin: 0 -16px 0 0 !important; padding: 0 16px 8px 0 !important; gap: 12px !important;
    overflow-x: auto !important; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none;
    -webkit-overflow-scrolling: touch; overscroll-behavior-inline: contain;
  }
  .home-offering-grid::-webkit-scrollbar, #courses .course-grid::-webkit-scrollbar, .who-news-grid::-webkit-scrollbar, .final-cta .cta-paths::-webkit-scrollbar { display: none; }
  .home-offering, #courses .course-card, .who-card, .final-cta .path {
    flex: 0 0 82% !important; width: 82% !important; min-width: 0 !important; scroll-snap-align: start;
  }
  .home-offering { min-height: 0 !important; padding: 20px 18px 18px !important; }
  .home-offering h3 { font-size: 20px !important; }
  #courses .course-card { min-height: 0 !important; }
  #courses .course-card .card-img { height: 142px !important; }
  .who-card { min-height: 0 !important; }
  .who-card-img { aspect-ratio: 16/9; }
  .final-cta .path { min-height: 0 !important; }

  /* Parent guide: keep the directory information-dense on a phone. */
  .page-hero { padding: 32px 16px 28px !important; }
  .page-hero .icon { font-size: 32px !important; margin-bottom: 8px !important; }
  .page-hero h1 { font-size: 26px !important; line-height: 1.3 !important; }
  .page-hero p { font-size: 13px !important; line-height: 1.6 !important; margin-bottom: 14px !important; }
  .hero-sub { gap: 8px !important; }
  .hero-badge { padding: 5px 10px !important; font-size: 11px !important; }
  .cat-row { width: calc(100vw - 16px) !important; max-width: none !important; margin: 0 -16px 0 0 !important;
    padding: 0 16px 6px 0 !important; justify-content: flex-start !important; flex-wrap: nowrap !important;
    overflow-x: auto !important; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .cat-row::-webkit-scrollbar { display: none; }
  .cat-card { flex: 0 0 132px !important; min-width: 132px !important; max-width: 132px !important; padding: 13px 10px !important; }
  .cat-card .cat-icon { font-size: 24px !important; }
  .layout { padding: 20px 16px 40px !important; gap: 16px !important; }
  .sidebar { width: 100% !important; flex: 0 0 auto !important; }
  .sidebar-title { margin-bottom: 6px !important; }
  .side-nav { flex-direction: row !important; flex-wrap: nowrap !important; overflow-x: auto !important; gap: 6px !important;
    padding-bottom: 4px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .side-nav::-webkit-scrollbar { display: none; }
  .side-btn { flex: 0 0 auto !important; padding: 7px 10px !important; white-space: nowrap; }
  .content-header { margin-bottom: 12px !important; }
  .article-list { gap: 10px !important; }
  .art-card { grid-template-columns: 112px minmax(0,1fr) !important; min-height: 128px; }
  .art-cover { width: 112px !important; height: 128px !important; min-height: 128px !important; }
  .art-main { padding: 12px !important; }
  .art-top { gap: 6px !important; margin-bottom: 6px !important; }
  .art-tag { padding: 2px 7px !important; font-size: 10px !important; }
  .art-title { font-size: 15px !important; line-height: 1.35 !important; margin-bottom: 5px !important; }
  .art-excerpt { font-size: 12px !important; line-height: 1.5 !important; -webkit-line-clamp: 2; margin-bottom: 5px !important; }
  .art-meta { gap: 8px !important; font-size: 10px !important; }

  /* Keep the method section readable without a long image block. */
  .feature-grid { grid-template-columns: 1fr !important; gap: 24px !important; }
  .feature-grid .photo-card { min-height: 210px !important; max-height: 260px; }
  .making-learning { padding: 28px 20px !important; }
  .making-steps { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 14px !important; }
  .making-steps li { min-width: 0; }
  .making-steps h3 { font-size: 17px !important; }
  .making-steps p { font-size: 13px !important; line-height: 1.6 !important; }

  /* Curriculum page: the hero and project/rule lists become browseable rails. */
  .curr-hero { height: 420px !important; min-height: 420px !important; max-height: 420px !important; }
  .curr-hero .hero-copy { top: 42px !important; left: 16px !important; width: calc(100% - 32px) !important; padding: 0 !important; transform: none !important; }
  .curr-hero .hero-copy h1 { font-size: 27px !important; line-height: 1.22 !important; white-space: normal !important; }
  .curr-hero .hero-sub { font-size: 14px !important; line-height: 1.7 !important; white-space: normal !important; }
  .curr-hero .hero-bg { top: 205px !important; left: 0 !important; width: 100% !important; background-size: auto 215px !important; background-position: 82% bottom !important; }
  #shelf .journey-projects, .service-project-rail {
    display: flex !important; grid-template-columns: none !important; width: calc(100vw - 16px) !important;
    margin-right: -16px !important; padding-right: 16px !important; gap: 12px !important; overflow-x: auto !important;
    scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  #shelf .journey-projects::-webkit-scrollbar, .service-project-rail::-webkit-scrollbar { display: none; }
  #shelf .journey-card, .service-project-rail .journey-card { flex: 0 0 86% !important; scroll-snap-align: start; }
  #shelf .journey-card>img { height: 180px !important; aspect-ratio: auto !important; }
  #shelf .journey-card-body { padding: 16px !important; }
  #shelf .journey-card h3 { font-size: 21px !important; }
  #flow .journey-steps, #why .journey-rules { display: flex !important; width: calc(100vw - 16px) !important; margin-right: -16px !important; padding-right: 16px !important; gap: 12px !important; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  #flow .journey-steps::-webkit-scrollbar, #why .journey-rules::-webkit-scrollbar { display: none; }
  #flow .journey-step, #why .journey-rule { flex: 0 0 82% !important; scroll-snap-align: start; }
  #why .journey-rule { padding: 18px !important; }

  /* Shared service page and course pages: reserve image space and keep CTAs visible. */
  .service-product { max-height: 230px !important; margin: 16px 0 !important; }
  .service-process { gap: 8px !important; }
  .service-process img { aspect-ratio: 1/1.15 !important; }
  .journey-card>img { min-height: 0; }
  .journey-card-body { padding: 16px !important; }
  .journey-card h3 { font-size: 21px !important; }
  .journey-card .journey-btn { min-height: 40px; }
  .journey-actions { gap: 8px !important; }
  .journey-actions .journey-btn { flex: 1 1 auto; min-width: 0; }

  /* Keep the footer useful without making it the longest section. */
  .site-footer-v3 { padding: 40px 0 22px !important; }
  .site-footer-v3 .container { padding: 0 16px !important; }
  .footer-grid-v3 { gap: 22px 16px !important; }
  .footer-lead-v3 h2 { font-size: 25px !important; }
}