/* Build 718: one calm, fully visible Life Chapter at a time on phones. */

@media (max-width: 600px) and (hover: none) and (pointer: coarse) {
  html body .app-shell .map-stage.home-focus #homeJourney .life-chapter-shelf,
  html body main.app-shell section.map-stage.home-focus #homeJourney .life-chapter-shelf {
    max-width: 100% !important;
    overflow: hidden !important;
  }

  html body .app-shell .map-stage.home-focus #homeJourney .life-chapter-row,
  html body main.app-shell section.map-stage.home-focus #homeJourney .life-chapter-row {
    grid-auto-columns: 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 4px 0 9px !important;
    gap: 12px !important;
    overscroll-behavior-inline: contain !important;
    scroll-padding-inline: 0 !important;
    scroll-snap-type: x mandatory !important;
  }

  html body .app-shell .map-stage.home-focus #homeJourney .life-chapter-card,
  html body main.app-shell section.map-stage.home-focus #homeJourney .life-chapter-card {
    width: 100% !important;
    max-width: 100% !important;
    scroll-snap-align: start !important;
    scroll-snap-stop: always !important;
    transform: translateZ(0) !important;
    transition: border-color 160ms ease, box-shadow 160ms ease !important;
  }

  /* iOS keeps :hover after a touch. Do not let that synthetic hover lift the
     card or restart the long cover zoom while the carousel is settling. */
  html body .app-shell .map-stage.home-focus #homeJourney .life-chapter-card:hover,
  html body .app-shell .map-stage.home-focus #homeJourney .life-chapter-card:active,
  html body main.app-shell section.map-stage.home-focus #homeJourney .life-chapter-card:hover,
  html body main.app-shell section.map-stage.home-focus #homeJourney .life-chapter-card:active {
    transform: translateZ(0) !important;
  }

  html body .app-shell .map-stage.home-focus #homeJourney .life-chapter-cover > img,
  html body .app-shell .map-stage.home-focus #homeJourney .life-chapter-card:hover .life-chapter-cover > img,
  html body .app-shell .map-stage.home-focus #homeJourney .life-chapter-card:active .life-chapter-cover > img,
  html body main.app-shell section.map-stage.home-focus #homeJourney .life-chapter-cover > img,
  html body main.app-shell section.map-stage.home-focus #homeJourney .life-chapter-card:hover .life-chapter-cover > img,
  html body main.app-shell section.map-stage.home-focus #homeJourney .life-chapter-card:active .life-chapter-cover > img {
    transform: translateZ(0) !important;
    transition: none !important;
  }
}

@media (max-width: 600px) and (prefers-reduced-motion: reduce) {
  html body .app-shell .map-stage.home-focus #homeJourney .life-chapter-row,
  html body main.app-shell section.map-stage.home-focus #homeJourney .life-chapter-row {
    scroll-behavior: auto !important;
  }
}