/* ===========================================
   SHARED: Mobile horizontal-scroll for reusable sections
   (process, commitment, purpose grids)
   Applied on all non-home pages via generic selectors.
   Home page uses higher-specificity .home-page rules in home.css.
   =========================================== */

@media (max-width: 768px) {
  .steps-grid,
  .values-grid,
  .mission-vision-cards {
    display: grid;
    grid-auto-flow: column;
    grid-template-columns: none;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }
  .steps-grid {
    grid-auto-columns: 86vw;
    gap: 10px;
    padding: 0 10px 6px 0;
  }
  .values-grid {
    grid-auto-columns: 86vw;
    gap: 10px;
    padding: 0 10px 6px 0;
  }
  .mission-vision-cards {
    grid-auto-columns: 86vw;
    gap: 12px;
    padding: 0 10px 6px 0;
  }
  .steps-grid::-webkit-scrollbar,
  .values-grid::-webkit-scrollbar,
  .mission-vision-cards::-webkit-scrollbar { display: none; }

  .mission-vision-cards .mv-card,
  .steps-grid .step-card,
  .values-grid .value-card {
    width: 86vw;
    max-width: 86vw;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }
}

@media (max-width: 640px) {
  .steps-grid,
  .values-grid,
  .mission-vision-cards {
    grid-auto-columns: 88vw;
    gap: 10px;
    padding-right: 8px;
  }
  .mission-vision-cards .mv-card,
  .steps-grid .step-card,
  .values-grid .value-card {
    width: 88vw;
    max-width: 88vw;
  }
}

@media (max-width: 480px) {
  .steps-grid,
  .values-grid,
  .mission-vision-cards { grid-auto-columns: 90vw; }
  .mission-vision-cards .mv-card,
  .steps-grid .step-card,
  .values-grid .value-card {
    width: 90vw;
    max-width: 90vw;
  }
}