/* Build 682: equal, content-safe Life Chapter cards on phones. */

@media (max-width: 720px) {
  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-template-rows: minmax(404px, max-content) !important;
    grid-auto-rows: minmax(404px, max-content) !important;
    align-items: stretch !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 {
    grid-template-rows: 190px minmax(0, 1fr) !important;
    align-self: stretch !important;
    width: 100% !important;
    height: auto !important;
    min-height: 404px !important;
    max-height: none !important;
  }

  html body .app-shell .map-stage.home-focus #homeJourney .life-chapter-copy,
  html body main.app-shell section.map-stage.home-focus #homeJourney .life-chapter-copy {
    grid-template-rows: minmax(53px, auto) minmax(30px, auto) minmax(55px, 1fr) !important;
    align-content: stretch !important;
    min-height: 0 !important;
    height: 100% !important;
    padding: 14px 15px 15px !important;
    gap: 9px !important;
  }

  html body .app-shell .map-stage.home-focus #homeJourney .life-chapter-card-heading,
  html body main.app-shell section.map-stage.home-focus #homeJourney .life-chapter-card-heading {
    grid-template-rows: minmax(35px, auto) minmax(14px, auto) !important;
    min-height: 53px !important;
    gap: 4px !important;
    overflow: hidden !important;
  }

  html body .app-shell .map-stage.home-focus #homeJourney .life-chapter-card-heading > strong,
  html body main.app-shell section.map-stage.home-focus #homeJourney .life-chapter-card-heading > strong {
    min-height: 35px !important;
    line-height: 1.08 !important;
    -webkit-line-clamp: 2 !important;
  }

  html body .app-shell .map-stage.home-focus #homeJourney .life-chapter-card-heading > small,
  html body main.app-shell section.map-stage.home-focus #homeJourney .life-chapter-card-heading > small {
    min-height: 14px !important;
    line-height: 14px !important;
  }

  html body .app-shell .map-stage.home-focus #homeJourney .life-chapter-facts,
  html body main.app-shell section.map-stage.home-focus #homeJourney .life-chapter-facts {
    min-height: 30px !important;
    flex-wrap: nowrap !important;
    overflow: hidden !important;
  }

  html body .app-shell .map-stage.home-focus #homeJourney .life-chapter-facts > span,
  html body main.app-shell section.map-stage.home-focus #homeJourney .life-chapter-facts > span {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    min-height: 30px !important;
    padding: 6px 9px !important;
    justify-content: center !important;
    white-space: nowrap !important;
  }

  html body .app-shell .map-stage.home-focus #homeJourney .life-chapter-facts strong,
  html body main.app-shell section.map-stage.home-focus #homeJourney .life-chapter-facts strong {
    flex: 0 0 auto !important;
  }

  html body .app-shell .map-stage.home-focus #homeJourney .life-chapter-facts small,
  html body main.app-shell section.map-stage.home-focus #homeJourney .life-chapter-facts small {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  html body .app-shell .map-stage.home-focus #homeJourney .life-chapter-actions,
  html body main.app-shell section.map-stage.home-focus #homeJourney .life-chapter-actions {
    position: static !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: minmax(44px, 1fr) !important;
    min-height: 0 !important;
    height: 100% !important;
    padding-top: 11px !important;
    align-content: end !important;
  }

  html body .app-shell .map-stage.home-focus #homeJourney .life-chapter-actions .life-chapter-relive,
  html body main.app-shell section.map-stage.home-focus #homeJourney .life-chapter-actions .life-chapter-relive {
    align-self: end !important;
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
  }

  html body .app-shell .map-stage.home-focus #homeJourney .life-chapter-completion-status,
  html body main.app-shell section.map-stage.home-focus #homeJourney .life-chapter-completion-status {
    position: absolute !important;
    top: 12px !important;
    right: 12px !important;
    z-index: 7 !important;
    width: auto !important;
    min-height: 30px !important;
    max-width: calc(100% - 28px) !important;
    margin: 0 !important;
    box-shadow: 0 7px 18px rgba(3, 47, 54, 0.13) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    white-space: nowrap !important;
  }
}

@media (max-width: 340px) {
  html body .app-shell .map-stage.home-focus #homeJourney .life-chapter-facts > span,
  html body main.app-shell section.map-stage.home-focus #homeJourney .life-chapter-facts > span {
    padding-inline: 7px !important;
  }

  html body .app-shell .map-stage.home-focus #homeJourney .life-chapter-facts strong,
  html body main.app-shell section.map-stage.home-focus #homeJourney .life-chapter-facts strong {
    font-size: 0.68rem !important;
  }

  html body .app-shell .map-stage.home-focus #homeJourney .life-chapter-facts small,
  html body main.app-shell section.map-stage.home-focus #homeJourney .life-chapter-facts small {
    font-size: 0.57rem !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  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 {
    transition: none !important;
  }
}